IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 10:50:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: Align landing pages with designs (#55749)

Browse Source
This commit is contained in:
Laura Fernández 2022-09-27 11:16:29 +02:00 committed by GitHub
parent becdf10f0e
commit 6b6882c141
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,7 +28,6 @@ export function NavLandingPage({ navId }: Props) {
<NavLandingPageCard
key={child.id}
description={child.description}
icon={child.icon}
text={child.text}
url={child.url ?? ''}
/>
@ -46,7 +45,6 @@ export function NavLandingPage({ navId }: Props) {
<NavLandingPageCard
key={child.id}
description={child.description}
icon={child.icon}
text={child.text}
url={child.url ?? ''}
/>
@ -68,10 +66,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
}),
grid: css({
display: 'grid',
gap: theme.spacing(2),
gap: theme.spacing(3),
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
gridAutoRows: '200px',
padding: theme.spacing(2, 1),
gridAutoRows: '130px',
padding: theme.spacing(2, 0),
}),
nestedTitle: css({
margin: theme.spacing(2, 0),

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

@ -2,21 +2,19 @@ import { css } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Card, Icon, IconName, useStyles2 } from '@grafana/ui';
import { Card, useStyles2 } from '@grafana/ui';
interface Props {
description?: string;
icon?: IconName;
text: string;
url: string;
}
export function NavLandingPageCard({ description, icon, text, url }: Props) {
export function NavLandingPageCard({ description, text, url }: Props) {
const styles = useStyles2(getStyles);
return (
<Card className={styles.card} href={url}>
<Card.Heading>{text}</Card.Heading>
<Card.Figure align={'center'}>{icon && <Icon name={icon} size="xxxl" />}</Card.Figure>
<Card.Description>{description}</Card.Description>
</Card>
);
@ -25,5 +23,6 @@ export function NavLandingPageCard({ description, icon, text, url }: Props) {
const getStyles = (theme: GrafanaTheme2) => ({
card: css({
marginBottom: 0,
gridTemplateRows: '1fr 0 2fr',
}),
});