Skip to content

Adjust feast thrasher style on apps #15406

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
tomrf1 wants to merge 14 commits into
base: main
Choose a base branch
from
+31 −7
Draft

Adjust feast thrasher style on apps #15406

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1cf1d22
Adjust feast thrasher style on apps
tomrf1 Feb 23, 2026
ca6db87
grid overflow
tomrf1 Feb 24, 2026
1e4a7e8
display: block
tomrf1 Feb 24, 2026
0602350
use flex at mobile
tomrf1 Feb 24, 2026
a0bf808
Revert "use flex at mobile"
tomrf1 Feb 24, 2026
15636cd
border-box
tomrf1 Feb 24, 2026
327284e
remove overflow on grid
tomrf1 Feb 26, 2026
878d4c4
webkit
tomrf1 Feb 26, 2026
6e5412b
min-height
tomrf1 Feb 26, 2026
6b18681
remove doctype
tomrf1 Feb 27, 2026
6a70236
overflow hidden on body
tomrf1 Feb 27, 2026
a522494
redundant style
tomrf1 Feb 27, 2026
693f65d
format
tomrf1 Feb 27, 2026
222e74d
fix border clipping
tomrf1 Feb 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion dotcom-rendering/src/components/marketing/thrashers/FeastThrasher.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,14 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;

export const FeastThrasher: Story = {};
export const FeastThrasher: Story = {
args: {
renderingTarget: 'Web',
},
};

export const FeastThrasherApps: Story = {
args: {
renderingTarget: 'Apps',
},
};
17 changes: 14 additions & 3 deletions dotcom-rendering/src/components/marketing/thrashers/FeastThrasher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,19 @@ import {
SvgArrowRightStraight,
SvgGuardianLogo,
} from '@guardian/source/react-components';
import type { RenderingTarget } from '../../../types/renderingTarget';

const styles = {
container: css`
container: (renderingTarget: RenderingTarget) => css`
/* stylelint-disable-next-line color-no-hex */
background: #f7efe9;
color: ${palette.neutral[0]};
${renderingTarget === 'Apps'
? css`
margin: 0 4px;
border-radius: 8px;
`
: ''}
`,
grid: css`
display: grid;
Expand Down Expand Up @@ -113,9 +120,13 @@ const tabletImageUrl =
const mobileAndDesktopImageUrl =
'https://media.guim.co.uk/a0cc02db1394f8710bdce008e2297759098d53b3/0_0_2000_1200/2000.png';

export const FeastThrasher = () => {
interface Props {
renderingTarget: RenderingTarget;
}

export const FeastThrasher = ({ renderingTarget }: Props) => {
return (
<div css={styles.container}>
<div css={styles.container(renderingTarget)}>
<div css={styles.grid}>
<div css={styles.logo}>
<SvgGuardianLogo
Expand Down
9 changes: 6 additions & 3 deletions dotcom-rendering/src/server/render.thrasher.apps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,19 @@ type ThrasherName = 'feast';
export const isThrasher = (name?: string): name is ThrasherName =>
name === 'feast';

// Minimal html page for the thrasher component
// Minimal html page for the thrasher component.
// The `overflow: hidden` on the body fixes an issue on the iOS app where it scrolls within the webview.
// The `margin-top: 0` on the body fixes an issue on iOS where the border is clipped.
const thrasherTemplate = (html: string, css: string): string => {
const minifiedFontsCss = new CleanCSS().minify(rawFontsCss).styles;
return `<!doctype html>
<html lang="en">
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="robots" content="noindex">
<style class="webfont">${minifiedFontsCss}</style>
<style>body { overflow: hidden; margin-top: 0; }</style>
${css}
</head>
<body>
Expand All @@ -27,7 +30,7 @@ const thrasherTemplate = (html: string, css: string): string => {

export const renderThrasher = (name: ThrasherName): { html: string } => {
const { html, extractedCss } = renderToStringWithEmotion(
<>{name === 'feast' && <FeastThrasher />}</>,
<>{name === 'feast' && <FeastThrasher renderingTarget={'Apps'} />}</>,
);

const pageHtml = thrasherTemplate(html, extractedCss);
Expand Down
Loading