IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: truncate landing page descriptions to 3 lines (#61925)

Browse Source 
* truncate landing page descriptions to 3 lines

* use correct css prop names
This commit is contained in:
Ashley Harrison 2023-01-23 17:07:36 +00:00 committed by GitHub
parent 3eb065339f
commit 6b53f927b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/components/AppChrome/NavLandingPage.tsx
View File

@ -51,7 +51,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
display: 'grid', display: 'grid',
gap: theme.spacing(3), gap: theme.spacing(3),
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
gridAutoRows: '130px', gridAutoRows: '138px',
padding: theme.spacing(2, 0), padding: theme.spacing(2, 0),
}), }),
}); });

10
public/app/core/components/AppChrome/NavLandingPageCard.tsx
View File

@ -15,7 +15,7 @@ export function NavLandingPageCard({ description, text, url }: Props) {
return ( return (
<Card className={styles.card} href={url}> <Card className={styles.card} href={url}>
<Card.Heading>{text}</Card.Heading> <Card.Heading>{text}</Card.Heading>
<Card.Description>{description}</Card.Description> <Card.Description className={styles.description}>{description}</Card.Description>
</Card> </Card>
); );
} }
@ -25,4 +25,12 @@ const getStyles = (theme: GrafanaTheme2) => ({
marginBottom: 0, marginBottom: 0,
gridTemplateRows: '1fr 0 2fr', gridTemplateRows: '1fr 0 2fr',
}), }),
// Limit descriptions to 3 lines max before ellipsing
// Some plugin descriptions can be very long
description: css({
WebkitLineClamp: 3,
WebkitBoxOrient: 'vertical',
display: '-webkit-box',
overflow: 'hidden',
}),
}); });