Skip to content

Commit

Permalink
Set background colour for trending topics and podcast sections (#13171)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cemms1
cemms1 authored Jan 17, 2025
1 parent 4d73184 commit 56aa76e
Showing 1 changed file with 118 additions and 117 deletions.
235 changes: 118 additions & 117 deletions dotcom-rendering/src/layouts/FrontLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { isOneOf } from '@guardian/libs';
import {
background,
brandBackground,
brandBorder,
palette as sourcePalette,
Expand Down Expand Up @@ -348,70 +347,65 @@ export const FrontLayout = ({ front, NAV }: Props) => {

if (collection.collectionType === 'fixed/thrasher') {
return (
<ContainerOverrides
key={ophanName}
containerPalette={collection.containerPalette}
>
<div css={[hasPageSkin && pageSkinContainer]}>
{desktopAdPositions.includes(index) && (
<FrontsBannerAdSlot
renderAds={renderAds}
<div key={ophanName}>
{desktopAdPositions.includes(index) && (
<FrontsBannerAdSlot
renderAds={renderAds}
hasPageSkin={hasPageSkin}
adSlotIndex={desktopAdPositions.indexOf(
index,
)}
/>
)}
{!!trail.embedUri && (
<SnapCssSandbox snapData={trail.snapData}>
<Section
fullWidth={true}
padSides={false}
showTopBorder={false}
showSideBorders={false}
ophanComponentLink={
ophanComponentLink
}
ophanComponentName={ophanName}
containerName={
collection.collectionType
}
hasPageSkin={hasPageSkin}
adSlotIndex={desktopAdPositions.indexOf(
index,
backgroundColour={schemePalette(
'--front-container-background',
)}
/>
)}
{!!trail.embedUri && (
<SnapCssSandbox
snapData={trail.snapData}
>
<Section
fullWidth={true}
padSides={false}
showTopBorder={false}
showSideBorders={false}
ophanComponentLink={
ophanComponentLink
<Snap
snapData={trail.snapData}
dataLinkName={
trail.dataLinkName
}
ophanComponentName={ophanName}
containerName={
collection.collectionType
}
hasPageSkin={hasPageSkin}
>
<Snap
snapData={trail.snapData}
dataLinkName={
trail.dataLinkName
}
/>
</Section>
</SnapCssSandbox>
)}
{mobileAdPositions.includes(index) && (
<MobileAdSlot
renderAds={renderAds}
adSlotIndex={mobileAdPositions.indexOf(
index,
)}
/>
)}
{index === merchHighAdPosition && (
<MerchHighAdSlot
renderAds={renderAds}
collectionCount={
filteredCollections.length
}
isPaidContent={
!!front.pressedPage
.frontProperties
.isPaidContent
}
/>
)}
</div>
</ContainerOverrides>
/>
</Section>
</SnapCssSandbox>
)}
{mobileAdPositions.includes(index) && (
<MobileAdSlot
renderAds={renderAds}
adSlotIndex={mobileAdPositions.indexOf(
index,
)}
/>
)}
{index === merchHighAdPosition && (
<MerchHighAdSlot
renderAds={renderAds}
collectionCount={
filteredCollections.length
}
isPaidContent={
!!front.pressedPage.frontProperties
.isPaidContent
}
/>
)}
</div>
);
}

Expand Down Expand Up @@ -578,61 +572,67 @@ export const FrontLayout = ({ front, NAV }: Props) => {
)}
/>
)}
<Section
title={collection.displayName}
sectionId={`container-${ophanName}`}
ophanComponentName={ophanName}
ophanComponentLink={ophanComponentLink}
containerName={collection.collectionType}
fullWidth={true}
padBottom={true}
showSideBorders={
collection.collectionType !==
'fixed/video'
}
showTopBorder={index > 0}
padContent={false}
url={collection.href}
showDateHeader={
collection.config.showDateHeader
}
editionId={front.editionId}
backgroundColour={schemePalette(
'--section-background',
)}
innerBackgroundColour={
containerPalette === 'MediaPalette'
? sourcePalette.neutral[0]
: undefined
}
hasPageSkin={hasPageSkin}
<ContainerOverrides
containerPalette={containerPalette}
>
<Island
priority="feature"
defer={{ until: 'visible' }}
<Section
title={collection.displayName}
sectionId={`container-${ophanName}`}
ophanComponentName={ophanName}
ophanComponentLink={ophanComponentLink}
containerName={
collection.collectionType
}
fullWidth={true}
padBottom={true}
showSideBorders={
collection.collectionType !==
'fixed/video'
}
showTopBorder={index > 0}
padContent={false}
url={collection.href}
showDateHeader={
collection.config.showDateHeader
}
editionId={front.editionId}
backgroundColour={schemePalette(
'--front-container-background',
)}
innerBackgroundColour={
containerPalette === 'MediaPalette'
? sourcePalette.neutral[0]
: undefined
}
hasPageSkin={hasPageSkin}
>
<Carousel
isOnwardContent={false}
heading={collection.displayName}
trails={trails}
onwardsSource={'unknown-source'}
palette={containerPalette}
leftColSize={'compact'}
containerType={
collection.collectionType
}
hasPageSkin={hasPageSkin}
url={collection.href}
discussionApiUrl={
front.config.discussionApiUrl
}
absoluteServerTimes={
absoluteServerTimes
}
/>
</Island>
</Section>

<Island
priority="feature"
defer={{ until: 'visible' }}
>
<Carousel
isOnwardContent={false}
heading={collection.displayName}
trails={trails}
onwardsSource={'unknown-source'}
palette={containerPalette}
leftColSize={'compact'}
containerType={
collection.collectionType
}
hasPageSkin={hasPageSkin}
url={collection.href}
discussionApiUrl={
front.config
.discussionApiUrl
}
absoluteServerTimes={
absoluteServerTimes
}
/>
</Island>
</Section>
</ContainerOverrides>
{mobileAdPositions.includes(index) && (
<MobileAdSlot
renderAds={renderAds}
Expand Down Expand Up @@ -761,6 +761,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
ophanComponentName="trending-topics"
data-component="trending-topics"
hasPageSkin={hasPageSkin}
backgroundColour={schemePalette('--front-container-background')}
>
<TrendingTopics trendingTopics={front.trendingTopics} />
</Section>
Expand All @@ -777,9 +778,9 @@ export const FrontLayout = ({ front, NAV }: Props) => {
data-print-layout="hide"
padSides={false}
element="aside"
backgroundColour={
hasPageSkin ? background.primary : undefined
}
backgroundColour={schemePalette(
'--front-container-background',
)}
>
<Island priority="enhancement" defer={{ until: 'visible' }}>
<SubNav
Expand Down

0 comments on commit 56aa76e

Please sign in to comment.