Skip to content

Commit 9988333

Browse files
marjisoundmarjisound
committed
fix gallery footer layout an d borders and colors for app
1 parent c9004b1 commit 9988333

File tree

4 files changed

+215
-41
lines changed

4 files changed

+215
-41
lines changed

‎dotcom-rendering/src/components/AppsFooter.importable.tsx‎

Lines changed: 109 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,54 @@
11
import { css } from '@emotion/react';
2-
import { remSpace, textSans15 } from '@guardian/source/foundations';
2+
import {
3+
between,
4+
from,
5+
remSpace,
6+
space,
7+
textSans15,
8+
until,
9+
} from '@guardian/source/foundations';
310
import { ButtonLink } from '@guardian/source/react-components';
411
import { useEffect, useState } from 'react';
12+
import { grid } from '../grid';
13+
import { ArticleDesign } from '../lib/articleFormat';
514
import { getNavigationClient, getUserClient } from '../lib/bridgetApi';
615
import { palette } from '../palette';
716

817
const year = new Date().getFullYear();
918

10-
const footerStyles = css`
11-
${textSans15}
12-
padding: ${remSpace[4]} ${remSpace[3]};
13-
background-color: ${palette('--apps-footer-background')};
19+
const footerContainerStyles = (design?: ArticleDesign) => {
20+
if (design === ArticleDesign.Gallery) {
21+
return css`
22+
${textSans15}
23+
${grid.paddedContainer}
24+
background-color: ${palette('--apps-footer-background')};
25+
26+
${until.tablet} {
27+
padding-top: ${space[1]}px;
28+
}
29+
30+
${from.tablet} {
31+
border-left: 1px solid ${palette('--footer-border')};
32+
border-right: 1px solid ${palette('--footer-border')};
33+
}
34+
`;
35+
} else {
36+
return css`
37+
${textSans15}
38+
padding: ${remSpace[4]} ${remSpace[3]};
39+
background-color: ${palette('--apps-footer-background')};
40+
`;
41+
}
42+
};
43+
44+
const galleryFooterStyles = css`
45+
${grid.column.centre}
46+
padding: ${remSpace[4]} 0;
47+
position: relative;
48+
49+
${from.leftCol} {
50+
${grid.between('centre-column-start', 'right-column-end')}
51+
}
1452
`;
1553

1654
const linkStyles = css`
@@ -62,7 +100,47 @@ const PrivacySettings = ({
62100
}
63101
};
64102

