Skip to content

N
nexpie-grafana-theme
Commit f77d34f7 by Johannes Schill
Options

ux: wip - Push pixels for new login, remove inline styling, change so we use… 

ux: wip - Push pixels for new login, remove inline styling, change so we use media queries using min-width instead of max-width and make sure it looks ok across all screen sizes (#9879)
parent 84aa1e89
Showing with 125 additions and 78 deletions
public/app/partials/login.html
<div class="login-container container">
<div class="login-box">
<div class="login-box-logo">
<div class="login container">
<div class="login-content">
<div class="login-branding">
<img class="logo-icon" src="public/img/grafana_icon.svg"></img>
<br>
<i class="icon-gf icon-gf-grafana_wordmark"></i>
</div>
<div class="login-inner-box">
<form name="loginForm" class="login-form-group gf-form-group" ng-hide="disableLoginForm">
<div class="login-form">
<input type="text" name="username" class="gf-form-input login-form-input" required ng-model='formModel.user' placeholder={{loginHint}}
autofocus>
</div>
<div class="login-form">
<input type="password" name="password" class="gf-form-input login-form-input" required ng-model="formModel.password" id="inputPassword"
placeholder="password">
</div>
<div class="login-button-group">
<button type="submit" class="btn btn-medium p-x-2" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
Login
<button type="submit" class="btn btn-large p-x-2" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
Log In
</button>
<div class="small" style="display:flex; align-items:center">
<a href="user/password/send-reset-email">
Forgot your password?
</a>
<div class="small login-button-forgot-password">
<a href="user/password/send-reset-email">
Forgot your password?
</a>
</div>
</div>
</form>
<div class="text-center login-divider" ng-show="oauthEnabled">
<div>
<div class="login-divider-line">
......@@ -42,7 +32,7 @@
</div>
<div>
<span class="login-divider-text">
<span ng-hide="disableLoginForm">Or</span>
<span ng-hide="disableLoginForm">or</span>
</span>
</div>
<div>
......@@ -50,10 +40,8 @@
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="login-oauth text-center" ng-show="oauthEnabled" style="width:100%">
<div class="login-oauth text-center" ng-show="oauthEnabled">
<a class="btn btn-medium btn-google login-btn" href="login/google" target="_self" ng-if="oauth.google">
Sign in with Google
</a>
......@@ -67,17 +55,15 @@
Sign in with {{oauth.generic_oauth.name}}
</a>
</div>
<div class="login-signup-box">
<div style="padding-right:1rem">
New user?
<div class="login-signup-title p-r-1">
New to Grafana?
</div>
<a class="btn btn-medium" style="color:#fafafa; border: 1px solid #fafafa">
Sign up
<a class="btn btn-medium btn-signup btn-p-x-2">
Sign Up
</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
public/sass/_variables.scss
......@@ -224,6 +224,8 @@ $btn-padding-y-xl: 11px !default;
$btn-border-radius: 2px;
$btn-semi-transparent: rgba(0,0,0,0.2) !default;
// sidemenu
$side-menu-width: 60px;
......
public/sass/components/_buttons.scss
......@@ -92,6 +92,7 @@
.btn-warning {
@include buttonBackground($btn-warning-bg, $btn-warning-bg-hl);
}
// Danger and error appear as red
.btn-danger {
@include buttonBackground($btn-danger-bg, $btn-danger-bg-hl);
......@@ -142,4 +143,7 @@
}
}
.btn-p-x-2 {
padding-left: 20px;
padding-right: 20px;
}
public/sass/pages/_login.scss
.login-container {
background-position: left;
min-height: 100%;
$login-border: #8daac5;
.login {
background-position: center;
min-height: 85vh;
background-repeat: no-repeat;
min-width: 100%;
margin-left: 0;
background-color: #000;
background-color: $black;
display: flex;
align-items: center;
justify-content: center;
......@@ -22,8 +24,8 @@ textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0px 1000px black inset;
-webkit-text-fill-color: #fafafa !important;
-webkit-box-shadow: 0 0 0px 1000px $black inset;
-webkit-text-fill-color: $gray-7 !important;
}
.login-form-group {
......@@ -34,50 +36,62 @@ select:-webkit-autofill:focus {
}
.login-form {
margin-bottom: .5rem;
margin-bottom: 1rem;
width: 100%;
}
.login-form-input {
border: 1px solid #fafafa !important;
border-radius: 4px !important;
border: 1px solid $login-border;
border-radius: 4px;
opacity: .6;
&:focus {
border: 1px solid $login-border;
}
}
.login-button-group {
display:flex;
display: flex;
flex-direction: column;
align-items: center;
justify-content:space-between;
width: 100%;
margin-top: 1rem
margin-top: .5rem
}
.login-button-forgot-password {
padding-top: 1rem;
}
.login-text {
font-size: $font-size-sm;
}
.login-box {
.login-content {
max-width: 700px;
display: flex;
align-items: stretch;
flex-direction: row;
flex-direction: column;
}
.login-box-logo {
width: 45%;
padding: 4rem;
.login-branding {
width: 100%;
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 1px solid #fafafa;
img {
width: 10rem;
flex-grow: 0;
.logo-icon {
width: 70px;
margin-bottom: 15px;
}
.icon-gf-grafana_wordmark {
color: $link-color;
position: relative;
font-size: 4rem;
font-size: 2rem;
text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
}
......@@ -87,9 +101,9 @@ select:-webkit-autofill:focus {
padding: 2rem 4rem;
display: flex;
flex-direction: column;
width: 55%;
align-items: center;
justify-content: center;
flex-grow: 1;
}
.login-tab-header {
......@@ -98,6 +112,12 @@ select:-webkit-autofill:focus {
margin-bottom: 3rem;
}
.btn-signup {
color: $white;
border: 1px solid $login-border;
background-color: $btn-semi-transparent;
}
.btn-login-tab {
background: transparent;
border: none;
......@@ -151,9 +171,10 @@ select:-webkit-autofill:focus {
}
.login-oauth {
width: 100%;
.btn {
margin: 5px;
margin: 10px 0 0;
}
.btn-google {
......@@ -195,7 +216,7 @@ select:-webkit-autofill:focus {
.login-divider-line {
width: 110px;
height: 10px;
border-bottom: 1px solid #fafafa;
border-bottom: 1px solid $gray-7;
.login-divider-text {
background-color: $panel-bg;
......@@ -213,6 +234,12 @@ select:-webkit-autofill:focus {
margin-top: 2rem
}
.login-signup-title {
justify-self: flex-start;
flex: 1;
text-align: left;
}
.login-btn {
width: 100%; margin: 0 0 1rem;
}
......@@ -257,38 +284,65 @@ select:-webkit-autofill:focus {
}
}
@include media-breakpoint-down(md) {
.login-box-logo {
img {
width: 125px;
}
.icon-gf-grafana_wordmark {
top: -5px;
font-size: 2rem;
}
@include media-breakpoint-up(sm) {
.login-content {
flex-direction: row;
}
}
@include media-breakpoint-down(xs) {
.login-box {
flex-direction: column;
.login-branding {
width: 35%;
padding: 4rem 2rem;
border-right: 1px solid $login-border;
justify-content: flex-start;
}
.login-box-logo {
border: none;
width: 100%;
padding: 0;
}
.login-inner-box {
width: 100%;
width: 65%;
padding: 1rem 2rem;
}
.login-box-logo {
img {
width: 5rem;
.login-branding {
.logo-icon {
width: 80px;
}
}
}
@include media-breakpoint-up(md) {
.login-branding {
width: 45%;
padding: 2rem 4rem;
.logo-icon {
width: 100px;
}
.icon-gf-grafana_wordmark {
top: -5px;
font-size: 2rem;
font-size: 3.2rem;
}
}
.login-inner-box {
width: 55%;
padding: 1rem 4rem;
}
.login-button-group {
flex-direction: row;
}
.login-button-forgot-password {
padding-top: 0;
padding-left: 10px;
}
}
@include media-breakpoint-up(lg) {
.login {
min-height: 100vh;
}
.login-form-input {
min-width: 300px;
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment