Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lay out /work/listings/:id #234

Merged
merged 13 commits into from
Mar 4, 2019
Merged

Lay out /work/listings/:id #234

merged 13 commits into from
Mar 4, 2019

Conversation

woeltjen
Copy link
Contributor

@woeltjen woeltjen commented Mar 2, 2019

Description

Lay out the contents of the Listing page.

How to Test

  1. Navigate to /work/listings/95_vic (or some other listing)
  2. Verify that major page elements are laid out sensibly
    1. Image gallery at top
    2. Listing details below (to left, in desktop, or at center, on tablet/mobile)
    3. Booking Card to the right (or at bottom, on tablet/mobile)

Note that individual page elements are still unstyled (subsequent PRs!)

Which devices did you test on?

  • Chrome on Mac
  • Chrome on PC
  • Firefox on Mac
  • Firefox on PC
  • Safari iPhone
  • Chrome Android

REVIEWERS:

Check against these principles:

High level

Does this code need to be written?
What are the alternatives?
Will this implementation become a support issue?
How much error margin does this solution have?

Code

Variables/Naming:

  • Would the variable type led to future edge cases?
  • Are the variable naming clear? Would the value contain something other than what the name describes.

Security

  • Can this be hacked or abused by the user?

Further Work

  1. Gallery layout (move button)
  2. View Photos functionality
  3. Contact Host functionality
  4. Booking Card layout
  5. Booking Card functionality

@woeltjen woeltjen requested review from tc, kcvan and jerminatorhits March 2, 2019 01:31
@woeltjen woeltjen changed the title Lay out /work/listings/:id WIP Lay out /work/listings/:id Mar 2, 2019
@woeltjen
Copy link
Contributor Author

woeltjen commented Mar 2, 2019

This seems like it's in a reasonable state to review. One thing worth noting is that the BookingBar will obscure part of the footer on tablet/mobile. This is actually the case for the old design, too, so this is at parity, but raising it in case anyone sees a solution

<BookingCard {...listing} />
</>);
const ListingPage = (listing: Listing) => (
<>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this can be

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kcvan your comment got cut off

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah thanks, was going to say this can be <Fade>

Copy link
Contributor

@kcvan kcvan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

basic layout looks good besides minor comment!

@@ -9,7 +9,7 @@ import BookingBar from './BookingBar';
import { Listing } from 'networking/listings';

const ListingPage = (listing: Listing) => (
<>
<Fade>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sometimes it's not good to use a Fade effect. I think it's fine here.

ie, if we want the page to load immediately, like the signup/booking pages. Anything slowing the user down to conversion is not good. cc @kcvan

@woeltjen woeltjen merged commit 9dc249a into master Mar 4, 2019
@kcvan kcvan deleted the vic/ENG-1033b branch March 6, 2019 23:32
@woeltjen woeltjen mentioned this pull request Mar 7, 2019
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants