Skip to content

Commit 7dfdb2b

Browse files
marlo-longleymarlo-longley
committed
Fix layout issues in ManifestList
1 parent 9ccb60e commit 7dfdb2b

File tree

2 files changed

+80
-83
lines changed

2 files changed

+80
-83
lines changed

‎src/components/ManifestListItem.jsx‎

Lines changed: 62 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -114,81 +114,89 @@ export function ManifestListItem({
114114
className={active ? 'active' : ''}
115115
data-manifestid={manifestId}
116116
data-active={active}
117+
sx={{ width: '100%' }}
117118
>
118119
{ready ? (
119-
<Grid container className={ns('manifest-list-item')}>
120-
<Grid size={{ sm: 6, xs: 12 }} sx={{ flex: '0 0 50%' }}>
120+
<Grid
121+
container
122+
className={ns('manifest-list-item')}
123+
sx={{ width: '100%', alignItems: 'center', flexWrap: 'nowrap' }}
124+
>
125+
<Grid size={{ sm: 5, xs: 12 }}>
121126
<ButtonBase
122127
ref={buttonRef}
123128
className={ns('manifest-list-item-title')}
124129
onClick={handleOpenButtonClick}
130+
sx={{ justifyContent: 'flex-start', alignItems: 'center', width: '100%' }}
125131
>
126-
<Grid
127-
container
128-
sx={{
129-
textAlign: 'left',
130-
textTransform: 'initial',
131-
}}
132-
component="div"
133-
>
134-
<Grid size={{ sm: 3, xs: 4 }} component="div">
135-
{thumbnail
136-
? (
137-
<StyledThumbnail
138-
className={[ns('manifest-list-item-thumb')]}
139-
src={[thumbnail]}
140-
alt=""
141-
height="80"
142-
unloader={(
143-
<Skeleton
144-
variant="rectangular"
145-
animation={false}
146-
sx={{ bgcolor: 'grey[300]' }}
147-
height={80}
148-
width={120}
149-
/>
150-
)}
151-
/>
152-
)
153-
: <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="rectangular" height={80} width={120} />}
132+
<Grid container component="div" sx={{ width: '100%' }}>
133+
{/* <Grid size={3} sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', width: 120, flexShrink: 0, }} > */}
134+
<Grid size={3} sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }} >
135+
{thumbnail ? (
136+
<StyledThumbnail
137+
className={[ns('manifest-list-item-thumb')]}
138+
src={[thumbnail]}
139+
alt=""
140+
height="80"
141+
unloader={(
142+
<Skeleton
143+
variant="rectangular"
144+
animation={false}
145+
sx={{ bgcolor: 'grey[300]' }}
146+
height={80}
147+
width={120}
148+
/>
149+
)}
150+
/>
151+
) : (
152+
<Skeleton
153+
sx={{ bgcolor: 'grey[300]' }}
154+
variant="rectangular"
155+
height={80}
156+
width={120}
157+
/>
158+
)}
154159
</Grid>
155-
<Grid size={{ sm: 9, xs: 8 }} component="div" paddingLeft={2}>
160+
<Grid size={9} sx={{ paddingLeft: 2, alignContent: 'center' }}>
156161
{isCollection && (
157-
<Typography component="div" variant="overline">
162+
<Typography component="div" variant="overline" sx={{ textAlign: 'left' }}>
158163
{t(isMultipart ? 'multipartCollection' : 'collection')}
159164
</Typography>
160165
)}
161-
<Typography component="div" variant="h6">
166+
<Typography component="div" variant="h6" sx={{ textAlign: 'left' }}>
162167
{title || manifestId}
163168
</Typography>
164169
</Grid>
165170
</Grid>
166171
</ButtonBase>
167172
</Grid>
168173

169-
<Grid size={{ sm: 4, xs: 8 }} sx={{ flex: 1 }}>
170-
<Typography className={ns('manifest-list-item-provider')}>{provider}</Typography>
171-
<Typography>{t('numItems', { count: size, number: size })}</Typography>
174+
<Grid size={{ sm: 4, xs: 8 }} >
175+
<Typography className={ns('manifest-list-item-provider')}>
176+
{provider}
177+
</Typography>
178+
<Typography>
179+
{t('numItems', { count: size, number: size })}
180+
</Typography>
172181
</Grid>
173182

174-
<Grid size={{ sm: 2, xs: 4 }} sx={{ flex: 1 }}>
175-
{manifestLogo
176-
&& (
177-
<StyledLogo
178-
src={[manifestLogo]}
179-
alt=""
180-
role="presentation"
181-
unloader={(
182-
<Skeleton
183-
variant="rectangular"
184-
animation={false}
185-
sx={{ bgcolor: 'grey[300]' }}
186-
height={60}
187-
width={60}
188-
/>
189-
)}
190-
/>
191-
)}
183+
<Grid size={{ sm: 3, xs: 4 }}>
184+
{manifestLogo && (
185+
<StyledLogo
186+
src={[manifestLogo]}
187+
alt=""
188+
role="presentation"
189+
unloader={(
190+
<Skeleton
191+
variant="rectangular"
192+
animation={false}
193+
sx={{ bgcolor: 'grey[300]' }}
194+
height={60}
195+
width={60}
196+
/>
197+
)}
198+
/>
199+
)}
192200
</Grid>
193201
</Grid>
194202
) : (

‎src/components/ManifestListItemError.jsx‎

Lines changed: 18 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -14,37 +14,26 @@ export function ManifestListItemError({
1414
}) {
1515
const { t } = useTranslation();
1616
return (
17-
<Grid container>
18-
<Grid container>
19-
<Grid container size={{ sm: 6, xs: 12 }}>
20-
<Grid size={{ sm: 3, xs: 4 }}>
21-
<Grid container justifyContent="center">
22-
<ErrorIcon sx={{
23-
color: 'error.main',
24-
height: '2rem',
25-
width: '2rem',
26-
}}
27-
/>
28-
</Grid>
29-
</Grid>
30-
<Grid size={{ sm: 9, xs: 8 }}>
31-
<Typography>{t('manifestError')}</Typography>
32-
<Typography sx={{ wordBreak: 'break-all' }}>{manifestId}</Typography>
33-
</Grid>
34-
</Grid>
17+
<Grid container sx={{ width: '100%', alignItems: 'center', flexWrap: 'nowrap' }}>
18+
<Grid container size={{ sm: 5, xs: 6 }} sx={{alignItems: 'center'}}>
19+
<ErrorIcon sx={{
20+
color: 'error.main',
21+
height: '2rem',
22+
width: '2rem',
23+
marginRight: '0.5rem',
24+
}}
25+
/>
26+
<Typography>{t('manifestError')}</Typography>
27+
<Typography sx={{ wordBreak: 'break-all' }}>{manifestId}</Typography>
3528
</Grid>
3629

37-
<Grid container>
38-
<Grid container size={{ sm: 6, xs: 12 }}>
39-
<Grid>
40-
<Button onClick={() => { onDismissClick(manifestId); }}>
41-
{t('dismiss')}
42-
</Button>
43-
<Button onClick={() => { onTryAgainClick(manifestId); }}>
44-
{t('tryAgain')}
45-
</Button>
46-
</Grid>
47-
</Grid>
30+
<Grid container size={{ sm: 7, xs: 6 }}>
31+
<Button onClick={() => { onDismissClick(manifestId); }}>
32+
{t('dismiss')}
33+
</Button>
34+
<Button onClick={() => { onTryAgainClick(manifestId); }}>
35+
{t('tryAgain')}
36+
</Button>
4837
</Grid>
4938
</Grid>
5039
);

0 commit comments

Comments
 (0)