purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +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">

44
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,19 +30,22 @@
width: 100%; width: 100%;
} }
.title { .lock-form-header {
font-size: 20px; display: flex;
margin-bottom: 8px; flex: 1 0 auto;
}
.subtitle {
color: rgba(0, 0, 0, 0.54);
}
.avatar-container { .avatar-container {
position: relative; position: relative;
margin-right: 16px; margin-right: 16px;
.avatar {
margin: 0;
}
@include media-breakpoint('xs') {
margin-right: 0;
}
mat-icon { mat-icon {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -49,6 +54,25 @@
} }
} }
.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;
}
}
}
form { form {
width: 100%; width: 100%;
margin: 32px 0 0 0; margin: 32px 0 0 0;