From cc7bda7746b2c9a5760057ce881a664d87942560 Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Fri, 6 Jul 2018 14:28:47 +0300 Subject: [PATCH 1/6] Remove edit profile link from SectionHost --- src/containers/ListingPage/ListingPage.css | 18 ------------------ src/containers/ListingPage/ListingPage.js | 1 - src/containers/ListingPage/SectionHost.js | 8 +------- .../__snapshots__/ListingPage.test.js.snap | 1 - 4 files changed, 1 insertion(+), 27 deletions(-) diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css index 7545cc9c..1a56843c 100644 --- a/src/containers/ListingPage/ListingPage.css +++ b/src/containers/ListingPage/ListingPage.css @@ -526,24 +526,6 @@ } } -.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 84199c73..74a0c369 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/src/containers/ListingPage/ListingPage.js @@ -451,7 +451,6 @@ export class ListingPageComponent extends Component { { const { title, listing, - isOwnListing, authorDisplayName, onContactUser, isEnquiryModalOpen, @@ -25,11 +24,6 @@ const SectionHost = props => {

- {isOwnListing ? ( - - - - ) : null} Date: Fri, 6 Jul 2018 14:29:21 +0300 Subject: [PATCH 2/6] Add edit profile link to UserCard --- src/components/UserCard/UserCard.css | 42 ++++++++++++++++++++- src/components/UserCard/UserCard.example.js | 42 +++++++++++++++++++++ src/components/UserCard/UserCard.js | 32 +++++++++++++--- 3 files changed, 109 insertions(+), 7 deletions(-) diff --git a/src/components/UserCard/UserCard.css b/src/components/UserCard/UserCard.css index ea065495..e3c7476b 100644 --- a/src/components/UserCard/UserCard.css +++ b/src/components/UserCard/UserCard.css @@ -53,6 +53,7 @@ display: none; @media (--viewportMedium) { + margin-top: 16px; display: block; } } @@ -64,12 +65,17 @@ .links { @apply --marketplaceH4FontStyles; + margin-top: 13px; + + @media (--viewportMedium) { + margin: 16px 0 0 0; + } } .withBioMissingAbove { @media (--viewportMedium) { /* Fix baseline alignment if bio is missing from above */ - margin-top: 18px; + margin-top: 16px; } } @@ -77,3 +83,37 @@ margin: 0 10px; color: var(--marketplaceColor); } + +.headingRow { + display: flex; + flex-direction: column; + + @media (--viewportMedium) { + flex-direction: row; + justify-content: space-between; + align-items: baseline; + } +} + +.editProfileDesktop { + @apply --marketplaceH4FontStyles; + display: none; + margin-bottom: 0; + + /* Align to same baseline as the "Your host" heading */ + + @media (--viewportMedium) { + display: inline; + } +} + +.editProfileMobile { + @apply --marketplaceH4FontStyles; + display: inline; + + /* Align to same baseline as the "Your host" heading */ + + @media (--viewportMedium) { + display: none; + } +} diff --git a/src/components/UserCard/UserCard.example.js b/src/components/UserCard/UserCard.example.js index 86f79892..d534f5c9 100644 --- a/src/components/UserCard/UserCard.example.js +++ b/src/components/UserCard/UserCard.example.js @@ -31,6 +31,48 @@ export const WithoutBioCurrentUser = { group: 'users', }; +export const WithProfileImageAndBioCurrentUser = { + component: UserCard, + props: { + user: { + id: new UUID('full-user'), + type: 'user', + attributes: { + banned: false, + profile: { + displayName: 'Has P', + abbreviatedName: 'HP', + bio: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.', + }, + }, + profileImage: { + id: new UUID('profile-image'), + type: 'image', + attributes: { + variants: { + 'square-small': { + name: 'square-small', + width: 240, + height: 240, + url: 'https://lorempixel.com/240/240/people/', + }, + 'square-small2x': { + name: 'square-small2x', + width: 480, + height: 480, + url: 'https://lorempixel.com/480/480/people/', + }, + }, + }, + }, + }, + currentUser: createCurrentUser('full-user'), + onContactUser: user => console.log('concact user:', user), + }, + group: 'users', +}; + export const WithProfileImageAndBio = { component: UserCard, props: { diff --git a/src/components/UserCard/UserCard.js b/src/components/UserCard/UserCard.js index e9ece456..c19db138 100644 --- a/src/components/UserCard/UserCard.js +++ b/src/components/UserCard/UserCard.js @@ -83,13 +83,29 @@ const UserCard = props => { [css.withBioMissingAbove]: !hasBio, }); - const hideContact = currentUser && isCurrentUser; - const separator = hideContact ? null : •; - const contact = hideContact ? null : ( + const separator = isCurrentUser ? null : •; + + const contact = isCurrentUser ? null : ( ); + + const editProfileMobile = isCurrentUser ? ( + + • + + + + + ) : null; + + const editProfileDesktop = isCurrentUser ? ( + + + + ) : null; + const links = ensuredUser.id ? (

@@ -97,6 +113,7 @@ const UserCard = props => { {separator} {contact} + {editProfileMobile}

) : null; @@ -105,9 +122,12 @@ const UserCard = props => {
-

- -

+
+

+ +

+ {editProfileDesktop} +
{hasBio ? : null} {links}
From 7b956e52bfc460352a4257bb8254bf8d6db7dd36 Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Fri, 6 Jul 2018 15:07:24 +0300 Subject: [PATCH 3/6] Add nowrap to edit profile link --- src/components/UserCard/UserCard.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/UserCard/UserCard.css b/src/components/UserCard/UserCard.css index e3c7476b..480326ae 100644 --- a/src/components/UserCard/UserCard.css +++ b/src/components/UserCard/UserCard.css @@ -99,8 +99,7 @@ @apply --marketplaceH4FontStyles; display: none; margin-bottom: 0; - - /* Align to same baseline as the "Your host" heading */ + white-space: nowrap; @media (--viewportMedium) { display: inline; @@ -111,8 +110,6 @@ @apply --marketplaceH4FontStyles; display: inline; - /* Align to same baseline as the "Your host" heading */ - @media (--viewportMedium) { display: none; } From c8bd5f173aaaf812aca8cdd0ba949b1b6a8fd3f8 Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Fri, 6 Jul 2018 15:29:25 +0300 Subject: [PATCH 4/6] Update changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 50cc6549..9f5a25b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,8 @@ way to update this template, but currently, we follow a pattern: [#864](https://github.com/sharetribe/flex-template-web/pull/864) * [fix] Fix passing initial message sending error to transaction page. [#863](https://github.com/sharetribe/flex-template-web/pull/863) +* [fix] Fix listing page host section layout bug. + [#862](https://github.com/sharetribe/flex-template-web/pull/862) * [fix] Fix initial message input clearing too early in checkout page. [#861](https://github.com/sharetribe/flex-template-web/pull/861) * [fix] Fix setting Topbar search input initial value. From dd9c278ff1bbc0e4c386ea71317b61965dd57d1f Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Mon, 9 Jul 2018 16:25:03 +0300 Subject: [PATCH 5/6] Improve rendering logic --- src/components/UserCard/UserCard.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/UserCard/UserCard.js b/src/components/UserCard/UserCard.js index c19db138..a62dc6a4 100644 --- a/src/components/UserCard/UserCard.js +++ b/src/components/UserCard/UserCard.js @@ -85,20 +85,20 @@ const UserCard = props => { const separator = isCurrentUser ? null : •; - const contact = isCurrentUser ? null : ( + const contact = ( ); - const editProfileMobile = isCurrentUser ? ( + const editProfileMobile = ( • - ) : null; + ); const editProfileDesktop = isCurrentUser ? ( @@ -112,8 +112,7 @@ const UserCard = props => { {separator} - {contact} - {editProfileMobile} + {isCurrentUser ? editProfileMobile : contact}

) : null; From 200adf4269f356d3e3b179a617458b62ef6ea89d Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Tue, 10 Jul 2018 09:05:18 +0300 Subject: [PATCH 6/6] Fix contact link font styles --- src/components/UserCard/UserCard.css | 5 +++++ src/components/UserCard/UserCard.js | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/UserCard/UserCard.css b/src/components/UserCard/UserCard.css index 480326ae..48a08f9a 100644 --- a/src/components/UserCard/UserCard.css +++ b/src/components/UserCard/UserCard.css @@ -114,3 +114,8 @@ display: none; } } + +.contact { + @apply --marketplaceH4FontStyles; + margin: 0; +} diff --git a/src/components/UserCard/UserCard.js b/src/components/UserCard/UserCard.js index a62dc6a4..6af87e3b 100644 --- a/src/components/UserCard/UserCard.js +++ b/src/components/UserCard/UserCard.js @@ -86,7 +86,7 @@ const UserCard = props => { const separator = isCurrentUser ? null : •; const contact = ( - + );