_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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/auth/auth.guard.ts
View File

@ -33,7 +33,7 @@ export class AuthGuard implements CanActivate {
return true; return true;
} }
return that.router.navigateByUrl(that.router.parseUrl('/unavailable?target=' + next.url), { skipLocationChange: true }); return that.router.navigateByUrl(that.router.parseUrl('/unavailable?target=' + encodeURIComponent(state.url)), { skipLocationChange: true });
}); });
} }
} }
@ -78,7 +78,7 @@ export class AuthenticatedGuard implements CanActivate {
return that.router.navigateByUrl(that.router.parseUrl('/login?target=' + encodeURIComponent(state.url)), { skipLocationChange: true, replaceUrl: true }); return that.router.navigateByUrl(that.router.parseUrl('/login?target=' + encodeURIComponent(state.url)), { skipLocationChange: true, replaceUrl: true });
} }
return that.router.navigateByUrl(that.router.parseUrl('/unavailable?target=' + next.url), { skipLocationChange: true }); return that.router.navigateByUrl(that.router.parseUrl('/unavailable?target=' + encodeURIComponent(state.url)), { skipLocationChange: true });
}); });
} }
} }
@ -98,7 +98,7 @@ export class AnonymousGuard implements CanActivate {
if (error instanceof RequestError && (error as RequestError).getResponse().status == 401) { if (error instanceof RequestError && (error as RequestError).getResponse().status == 401) {
return true; return true;
} }
return that.router.navigateByUrl(that.router.parseUrl('/unavailable?target=' + next.url), { replaceUrl: true }); return that.router.navigateByUrl(that.router.parseUrl('/unavailable?target=' + encodeURIComponent(state.url)), { replaceUrl: true });
}); });
} }

87
src/app/pages/login/login.page.html
View File

@ -1,48 +1,51 @@
<mat-card *ngIf="externals && externals.length > 0"> <div class="container">
<mat-card-content> <mat-card *ngIf="externals && externals.length > 0" class="box">
<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">
<mat-card-content> <mat-card-content>
<h2>{{'login.internal' | i18n}}</h2> <h2>{{'login.external' | i18n}}</h2>
<mat-error *ngIf="loginInvalid"> <mat-error *ngIf="externalLoginInvalid">
{{'login.invalid' | i18n}} {{'login.external.invalid' | i18n}}
</mat-error> </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-content>
<mat-card-actions> <mat-card-actions>
<button type="submit" (click)="loginForm.submit()" mat-raised-button color="primary" <a class="external-login" (click)="externalLogin(client)" *ngFor="let client of externals" mat-raised-button
[disabled]="loginForm.invalid">{{'login' | color="accent">{{'login.external.client' | i18n:client.id}}</a>
i18n}}<mat-icon style="font-size: 1em;">open_in_new <mat-slide-toggle [(ngModel)]="autologin">
</mat-icon></button> {{'login.autologin' | i18n}}
</mat-slide-toggle>
</mat-card-actions> </mat-card-actions>
</mat-card> </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>

17
src/app/pages/login/login.page.scss
View File

@ -6,3 +6,20 @@ a.external-login {
margin: 15px 0; margin: 15px 0;
display: block; 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%;
}
}

2
src/app/pages/notfound/notfound.page.html
View File

@ -1,4 +1,4 @@
<mat-card class="accent"> <mat-card class="accent box">
<mat-card-header> <mat-card-header>
<mat-card-title>404</mat-card-title> <mat-card-title>404</mat-card-title>
<mat-card-subtitle>{{'not-found' | i18n}}</mat-card-subtitle> <mat-card-subtitle>{{'not-found' | i18n}}</mat-card-subtitle>

16
src/app/pages/notfound/notfound.page.scss Normal file
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%;
}
}

10
src/app/pages/notfound/notfound.page.ts
View File

@ -1,14 +1,12 @@
import { Component, OnInit } from '@angular/core'; import { Component } from '@angular/core';
@Component({ @Component({
selector: 'page-notfound', selector: 'page-notfound',
templateUrl: './notfound.page.html' templateUrl: './notfound.page.html',
styleUrls: [ './notfound.page.scss' ]
}) })
export class PageNotFound implements OnInit { export class PageNotFound {
constructor() { } constructor() { }
ngOnInit(): void {
}
} }

4
src/app/pages/settings/settings.page.scss
View File

