Merge pull request #862 from sharetribe/user-card-layout

User card layout

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.

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,39 @@
   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;
+  white-space: nowrap;
+
+  @media (--viewportMedium) {
+    display: inline;
+  }
+}
+
+.editProfileMobile {
+  @apply --marketplaceH4FontStyles;
+  display: inline;
+
+  @media (--viewportMedium) {
+    display: none;
+  }
+}
+
+.contact {
+  @apply --marketplaceH4FontStyles;
+  margin: 0;
+}

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: {

src/components/UserCard/UserCard.js

@@ -83,20 +83,36 @@ const UserCard = props => {
     [css.withBioMissingAbove]: !hasBio,
   });
 
-  const hideContact = currentUser && isCurrentUser;
-  const separator = hideContact ? null : <span className={css.linkSeparator}>•</span>;
-  const contact = hideContact ? null : (
-    <InlineTextButton onClick={handleContactUserClick}>
+  const separator = isCurrentUser ? null : <span className={css.linkSeparator}>•</span>;
+
+  const contact = (
+    <InlineTextButton className={css.contact} onClick={handleContactUserClick}>
       <FormattedMessage id="UserCard.contactUser" />
     </InlineTextButton>
   );
+
+  const editProfileMobile = (
+    <span className={css.editProfileMobile}>
+      <span className={css.linkSeparator}>•</span>
+      <NamedLink name="ProfileSettingsPage">
+        <FormattedMessage id="ListingPage.editProfileLink" />
+      </NamedLink>
+    </span>
+  );
+
+  const editProfileDesktop = isCurrentUser ? (
+    <NamedLink className={css.editProfileDesktop} name="ProfileSettingsPage">
+      <FormattedMessage id="ListingPage.editProfileLink" />
+    </NamedLink>
+  ) : null;
+
   const links = ensuredUser.id ? (
     <p className={linkClasses}>
       <NamedLink className={css.link} name="ProfilePage" params={{ id: ensuredUser.id.uuid }}>
         <FormattedMessage id="UserCard.viewProfileLink" />
       </NamedLink>
       {separator}
-      {contact}
+      {isCurrentUser ? editProfileMobile : contact}
     </p>
   ) : null;
 
@@ -105,9 +121,12 @@ const UserCard = props => {
       <div className={css.content}>
         <AvatarLarge className={css.avatar} user={user} />
         <div className={css.info}>
-          <h3 className={css.heading}>
-            <FormattedMessage id="UserCard.heading" values={{ name: displayName }} />
-          </h3>
+          <div className={css.headingRow}>
+            <h3 className={css.heading}>
+              <FormattedMessage id="UserCard.heading" values={{ name: displayName }} />
+            </h3>
+            {editProfileDesktop}
+          </div>
           {hasBio ? <ExpandableBio className={css.desktopBio} bio={bio} /> : null}
           {links}
         </div>

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);

src/containers/ListingPage/ListingPage.js

@@ -451,7 +451,6 @@ export class ListingPageComponent extends Component {
                   <SectionHost
                     title={title}
                     listing={currentListing}
-                    isOwnListing={isOwnListing}
                     authorDisplayName={authorDisplayName}
                     onContactUser={this.onContactUser}
                     isEnquiryModalOpen={isAuthenticated && this.state.enquiryModalOpen}

src/containers/ListingPage/SectionHost.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { NamedLink, UserCard, Modal } from '../../components';
+import { UserCard, Modal } from '../../components';
 import { EnquiryForm } from '../../forms';
 
 import css from './ListingPage.css';
@@ -9,7 +9,6 @@ const SectionHost = props => {
   const {
     title,
     listing,
-    isOwnListing,
     authorDisplayName,
     onContactUser,
     isEnquiryModalOpen,
@@ -25,11 +24,6 @@ const SectionHost = props => {
       <h2 className={css.yourHostHeading}>
         <FormattedMessage id="ListingPage.yourHostHeading" />
       </h2>
-      {isOwnListing ? (
-        <NamedLink className={css.editProfileLink} name="ProfileSettingsPage">
-          <FormattedMessage id="ListingPage.editProfileLink" />
-        </NamedLink>
-      ) : null}
       <UserCard user={listing.author} currentUser={currentUser} onContactUser={onContactUser} />
       <Modal
         id="ListingPage.enquiry"

src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap

@@ -216,7 +216,6 @@ exports[`ListingPage matches snapshot 1`] = `
                 }
               }
               isEnquiryModalOpen={false}
-              isOwnListing={false}
               listing={
                 Object {
                   "attributes": Object {