purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed: Lock page layout issues

Browse Source
This commit is contained in:
Sercan Yemen 2017-10-13 14:39:46 +03:00
parent be820804f2
commit 56d9830176
2 changed files with 47 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/main/content/pages/authentication/lock/lock.component.html
View File

@ -4,18 +4,21 @@
<div id="lock-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div fxLayout="row" fxLayoutAlign="start center" fxLayout.sm="column" fxLayoutAlign.sm="center center">
<div class="lock-form-header" fxLayout="column" fxLayoutAlign="center center"
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center">
<div class="avatar-container">
<img class="avatar big" src="assets/images/avatars/katherine.jpg">
<mat-icon class="s-36">lock</mat-icon>
</div>
<div fxLayout="column" fxLayoutAlign="start" fxLayoutAlign.sm="center center" fxFlex>
<div>
<div class="title">YOUR SESSION IS LOCKED</div>
<div class="subtitle">
Due to inactivity, your session is locked. Enter your password to continue.
</div>
</div>
</div>
<form name="lockForm" [formGroup]="lockForm" novalidate>
@ -35,6 +38,7 @@
aria-label="UNLOCK" [disabled]="lockForm.invalid">
UNLOCK
</button>
</form>
<div class="message">

58
src/app/main/content/pages/authentication/lock/lock.component.scss
View File

@ -17,8 +17,10 @@
}
#lock-form {
width: 384px;
max-width: 384px;
display: flex;
flex-direction: column;
width: 420px;
max-width: 420px;
padding: 48px 32px 32px 32px;
background: #FFFFFF;
@include mat-elevation(7);
@ -28,24 +30,46 @@
width: 100%;
}
.title {
font-size: 20px;
margin-bottom: 8px;
}
.lock-form-header {
display: flex;
flex: 1 0 auto;
.subtitle {
color: rgba(0, 0, 0, 0.54);
}
.avatar-container {
position: relative;
margin-right: 16px;
.avatar-container {
position: relative;
margin-right: 16px;
.avatar {
margin: 0;
}
mat-icon {
position: absolute;
bottom: 0;
right: 0;
color: mat-color($mat-red, 500);
@include media-breakpoint('xs') {
margin-right: 0;
}
mat-icon {
position: absolute;
bottom: 0;
right: 0;
color: mat-color($mat-red, 500);
}
}
.title {
font-size: 20px;
margin-bottom: 8px;
@include media-breakpoint('xs') {
margin-top: 16px;
text-align: center;
}
}
.subtitle {
color: rgba(0, 0, 0, 0.54);
@include media-breakpoint('xs') {
text-align: center;
}
}
}