_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/auth/auth.guard.ts
+3 -3
View File
@@ -33,7 +33,7 @@ export class AuthGuard implements CanActivate {
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('/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) {
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 });
});
}
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) {
src/app/ui/commentform/commentform.ui.scss
+2 -2
View File
@@ -4,8 +4,7 @@ mat-form-field {
form {
margin-left: 15px;
margin-bottom: 15px;
margin: 5px;
@media screen and (min-width: 576px) {
max-width: 100%;
@@ -13,6 +12,7 @@ form {
@media screen and (min-width: 768px) {
max-width: 80%;
margin: 15px;
}
@media screen and (min-width: 992px) {
src/app/ui/main/main.ui.html
+6 -6
View File
@@ -36,17 +36,17 @@
<mat-icon>history</mat-icon> {{'page.last' | i18n}}
</a>
<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>
<mat-icon>bookmarks</mat-icon> {{'bookmarks' | i18n}}
</a>
<a *ngIf="authenticated" routerLink="/settings" routerLinkActive="active" mat-list-item>
<mat-icon>tune</mat-icon> {{'settings' | i18n}}
</a>
<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></mat-divider>
<mat-divider *ngIf="authenticated" ></mat-divider>
<a *ngIf="authenticated" (click)="logout()" mat-list-item>
<mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
</a>
@@ -69,7 +69,7 @@
{{'page.imprint' | i18n}}
</a>
<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>
</mat-nav-list>
</mat-sidenav>