From 6a61edd3f83b14f6693a7655337b469a1b86ec77 Mon Sep 17 00:00:00 2001 From: _Bastler Date: Wed, 6 Oct 2021 12:11:19 +0200 Subject: [PATCH] styling --- src/app/auth/auth.guard.ts | 6 +- src/app/pages/login/login.page.html | 87 ++++++++++--------- src/app/pages/login/login.page.scss | 17 ++++ src/app/pages/notfound/notfound.page.html | 2 +- src/app/pages/notfound/notfound.page.scss | 16 ++++ src/app/pages/notfound/notfound.page.ts | 10 +-- src/app/pages/settings/settings.page.scss | 4 +- src/app/pages/submission/submission.page.scss | 4 +- .../pages/unavailable/unavailable.page.html | 2 +- .../pages/unavailable/unavailable.page.scss | 16 ++++ src/app/pages/unavailable/unavailable.page.ts | 3 +- src/app/pages/user/user.page.html | 21 ++++- src/app/pages/user/user.page.scss | 7 +- src/app/ui/commentform/commentform.ui.scss | 4 +- src/app/ui/main/main.ui.html | 12 +-- src/assets/i18n/de-informal.json | 19 +++- src/assets/i18n/en.json | 19 +++- src/variables.scss | 2 +- 18 files changed, 172 insertions(+), 79 deletions(-) create mode 100644 src/app/pages/notfound/notfound.page.scss create mode 100644 src/app/pages/unavailable/unavailable.page.scss diff --git a/src/app/auth/auth.guard.ts b/src/app/auth/auth.guard.ts index 816f1d0..a430908 100644 --- a/src/app/auth/auth.guard.ts +++ b/src/app/auth/auth.guard.ts @@ -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 }); }); } diff --git a/src/app/pages/login/login.page.html b/src/app/pages/login/login.page.html index 7952947..1494f5c 100644 --- a/src/app/pages/login/login.page.html +++ b/src/app/pages/login/login.page.html @@ -1,48 +1,51 @@ - - -

{{'login.external' | i18n}}

- - {{'login.external.invalid' | i18n}} - - - - - - {{'login.autologin' | i18n}} - - - - -
- +
+ -

{{'login.internal' | i18n}}

- - {{'login.invalid' | i18n}} +

{{'login.external' | i18n}}

+ + {{'login.external.invalid' | i18n}} - - - - {{'username.missing' | i18n}} - - - - - - {{'password.invalid.hint' | i18n}} - - - - {{'login.keepSession' | i18n}} - - + + + {{'login.autologin' | i18n}} + - \ No newline at end of file + +
+ + +

{{'login.internal' | i18n}}

