GROW 1362 - Add hub entry points to collect page #2698
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
artsy-peril
bot
added
Jira Synced
Version: Patch
pepopowitz
commented
Aug 15, 2019
damassi
reviewed
Aug 15, 2019
damassi
reviewed
Aug 15, 2019
damassi
reviewed
Aug 15, 2019
damassi
reviewed
Aug 15, 2019
damassi
reviewed
Aug 15, 2019
pepopowitz
force-pushed
the
GROW-1362-collect-page-hub-entry-points
branch
2 times, most recently
from
2ce78da
to
dd740be
Compare
pepopowitz
changed the title
Signed-off-by: Steve Hicks <steven.j.hicks@gmail.com>
Signed-off-by: Steve Hicks <steven.j.hicks@gmail.com>
We are trying to insert the new `CollectionsHubsNav` component into `CollectApp`. `CollectionsHubsNav` needs its own `marketingHubCollections` prop, which we've tried adding to the locally created fragment container. Something's not right though, as the relay compiler keeps erroring with: ``` GraphQLParser: Unknown field `marketingHubCollections` on type `Viewer`. Source: document `CollectApp_viewer` file: `Apps/Collect/CollectApp.tsx`. ``` Signed-off-by: Steve Hicks <steven.j.hicks@gmail.com>
…NG data - marketingCollections instead of marketingHubCollections)
…ragments in all the right places
…s when user has access to it.
…-scale based on available width
…N_HUBS from SystemContext (used when server rendering)
…r; avoid implicit return.
pepopowitz
force-pushed
the
GROW-1362-collect-page-hub-entry-points
branch
from
dd740be
to
cf5e658
Compare
damassi
reviewed
Aug 19, 2019
damassi
reviewed
Aug 19, 2019
damassi
reviewed
Aug 19, 2019
damassi
reviewed
Aug 19, 2019
damassi
reviewed
Aug 19, 2019
| // lg/xl: 168x105 = 1.6 aspect ratio | ||
| export const CollectionsHubsNav: FC<CollectionsHubsNavProps> = props => { | ||
| return ( | ||
| <CSSGrid |
anandaroop
approved these changes
Aug 19, 2019
3 tasks
xtina-starr
approved these changes
Aug 19, 2019
Co-authored-by: Anandaroop <anandaroop.roy+github@gmail.com>
pepopowitz
changed the title
Signed-off-by: Steve Hicks <steven.j.hicks@gmail.com>
Update stories to work with RouterLink
pepopowitz
changed the title
|
🚀 PR was released in v17.2.2 🚀 |
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.
In collaboration with @anandaroop. This PR addresses https://artsyproduct.atlassian.net/browse/GROW-1362. It adds a collection hubs rail to the Collect page, if the user is an admin.
From a design perspective, we want the tiles to be as large as possible to fill the width with 2 items per row at xs, 3 items per row at sm, and 6 items per row at md & above. You can see this effect below. Note that only one cell has a background image right now - it's the only one with a thumbnail defined.
The CSS to auto-scale the hub tiles & background images based on the available width is a bit tricky. We use CSS grid to lay out the rail, and for each tile, we render an image of specific size but hide it. This gives the container a certain width and height. The tile also includes a background image, which fills the entire space created by the hidden image.
Notes
marketingCollectionsfrom metaphysics instead ofmarketingHubCollections, because there is no data in themarketingHubCollections. Once we get that data populated, we will need to follow up here.