maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-26 06:47:17 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #542 from sharetribe/listing-page-host-section

Browse source 
"Your host" section in ListingPage
This commit is contained in:
Kimmo Puputti 2017-11-08 11:00:38 +02:00 • committed by GitHub
commit 03b576d8c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 198 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/UserCard/UserCard.js
View file

@ -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, {

30
src/containers/ListingPage/ListingPage.css
View file

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

41
src/containers/ListingPage/ListingPage.js
View file

@ -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 = (
<NamedLink
className={css.authorNameLink}
name="ListingPage"
params={params}
to={{ hash: '#host' }}
>
{currentAuthorDisplayName}
</NamedLink>
);
return (
<Page
title={schemaTitle}
@ -416,8 +428,20 @@ export class ListingPageComponent extends Component {
<div className={css.contentContainer}>
<div className={css.avatarWrapper}>
<AvatarLarge user={currentAuthor} className={css.avatarDesktop} />
<AvatarMedium user={currentAuthor} className={css.avatarMobile} />
<NamedLink name="ListingPage" params={params} to={{ hash: '#host' }}>
<AvatarLarge
user={currentAuthor}
className={css.avatarDesktop}
disableProfileLink
/>
</NamedLink>
<NamedLink name="ListingPage" params={params} to={{ hash: '#host' }}>
<AvatarMedium
user={currentAuthor}
className={css.avatarMobile}
disableProfileLink
/>
</NamedLink>
</div>
<div className={css.mainContent}>
@ -433,12 +457,7 @@ export class ListingPageComponent extends Component {
<div className={css.heading}>
<h1 className={css.title}>{title}</h1>
<div className={css.author}>
<span className={css.authorName}>
<FormattedMessage
id="ListingPage.hostedBy"
values={{ name: currentAuthorDisplayName }}
/>
</span>
<FormattedMessage id="ListingPage.hostedBy" values={{ name: hostLink }} />
</div>
</div>
</div>
@ -451,6 +470,12 @@ export class ListingPageComponent extends Component {
</div>
{map}
<div id="host" className={css.yourHostContainer}>
<h2 className={css.yourHostHeading}>
<FormattedMessage id="ListingPage.yourHostHeading" />
</h2>
<UserCard user={currentListing.author} currentUser={currentUser} />
</div>
</div>
<ModalInMobile

168
src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
View file

@ -97,40 +97,72 @@ exports[`ListingPage matches snapshot 1`] = `
</InjectIntl(ModalComponent)>
<div>
<div>
<AvatarLarge
user={
<NamedLink
name="ListingPage"
params={
Object {
"attributes": Object {
"banned": false,
"profile": Object {
"abbreviatedName": "TT",
"displayName": "user-1 display name",
},
},
"id": UUID {
"uuid": "user-1",
},
"type": "user",
"id": "listing1",
"slug": "listing1-title",
}
}
/>
<AvatarMedium
user={
to={
Object {
"attributes": Object {
"banned": false,
"profile": Object {
"abbreviatedName": "TT",
"displayName": "user-1 display name",
},
},
"id": UUID {
"uuid": "user-1",
},
"type": "user",
"hash": "#host",
}
}
/>
>
<AvatarLarge
disableProfileLink={true}
user={
Object {
"attributes": Object {
"banned": false,
"profile": Object {
"abbreviatedName": "TT",
"displayName": "user-1 display name",
},
},
"id": UUID {
"uuid": "user-1",
},
"type": "user",
}
}
/>
</NamedLink>
<NamedLink
name="ListingPage"
params={
Object {
"id": "listing1",
"slug": "listing1-title",
}
}
to={
Object {
"hash": "#host",
}
}
>
<AvatarMedium
disableProfileLink={true}
user={
Object {
"attributes": Object {
"banned": false,
"profile": Object {
"abbreviatedName": "TT",
"displayName": "user-1 display name",
},
},
"id": UUID {
"uuid": "user-1",
},
"type": "user",
}
}
/>
</NamedLink>
</div>
<div>
<div>
@ -152,16 +184,29 @@ exports[`ListingPage matches snapshot 1`] = `
listing1 title
</h1>
<div>
<span>
<FormattedMessage
id="ListingPage.hostedBy"
values={
Object {
"name": "user-1 display name",
}
<FormattedMessage
id="ListingPage.hostedBy"
values={
Object {
"name": <NamedLink
name="ListingPage"
params={
Object {
"id": "listing1",
"slug": "listing1-title",
}
}
to={
Object {
"hash": "#host",
}
}
>
user-1 display name
</NamedLink>,
}
/>
</span>
}
/>
</div>
</div>
</div>
@ -198,6 +243,55 @@ exports[`ListingPage matches snapshot 1`] = `
/>
</div>
</div>
<div
id="host"
>
<h2>
<FormattedMessage
id="ListingPage.yourHostHeading"
values={Object {}}
/>
</h2>
<UserCard
className={null}
currentUser={
Object {
"attributes": Object {
"banned": false,
"email": "user-2@example.com",
"emailVerified": true,
"profile": Object {
"abbreviatedName": "user-2 abbreviated name",
"displayName": "user-2 display name",
"firstName": "user-2 first name",
"lastName": "user-2 last name",
},
"stripeConnected": true,
},
"id": UUID {
"uuid": "user-2",
},
"type": "current-user",
}
}
rootClassName={null}
user={
Object {
"attributes": Object {
"banned": false,
"profile": Object {
"abbreviatedName": "TT",
"displayName": "user-1 display name",
},
},
"id": UUID {
"uuid": "user-1",
},
"type": "user",
}
}
/>
</div>
</div>
<withViewport(ModalInMobileComponent)
id="BookingDatesFormInModal"

1
src/translations/en.json
View file

@ -219,6 +219,7 @@
"ListingPage.perNight": "per night",
"ListingPage.schemaTitle": "{title} - {price} | {siteTitle}",
"ListingPage.viewImagesButton": "View photos ({count})",
"ListingPage.yourHostHeading": "Your host",
"LocationSearchForm.placeholder": "Search saunas…",
"LoginForm.emailInvalid": "A valid email address is required",
"LoginForm.emailLabel": "Email",