Skip to content

Commit db03ff7

Browse files
joaquimrochajoaquimrocha
authored
Merge pull request #123 from headlamp-k8s/fix-app-catalog-default
app-catalog: fix and updates cards styles
2 parents 0f5a1f6 + 44df115 commit db03ff7

File tree

1 file changed

+138
-149
lines changed
  • app-catalog/src/components/charts

1 file changed

+138
-149
lines changed

‎app-catalog/src/components/charts/List.tsx

+138-149
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export function ChartsList({ fetchCharts = fetchChartsFromArtifact }) {
9494
function Search() {
9595
return (
9696
<TextField
97-
style={{
97+
sx={{
9898
width: '20vw',
9999
margin: '0 1rem',
100100
}}
@@ -114,7 +114,7 @@ export function ChartsList({ fetchCharts = fetchChartsFromArtifact }) {
114114
function CategoryForCharts() {
115115
return (
116116
<Autocomplete
117-
style={{
117+
sx={{
118118
width: '20vw',
119119
}}
120120
options={helmChartCategoryList}
@@ -158,10 +158,10 @@ export function ChartsList({ fetchCharts = fetchChartsFromArtifact }) {
158158
handleEditor={(open: boolean) => setEditorOpen(open)}
159159
/>
160160
<SectionHeader title={<AppCatalogTitle />} actions={[<Search />, <CategoryForCharts />]} />
161-
<Box display="flex" flexWrap="wrap" justifyContent="space-between" alignContent="start">
161+
<Box>
162162
{!charts ? (
163163
<Box
164-
style={{
164+
sx={{
165165
margin: '0 auto',
166166
}}
167167
>
@@ -170,181 +170,170 @@ export function ChartsList({ fetchCharts = fetchChartsFromArtifact }) {
170170
) : charts.length === 0 ? (
171171
<Box mt={2} mx={2}>
172172
<Typography variant="h5" component="h2">
173-
{`No charts found for ${
174-
search ? `search term: ${search}` : `category: ${chartCategory.title}`
175-
}`}
173+
{`No charts found for ${search ? `search term: ${search}` : `category: ${chartCategory.title}`
174+
}`}
176175
</Typography>
177176
</Box>
178177
) : (
179178
<Box
180179
display="flex"
181180
m={1}
182-
justifyContent="center"
183-
flexWrap="wrap"
184181
sx={{
185-
flexDirection: {
186-
xs: 'column',
187-
sm: 'row',
188-
},
182+
flexWrap: 'wrap',
183+
flexDirection: { sm: 'column', md: 'row' },
189184
}}
190185
>
191186
{charts.map(chart => {
192187
return (
193-
<Box
194-
m={1}
195-
sx={{
196-
width: {
197-
xs: '100%',
198-
sm: '100%',
199-
md: '30%',
200-
},
201-
maxWidth: {
202-
xs: '100%',
203-
sm: '100%',
204-
md: '30%',
205-
},
206-
}}
207-
>
208-
<Card>
188+
<Card sx={{
189+
margin: '1rem',
190+
display: 'flex',
191+
flexDirection: 'column',
192+
height: '100%',
193+
boxShadow: '0px 0px 5px 0px rgba(0,0,0,0.5)',
194+
width: {
195+
md: '40%',
196+
lg: '30%',
197+
},
198+
}}>
199+
<Box
200+
height="60px"
201+
display="flex"
202+
alignItems="center"
203+
justifyContent="space-between"
204+
marginTop="15px"
205+
>
206+
<CardMedia
207+
image={`https://artifacthub.io/image/${chart.logo_image_id}`}
208+
alt={`${chart.name} logo`}
209+
sx={{
210+
width: '60px',
211+
margin: '1rem',
212+
alignSelf: 'flex-start',
213+
}}
214+
component="img"
215+
/>
209216
<Box
210-
height="60px"
211217
display="flex"
212218
alignItems="center"
213-
justifyContent="space-between"
214-
marginTop="15px"
219+
justifyContent="space-around"
220+
marginRight="10px"
215221
>
216-
<CardMedia
217-
image={`https://artifacthub.io/image/${chart.logo_image_id}`}
218-
alt={`${chart.name} logo`}
219-
style={{
220-
width: '60px',
221-
margin: '1rem',
222-
alignSelf: 'flex-start',
223-
}}
224-
component="img"
225-
/>
226-
<Box
227-
display="flex"
228-
alignItems="center"
229-
justifyContent="space-around"
230-
marginRight="10px"
231-
>
232-
{(chart.cncf || chart.repository.cncf) && (
233-
<Tooltip title="CNCF Project">
234-
<Icon
235-
icon="simple-icons:cncf"
236-
style={{
237-
marginLeft: '0.5em',
238-
fontSize: '20px',
239-
}}
240-
/>
241-
</Tooltip>
242-
)}
243-
{(chart.official || chart.repository.official) && (
244-
<Tooltip title="Official Chart">
245-
<Icon
246-
icon="mdi:star-circle"
247-
style={{
248-
marginLeft: '0.5em',
249-
fontSize: '22px',
250-
}}
251-
/>
252-
</Tooltip>
253-
)}
254-
{chart.repository.verified_publisher && (
255-
<Tooltip title="Verified Publisher">
256-
<Icon
257-
icon="mdi:check-decagram"
258-
style={{
259-
marginLeft: '0.5em',
260-
fontSize: '22px',
261-
}}
262-
/>
263-
</Tooltip>
264-
)}
265-
</Box>
222+
{(chart.cncf || chart.repository.cncf) && (
223+
<Tooltip title="CNCF Project">
224+
<Icon
225+
icon="simple-icons:cncf"
226+
style={{
227+
marginLeft: '0.5em',
228+
fontSize: '20px',
229+
}}
230+
/>
231+
</Tooltip>
232+
)}
233+
{(chart.official || chart.repository.official) && (
234+
<Tooltip title="Official Chart">
235+
<Icon
236+
icon="mdi:star-circle"
237+
style={{
238+
marginLeft: '0.5em',
239+
fontSize: '22px',
240+
}}
241+
/>
242+
</Tooltip>
243+
)}
244+
{chart.repository.verified_publisher && (
245+
<Tooltip title="Verified Publisher">
246+
<Icon
247+
icon="mdi:check-decagram"
248+
style={{
249+
marginLeft: '0.5em',
250+
fontSize: '22px',
251+
}}
252+
/>
253+
</Tooltip>
254+
)}
266255
</Box>
267-
<CardContent
268-
style={{
269-
margin: '1rem 0rem',
270-
height: '25vh',
256+
</Box>
257+
<CardContent
258+
sx={{
259+
margin: '1rem 0rem',
260+
height: '25vh',
261+
overflow: 'hidden',
262+
paddingTop: 0,
263+
}}
264+
>
265+
<Box
266+
sx={{
271267
overflow: 'hidden',
272-
paddingTop: 0,
268+
textOverflow: 'ellipsis',
269+
whiteSpace: 'nowrap',
273270
}}
274271
>
272+
<Tooltip title={chart.name}>
273+
<Typography component="h2" variant="h5">
274+
<RouterLink
275+
routeName="/helm/:repoName/charts/:chartName"
276+
params={{
277+
chartName: chart.name,
278+
repoName: chart.repository.name,
279+
}}
280+
>
281+
{chart.name}
282+
</RouterLink>
283+
</Typography>
284+
</Tooltip>
285+
</Box>
286+
<Box display="flex" justifyContent="space-between" my={1}>
287+
<Typography>v{chart.version}</Typography>
275288
<Box
276-
style={{
289+
marginLeft={1}
290+
sx={{
277291
overflow: 'hidden',
278292
textOverflow: 'ellipsis',
279293
whiteSpace: 'nowrap',
280294
}}
281295
>
282-
<Tooltip title={chart.name}>
283-
<Typography component="h2" variant="h5">
284-
<RouterLink
285-
routeName="/helm/:repoName/charts/:chartName"
286-
params={{
287-
chartName: chart.name,
288-
repoName: chart.repository.name,
289-
}}
290-
>
291-
{chart.name}
292-
</RouterLink>
293-
</Typography>
296+
<Tooltip title={chart?.repository?.name || ''}>
297+
<Typography>{chart?.repository?.name || ''}</Typography>
294298
</Tooltip>
295299
</Box>
296-
<Box display="flex" justifyContent="space-between" my={1}>
297-
<Typography>v{chart.version}</Typography>
298-
<Box
299-
marginLeft={1}
300-
style={{
301-
overflow: 'hidden',
302-
textOverflow: 'ellipsis',
303-
whiteSpace: 'nowrap',
304-
}}
305-
>
306-
<Tooltip title={chart?.repository?.name || ''}>
307-
<Typography>{chart?.repository?.name || ''}</Typography>
300+
</Box>
301+
<Divider />
302+
<Box mt={1}>
303+
<Typography>
304+
{chart?.description?.slice(0, 100)}
305+
{chart?.description?.length > 100 && (
306+
<Tooltip title={chart?.description}>
307+
<span>…</span>
308308
</Tooltip>
309-
</Box>
310-
</Box>
311-
<Divider />
312-
<Box mt={1}>
313-
<Typography>
314-
{chart?.description?.slice(0, 100)}
315-
{chart?.description?.length > 100 && (
316-
<Tooltip title={chart?.description}>
317-
<span>…</span>
318-
</Tooltip>
319-
)}
320-
</Typography>
321-
</Box>
322-
</CardContent>
323-
<CardActions
324-
style={{
325-
justifyContent: 'space-between',
326-
padding: '14px',
309+
)}
310+
</Typography>
311+
</Box>
312+
</CardContent>
313+
<CardActions
314+
sx={{
315+
justifyContent: 'space-between',
316+
padding: '14px',
317+
}}
318+
>
319+
<Button
320+
sx={{
321+
backgroundColor: '#000',
322+
color: 'white',
323+
textTransform: 'none',
324+
}}
325+
onClick={() => {
326+
setSelectedChartForInstall(chart);
327+
setEditorOpen(true);
327328
}}
328329
>
329-
<Button
330-
style={{
331-
backgroundColor: '#000',
332-
color: 'white',
333-
textTransform: 'none',
334-
}}
335-
onClick={() => {
336-
setSelectedChartForInstall(chart);
337-
setEditorOpen(true);
338-
}}
339-
>
340-
Install
341-
</Button>
342-
<Link href={chart?.repository?.url} target="_blank">
343-
Learn More
344-
</Link>
345-
</CardActions>
346-
</Card>
347-
</Box>
330+
Install
331+
</Button>
332+
<Link href={chart?.repository?.url} target="_blank">
333+
Learn More
334+
</Link>
335+
</CardActions>
336+
</Card>
348337
);
349338
})}
350339
</Box>

0 commit comments

Comments
 (0)