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 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"> <div class="avatar-container">
<img class="avatar big" src="assets/images/avatars/katherine.jpg"> <img class="avatar big" src="assets/images/avatars/katherine.jpg">
<mat-icon class="s-36">lock</mat-icon> <mat-icon class="s-36">lock</mat-icon>
</div> </div>
<div fxLayout="column" fxLayoutAlign="start" fxLayoutAlign.sm="center center" fxFlex> <div>
<div class="title">YOUR SESSION IS LOCKED</div> <div class="title">YOUR SESSION IS LOCKED</div>
<div class="subtitle"> <div class="subtitle">
Due to inactivity, your session is locked. Enter your password to continue. Due to inactivity, your session is locked. Enter your password to continue.
</div> </div>
</div> </div>
</div> </div>
<form name="lockForm" [formGroup]="lockForm" novalidate> <form name="lockForm" [formGroup]="lockForm" novalidate>
@ -35,6 +38,7 @@
aria-label="UNLOCK" [disabled]="lockForm.invalid"> aria-label="UNLOCK" [disabled]="lockForm.invalid">
UNLOCK UNLOCK
</button> </button>
</form> </form>
<div class="message"> <div class="message">

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

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