From f1af205f9d24ab76a3e77dd5033f3584b9ea8699 Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Fri, 1 Dec 2017 11:34:30 +0200 Subject: [PATCH 1/4] Change bio position on mobile layout --- src/components/UserCard/UserCard.css | 25 ++++++++++++- src/components/UserCard/UserCard.js | 52 +++++++++++++++++----------- 2 files changed, 55 insertions(+), 22 deletions(-) diff --git a/src/components/UserCard/UserCard.css b/src/components/UserCard/UserCard.css index 09611193..0827fb21 100644 --- a/src/components/UserCard/UserCard.css +++ b/src/components/UserCard/UserCard.css @@ -1,11 +1,15 @@ @import '../../marketplace.css'; .root { +} + +.content { display: flex; flex-direction: row; } .avatar { + flex-shrink: 0; margin-right: 36px; } @@ -22,7 +26,12 @@ } } -.bio { +.link { + white-space: nowrap; +} + +.mobileBio, +.desktopBio { /* Preserve newlines, but collapse other whitespace */ white-space: pre-line; @@ -35,6 +44,20 @@ } } +.mobileBio { + @media (--viewportMedium) { + display: none; + } +} + +.desktopBio { + display: none; + + @media (--viewportMedium) { + display: block; + } +} + .showMore { margin-left: 5px; } diff --git a/src/components/UserCard/UserCard.js b/src/components/UserCard/UserCard.js index 84a326b1..f222872c 100644 --- a/src/components/UserCard/UserCard.js +++ b/src/components/UserCard/UserCard.js @@ -35,7 +35,7 @@ class ExpandableBio extends Component { } render() { const { expand } = this.state; - const { bio } = this.props; + const { className, bio } = this.props; const truncatedBio = truncated(bio); const handleShowMoreClick = () => { @@ -47,7 +47,7 @@ class ExpandableBio extends Component { ); return ( -

+

{expand ? bio : truncatedBio} {bio !== truncatedBio && !expand ? showMore : null}

@@ -55,7 +55,10 @@ class ExpandableBio extends Component { } } +ExpandableBio.defaultProps = { className: null }; + ExpandableBio.propTypes = { + className: string, bio: string.isRequired, }; @@ -74,26 +77,33 @@ const UserCard = props => { }); return (
- -
-

- -

- {hasBio ? : null} -

- {ensuredUser.id ? ( - - - - ) : null} - {isCurrentUser ? • : null} - {isCurrentUser ? ( - - - - ) : null} -

+
+ +
+

+ +

+ {hasBio ? : null} +

+ {ensuredUser.id ? ( + + + + ) : null} + {isCurrentUser ? • : null} + {isCurrentUser ? ( + + + + ) : null} +

+
+ {hasBio ? : null}
); }; From a27071b6659d7b89dd88320e637e32a7b045629f Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Fri, 1 Dec 2017 14:01:03 +0200 Subject: [PATCH 2/4] Remove edit profile link and add contact link --- src/components/UserCard/UserCard.css | 1 + src/components/UserCard/UserCard.example.js | 22 ++++++---- src/components/UserCard/UserCard.js | 44 +++++++++++-------- src/containers/ListingPage/ListingPage.js | 11 ++++- .../__snapshots__/ListingPage.test.js.snap | 1 + src/translations/en.json | 2 +- 6 files changed, 51 insertions(+), 30 deletions(-) diff --git a/src/components/UserCard/UserCard.css b/src/components/UserCard/UserCard.css index 0827fb21..2af3e62a 100644 --- a/src/components/UserCard/UserCard.css +++ b/src/components/UserCard/UserCard.css @@ -74,4 +74,5 @@ .linkSeparator { margin: 0 10px; + color: var(--marketplaceColor); } diff --git a/src/components/UserCard/UserCard.example.js b/src/components/UserCard/UserCard.example.js index 178ad59b..b8533e37 100644 --- a/src/components/UserCard/UserCard.example.js +++ b/src/components/UserCard/UserCard.example.js @@ -5,24 +5,28 @@ import UserCard from './UserCard'; const { UUID } = types; export const EmptyUser = { - component: UserCard, - props: {}, - group: 'users', -}; - -export const WithUser = { component: UserCard, props: { - user: createUser('test-card-user'), + onContactUser: user => console.log('concact user:', user), }, group: 'users', }; -export const WithCurrentUser = { +export const WithoutBio = { + component: UserCard, + props: { + user: createUser('test-card-user'), + onContactUser: user => console.log('concact user:', user), + }, + group: 'users', +}; + +export const WithoutBioCurrentUser = { component: UserCard, props: { user: createUser('test-card-user'), currentUser: createCurrentUser('test-card-user'), + onContactUser: user => console.log('concact user:', user), }, group: 'users', }; @@ -63,7 +67,7 @@ export const WithProfileImageAndBio = { }, }, }, - currentUser: createCurrentUser('full-user'), + onContactUser: user => console.log('concact user:', user), }, group: 'users', }; diff --git a/src/components/UserCard/UserCard.js b/src/components/UserCard/UserCard.js index f222872c..4074bb7c 100644 --- a/src/components/UserCard/UserCard.js +++ b/src/components/UserCard/UserCard.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { string } from 'prop-types'; +import { string, func } from 'prop-types'; import { FormattedMessage } from 'react-intl'; import { truncate } from 'lodash'; import classNames from 'classnames'; @@ -63,18 +63,39 @@ ExpandableBio.propTypes = { }; const UserCard = props => { - const { rootClassName, className, user, currentUser } = props; + const { rootClassName, className, user, currentUser, onContactUser } = props; const ensuredUser = ensureUser(user); const ensuredCurrentUser = ensureCurrentUser(currentUser); const isCurrentUser = ensuredUser.id && ensuredCurrentUser.id && ensuredUser.id.uuid === ensuredCurrentUser.id.uuid; const { displayName, bio } = ensuredUser.attributes.profile; + const handleContactUserClick = () => { + onContactUser(user); + }; + const hasBio = !!bio; const classes = classNames(rootClassName || css.root, className); const linkClasses = classNames(css.links, { [css.withBioMissingAbove]: !hasBio, }); + + const separator = isCurrentUser ? null : •; + const contact = isCurrentUser ? null : ( + + + + ); + const links = ensuredUser.id ? ( +

+ + + + {separator} + {contact} +

+ ) : null; + return (
@@ -84,23 +105,7 @@ const UserCard = props => { {hasBio ? : null} -

- {ensuredUser.id ? ( - - - - ) : null} - {isCurrentUser ? • : null} - {isCurrentUser ? ( - - - - ) : null} -

+ {links}
{hasBio ? : null} @@ -118,6 +123,7 @@ UserCard.propTypes = { className: string, user: propTypes.user, currentUser: propTypes.currentUser, + onContactUser: func.isRequired, }; export default UserCard; diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js index bf73435b..470a92fb 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/src/containers/ListingPage/ListingPage.js @@ -375,6 +375,11 @@ export class ListingPageComponent extends Component { ); + const handleContactUser = user => { + // TODO: this + console.log('contact user:', user); + }; + return ( - +
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap index e8eed318..fedd646e 100644 --- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap +++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap @@ -274,6 +274,7 @@ exports[`ListingPage matches snapshot 1`] = ` "type": "currentUser", } } + onContactUser={[Function]} rootClassName={null} user={ Object { diff --git a/src/translations/en.json b/src/translations/en.json index 6eef813a..214d9928 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -619,7 +619,7 @@ "TopbarMobileMenu.yourListingsLink": "Your listings", "TopbarSearchForm.placeholder": "Search saunas…", "TopbarSearchForm.searchHelp": "Tip: You can also search saunas by zip code, for example \"00500\" or city district \"Sörnäinen\".", - "UserCard.editProfileLink": "Edit profile", + "UserCard.contactUser": "Contact", "UserCard.heading": "Hello, I'm {name}.", "UserCard.showFullBioLink": "more", "UserCard.viewProfileLink": "View profile" From 49cc7eb12e3e7e7487b731991a52093a9edaf8a7 Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Fri, 1 Dec 2017 14:41:23 +0200 Subject: [PATCH 3/4] Add link to edit profile --- src/containers/ListingPage/ListingPage.css | 19 +++++++++++++++++++ src/containers/ListingPage/ListingPage.js | 5 +++++ src/translations/en.json | 1 + 3 files changed, 25 insertions(+) diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css index 7f05abdc..e780ef5f 100644 --- a/src/containers/ListingPage/ListingPage.css +++ b/src/containers/ListingPage/ListingPage.css @@ -382,6 +382,7 @@ } .yourHostContainer { + position: relative; padding: 0 24px; margin-bottom: 5px; @@ -407,6 +408,24 @@ } } +.editProfileLink { + @apply --marketplaceH4FontStyles; + position: absolute; + margin: 0; + + /* Align to same baseline as the "Your host" heading */ + top: 2px; + right: 24px; + + @media (--viewportMedium) { + margin: 0; + + /* Align to same baseline as the "Hello, ..." heading */ + top: 74px; + right: 0; + } +} + .map { /* Dimensions: Map takes all available space from viewport (excludes action button and section title) */ height: calc(100vh - 193px); diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js index 470a92fb..80d4ebf7 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/src/containers/ListingPage/ListingPage.js @@ -479,6 +479,11 @@ export class ListingPageComponent extends Component {

+ {isOwnListing ? ( + + + + ) : null} Date: Fri, 1 Dec 2017 14:47:15 +0200 Subject: [PATCH 4/4] Add mobile view bottom margin --- src/containers/ListingPage/ListingPage.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css index e780ef5f..1178363e 100644 --- a/src/containers/ListingPage/ListingPage.css +++ b/src/containers/ListingPage/ListingPage.css @@ -186,6 +186,7 @@ .mainContent { flex-basis: 100%; + margin-bottom: 23px; @media (--viewportMedium) { margin-top: 50px;