Skip to content

Commit a3c16c7

Browse files
BorghildSelleBorghildSelle
committed
🎨 fix figure caption and some hero adjustments
1 parent a514c21 commit a3c16c7

8 files changed

Lines changed: 55 additions & 23 deletions

File tree

‎studio/schemas/documents/route.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export default (isoCode: string, title: string) => {
6262
filter: 'lang == $lang',
6363
filterParams: { lang: `${isoCode}` },
6464
disableNew: true,
65+
sort: [{ direction: 'desc', field: '_createdAt' }],
6566
},
6667
},
6768
{
@@ -77,6 +78,7 @@ export default (isoCode: string, title: string) => {
7778
options: {
7879
filter: '!defined(parent)',
7980
disableNew: true,
81+
sort: [{ direction: 'desc', field: '_updatedAt' }],
8082
},
8183
},
8284
{

‎web/core/FigureCaption/FigureCaption.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,18 @@ export const FigureCaption = forwardRef<HTMLElement, FigureCaptionProps>(
3131
<figcaption
3232
ref={ref}
3333
className={twMerge(
34-
`max-w-prose pt-2 pb-4 leading-misty dark:text-white-100 ${textSize === 'xs' ? 'text-xs' : 'text-base'}
34+
`pt-2 pb-4 leading-misty dark:text-white-100 ${textSize === 'xs' ? 'text-xs' : 'text-base'}
3535
${withLayoutPx ? 'px-layout-sm lg:px-layout-lg' : ''}
3636
`,
3737
className,
3838
)}
3939
>
4040
{(caption || attribution) && (
41-
<Typography group='plain' variant='div' className='leading-normal'>
41+
<Typography
42+
group='plain'
43+
variant='div'
44+
className='max-w-prose leading-normal'
45+
>
4246
{caption}
4347
{`${caption && attribution ? ' ' : ''}`}
4448
{attribution}

‎web/core/Picture/Picture.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
import type { SanityImageObject } from '@sanity/image-url'
2-
import { getImageProps, type ImageProps } from 'next/image'
2+
import type { ImageProps } from 'next/image'
33
import { forwardRef } from 'react'
44
import { twMerge } from 'tailwind-merge'
55
import { resolveImage } from '@/sanity/lib/utils'
66
import type { ImageWithAlt, ImageWithCaptionData } from '@/types'
77
import { FigureCaption } from '../FigureCaption/FigureCaption'
8-
import {
9-
getFullScreenSizes,
10-
Image,
11-
type ImageRatioKeys,
12-
mapSanityImageRatio,
13-
} from '../Image/Image'
14-
import { Typography } from '../Typography'
8+
import { Image, type ImageRatioKeys, mapSanityImageRatio } from '../Image/Image'
159

1610
type PictureProps = {
1711
image: ImageWithAlt | ImageWithCaptionData | SanityImageObject

‎web/sections/Hero/DefaultHero.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const DefaultHero = ({
5353
const isColorBg = background && background !== 'bg-white-100'
5454

5555
return (
56-
<div className={twMerge(className, `relative h-full w-full`)}>
56+
<div className={twMerge(className, `relative h-full w-full pb-4 lg:pb-6`)}>
5757
<div>
5858
<div
5959
className={twMerge(

‎web/sections/Hero/FullWidthImageHero.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const FullWidthImageHero = ({
5252
figCaptionClassName={`${nextCompBg ? nextCompBg : ''} ${nextCompDark ? nextCompDark : ''}`}
5353
caption={figure?.caption}
5454
attribution={figure?.attribution}
55-
className={twMerge(variantClassName[variant], className)}
55+
className={variantClassName[variant]}
5656
/>
5757
)}
5858
{magazineTags && magazineTags?.length > 0 && (
@@ -64,9 +64,14 @@ export const FullWidthImageHero = ({
6464
id='mainTitle'
6565
asOneElementType
6666
as='h1'
67-
className={`px-layout-sm py-4 lg:px-layout-lg lg:pt-6 lg:pb-4 ${nextCompBg} ${
68-
nextCompDark ? nextCompDark : ''
69-
}`}
67+
variant='h1'
68+
blockClassName='pb-0'
69+
className={twMerge(
70+
`px-layout-sm pt-4 lg:px-layout-lg lg:pt-6 ${nextCompBg} ${
71+
nextCompDark ? nextCompDark : ''
72+
}`,
73+
className,
74+
)}
7075
/>
7176
{subTitle && subTitle}
7277
</>

‎web/sections/Hero/HeroBlock.tsx‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -119,23 +119,43 @@ export const HeroBlock = ({
119119
return (
120120
<FullWidthImageHero
121121
{...heroProps}
122+
// reduce pb when breadscrumbs
123+
className={`${breadcrumbs?.enableBreadcrumbs ? 'pb-2' : ''}`}
122124
variant={(ratio as FullWidthImageHeroVariant) ?? 'narrow'}
123125
/>
124126
)
125127
case HeroTypes.FIFTY_FIFTY:
126-
return <FiftyFiftyHero {...heroProps} />
128+
return (
129+
<FiftyFiftyHero
130+
{...heroProps}
131+
className={`${breadcrumbs?.enableBreadcrumbs ? 'mb-2' : 'mb-4 lg:mb-6'}`}
132+
/>
133+
)
127134
case HeroTypes.BACKGROUND_IMAGE:
128135
return <TextOnBackgroundImageHero {...heroProps} />
129136
case HeroTypes.LOOPING_VIDEO:
130-
//@ts-ignore
131-
return <LoopingVideoHero {...heroProps} />
137+
return (
138+
//@ts-ignore
139+
<LoopingVideoHero
140+
{...heroProps}
141+
// reduce pb when breadscrumbs
142+
className={`${breadcrumbs?.enableBreadcrumbs ? 'pb-2' : ''}`}
143+
/>
144+
)
132145
default:
133-
return <DefaultHero {...heroProps} ratio='2:1' />
146+
return (
147+
<DefaultHero
148+
{...heroProps}
149+
ratio='2:1'
150+
// reduce pb when breadscrumbs
151+
className={`${breadcrumbs?.enableBreadcrumbs ? 'pb-2' : ''}`}
152+
/>
153+
)
134154
}
135155
}
136156

137157
return type !== HeroTypes.NO_HERO ? (
138-
<section className='mb-8 h-full w-full'>
158+
<section className='h-full w-full'>
139159
{getHero()}
140160
{breadcrumbs?.enableBreadcrumbs && (
141161
<Breadcrumbs

‎web/sections/Hero/LoopingVideoHero.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client'
22
import type { PortableTextBlock } from 'next-sanity'
33
import { VideoPlayer } from '@/core/VideoJsPlayer/VideoPlayer'
4+
import { twMerge } from '@/lib/twMerge/twMerge'
45
import Blocks from '@/portableText/Blocks'
56
import { getBgAndDarkFromBackground } from '@/styles/colorKeyToUtilityMap'
67
import type { DesignOptions, ImageWithAlt } from '@/types'
@@ -19,12 +20,14 @@ export type LoopingVideoHeroProps = {
1920
title?: PortableTextBlock[]
2021
nextSectionDesignOptions?: DesignOptions
2122
video: LoopingVideoData
23+
className?: string
2224
}
2325

2426
export const LoopingVideoHero = ({
2527
title,
2628
video,
2729
nextSectionDesignOptions,
30+
className = '',
2831
}: LoopingVideoHeroProps) => {
2932
const { ratio } = video
3033
const { bg: nextCompBg, dark: nextCompDark } = getBgAndDarkFromBackground(
@@ -51,8 +54,12 @@ export const LoopingVideoHero = ({
5154
//@ts-ignore
5255
value={title}
5356
id='mainTitle'
57+
as='h1'
5458
variant='h1'
55-
blockClassName={`py-11 px-layout-lg ${nextCompBg} ${nextCompDark ? nextCompDark : ''}`}
59+
blockClassName={twMerge(
60+
`pt-4 lg:pt-6 px-layout-sm lg:px-layout-lg ${nextCompBg} ${nextCompDark ? nextCompDark : ''}`,
61+
className,
62+
)}
5663
/>
5764
</>
5865
)

‎web/sections/Hero/TextOnBackgroundImageHero.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const TextOnBackgroundImageHero = ({
1414
figure,
1515
title,
1616
ingress,
17-
backgroundGradient
17+
backgroundGradient,
1818
}: TextOnBackgroundImageHeroProps) => {
1919
const { image } = figure || {}
2020
return (
@@ -25,7 +25,7 @@ export const TextOnBackgroundImageHero = ({
2525
useLight={backgroundGradient !== 'dark'}
2626
overrideGradient={backgroundGradient === 'none'}
2727
>
28-
<div className='px-layout-lg max-lg:py-11'>
28+
<div className='px-layout-sm max-lg:py-11 lg:px-layout-lg'>
2929
{/*@ts-ignore */}
3030
<Blocks value={title} id='mainTitle' variant='h1' />
3131
<div className='pt-6'>

0 commit comments

Comments
 (0)