TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-04-21 02:43:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

Login component is now a lot prettier

Browse Source
This commit is contained in:
Isaac Abadi
2021-08-01 20:41:36 -06:00
parent dac5919ffb
commit 2756cfae17
2 changed files with 37 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/components/login/login.component.html
View File

@@ -1,5 +1,5 @@
<mat-card class="login-card"> <mat-card class="login-card">
<mat-tab-group [(selectedIndex)]="selectedTabIndex"> <mat-tab-group style="margin-bottom: 20px" [(selectedIndex)]="selectedTabIndex">
<mat-tab label="Login"> <mat-tab label="Login">
<div style="margin-top: 10px;"> <div style="margin-top: 10px;">
<mat-form-field> <mat-form-field>
@@ -11,9 +11,6 @@
<input [(ngModel)]="loginPasswordInput" (keyup.enter)="login()" type="password" matInput placeholder="Password"> <input [(ngModel)]="loginPasswordInput" (keyup.enter)="login()" type="password" matInput placeholder="Password">
</mat-form-field> </mat-form-field>
</div> </div>
<div style="margin-bottom: 10px; margin-top: 10px;">
<button [disabled]="loggingIn" color="primary" (click)="login()" mat-raised-button><ng-container i18n="Login">Login</ng-container></button>
</div>
</mat-tab> </mat-tab>
<mat-tab *ngIf="registrationEnabled" label="Register"> <mat-tab *ngIf="registrationEnabled" label="Register">
<div style="margin-top: 10px;"> <div style="margin-top: 10px;">
@@ -31,9 +28,14 @@
<input [(ngModel)]="registrationPasswordConfirmationInput" type="password" matInput placeholder="Confirm Password"> <input [(ngModel)]="registrationPasswordConfirmationInput" type="password" matInput placeholder="Confirm Password">
</mat-form-field> </mat-form-field>
</div> </div>
<div style="margin-bottom: 10px; margin-top: 10px;">
<button [disabled]="registering" color="primary" (click)="register()" mat-raised-button><ng-container i18n="Register">Register</ng-container></button>
</div>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
<div *ngIf="selectedTabIndex === 0" class="login-button-div">
<button [disabled]="loggingIn" color="primary" (click)="login()" mat-raised-button><ng-container i18n="Login">Login</ng-container></button>
<mat-progress-bar *ngIf="loggingIn" class="login-progress-bar" mode="indeterminate"></mat-progress-bar>
</div>
<div *ngIf="selectedTabIndex === 1" class="login-button-div">
<button [disabled]="registering" color="primary" (click)="register()" mat-raised-button><ng-container i18n="Register">Register</ng-container></button>
<mat-progress-bar *ngIf="registering" class="login-progress-bar" mode="indeterminate"></mat-progress-bar>
</div>
</mat-card> </mat-card>

29
src/app/components/login/login.component.scss
View File

@@ -1,6 +1,33 @@
.login-card { .login-card {
max-width: 600px; max-width: 400px;
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
margin-top: 20px; margin-top: 20px;
padding-top: 8px;
}
.login-div {
height: calc(100% - 170px);
overflow-y: auto;
}
.login-button-div {
margin-bottom: 10px;
margin-top: 10px;
margin-left: -16px;
margin-right: -16px;
bottom: 0px;
width: 100%;
position: absolute;
}
.login-button-div > button {
width: 100%;
border-radius: 0px 0px 4px 4px !important;
}
.login-progress-bar {
position: absolute;
bottom: 0px;
border-radius: 0px 0px 4px 4px;
} }