Add onward content to Hosted Gallery pages#16323
Conversation
cemms1
force-pushed
the
cemms1/hosted-onwards-gallery
branch
from
e920c28 to
d85ef2f
Compare
cemms1
added
the
maintenance
cemms1
changed the title
| const hostedGalleryOverrides = css` | ||
| ${between.desktop.and.leftCol} { | ||
| ${grid.centreRule(2, 'transparent')} | ||
| } | ||
| `; |
There was a problem hiding this comment.
This removes the vertical rule to the left of the caption (see screenshot of the problem) which appears from desktop until leftCol breakpoint and comes from the new grid logic
| ${from.tablet} { | ||
| padding-bottom: ${space[10]}px; | ||
| } | ||
|
|
There was a problem hiding this comment.
Lift and shift to make the CSS easier to read:
small screen -> large screen CSS ordering
| /** | ||
| * Override --accent-colour variable at a higher CSS specificity | ||
| * for hosted gallery articles only, because this only has a dark design | ||
| */ | ||
| const galleryOverrides = css` | ||
| --accent-colour: ${palette('--onward-text')}; | ||
| `; |
There was a problem hiding this comment.
Due to colour contrast issues, we suppress the accent colour from appearing in most dark mode hosted pages. Galleries only ever have "dark mode" so we need to do this in a more permanent way. A simple way to do this is to override the previous one set at the page level by adding a higher specificity colour variable which remains the same between dark and light modes
| </div> | ||
| </> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Moved this to be inline instead of a separate component as I feel it's slightly easier to follow this way
| src={generateImageURL({ | ||
| mainImage: trail.image.src, | ||
| imageWidth: isGalleryPage ? 180 : 120, | ||
| resolution: 'low', | ||
| aspectRatio: '5:4', | ||
| })} |
There was a problem hiding this comment.
Requests the correct image size from Fastly rather than using the trail image URL directly. This allows us to control the aspect ratio and desired resolution of the images
| const mockOnwardsContentFetch = customMockFetch([ | ||
| { | ||
| mockedMethod: 'GET', | ||
| mockedUrl: `${hostedGallery.config.ajaxUrl}/${hostedGallery.config.pageId}/onward.json`, | ||
| mockedStatus: 200, | ||
| mockedBody: { trails: hostedOnwardsTrails }, | ||
| }, | ||
| ]); |
There was a problem hiding this comment.
Mocked response of hosted onward content for Storybook stories
…ry variation for onward story
cemms1
force-pushed
the
cemms1/hosted-onwards-gallery
branch
from
d85ef2f to
fdf4b67
Compare
1 participant
What does this change?
Adds onward content to Hosted Gallery pages.
Does this by re-using the existing onward component for hosted content and adapting it slightly for gallery pages by using a larger image size and switching to a row display from desktop upwards
This doesn't strictly follow the designs provided but uses the component that already exists as a step towards the final result. This should allow us to release these pages and iterate on them in the background
Why?
We're migrating Hosted Gallery pages from frontend to DCR
Screenshots