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

Chore: Improve the mobile view of the login page (#32962)

Browse Source 
* Update the mobile view. Change login wrapper justify-content to flex-start. Make the logo and title smaller. Prevent alert-list from overflowing the screen. Increase the footer items line-height.

* Use already existed media-query and set mobile styles as default

* Update changes based on V8 changes

* Revert footer bottom spacer.
This commit is contained in:
Amir Ajorloo 2021-06-16 13:17:12 +04:30 committed by GitHub
parent b118e06b6a
commit 16850630bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/app/core/components/Branding/Branding.tsx
View File

@ -1,6 +1,6 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { useTheme2 } from '@grafana/ui'; import { useTheme2, styleMixins } from '@grafana/ui';
import { colorManipulator } from '@grafana/data'; import { colorManipulator } from '@grafana/data';
export interface BrandComponentProps { export interface BrandComponentProps {
@ -24,9 +24,17 @@ const LoginBackground: FC<BrandComponentProps> = ({ className, children }) => {
bottom: 0; bottom: 0;
top: 0; top: 0;
background: url(public/img/g8_login_${theme.isDark ? 'dark' : 'light'}.svg); background: url(public/img/g8_login_${theme.isDark ? 'dark' : 'light'}.svg);
background-size: cover; background-position: top center;
background-size: auto;
background-repeat: no-repeat;
opacity: 0; opacity: 0;
transition: opacity 3s ease-in-out; transition: opacity 3s ease-in-out;
@media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} {
background-position: center;
background-size: cover;
}
} }
`; `;

21
public/app/core/components/Login/LoginLayout.tsx
View File

@ -1,6 +1,6 @@
import React, { FC, useEffect, useState } from 'react'; import React, { FC, useEffect, useState } from 'react';
import { cx, css, keyframes } from '@emotion/css'; import { cx, css, keyframes } from '@emotion/css';
import { useStyles2 } from '@grafana/ui'; import { useStyles2, styleMixins } from '@grafana/ui';
import { Branding } from '../Branding/Branding'; import { Branding } from '../Branding/Branding';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { Footer } from '../Footer/Footer'; import { Footer } from '../Footer/Footer';
@ -79,8 +79,12 @@ export const getLoginStyles = (theme: GrafanaTheme2) => {
`, `,
loginLogo: css` loginLogo: css`
width: 100%; width: 100%;
max-width: 100px; max-width: 60px;
margin-bottom: 15px; margin-bottom: 15px;
@media ${styleMixins.mediaUp(theme.v1.breakpoints.sm)} {
max-width: 100px;
}
`, `,
loginLogoWrapper: css` loginLogoWrapper: css`
display: flex; display: flex;
@ -93,7 +97,11 @@ export const getLoginStyles = (theme: GrafanaTheme2) => {
text-align: center; text-align: center;
`, `,
mainTitle: css` mainTitle: css`
font-size: 22px;
@media ${styleMixins.mediaUp(theme.v1.breakpoints.sm)} {
font-size: 32px; font-size: 32px;
}
`, `,
subTitle: css` subTitle: css`
font-size: ${theme.typography.size.md}; font-size: ${theme.typography.size.md};
@ -101,18 +109,23 @@ export const getLoginStyles = (theme: GrafanaTheme2) => {
`, `,
loginContent: css` loginContent: css`
max-width: 478px; max-width: 478px;
width: 100%; width: calc(100% - 2rem);
display: flex; display: flex;
align-items: stretch; align-items: stretch;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
justify-content: center; justify-content: flex-start;
z-index: 1; z-index: 1;
min-height: 320px; min-height: 320px;
border-radius: ${theme.shape.borderRadius(4)}; border-radius: ${theme.shape.borderRadius(4)};
padding: ${theme.spacing(2, 0)}; padding: ${theme.spacing(2, 0)};
opacity: 0; opacity: 0;
transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;
@media ${styleMixins.mediaUp(theme.v1.breakpoints.sm)} {
min-height: 320px;
justify-content: center;
}
`, `,
loginOuterBox: css` loginOuterBox: css`
display: flex; display: flex;

10
public/sass/components/_alerts.scss
View File

@ -85,3 +85,13 @@
.alert-icon-on-top { .alert-icon-on-top {
align-items: flex-start; align-items: flex-start;
} }
@include media-breakpoint-down(sm) {
.page-alert-list {
min-width: 0;
top: 30px;
width: calc(100% - 20px);
max-height: calc(100% - 60px);
overflow-y: auto;
}
}