IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-02 12:17:01 -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 { css, cx } from '@emotion/css';
import { useTheme2 } from '@grafana/ui';
import { useTheme2, styleMixins } from '@grafana/ui';
import { colorManipulator } from '@grafana/data';
export interface BrandComponentProps {
@ -24,9 +24,17 @@ const LoginBackground: FC<BrandComponentProps> = ({ className, children }) => {
bottom: 0;
top: 0;
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;
transition: opacity 3s ease-in-out;
@media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} {
background-position: center;
background-size: cover;
}
}
`;

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

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

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

@ -85,3 +85,13 @@
.alert-icon-on-top {
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;
}
}