+ + {{'login.invalid' | i18n}} + + + + + {{'username.missing' | i18n}} + + + + + + {{'password.invalid.hint' | i18n}} + + + + {{'login.keepSession' | i18n}} + + + + + + +
+
\ No newline at end of file diff --git a/src/app/pages/login/login.page.scss b/src/app/pages/login/login.page.scss index 93dfc2a..785b8f3 100644 --- a/src/app/pages/login/login.page.scss +++ b/src/app/pages/login/login.page.scss @@ -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%; + } } \ No newline at end of file diff --git a/src/app/pages/notfound/notfound.page.html b/src/app/pages/notfound/notfound.page.html index e538720..f6afa62 100644 --- a/src/app/pages/notfound/notfound.page.html +++ b/src/app/pages/notfound/notfound.page.html @@ -1,4 +1,4 @@ - + 404 {{'not-found' | i18n}} diff --git a/src/app/pages/notfound/notfound.page.scss b/src/app/pages/notfound/notfound.page.scss new file mode 100644 index 0000000..ca4dc43 --- /dev/null +++ b/src/app/pages/notfound/notfound.page.scss @@ -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%; + } +} \ No newline at end of file diff --git a/src/app/pages/notfound/notfound.page.ts b/src/app/pages/notfound/notfound.page.ts index 7b33983..31cb809 100644 --- a/src/app/pages/notfound/notfound.page.ts +++ b/src/app/pages/notfound/notfound.page.ts @@ -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 { - } - } diff --git a/src/app/pages/settings/settings.page.scss b/src/app/pages/settings/settings.page.scss index ebacda2..c9e9ef8 100644 --- a/src/app/pages/settings/settings.page.scss +++ b/src/app/pages/settings/settings.page.scss @@ -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) { diff --git a/src/app/pages/submission/submission.page.scss b/src/app/pages/submission/submission.page.scss index 0c0ddc6..db871a6 100644 --- a/src/app/pages/submission/submission.page.scss +++ b/src/app/pages/submission/submission.page.scss @@ -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) { diff --git a/src/app/pages/unavailable/unavailable.page.html b/src/app/pages/unavailable/unavailable.page.html index fba5928..38a5ccb 100644 --- a/src/app/pages/unavailable/unavailable.page.html +++ b/src/app/pages/unavailable/unavailable.page.html @@ -1,4 +1,4 @@ - + 503 {{'service-unavailable' | i18n}} diff --git a/src/app/pages/unavailable/unavailable.page.scss b/src/app/pages/unavailable/unavailable.page.scss new file mode 100644 index 0000000..ca4dc43 --- /dev/null +++ b/src/app/pages/unavailable/unavailable.page.scss @@ -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%; + } +} \ No newline at end of file diff --git a/src/app/pages/unavailable/unavailable.page.ts b/src/app/pages/unavailable/unavailable.page.ts index 5033268..c5b4121 100644 --- a/src/app/pages/unavailable/unavailable.page.ts +++ b/src/app/pages/unavailable/unavailable.page.ts @@ -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 { diff --git a/src/app/pages/user/user.page.html b/src/app/pages/user/user.page.html index 63c5917..1ab84ab 100644 --- a/src/app/pages/user/user.page.html +++ b/src/app/pages/user/user.page.html @@ -1,6 +1,17 @@
- - + + + 404 + {{'user.not-found' | i18n}} + + +

+ {{'user.not-found.text' | i18n:username}} +

+ + + +
@@ -16,7 +27,9 @@ - + @@ -27,5 +40,5 @@
{{'user.about' | i18n}}

{{user.about}}

 +

{{user.about}}

+
{{'user.comments' | i18n}}
- +
\ No newline at end of file diff --git a/src/app/pages/user/user.page.scss b/src/app/pages/user/user.page.scss index 6bbbb5b..826c394 100644 --- a/src/app/pages/user/user.page.scss +++ b/src/app/pages/user/user.page.scss @@ -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) { diff --git a/src/app/ui/commentform/commentform.ui.scss b/src/app/ui/commentform/commentform.ui.scss index 9244fa5..affcb9d 100644 --- a/src/app/ui/commentform/commentform.ui.scss +++ b/src/app/ui/commentform/commentform.ui.scss @@ -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) { diff --git a/src/app/ui/main/main.ui.html b/src/app/ui/main/main.ui.html index 5cf3c5c..7ef1c27 100644 --- a/src/app/ui/main/main.ui.html +++ b/src/app/ui/main/main.ui.html @@ -36,17 +36,17 @@ history {{'page.last' | i18n}} + + help {{'page.faq' | i18n}} + + bookmarks {{'bookmarks' | i18n}} tune {{'settings' | i18n}} - - - help {{'page.faq' | i18n}} - - + exit_to_app {{'logout' | i18n}} @@ -69,7 +69,7 @@ {{'page.imprint' | i18n}} - {{'page.privacy-policy' | i18n}} + {{'pageprivacy-policy' | i18n}} diff --git a/src/assets/i18n/de-informal.json b/src/assets/i18n/de-informal.json index c5f76fc..742d00f 100644 --- a/src/assets/i18n/de-informal.json +++ b/src/assets/i18n/de-informal.json @@ -87,11 +87,19 @@ "keepSession": "eingeloggt bleiben" }, "logout": "Logout", - "new": "Neuste", "not-found": { ".": "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": { "firstPage": "Erste Seite", "itemsPerPage": "Einträge pro Seite:", @@ -113,6 +121,14 @@ ".": "Einstellungen", "about": "Über", "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", "username": "Username" }, @@ -136,7 +152,6 @@ "error": "Url erforderlich" } }, - "top": "Top", "user": { ".": "User", "about": "Über", diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 8760cfe..b55e5c3 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -87,11 +87,19 @@ "keepSession": "stay logged in" }, "logout": "logout", - "new": "new", "not-found": { ".": "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": { "firstPage": "first page", "itemsPerPage": "items per page:", @@ -113,6 +121,14 @@ ".": "settings", "about": "about", "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", "username": "username" }, @@ -136,7 +152,6 @@ "error": "url required" } }, - "top": "top", "user": { ".": "user", "about": "about", diff --git a/src/variables.scss b/src/variables.scss index 3596f31..21d85be 100644 --- a/src/variables.scss +++ b/src/variables.scss @@ -1,7 +1,7 @@ @use '~@angular/material' as mat; $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); $primary: mat.get-color-from-palette($light-primary);