@ -3,8 +3,7 @@ mat-form-field, mat-slider {
} }
form { form {
margin-left: 15px; margin: 5px;
margin-bottom: 15px;
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
max-width: 100%; max-width: 100%;
@ -12,6 +11,7 @@ form {
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
max-width: 80%; max-width: 80%;
margin: 15px;
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {

4
src/app/pages/submission/submission.page.scss
View File

@ -3,8 +3,7 @@ mat-form-field {
} }
form { form {
margin-left: 15px; margin: 5px;
margin-bottom: 15px;
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
max-width: 100%; max-width: 100%;
@ -12,6 +11,7 @@ form {
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
max-width: 80%; max-width: 80%;
margin: 15px;
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {

2
src/app/pages/unavailable/unavailable.page.html
View File

@ -1,4 +1,4 @@
<mat-card class="warn"> <mat-card class="warn box">
<mat-card-header> <mat-card-header>
<mat-card-title>503</mat-card-title> <mat-card-title>503</mat-card-title>
<mat-card-subtitle>{{'service-unavailable' | i18n}}</mat-card-subtitle> <mat-card-subtitle>{{'service-unavailable' | i18n}}</mat-card-subtitle>

16
src/app/pages/unavailable/unavailable.page.scss Normal file
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%;
}
}

3
src/app/pages/unavailable/unavailable.page.ts
View File

@ -4,7 +4,8 @@ import { Router, ActivatedRoute } from '@angular/router';
@Component({ @Component({
selector: 'page-unavailable', selector: 'page-unavailable',
templateUrl: './unavailable.page.html' templateUrl: './unavailable.page.html',
styleUrls: [ './unavailable.page.scss' ]
}) })
export class PageUnavailable implements OnInit { export class PageUnavailable implements OnInit {

21
src/app/pages/user/user.page.html
View File

@ -1,6 +1,17 @@
<div class="container"> <div class="container">
<page-notfound *ngIf="notfound"></page-notfound> <mat-card class="accent box" *ngIf="notfound">
<ng-container *ngIf="user"> <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> <table>
<tr *ngIf="user.metadata && user.metadata.self"> <tr *ngIf="user.metadata && user.metadata.self">
<th></th> <th></th>
@ -16,7 +27,9 @@
</tr> </tr>
<tr> <tr>
<th>{{'user.about' | i18n}}</th> <th>{{'user.about' | i18n}}</th>
<td><p class="text">{{user.about}}</p></td> <td>
<p class="text">{{user.about}}</p>
</td>
</tr> </tr>
<tr> <tr>
<th></th> <th></th>
@ -27,5 +40,5 @@
<td><a routerLink="/u/c/{{user.username}}">{{'user.comments' | i18n}}</a></td> <td><a routerLink="/u/c/{{user.username}}">{{'user.comments' | i18n}}</a></td>
</tr> </tr>
</table> </table>
</ng-container> </div>
</div> </div>

7
src/app/pages/user/user.page.scss
View File

@ -4,10 +4,8 @@
word-break: break-all; word-break: break-all;
} }
.box {
table { margin: 0px;
margin-left: 15px;
margin-bottom: 15px;
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
max-width: 100%; max-width: 100%;
@ -15,6 +13,7 @@ table {
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
max-width: 80%; max-width: 80%;
margin: 15px;
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {

4
src/app/ui/commentform/commentform.ui.scss
View File

@ -4,8 +4,7 @@ mat-form-field {
form { form {
margin-left: 15px; margin: 5px;
margin-bottom: 15px;
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
max-width: 100%; max-width: 100%;
@ -13,6 +12,7 @@ form {
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
max-width: 80%; max-width: 80%;
margin: 15px;
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {

12
src/app/ui/main/main.ui.html
View File

@ -36,17 +36,17 @@
<mat-icon>history</mat-icon> {{'page.last' | i18n}} <mat-icon>history</mat-icon> {{'page.last' | i18n}}
</a> </a>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<a (click)="openExternal('https://wiki.bstly.de/services/bstlboard#faq','_blank')" routerLinkActive="active" mat-list-item>
<mat-icon>help</mat-icon> {{'page.faq' | i18n}}
</a>
<mat-divider *ngIf="authenticated"></mat-divider>
<a *ngIf="authenticated" routerLink="/bookmarks" routerLinkActive="active" mat-list-item> <a *ngIf="authenticated" routerLink="/bookmarks" routerLinkActive="active" mat-list-item>
<mat-icon>bookmarks</mat-icon> {{'bookmarks' | i18n}} <mat-icon>bookmarks</mat-icon> {{'bookmarks' | i18n}}
</a> </a>
<a *ngIf="authenticated" routerLink="/settings" routerLinkActive="active" mat-list-item> <a *ngIf="authenticated" routerLink="/settings" routerLinkActive="active" mat-list-item>
<mat-icon>tune</mat-icon> {{'settings' | i18n}} <mat-icon>tune</mat-icon> {{'settings' | i18n}}
</a> </a>
<mat-divider></mat-divider> <mat-divider *ngIf="authenticated" ></mat-divider>
<a (click)="openExternal('https://wiki.bstly.de/services/bstlboard#faq','_blank')" routerLinkActive="active" mat-list-item>
<mat-icon>help</mat-icon> {{'page.faq' | i18n}}
</a>
<mat-divider></mat-divider>
<a *ngIf="authenticated" (click)="logout()" mat-list-item> <a *ngIf="authenticated" (click)="logout()" mat-list-item>
<mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}} <mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
</a> </a>
@ -69,7 +69,7 @@
{{'page.imprint' | i18n}} {{'page.imprint' | i18n}}
</a> </a>
<a (click)="openExternal('https://www.bstly.de/privacy-policy/#bstlboard')" mat-list-item style="font-size: 0.7em;"> <a (click)="openExternal('https://www.bstly.de/privacy-policy/#bstlboard')" mat-list-item style="font-size: 0.7em;">
{{'page.privacy-policy' | i18n}} {{'pageprivacy-policy' | i18n}}
</a> </a>
</mat-nav-list> </mat-nav-list>
</mat-sidenav> </mat-sidenav>

19
src/assets/i18n/de-informal.json
View File

@ -87,11 +87,19 @@
"keepSession": "eingeloggt bleiben" "keepSession": "eingeloggt bleiben"
}, },
"logout": "Logout", "logout": "Logout",
"new": "Neuste",
"not-found": { "not-found": {
".": "Nicht gefunden", ".": "Nicht gefunden",
"text": "Seite nicht gefunden" "text": "Seite nicht gefunden"
}, },
"page": {
"faq": "F.A.Q.",
"hot": "Meist diskutiert",
"imprint": "Impressum",
"last": "Zuletzt diskutiert",
"new": "Neuste",
"privacy-policy": "Datenschutzerklärung",
"top": "Top"
},
"paginator": { "paginator": {
"firstPage": "Erste Seite", "firstPage": "Erste Seite",
"itemsPerPage": "Einträge pro Seite:", "itemsPerPage": "Einträge pro Seite:",
@ -113,6 +121,14 @@
".": "Einstellungen", ".": "Einstellungen",
"about": "Über", "about": "Über",
"darkTheme": "Dunkles Thema", "darkTheme": "Dunkles Thema",
"email": "E-Mail Adresse",
"gravity": {
".": "Bewertungsexponent",
"hint" : "Je niedriger der Exponent desto weniger wird das Datum bei der Bewertung gewichtet!",
"zero" : "Ein Wert von 0 bedeutet dass das Datum für die Bewertung keine Rolle spielt!"
},
"pagesettings": "Seiteneinstellungen",
"success": "Erfolgreich gespeichert",
"update": "Aktualisieren", "update": "Aktualisieren",
"username": "Username" "username": "Username"
}, },
@ -136,7 +152,6 @@
"error": "Url erforderlich" "error": "Url erforderlich"
} }
}, },
"top": "Top",
"user": { "user": {
".": "User", ".": "User",
"about": "Über", "about": "Über",

19
src/assets/i18n/en.json
View File

@ -87,11 +87,19 @@
"keepSession": "stay logged in" "keepSession": "stay logged in"
}, },
"logout": "logout", "logout": "logout",
"new": "new",
"not-found": { "not-found": {
".": "Not found", ".": "Not found",
"text": "Page not found" "text": "Page not found"
}, },
"page": {
"faq": "F.A.Q.",
"hot": "hot",
"imprint": "imprint",
"last": "last",
"new": "new",
"privacy-policy": "privacy policy",
"top": "top"
},
"paginator": { "paginator": {
"firstPage": "first page", "firstPage": "first page",
"itemsPerPage": "items per page:", "itemsPerPage": "items per page:",
@ -113,6 +121,14 @@
".": "settings", ".": "settings",
"about": "about", "about": "about",
"darkTheme": "dark theme", "darkTheme": "dark theme",
"email": "email address",
"gravity": {
".": "ranking gravity",
"hint": "The lower the gravity the less the date will be weighted bay ranking!",
"zero": "A value of 0 means that the date will be ignored by ranking!"
},
"pagesettings": "pagesettings",
"success": "success",
"update": "update", "update": "update",
"username": "username" "username": "username"
}, },
@ -136,7 +152,6 @@
"error": "url required" "error": "url required"
} }
}, },
"top": "top",
"user": { "user": {
".": "user", ".": "user",
"about": "about", "about": "about",

2
src/variables.scss
View File

@ -1,7 +1,7 @@
@use '~@angular/material' as mat; @use '~@angular/material' as mat;
$light-primary: mat.define-palette(mat.$deep-orange-palette, 800); $light-primary: mat.define-palette(mat.$deep-orange-palette, 800);
$light-accent: mat.define-palette(mat.$grey-palette, A200, A100, A400); $light-accent: mat.define-palette(mat.$grey-palette, A400, A200, A700);
$light-warn: mat.define-palette(mat.$red-palette); $light-warn: mat.define-palette(mat.$red-palette);
$primary: mat.get-color-from-palette($light-primary); $primary: mat.get-color-from-palette($light-primary);