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

DataSourceModal: responsive behavior (#67944)

Browse Source
This commit is contained in:
Juan Cabanas 2023-05-09 09:52:29 -03:00 committed by GitHub
parent 4c536e5942
commit 8ec5527479
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/app/features/datasources/components/picker/DataSourceModal.tsx
View File

@ -171,11 +171,19 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
height: 80%; height: 80%;
max-width: 1200px; max-width: 1200px;
max-height: 900px; max-height: 900px;
${theme.breakpoints.down('md')} {
width: 100%;
}
`, `,
modalContent: css` modalContent: css`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100%; height: 100%;
${theme.breakpoints.down('md')} {
flex-direction: column;
}
`, `,
leftColumn: css` leftColumn: css`
display: flex; display: flex;
@ -184,6 +192,15 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
height: 100%; height: 100%;
padding-right: ${theme.spacing(4)}; padding-right: ${theme.spacing(4)};
border-right: 1px solid ${theme.colors.border.weak}; border-right: 1px solid ${theme.colors.border.weak};
${theme.breakpoints.down('md')} {
width: 100%;
height: 47%;
border-right: 0;
padding-right: 0;
border-bottom: 1px solid ${theme.colors.border.weak};
padding-bottom: ${theme.spacing(4)};
}
`, `,
rightColumn: css` rightColumn: css`
display: flex; display: flex;
@ -193,6 +210,13 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
justify-items: space-evenly; justify-items: space-evenly;
align-items: stretch; align-items: stretch;
padding-left: ${theme.spacing(4)}; padding-left: ${theme.spacing(4)};
${theme.breakpoints.down('md')} {
width: 100%;
height: 53%;
padding-left: 0;
padding-top: ${theme.spacing(4)};
}
`, `,
builtInDataSources: css` builtInDataSources: css`
flex: 1; flex: 1;
@ -209,6 +233,10 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
justify-content: flex-end; justify-content: flex-end;
${theme.breakpoints.down('md')} {
padding-bottom: ${theme.spacing(3)};
}
`, `,
searchInput: css` searchInput: css`
width: 100%; width: 100%;