_Bastler/bstlboard-front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

styling

Browse Source
This commit is contained in:
_Bastler
2021-10-06 12:11:19 +02:00
parent a7ec8f8aa1
commit 6a61edd3f8
18 changed files with 172 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/login/login.page.html
+45 -42
View File
@@ -1,48 +1,51 @@
<mat-card *ngIf="externals && externals.length > 0">
<mat-card-content>
<h2>{{'login.external' | i18n}}</h2>
<mat-error *ngIf="externalLoginInvalid">
{{'login.external.invalid' | i18n}}
</mat-error>
</mat-card-content>
<mat-card-actions>
<a class="external-login" (click)="externalLogin(client)" *ngFor="let client of externals" mat-raised-button
color="accent">{{'login.external.client' | i18n:client.id}}</a>
<mat-slide-toggle [(ngModel)]="autologin">
{{'login.autologin' | i18n}}
</mat-slide-toggle>
</mat-card-actions>
</mat-card>
<form action="{{apiUrl}}/login" method="POST" #loginForm>
<mat-card *ngIf="internalLogin || externals && externals.length < 1">
<div class="container">
<mat-card *ngIf="externals && externals.length > 0" class="box">
<mat-card-content>
<h2>{{'login.internal' | i18n}}</h2>
<mat-error *ngIf="loginInvalid">
{{'login.invalid' | i18n}}
<h2>{{'login.external' | i18n}}</h2>
<mat-error *ngIf="externalLoginInvalid">
{{'login.external.invalid' | i18n}}
</mat-error>
<mat-form-field>
<input id="username" name="username" matInput placeholder="{{'username' | i18n}}" required matAutofocus>
<mat-error>
{{'username.missing' | i18n}}
</mat-error>
</mat-form-field>
<mat-form-field>
<input id="password" name="password" matInput type="password" placeholder="{{'password' | i18n}}"
required>
<mat-error>
{{'password.invalid.hint' | i18n}}
</mat-error>
</mat-form-field>
<mat-slide-toggle id="remember-me" name="remember-me">
{{'login.keepSession' | i18n}}
</mat-slide-toggle>
</mat-card-content>
<mat-card-actions>
<button type="submit" (click)="loginForm.submit()" mat-raised-button color="primary"
[disabled]="loginForm.invalid">{{'login' |
i18n}}<mat-icon style="font-size: 1em;">open_in_new
</mat-icon></button>
<a class="external-login" (click)="externalLogin(client)" *ngFor="let client of externals" mat-raised-button
color="accent">{{'login.external.client' | i18n:client.id}}</a>
<mat-slide-toggle [(ngModel)]="autologin">
{{'login.autologin' | i18n}}
</mat-slide-toggle>
</mat-card-actions>
</mat-card>
</form>
<form action="{{apiUrl}}/login" method="POST" #loginForm class="box">
<mat-card *ngIf="internalLogin || externals && externals.length < 1">
<mat-card-content>
<h2>{{'login.internal' | i18n}}</h2>
<mat-error *ngIf="loginInvalid">
{{'login.invalid' | i18n}}
</mat-error>
<mat-form-field>
<input id="username" name="username" matInput placeholder="{{'username' | i18n}}" required
matAutofocus>
<mat-error>
{{'username.missing' | i18n}}
</mat-error>
</mat-form-field>
<mat-form-field>
<input id="password" name="password" matInput type="password" placeholder="{{'password' | i18n}}"
required>
<mat-error>
{{'password.invalid.hint' | i18n}}
</mat-error>
</mat-form-field>
<mat-slide-toggle id="remember-me" name="remember-me">
{{'login.keepSession' | i18n}}
</mat-slide-toggle>
</mat-card-content>
<mat-card-actions>
<button type="submit" (click)="loginForm.submit()" mat-raised-button color="primary"
[disabled]="loginForm.invalid">{{'login' |
i18n}}<mat-icon style="font-size: 1em;">open_in_new
</mat-icon></button>
</mat-card-actions>
</mat-card>
</form>
</div>
src/app/pages/login/login.page.scss
+17
View File
@@ -5,4 +5,21 @@ mat-form-field {
a.external-login {
margin: 15px 0;
display: block;
}
.box {
margin: 5px;
@media screen and (min-width: 576px) {
max-width: 100%;
}
@media screen and (min-width: 768px) {
max-width: 80%;
margin: 15px;
}
@media screen and (min-width: 992px) {
max-width: 50%;
}
}
src/app/pages/notfound/notfound.page.html
+1 -1
View File
@@ -1,4 +1,4 @@
<mat-card class="accent">
<mat-card class="accent box">
<mat-card-header>
<mat-card-title>404</mat-card-title>
<mat-card-subtitle>{{'not-found' | i18n}}</mat-card-subtitle>
src/app/pages/notfound/notfound.page.scss
+16
View File
@@ -0,0 +1,16 @@
.box {
margin: 5px;
@media screen and (min-width: 576px) {
max-width: 100%;
}
@media screen and (min-width: 768px) {
max-width: 80%;
margin: 15px;
}
@media screen and (min-width: 992px) {
max-width: 50%;
}
}
src/app/pages/notfound/notfound.page.ts
+4 -6
View File
@@ -1,14 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { Component } from '@angular/core';
@Component({
selector: 'page-notfound',
templateUrl: './notfound.page.html'
templateUrl: './notfound.page.html',
styleUrls: [ './notfound.page.scss' ]
})
export class PageNotFound implements OnInit {
export class PageNotFound {
constructor() { }
ngOnInit(): void {
}
}
src/app/pages/settings/settings.page.scss
+2 -2
View File
@@ -3,8 +3,7 @@ mat-form-field, mat-slider {
}
form {
margin-left: 15px;
margin-bottom: 15px;
margin: 5px;
@media screen and (min-width: 576px) {
max-width: 100%;
@@ -12,6 +11,7 @@ form {
@media screen and (min-width: 768px) {
max-width: 80%;
margin: 15px;
}
@media screen and (min-width: 992px) {
src/app/pages/submission/submission.page.scss
+2 -2
View File
@@ -3,8 +3,7 @@ mat-form-field {
}
form {
margin-left: 15px;
margin-bottom: 15px;
margin: 5px;
@media screen and (min-width: 576px) {
max-width: 100%;
@@ -12,6 +11,7 @@ form {
@media screen and (min-width: 768px) {
max-width: 80%;
margin: 15px;
}
@media screen and (min-width: 992px) {
src/app/pages/unavailable/unavailable.page.html
+1 -1
View File
@@ -1,4 +1,4 @@
<mat-card class="warn">
<mat-card class="warn box">
<mat-card-header>
<mat-card-title>503</mat-card-title>
<mat-card-subtitle>{{'service-unavailable' | i18n}}</mat-card-subtitle>
src/app/pages/unavailable/unavailable.page.scss
+16
View File
@@ -0,0 +1,16 @@
.box {
margin: 5px;
@media screen and (min-width: 576px) {
max-width: 100%;
}
@media screen and (min-width: 768px) {
max-width: 80%;
margin: 15px;
}
@media screen and (min-width: 992px) {
max-width: 50%;
}
}
src/app/pages/unavailable/unavailable.page.ts
+2 -1
View File
@@ -4,7 +4,8 @@ import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'page-unavailable',
templateUrl: './unavailable.page.html'
templateUrl: './unavailable.page.html',
styleUrls: [ './unavailable.page.scss' ]
})
export class PageUnavailable implements OnInit {
src/app/pages/user/user.page.html
+17 -4
View File
@@ -1,6 +1,17 @@
<div class="container">
<page-notfound *ngIf="notfound"></page-notfound>
<ng-container *ngIf="user">
<mat-card class="accent box" *ngIf="notfound">
<mat-card-header>
<mat-card-title>404</mat-card-title>
<mat-card-subtitle>{{'user.not-found' | i18n}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
{{'user.not-found.text' | i18n:username}}
</p>
</mat-card-content>
</mat-card>
<div class="box" *ngIf="user">
<table>
<tr *ngIf="user.metadata && user.metadata.self">
<th></th>
@@ -16,7 +27,9 @@
</tr>
<tr>
<th>{{'user.about' | i18n}}</th>
<td><p class="text">{{user.about}}</p></td>
<td>
<p class="text">{{user.about}}</p>
</td>
</tr>
<tr>
<th></th>
@@ -27,5 +40,5 @@
<td><a routerLink="/u/c/{{user.username}}">{{'user.comments' | i18n}}</a></td>
</tr>
</table>
</ng-container>
</div>
</div>
src/app/pages/user/user.page.scss
+3 -4
View File
@@ -4,10 +4,8 @@
word-break: break-all;
}
table {
margin-left: 15px;
margin-bottom: 15px;
.box {
margin: 0px;
@media screen and (min-width: 576px) {
max-width: 100%;
@@ -15,6 +13,7 @@ table {
@media screen and (min-width: 768px) {
max-width: 80%;
margin: 15px;
}
@media screen and (min-width: 992px) {