1337/homepage coming soon #1370
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for detroit-public-dev ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
✅ Deploy Preview for detroit-storybook-dev ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
✅ Deploy Preview for detroit-partners-dev ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
Colin & I paired, and the next step is to reach out to Jesse for some unresolved questions about some pieces of the UX |
| ))} | ||
| </HorizontalScrollSection> | ||
| {comingSoonListings?.items?.length > 0 && ( | ||
| <div className={styles["section-container"]}> |
There was a problem hiding this comment.
love the shared class!
sites/public/pages/index.tsx
Outdated
| @@ -75,12 +74,23 @@ export default function Home({ latestListings }) { | |||
| href={`/listings/filtered?page=1${encodeToFrontendFilterString({ | |||
| region: props.region[1], | |||
| })}`} | |||
| style={{ backgroundImage: `url(${regionImageUrls.get(props.region[1])})` }} | |||
| // style={{ backgroundImage: `url(${regionImageUrls.get(props.region[1])})` }} | |||
emilyjablonski
approved these changes
Jul 11, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue
Closes #1337
Description
This PR adds the 'Coming Soon' section to Detroit's public homepage. This section is designed to show three listings that are marked as coming soon and having the closest opening date appear first. It also includes a 'See All Coming Soon' button that takes the user to the filtered page. This button is visible even when there are 3 or less listings marked as Coming Soon to encourage the user to go to the listings page and potentially explore other filters.
Update: This PR also refactors the Regions section to no longer use the Horizontal Scroll component and rather follow a similar pattern that the Coming Soon section does. NOTE: in order to have the region images scale dynamically while remaining the same relative size, I used the aspect-ratio which is a newer css property. From my testing and their documentation, it is supported on every browser expect for Internet Explorer. On the off chance that a user has an outdated browser that doesn't support this property, the only difference is that the region images would be slightly taller overall and could show gently different heights in certain mid-sized screen sizes. These differences would be difficult to notice and the homepage remains presentable either way.
How Can This Be Tested/Reviewed?
This can be tested and reviewed by going to the Detroit Public homepage viewing the section in different screen dimensions. Then click the See All Coming Soon button and verify that you land on the listings page with the Coming Soon filter set to true. Additionally, go the partner's side and vary the amount of public listings marked as Coming Soon and their publishing dates to see the affect on the home page.
Checklist:
yarn generate:clientand/or created a migration if I made backend changes that require themReviewer Notes:
Steps to review a PR:
On Merge:
If you have one commit and message, squash. If you need each message to be applied, rebase and merge.