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

Page: Refine responsive paddings and margins (#57132)

Browse Source
This commit is contained in:
Torkel Ödegaard 2022-10-18 17:43:09 +02:00 committed by GitHub
parent e91135cf19
commit ca98dba053
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/app/core/components/PageNew/Page.tsx
View File

@ -124,13 +124,21 @@ const getStyles = (theme: GrafanaTheme2) => {
}),
pageInner: css({
label: 'page-inner',
padding: theme.spacing(3),
padding: theme.spacing(2),
boxShadow: shadow,
background: theme.colors.background.primary,
margin: theme.spacing(2, 2, 2, 1),
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
margin: theme.spacing(0, 0, 0, 0),
[theme.breakpoints.up('sm')]: {
margin: theme.spacing(0, 1, 1, 1),
},
[theme.breakpoints.up('md')]: {
margin: theme.spacing(2, 2, 2, 1),
padding: theme.spacing(3),
},
}),
canvasContent: css({
label: 'canvas-content',

30
public/app/core/components/PageNew/SectionNav.tsx
View File

@ -71,37 +71,39 @@ const getStyles = (theme: GrafanaTheme2) => {
background: theme.colors.background.canvas,
flexShrink: 0,
transition: theme.transitions.create(['width', 'max-height']),
maxHeight: 0,
[theme.breakpoints.up('md')]: {
width: 0,
},
[theme.breakpoints.down('md')]: {
maxHeight: 0,
maxHeight: 'unset',
},
}),
navExpanded: css({
maxHeight: '50vh',
[theme.breakpoints.up('md')]: {
width: '250px',
},
[theme.breakpoints.down('md')]: {
maxHeight: '50vh',
maxHeight: 'unset',
},
}),
items: css({
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(4.5, 1, 2, 2),
padding: theme.spacing(2, 1, 2, 2),
minWidth: '250px',
[theme.breakpoints.up('md')]: {
padding: theme.spacing(4.5, 1, 2, 2),
},
}),
collapseIcon: css({
border: `1px solid ${theme.colors.border.weak}`,
transform: 'translateX(50%)',
top: theme.spacing(8),
right: theme.spacing(-1),
left: '50%',
transform: 'translate(-50%, 50%) rotate(90deg)',
top: theme.spacing(0),
[theme.breakpoints.down('md')]: {
left: '50%',
transform: 'translate(-50%, 50%) rotate(90deg)',
top: theme.spacing(2),
[theme.breakpoints.up('md')]: {
transform: 'translateX(50%)',
top: theme.spacing(8),
left: theme.spacing(1),
right: theme.spacing(-1),
},
}),
};

1
public/app/core/components/PageNew/SectionNavToggle.tsx
View File

@ -17,6 +17,7 @@ export const SectionNavToggle = ({ className, isExpanded, onClick }: Props) => {
return (
<IconButton
tooltip={'Toggle section navigation'}
aria-label={isExpanded ? 'Close section navigation' : 'Open section navigation'}
name={isExpanded ? 'angle-left' : 'angle-right'}
className={classnames(className, styles.icon)}