Improved spinner logic and table design #130
This commit is contained in:
parent
7d67b08ce6
commit
43b6df2ba3
@ -1,4 +1,5 @@
|
||||
<main [class]="themeName">
|
||||
|
||||
<ng-container *ngIf="isLoggedIn; else login">
|
||||
<app-header></app-header>
|
||||
|
||||
@ -33,4 +34,4 @@
|
||||
</ng-template>
|
||||
</p-confirmDialog>
|
||||
<p-toast></p-toast>
|
||||
</main>
|
||||
</main>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<ng-container *ngIf="spinnerService.showSpinnerState">
|
||||
<ng-container *ngIf="showSpinnerState">
|
||||
<div class="spinner-component-wrapper">
|
||||
<div class="spinner-wrapper">
|
||||
<p-progressSpinner styleClass="custom-spinner" animationDuration=".8s"></p-progressSpinner>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
@ -8,9 +8,15 @@ import { SpinnerService } from 'src/app/services/spinner/spinner.service';
|
||||
})
|
||||
export class SpinnerComponent implements OnInit {
|
||||
|
||||
showSpinnerState: boolean = false;
|
||||
|
||||
constructor(
|
||||
public spinnerService: SpinnerService
|
||||
) { }
|
||||
) {
|
||||
this.spinnerService.showSpinnerState$.subscribe(value => {
|
||||
this.showSpinnerState = value;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ export class Queries {
|
||||
}
|
||||
`;
|
||||
|
||||
static levelQuery= `
|
||||
static levelQuery = `
|
||||
query LevelsList($filter: LevelFilter, $page: Page, $sort: Sort) {
|
||||
levelCount
|
||||
levels(filter: $filter, page: $page, sort: $sort) {
|
||||
@ -39,7 +39,7 @@ export class Queries {
|
||||
}
|
||||
`;
|
||||
|
||||
static usersQuery= `
|
||||
static usersQuery = `
|
||||
query UsersList($filter: UserFilter, $page: Page, $sort: Sort) {
|
||||
userCount
|
||||
users(filter: $filter, page: $page, sort: $sort) {
|
||||
@ -75,6 +75,9 @@ export class Queries {
|
||||
id
|
||||
gameServer
|
||||
}
|
||||
|
||||
createdAt
|
||||
modifiedAt
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th class="table-header-small" pSortableColumn="id">
|
||||
<th pSortableColumn="id">
|
||||
<div class="table-header-label">
|
||||
<div class="table-header-text">{{'view.server.members.headers.id' | translate}}</div>
|
||||
<p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
|
||||
@ -61,33 +61,46 @@
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th class="table-header-actions" pSortableColumn="leftServer">
|
||||
<th pSortableColumn="leftServer">
|
||||
<div class="table-header-label">
|
||||
<div class="table-header-text">{{'view.server.members.headers.left_server' | translate}}</div>
|
||||
<p-sortIcon field="leftServer" class="table-header-icon"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th class="table-header-small-dropdown" pSortableColumn="level.name">
|
||||
<th pSortableColumn="level.name">
|
||||
<div class="table-header-label">
|
||||
<div class="table-header-text">{{'view.server.members.headers.level' | translate}}</div>
|
||||
<p-sortIcon field="level.name" class="table-header-icon"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th class="table-header-actions">
|
||||
<th>
|
||||
<div class="table-header-label">
|
||||
<div class="table-header-text">{{'common.created_at' | translate}}</div>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th>
|
||||
<div class="table-header-label">
|
||||
<div class="table-header-text">{{'common.modified_at' | translate}}</div>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th>
|
||||
<div class="table-header-label">
|
||||
<div class="table-header-text">{{'view.server.members.headers.actions' | translate}}</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>
|
||||
<th class="table-header-small">
|
||||
<form [formGroup]="filterForm">
|
||||
<input type="text" pInputText formControlName="id" placeholder="{{'view.server.members.headers.id' | translate}}">
|
||||
</form>
|
||||
</th>
|
||||
<th>
|
||||
<th class="table-header-medium">
|
||||
<form [formGroup]="filterForm">
|
||||
<input type="text" pInputText formControlName="discordId" placeholder="{{'view.server.members.headers.discord_id' | translate}}">
|
||||
</form>
|
||||
@ -99,17 +112,19 @@
|
||||
</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th>
|
||||
<th class="table-header-small-dropdown">
|
||||
<form [formGroup]="filterForm">
|
||||
<p-dropdown formControlName="leftServer" [options]="leftServerOptions" placeholder="{{'view.server.members.headers.left_server' | translate}}"></p-dropdown>
|
||||
</form>
|
||||
</th>
|
||||
<th>
|
||||
<th class="table-header-small-dropdown">
|
||||
<form [formGroup]="filterForm">
|
||||
<p-dropdown formControlName="level" [options]="levels" placeholder="{{'view.server.members.headers.level' | translate}}"></p-dropdown>
|
||||
</form>
|
||||
</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th class="table-header-actions"></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
@ -185,6 +200,26 @@
|
||||
</ng-template>
|
||||
</p-cellEditor>
|
||||
</td>
|
||||
<td>
|
||||
<p-cellEditor>
|
||||
<ng-template pTemplate="input">
|
||||
{{member.createdAt | date:'dd.MM.yy HH:mm'}}
|
||||
</ng-template>
|
||||
<ng-template pTemplate="output">
|
||||
{{member.createdAt | date:'dd.MM.yy HH:mm'}}
|
||||
</ng-template>
|
||||
</p-cellEditor>
|
||||
</td>
|
||||
<td>
|
||||
<p-cellEditor>
|
||||
<ng-template pTemplate="input">
|
||||
{{member.modifiedAt | date:'dd.MM.yy HH:mm'}}
|
||||
</ng-template>
|
||||
<ng-template pTemplate="output">
|
||||
{{member.modifiedAt | date:'dd.MM.yy HH:mm'}}
|
||||
</ng-template>
|
||||
</p-cellEditor>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-wrapper">
|
||||
<button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"
|
||||
|
||||
@ -35,18 +35,17 @@ export class ProfileComponent implements OnInit {
|
||||
async ngOnInit() {
|
||||
this.data.getServerFromRoute(this.route);
|
||||
|
||||
this.spinner.showSpinner();
|
||||
if (!this.route.snapshot.params["memberId"]) {
|
||||
this.spinner.hideSpinner();
|
||||
this.router.navigate(["/dashboard"]);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
let authUser = await this.auth.getLoggedInUser();
|
||||
this.spinner.showSpinner();
|
||||
let user: UserDTO | null = authUser?.users?.find(u => u.server == this.sidebar.server$.value?.id) ?? null;
|
||||
if (!user || user?.id != this.route.snapshot.params["memberId"] && !user?.isModerator) {
|
||||
this.toast.error(this.translate.instant("view.server.profile.permission_denied"), this.translate.instant("view.server.profile.permission_denied_d"));
|
||||
this.spinner.hideSpinner();
|
||||
this.router.navigate(["/server", this.sidebar.server$.value?.id]);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1,22 +1,23 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject } from "rxjs";
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class SpinnerService {
|
||||
|
||||
showSpinnerState = false;
|
||||
showSpinnerState$ = new BehaviorSubject<boolean>(false);
|
||||
constructor() { }
|
||||
|
||||
showSpinner() {
|
||||
this.showSpinnerState = true;
|
||||
this.showSpinnerState$.next(true);
|
||||
}
|
||||
|
||||
hideSpinner() {
|
||||
this.showSpinnerState = false;
|
||||
this.showSpinnerState$.next(false);
|
||||
}
|
||||
|
||||
toggleSpinner() {
|
||||
this.showSpinnerState = !this.showSpinnerState;
|
||||
this.showSpinnerState$.next(!this.showSpinnerState$.value);
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,465 +7,471 @@
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
font-size: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
header {
|
||||
height: $headerHeight;
|
||||
height: $headerHeight;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.logo-button-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.logo-button-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.p-button.p-button-text {
|
||||
border: none;
|
||||
}
|
||||
.p-button.p-button-text {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-menu {
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
.header-menu {
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
|
||||
.p-menu-overlay {
|
||||
width: 180px !important;
|
||||
}
|
||||
.p-menu-overlay {
|
||||
width: 180px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
.p-menu-overlay {
|
||||
width: 180px !important;
|
||||
}
|
||||
.p-menu-overlay {
|
||||
width: 180px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.app {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
.sidebar {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
height: 100%;
|
||||
}
|
||||
h1 {
|
||||
// table views with filters are scrollable with 10 items, when 30px margin
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
// table views with filters are scrollable with 10 items, when 30px margin
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.component-wrapper {
|
||||
width: 100%;
|
||||
|
||||
.component-wrapper {
|
||||
width: 100%;
|
||||
.component {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
|
||||
.component {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
.content-wrapper {
|
||||
margin-bottom: 30px;
|
||||
border-radius: 5px;
|
||||
|
||||
.content-wrapper {
|
||||
margin-bottom: 30px;
|
||||
border-radius: 5px;
|
||||
.content-header {
|
||||
padding: 10px;
|
||||
|
||||
.content-header {
|
||||
padding: 10px;
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.content-column {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content-data-name {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.content-data-value {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.content-divider {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.content-input-field {
|
||||
width: 50% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
width: 100%;
|
||||
|
||||
input,
|
||||
.p-password {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.input-field-info-text {
|
||||
margin: 15px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-form-submit {
|
||||
.login-form-submit-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-sub-button-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.login-form-sub-btn {
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-form-sub-btn-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.table-caption {
|
||||
display: flex;
|
||||
|
||||
.table-caption-text {
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.table-caption-search {
|
||||
}
|
||||
}
|
||||
|
||||
.table-header-label {
|
||||
display: flex;
|
||||
|
||||
.table-header-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.table-header-icon {
|
||||
}
|
||||
}
|
||||
|
||||
.table-header-small {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.table-header-actions {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.table-header-small-dropdown {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.server-list-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.server-filter {
|
||||
}
|
||||
|
||||
.server-count {
|
||||
}
|
||||
|
||||
.server-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 15px;
|
||||
|
||||
.server {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
|
||||
padding: 20px;
|
||||
|
||||
.logo {
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 10px;
|
||||
|
||||
.name {
|
||||
margin: 0;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.data {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
|
||||
form {
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.content-column {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content-data-name {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.content-data-value {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.content-divider {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.content-input-field {
|
||||
width: 50% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
width: 100%;
|
||||
|
||||
input,
|
||||
.p-password {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.input-field-info-text {
|
||||
margin: 15px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-form-submit {
|
||||
.login-form-submit-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-sub-button-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.login-form-sub-btn {
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-form-sub-btn-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.table-caption {
|
||||
display: flex;
|
||||
|
||||
.table-caption-text {
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.table-caption-search {
|
||||
}
|
||||
}
|
||||
|
||||
.table-header-label {
|
||||
display: flex;
|
||||
|
||||
.table-header-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.table-header-icon {
|
||||
}
|
||||
}
|
||||
|
||||
.table-header-small {
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
.table-header-medium {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.table-header-actions {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.table-header-small-dropdown {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.server-list-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.server-filter {
|
||||
}
|
||||
|
||||
.server-count {
|
||||
}
|
||||
|
||||
.server-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 15px;
|
||||
|
||||
.server {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
|
||||
padding: 20px;
|
||||
|
||||
.logo {
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 10px;
|
||||
|
||||
.name {
|
||||
margin: 0;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.data {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-dialog-header {
|
||||
padding: 20px 20px 20px 20px !important;
|
||||
padding: 20px 20px 20px 20px !important;
|
||||
}
|
||||
|
||||
.p-dialog-content {
|
||||
padding: 20px !important;
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
.p-dialog-footer {
|
||||
padding: 0 20px 20px 20px !important;
|
||||
padding: 0 20px 20px 20px !important;
|
||||
}
|
||||
|
||||
.p-dialog-content {
|
||||
.content-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
margin: 1.5px 0;
|
||||
}
|
||||
.content-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
margin: 1.5px 0;
|
||||
}
|
||||
|
||||
.content-column {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
.content-column {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content-data-name {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
.content-data-name {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
|
||||
font-size: 18px;
|
||||
}
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.content-data-value {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
.content-data-value {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
|
||||
font-size: 18px;
|
||||
}
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.content-divider {
|
||||
margin: 5px 0;
|
||||
}
|
||||
.content-divider {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.content-input-field {
|
||||
width: 50% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.content-input-field {
|
||||
width: 50% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
height: $footerHeight;
|
||||
padding: 0 10px;
|
||||
width: 100%;
|
||||
height: $footerHeight;
|
||||
padding: 0 10px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.left {
|
||||
width: 50%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.left {
|
||||
width: 50%;
|
||||
// .frontend-version {
|
||||
// }
|
||||
|
||||
display: flex;
|
||||
|
||||
// .frontend-version {
|
||||
// }
|
||||
|
||||
.version-divider {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
// .backend-version {
|
||||
// }
|
||||
.version-divider {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
// .backend-version {
|
||||
// }
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.login-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
.login-form-wrapper,
|
||||
.auth-header {
|
||||
width: 350px;
|
||||
height: 450px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
.login-form-wrapper,
|
||||
.auth-header {
|
||||
width: 350px;
|
||||
height: 450px;
|
||||
border-radius: 25px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.login-form {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 25px;
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.input-field-info-text {
|
||||
margin: 15px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-field-info-text {
|
||||
margin: 15px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-form-submit {
|
||||
.login-form-submit-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-sub-button-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.login-form-sub-btn {
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-form-sub-btn-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.login-form-submit {
|
||||
.login-form-submit-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-form-wrapper {
|
||||
height: 600px;
|
||||
}
|
||||
.login-form-sub-button-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.register-confirm-form-wrapper {
|
||||
height: 250px;
|
||||
}
|
||||
.login-form-sub-btn {
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
width: 350px;
|
||||
height: 75px;
|
||||
.login-form-sub-btn-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-form-wrapper {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.register-confirm-form-wrapper {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
width: 350px;
|
||||
height: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-field {
|
||||
margin: 15px 0;
|
||||
margin: 15px 0;
|
||||
|
||||
input,
|
||||
.p-password {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
}
|
||||
input,
|
||||
.p-password {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.spinner-component-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
.spinner-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
.spinner-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user