diff --git a/src/components/UserCard/UserCard.js b/src/components/UserCard/UserCard.js index 035a54a8..84a326b1 100644 --- a/src/components/UserCard/UserCard.js +++ b/src/components/UserCard/UserCard.js @@ -9,7 +9,9 @@ import * as propTypes from '../../util/propTypes'; import css from './UserCard.css'; -const BIO_COLLAPSED_LENGTH = 100; +// Approximated collapsed size so that there are ~three lines of text +// in the desktop layout in the host section of the ListingPage. +const BIO_COLLAPSED_LENGTH = 170; const truncated = s => { return truncate(s, { diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css index 3e27ea24..7f05abdc 100644 --- a/src/containers/ListingPage/ListingPage.css +++ b/src/containers/ListingPage/ListingPage.css @@ -318,6 +318,10 @@ } } +.authorNameLink { + color: var(--matterColor); +} + .descriptionContainer { padding: 0 24px; margin-bottom: 35px; @@ -377,6 +381,32 @@ } } +.yourHostContainer { + padding: 0 24px; + margin-bottom: 5px; + + @media (--viewportMedium) { + padding: 0; + } + @media (--viewportLarge) { + margin-bottom: 3px; + } +} + +.yourHostHeading { + @apply --marketplaceH3FontStyles; + color: var(--matterColorAnti); + + margin: 54px 0 23px 0; + + @media (--viewportMedium) { + margin: 53px 0 27px 0; + } + @media (--viewportLarge) { + margin: 51px 0 27px 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 6f22eea9..bf73435b 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/src/containers/ListingPage/ListingPage.js @@ -32,6 +32,7 @@ import { LayoutWrapperMain, LayoutWrapperFooter, Footer, + UserCard, } from '../../components'; import { BookingDatesForm, TopbarContainer } from '../../containers'; @@ -363,6 +364,17 @@ export class ListingPageComponent extends Component { { title, price: formattedPrice, siteTitle } ); + const hostLink = ( + + {currentAuthorDisplayName} + + ); + return ( - - + + + + + + @@ -433,12 +457,7 @@ export class ListingPageComponent extends Component { {title} - - - + @@ -451,6 +470,12 @@ export class ListingPageComponent extends Component { {map} + + + + + + - - + > + + + + + @@ -152,16 +184,29 @@ exports[`ListingPage matches snapshot 1`] = ` listing1 title - - + user-1 display name + , } - /> - + } + /> @@ -198,6 +243,55 @@ exports[`ListingPage matches snapshot 1`] = ` /> + + + + + +