65-
export const AppsFooter = () => {
103+
const galleryLeftCollumn = css`
104+
${grid.column.centre}
105+
${between.tablet.and.desktop} {
106+
padding-left: ${space[5]}px;
107+
padding-right: ${space[5]}px;
108+
}
109+
110+
${between.desktop.and.leftCol} {
111+
${grid.column.right}
112+
113+
position: relative; /* allows the ::before to be positioned relative to this */
114+
115+
&::before {
116+
content: '';
117+
position: absolute;
118+
left: -10px; /* 10px to the left of this element */
119+
top: 0;
120+
bottom: 0;
121+
width: 1px;
122+
background-color: ${palette('--footer-border')};
123+
}
124+
}
125+
126+
${from.leftCol} {
127+
${grid.column.left}
128+
129+
position: relative; /* allows the ::before to be positioned relative to this */
130+
131+
&::after {
132+
content: '';
133+
position: absolute;
134+
right: -10px;
135+
top: 0;
136+
bottom: 0;
137+
width: 1px;
138+
background-color: ${palette('--footer-border')};
139+
}
140+
}
141+
`;
142+
143+
export const AppsFooter = ({ design }: { design?: ArticleDesign }) => {
66144
const [isCcpa, setIsCcpa] = useState<boolean>(false);
67145

68146
useEffect(() => {
@@ -90,21 +168,32 @@ export const AppsFooter = () => {
90168
};
91169

92170
return (
93-
<div css={footerStyles}>
94-
&#169; {year} Guardian News and Media Limited or its affiliated
95-
companies. All rights reserved. (dcar)
96-
<br />
97-
<PrivacySettings
98-
isCcpa={isCcpa}
99-
privacySettingsClickHandler={privacySettingsClickHandler}
100-
/>
101-
<ButtonLink
102-
priority="secondary"
103-
onClick={privacyPolicyClickHandler}
104-
cssOverrides={linkStyles}
171+
<div css={[footerContainerStyles(design)]}>
172+
{design === ArticleDesign.Gallery && (
173+
<div css={galleryLeftCollumn}></div>
174+
)}
175+
<div
176+
css={
177+
design === ArticleDesign.Gallery
178+
? galleryFooterStyles
179+
: undefined
180+
}
105181
>
106-
Privacy Policy
107-
</ButtonLink>
182+
&#169; {year} Guardian News and Media Limited or its affiliated
183+
companies. All rights reserved. (dcar)
184+
<br />
185+
<PrivacySettings
186+
isCcpa={isCcpa}
187+
privacySettingsClickHandler={privacySettingsClickHandler}
188+
/>
189+
<ButtonLink
190+
priority="secondary"
191+
onClick={privacyPolicyClickHandler}
192+
cssOverrides={linkStyles}
193+
>
194+
Privacy Policy
195+
</ButtonLink>
196+
</div>
108197
</div>
109198
);
110199
};

‎dotcom-rendering/src/components/SubMeta.tsx‎

Lines changed: 69 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { css, type SerializedStyles } from '@emotion/react';
22
import {
3+
between,
34
from,
45
space,
56
textSans12,
@@ -81,12 +82,21 @@ const listStyles = css`
8182
background-repeat: no-repeat;
8283
`;
8384

84-
const listWrapper = (design: ArticleDesign): SerializedStyles => css`
85-
${design === ArticleDesign.Gallery ? grid.column.centre : undefined};
86-
padding-bottom: 0.75rem;
87-
margin-bottom: 6px;
88-
border-bottom: 1px solid ${palette('--article-border')};
89-
`;
85+
const listWrapper = (design: ArticleDesign): SerializedStyles => {
86+
if (design === ArticleDesign.Gallery) {
87+
return css`
88+
${grid.column.centre}
89+
padding-bottom: 0.75rem;
90+
margin-bottom: 6px;
91+
`;
92+
}
93+
94+
return css`
95+
padding-bottom: 0.75rem;
96+
margin-bottom: 6px;
97+
border-bottom: 1px solid ${palette('--article-border')};
98+
`;
99+
};
90100

91101
const listItemStyles = css`
92102
${textSans14};
@@ -130,6 +140,55 @@ const syndicationButtonOverrides = css`
130140
const galleryStyles = css`
131141
${grid.paddedContainer};
132142
background-color: ${palette('--article-inner-background')};
143+
border-bottom: 1px solid var(--article-border);
144+
padding: 0;
145+
position: relative;
146+
147+
${from.tablet} {
148+
border-left: 1px solid ${palette('--article-border')};
149+
border-right: 1px solid ${palette('--article-border')};
150+
}
151+
`;
152+
153+
const galleryLeftCollumn = css`
154+
${grid.column.centre}
155+
grid-row: 1 / 3;
156+
${between.tablet.and.desktop} {
157+
padding-left: ${space[5]}px;
158+
padding-right: ${space[5]}px;
159+
}
160+
161+
${between.desktop.and.leftCol} {
162+
${grid.column.right}
163+
164+
position: relative; /* allows the ::before to be positioned relative to this */
165+
166+
&::before {
167+
content: '';
168+
position: absolute;
169+
left: -10px; /* 10px to the left of this element */
170+
top: 0;
171+
bottom: 0;
172+
width: 1px;
173+
background-color: ${palette('--article-border')};
174+
}
175+
}
176+
177+
${from.leftCol} {
178+
${grid.column.left}
179+
180+
position: relative; /* allows the ::before to be positioned relative to this */
181+
182+
&::after {
183+
content: '';
184+
position: absolute;
185+
right: -10px;
186+
top: 0;
187+
bottom: 0;
188+
width: 1px;
189+
background-color: ${palette('--article-border')};
190+
}
191+
}
133192
`;
134193

135194
export const SubMeta = ({
@@ -160,15 +219,17 @@ export const SubMeta = ({
160219
<div
161220
data-print-layout="hide"
162221
css={[
163-
bottomPadding,
164222
format.design === ArticleDesign.Interactive
165223
? setMetaWidth
166224
: undefined,
167225
format.design === ArticleDesign.Gallery
168226
? galleryStyles
169-
: undefined,
227+
: bottomPadding,
170228
]}
171229
>
230+
{format.design === ArticleDesign.Gallery && (
231+
<div css={galleryLeftCollumn}></div>
232+
)}
172233
{hasLinks && (
173234
<>
174235
<span css={labelStyles(format.design)}>

‎dotcom-rendering/src/layouts/GalleryLayout.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -216,19 +216,17 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
216216
</Section>
217217
)}
218218
{isApps && (
219-
<Section
220-
fullWidth={true}
221-
data-print-layout="hide"
222-
backgroundColour={'red'}
223-
borderColour={themePalette('--article-border')}
224-
padSides={false}
225-
showSideBorders={false}
226-
element="footer"
219+
<div
220+
css={{
221+
backgroundColor: themePalette(
222+
'--apps-footer-background',
223+
),
224+
}}
227225
>
228226
<Island priority="critical">
229-
<AppsFooter />
227+
<AppsFooter design={format.design} />
230228
</Island>
231-
</Section>
229+
</div>
232230
)}
233231
</>
234232
);

‎dotcom-rendering/src/paletteDeclarations.ts‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3034,7 +3034,6 @@ const articleBackgroundDark: PaletteFunction = ({ design, theme }) => {
30343034
return sourcePalette.neutral[10];
30353035
}
30363036
case ArticleDesign.Gallery:
3037-
return '#131313';
30383037
default:
30393038
return sourcePalette.neutral[10];
30403039
}
@@ -3058,8 +3057,23 @@ const articleInnerBackgroundLight: PaletteFunction = ({ design, theme }) => {
30583057
}
30593058
};
30603059

3061-
const articleInnerBackgroundDark: PaletteFunction = (palette) =>
3062-
articleInnerBackgroundLight(palette);
3060+
const articleInnerBackgroundDark: PaletteFunction = ({ design, theme }) => {
3061+
switch (design) {
3062+
case ArticleDesign.Audio:
3063+
case ArticleDesign.Video:
3064+
switch (theme) {
3065+
case ArticleSpecial.Labs:
3066+
return sourcePalette.neutral[86];
3067+
default:
3068+
return sourcePalette.neutral[0];
3069+
}
3070+
case ArticleDesign.Gallery:
3071+
return sourcePalette.neutral[10];
3072+
3073+
default:
3074+
return 'transparent';
3075+
}
3076+
};
30633077

30643078
const articleSectionBackgroundLight: PaletteFunction = () =>
30653079
sourcePalette.neutral[100];
@@ -3291,6 +3305,14 @@ const articleBorderLight: PaletteFunction = ({ design, theme }) => {
32913305
}
32923306
};
32933307

3308+
const footerBorderLight: PaletteFunction = () => {
3309+
return sourcePalette.neutral[86];
3310+
};
3311+
3312+
const footerBorderDark: PaletteFunction = () => {
3313+
return sourcePalette.neutral[20];
3314+
};
3315+
32943316
const articleBorderDark: PaletteFunction = () => sourcePalette.neutral[20];
32953317

32963318
const straightLinesLight: PaletteFunction = (format) => {
@@ -6760,6 +6782,10 @@ const paletteColours = {
67606782
light: () => sourcePalette.neutral[7],
67616783
dark: () => sourcePalette.neutral[86],
67626784
},
6785+
'--footer-border': {
6786+
light: footerBorderLight,
6787+
dark: footerBorderDark,
6788+
},
67636789
'--front-container-background': {
67646790
light: () => sourcePalette.neutral[100],
67656791
dark: () => sourcePalette.neutral[10],

0 commit comments

Comments
 (0)