Add footer to gallery layout #14145
Open
Add footer to gallery layout #14145
+239
−37
Conversation
This file contains hidden or 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
|
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
|
Size Change: 0 B Total Size: 1.05 MB ℹ️ View Unchanged
|
marjisound
force-pushed
the
add-footer-to-gallery-layout
branch
from
324b92e to
549566f
Compare
marjisound
force-pushed
the
add-footer-to-gallery-layout
branch
from
549566f to
c9004b1
Compare
| <Section | ||
| fullWidth={true} | ||
| data-print-layout="hide" | ||
| backgroundColour={'red'} |
There was a problem hiding this comment.
Suggested change
| backgroundColour={'red'} | |
| backgroundColour={themePalette('--apps-footer-background')} |
arelra
approved these changes
Jul 10, 2025
DanielCliftonGuardian
approved these changes
Jul 10, 2025
github-actions
bot
removed
the
run_chromatic
marjisound
force-pushed
the
add-footer-to-gallery-layout
branch
from
6b24fad to
121a6e0
Compare
marjisound
force-pushed
the
add-footer-to-gallery-layout
branch
from
121a6e0 to
9988333
Compare
github-actions
bot
removed
the
run_chromatic
JamieB-gu
reviewed
Jul 17, 2025
| } | ||
| `; | ||
|
|
||
| const galleryLeftCollumn = css` |
There was a problem hiding this comment.
This might be better called galleryBorder? If I've understood correctly, this is sometimes in the left column and sometimes in the right one?
| `; | ||
|
|
||
| const galleryLeftCollumn = css` | ||
| ${grid.column.centre} |
There was a problem hiding this comment.
Do these styles have a noticeable effect?
There was a problem hiding this comment.
Good catch, this is un-necessary 👍
Comment on lines
156
to
159
| ${between.tablet.and.desktop} { | ||
| padding-left: ${space[5]}px; | ||
| padding-right: ${space[5]}px; | ||
| } |
There was a problem hiding this comment.
Do these padding styles have a noticeable effect?
There was a problem hiding this comment.
Good spot, trhis was un-necessary, removed it
| ${from.leftCol} { | ||
| ${grid.column.left} | ||
|
|
||
| position: relative; /* allows the ::before to be positioned relative to this */ |
There was a problem hiding this comment.
Does the position: relative need to be repeated in these two media queries? Can it be applied once outside them?
| @@ -130,6 +140,55 @@ const syndicationButtonOverrides = css` | |||
| const galleryStyles = css` | |||
| ${grid.paddedContainer}; | |||
| background-color: ${palette('--article-inner-background')}; | |||
| border-bottom: 1px solid var(--article-border); | |||
| padding: 0; | |||
| position: relative; | |||
There was a problem hiding this comment.
What is the position: relative used for here?
There was a problem hiding this comment.
You're right, it's in the inner div so not needed here 👍
| import { Standfirst } from '../components/Standfirst'; | ||
| import { SubMeta } from '../components/SubMeta'; | ||
| import { grid } from '../grid'; | ||
| import type { ArticleFormat } from '../lib/articleFormat'; | ||
| import type { NavType } from '../model/extract-nav'; | ||
| import { palette } from '../palette'; | ||
| import { palette, palette as themePalette } from '../palette'; |
There was a problem hiding this comment.
You probably don't need to import this twice?
Suggested change
| import { palette, palette as themePalette } from '../palette'; | |
| import { palette } from '../palette'; |
There was a problem hiding this comment.
Did this change in the last commit d48ed9d
github-actions
bot
removed
the
run_chromatic
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.
What does this change?
This PR is part of the Gallery migration from frontend/AR into DCAR. It adds support for the gallery body image.
The change adds Footer to the Gallery layout for both Web & App and makes it work for both light & dark mode