Skip to content

Commit 1bb5c6f

Browse files
mplibunaomplibunao
committed
Fixes media query bugs
1 parent f47ada3 commit 1bb5c6f

File tree

8 files changed

+108
-54
lines changed

8 files changed

+108
-54
lines changed

‎apps/web/src/app/components/Blocks/Media.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export const Media = (props: MediaProps): JSX.Element => {
7373
type={format}
7474
sizes={getResponsiveSizes(props.srcSizes)}
7575
srcSet={imageSrcSet}
76-
key={`${imageSrcSet}${format ?? 'original'}`}
76+
key={`${imageSrcSet ?? ''}${format ?? 'original'}`}
7777
/>
7878
)
7979
})}
@@ -101,7 +101,7 @@ export const getSrcSet = (
101101

102102
// default breakpoints while keeping aspect ratio
103103
if (!srcSets?.length && !srcBreakpoints?.length) {
104-
return [480, 640, 768, 1024, 1280, 1536, 1920, 2560]
104+
return [360, 480, 640, 768, 1024, 1280, 1536, 1920, 2560]
105105
.map((width) => {
106106
const url = imagorService
107107
.resize(width, 0)
@@ -134,7 +134,7 @@ export const getSrcSet = (
134134
}
135135

136136
return srcSets
137-
.map((srcSet) => {
137+
?.map((srcSet) => {
138138
// if you need more control for the transformation like changing format, flip v/h, etc
139139
// More verbose
140140

‎apps/web/src/app/components/Blocks/sections/MediaBlock/MediaBlock.tsx

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ export const WideMediaBlock = (props: MediaBlockProps): JSX.Element => {
2727
<Media
2828
{...props.media}
2929
srcSizes={[
30-
'100vw',
31-
'media(min-width: 1280px) 80vw',
32-
'media(min-width: 1920px) 70vw',
30+
'(max-width: 1279px) 100vw',
31+
'(min-width: 1280px) 80vw',
32+
'(min-width: 1920px) 70vw',
3333
]}
3434
/>
3535
{props.caption ? <RichText content={props.caption} /> : null}
@@ -63,9 +63,9 @@ export const FullScreenMediaBlock = (props: MediaBlockProps) => {
6363
{...props.media}
6464
className='h-full w-full object-cover'
6565
srcSizes={[
66-
'100vw',
67-
'media(min-width: 1280px) 80vw',
68-
'media(min-width: 1920px) 70vw',
66+
'(max-width: 1279px) 100vw',
67+
'(min-width: 1280px) 80vw',
68+
'(min-width: 1920px) 70vw',
6969
]}
7070
/>
7171
{props.caption ? <RichText content={props.caption} /> : null}
@@ -83,14 +83,16 @@ export const NormalMediaBlock = (props: MediaBlockProps): JSX.Element => {
8383
<Media
8484
{...props.media}
8585
srcSizes={[
86-
'80vw',
87-
'media(min-width: 764px) 90vw',
88-
'media(min-width: 1024px) 80vw',
89-
'media(min-width: 1280px) 63vw',
90-
'media(min-width: 1563px) 51vw',
91-
'media(min-width: 1920px) 42vw',
86+
'(max-width: 763px) 80vw',
87+
'(min-width: 764px) 90vw',
88+
'(min-width: 1024px) 80vw',
89+
'(min-width: 1280px) 63vw',
90+
'(min-width: 1563px) 51vw',
91+
'(min-width: 1920px) 42vw',
9292
]}
9393
srcBreakpoints={[
94+
{ width: 270 },
95+
{ width: 360 },
9496
{ width: 480 },
9597
{ width: 640 },
9698
{ width: 768 },

‎apps/web/src/app/components/Blocks/sections/MediaCollageBlock.tsx

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,19 @@ export const MediaCollageBlock = (
5252
<div>
5353
<Media
5454
{...media1.media}
55-
srcSizes={['70vw', 'media(min-width: 640px) 50vw']}
55+
srcSizes={[
56+
'(max-width: 639px) 70vw',
57+
'(min-width: 640px) 50vw',
58+
]}
59+
srcBreakpoints={[
60+
{ width: 270 },
61+
{ width: 360 },
62+
{ width: 480 },
63+
{ width: 640 },
64+
{ width: 768 },
65+
{ width: 1024 },
66+
{ width: 1536 },
67+
]}
5668
/>
5769
</div>
5870
</m.div>
@@ -68,14 +80,17 @@ export const MediaCollageBlock = (
6880
>
6981
<Media
7082
{...media2.media}
71-
srcSizes={['50vw', 'media(min-width: 640px) 40vw']}
83+
srcSizes={[
84+
'(max-width: 639px) 50vw',
85+
'(min-width: 640px) 40vw',
86+
]}
7287
srcBreakpoints={[
88+
{ width: 270 },
89+
{ width: 360 },
7390
{ width: 480 },
7491
{ width: 640 },
7592
{ width: 768 },
7693
{ width: 1024 },
77-
{ width: 1280 },
78-
{ width: 1536 },
7994
]}
8095
/>
8196
</m.div>
@@ -95,9 +110,20 @@ export const MediaCollageBlock = (
95110
<Media
96111
{...media3.media}
97112
srcSizes={[
98-
'64vw',
99-
'media(min-width: 640px) 55vw',
100-
'media(min-width: 1920px) 84vw',
113+
'(max-width: 639px) 64vw',
114+
'(min-width: 640px) 55vw',
115+
'(min-width: 1920px) 84vw',
116+
]}
117+
srcBreakpoints={[
118+
{ width: 270 },
119+
{ width: 360 },
120+
{ width: 480 },
121+
{ width: 640 },
122+
{ width: 768 },
123+
{ width: 1024 },
124+
{ width: 1280 },
125+
{ width: 1536 },
126+
{ width: 1920 },
101127
]}
102128
/>
103129
</div>

‎apps/web/src/app/components/Blocks/sections/MediaContentCollageBlock.tsx

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -118,20 +118,37 @@ const mediaStyles = cva(['absolute list-none m-0 p-0'], {
118118

119119
const mediaSources: Record<Variant, ResponsiveImageConfig> = {
120120
media1: {
121-
srcSizes: ['portrait-480w-avif', 'portrait-768w-avif'],
122-
srcBreakpoints: [{ width: 480 }, { width: 640 }, { width: 768 }],
121+
srcSizes: [
122+
'(max-width: 767px) 45w',
123+
'(min-width: 768px) 28vw',
124+
'(min-width: 1536px) 22w',
125+
],
126+
srcBreakpoints: [{ width: 360 }, { width: 480 }],
123127
},
124128
media2: {
125-
srcSizes: ['65vw', 'media(min-width: 768px) 33vw'],
126-
srcBreakpoints: [{ width: 480 }, { width: 640 }, { width: 768 }],
129+
srcSizes: ['(max-width: 768px) 65vw', '33vw'],
130+
srcBreakpoints: [
131+
{ width: 270 },
132+
{ width: 360 },
133+
{ width: 480 },
134+
{ width: 640 },
135+
{ width: 768 },
136+
],
127137
},
128138
media3: {
129-
srcSizes: ['media(min-width: 768px) 25vw'],
130-
srcBreakpoints: [{ width: 480 }, { width: 640 }],
139+
srcSizes: ['(min-width: 768px) 25vw'],
140+
srcBreakpoints: [
141+
{ width: 270 },
142+
{ width: 360 },
143+
{ width: 480 },
144+
{ width: 640 },
145+
],
131146
},
132147
media4: {
133-
srcSizes: ['65vw', 'media(min-width: 768px) 40vw'],
148+
srcSizes: ['(max-width: 768px) 65vw', '40vw'],
134149
srcBreakpoints: [
150+
{ width: 270 },
151+
{ width: 360 },
135152
{ width: 480 },
136153
{ width: 640 },
137154
{ width: 768 },
@@ -140,20 +157,28 @@ const mediaSources: Record<Variant, ResponsiveImageConfig> = {
140157
},
141158
media5: {
142159
srcSizes: [
143-
'45vw',
144-
'media(min-width: 640px) 65vw',
145-
'media(min-width: 768px) 33vw',
160+
'(max-width: 639px) 45vw',
161+
'(min-width: 640px) 65vw',
162+
'(min-width: 768px) 33vw',
146163
],
147164
srcBreakpoints: [
165+
{ width: 203 },
166+
{ width: 270 },
167+
{ width: 360 },
148168
{ width: 480 },
149169
{ width: 640 },
150170
{ width: 768 },
151-
{ width: 1024 },
152171
],
153172
},
154173
media6: {
155-
srcSizes: ['media(min-width: 768px) 35vw'],
156-
srcBreakpoints: [{ width: 480 }, { width: 640 }, { width: 768 }],
174+
srcSizes: ['(min-width: 768px) 35vw'],
175+
srcBreakpoints: [
176+
{ width: 270 },
177+
{ width: 360 },
178+
{ width: 480 },
179+
{ width: 640 },
180+
{ width: 768 },
181+
],
157182
},
158183
}
159184

‎apps/web/src/app/components/Blocks/sections/MediaGridBlock.tsx

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,7 @@ import {
88
import React from 'react'
99
import { LazyMotionDomAnimation } from '~/app/utils/framerMotion/LazyMotionFeatures'
1010
import { useMediaQuery } from '~/app/utils/useMediaQuery'
11-
import {
12-
type MediaGridBlockType,
13-
type Media as MediaType,
14-
} from '~/cms/payload-types'
11+
import { type MediaGridBlockType } from '~/cms/payload-types'
1512

1613
import { BackgroundColor } from '../../BackgroundColor'
1714
import { Grid, Gutter } from '../../Layout'
@@ -78,18 +75,20 @@ export const MediaGridBlock = (props: MediaGridBlockType): JSX.Element => {
7875
{...media}
7976
className='text-antique align-middle'
8077
srcSizes={[
81-
'36w',
82-
'media(min-width: 480px) 40w',
83-
'media(min-width: 768px) 43w',
84-
'media(min-width: 1024px) 29w',
85-
'media(min-width: 1280px) 23w',
86-
'media(min-width: 1536px) 19w',
87-
'media(min-width: 1920px) 15w',
78+
'(max-width: 479px) 36w',
79+
'(min-width: 480px) 40w',
80+
'(min-width: 1024px) 29w',
81+
'(min-width: 1280px) 23w',
82+
'(min-width: 1536px) 19w',
83+
'(min-width: 1920px) 15w',
84+
]}
85+
srcBreakpoints={[
86+
{ width: 360, height: 480 },
87+
{ width: 480, height: 640 },
8888
]}
89-
srcBreakpoints={[{ width: 480, height: 640 }]}
9089
/>
9190
{content ? (
92-
<div className='p text-sm md:text-base flex items-end absolute inset-0 p-4 whitespace-pre-wrap leading-7 tracking-widest md:tracking-normal md:leading-8 bg-gradient-to-b from-gray/0 via-gray/20 to-gray/80 text-antique'>
91+
<div className='p text-xs md:text-base flex items-end absolute inset-0 p-4 whitespace-pre-wrap tracking-wide md:tracking-normal md:leading-8 bg-gradient-to-b from-gray/0 via-gray/20 to-gray/80 text-antique'>
9392
{content}
9493
</div>
9594
) : null}

‎apps/web/src/app/components/PageHero/PageHero.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const ContentAboveMediaPageHero = (
3535
): JSX.Element => {
3636
return (
3737
<div className='mb-40'>
38-
<div className='container'>
38+
<div className='container pb-6'>
3939
<Grid>
4040
<div className='col-span-8 md:col-span-10 col-start-1 md:col-start-2'>
4141
<RichText
@@ -111,11 +111,12 @@ export const ContentLeftOfMediaPageHero = (
111111
decoding='sync'
112112
srcSizes={['50vw']}
113113
srcBreakpoints={[
114+
{ width: 360, height: 480 },
115+
{ width: 480 },
116+
{ width: 640 },
114117
{ width: 768 },
115118
{ width: 1024 },
116119
{ width: 1280 },
117-
{ width: 1536 },
118-
{ width: 1920 },
119120
]}
120121
/>
121122
</div>

‎apps/web/src/app/components/PageHero/heroUtils.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { type ResponsiveImageConfig } from '../Blocks/Media'
22

33
export const fullGutterMediaSources: ResponsiveImageConfig = {
44
srcSizes: [
5-
'100vw',
6-
'media(min-width: 1280px) 80vw',
7-
'media(min-width: 1920px) 70vw',
5+
'(max-width: 1279px) 100vw',
6+
'(min-width: 1280px) 80vw',
7+
'(min-width: 1920px) 70vw',
88
],
99
}

‎apps/web/src/app/utils/useMediaQuery.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react'
22

33
/**
44
* More performant than window.innerWidth and context (w/o useMemo)
5+
* Eg. useMediaQuery('only screen and (min-width: 1024px)', false)
56
* @param {String} query
67
* @param {Boolean} serverFallback
78
* @return {Boolean} Whether devices matches the media query

0 commit comments

Comments
 (0)