LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

(html,css) Use fab button on login page

pull/27/merge
Francis Lachapelle 2016-08-01 11:54:03 -04:00
parent 54318a2432
commit 0ec79e0411
2 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
UI/Templates/MainUI/SOGoRootPage.wox
View File

@ -51,13 +51,6 @@
<input type="password" ng-model="app.creds.password" ng-required="true"/>
</md-input-container>
<!-- CONNECT BUTTON -->
<div layout="row" layout-align="end center">
<md-button type="submit" ng-disabled='app.loginForm.$invalid' sg-ripple-click="loginContent">
<var:string label:value="Connect"/>
</md-button>
</div>
<!-- LANGUAGES SELECT -->
<div layout="row" layout-align="start end">
<md-icon>language</md-icon>
@ -94,14 +87,23 @@
<var:string label:value="Remember username"/>
</md-switch>
</div>
<!-- CONNECT BUTTON -->
<div layout="row" layout-align="space-between center">
<md-button class="md-icon-button"
label:aria-label="About"
ng-click="app.showAbout()">
<md-icon>info</md-icon>
</md-button>
<md-button class="md-fab md-accent md-hue-2" type="submit"
label:aria-label="Connect"
ng-disabled='app.loginForm.$invalid' sg-ripple-click="loginContent">
<md-icon>arrow_forward</md-icon>
</md-button>
</div>
</form>
<div layout="row" layout-align="end end" ng-cloak="ng-cloak">
<md-button class="md-icon-button"
label:aria-label="About"
ng-click="app.showAbout()">
<md-icon class="md-fg">info</md-icon>
</md-button>
</div>
<sg-ripple class="md-default-theme md-accent md-bg"
ng-class="{ 'md-warn': app.loginState == 'error' }"><!-- ripple background --></sg-ripple>
<sg-ripple-content class="md-flex ng-hide"

22
UI/WebServerResources/scss/views/LoginUI.scss
View File

@ -8,8 +8,24 @@ $sg-login-width: grid-step(5);
margin: auto;
overflow: hidden;
.sg-logo img {
width: grid-step(5);
.sg-logo {
// Center image
margin: auto;
img {
height: 100%;
width: grid-step(5);
}
}
// Overwrite Chrome autofill yellow background
@-webkit-keyframes autofill {
to {
background: transparent;
}
}
input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
/**
@ -21,8 +37,6 @@ $sg-login-width: grid-step(5);
min-height: 100%;
}
.sg-logo {
// Center content
margin: auto;
img {
margin: auto;
height: 100%;