From 19b7ebfaa822b12f6da25ad2ba10398b3ef25ec6 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Thu, 3 Dec 2020 13:13:46 +0100 Subject: [PATCH] refactor 404 page --- .../+my-account/my-account-routing.module.ts | 2 +- .../page-not-found-routing.module.ts | 5 ++- .../page-not-found.component.html | 31 +++++++++++++-- .../page-not-found.component.scss | 39 +++++++++++++++++-- .../page-not-found.component.ts | 31 ++++++++++++++- .../app/core/routing/menu-guard.service.ts | 36 ++++++++++++++--- shared/core-utils/miscs/http-error-codes.ts | 2 +- 7 files changed, 128 insertions(+), 18 deletions(-) diff --git a/client/src/app/+my-account/my-account-routing.module.ts b/client/src/app/+my-account/my-account-routing.module.ts index 226a4a7be..e2f8660fb 100644 --- a/client/src/app/+my-account/my-account-routing.module.ts +++ b/client/src/app/+my-account/my-account-routing.module.ts @@ -124,7 +124,7 @@ const myAccountRoutes: Routes = [ component: MyAccountApplicationsComponent, data: { meta: { - title: 'Applications' + title: $localize`Applications` } } } diff --git a/client/src/app/+page-not-found/page-not-found-routing.module.ts b/client/src/app/+page-not-found/page-not-found-routing.module.ts index 11399fbfd..84f400bb6 100644 --- a/client/src/app/+page-not-found/page-not-found-routing.module.ts +++ b/client/src/app/+page-not-found/page-not-found-routing.module.ts @@ -1,13 +1,14 @@ import { NgModule } from '@angular/core' import { RouterModule, Routes } from '@angular/router' import { PageNotFoundComponent } from './page-not-found.component' -import { MetaGuard } from '@ngx-meta/core' +import { MenuGuards } from '@app/core' const pageNotFoundRoutes: Routes = [ { path: '', component: PageNotFoundComponent, - canActivate: [ MetaGuard ], + canActivate: [ MenuGuards.close(true) ], + canDeactivate: [ MenuGuards.open(true) ], data: { meta: { title: $localize`Not found` diff --git a/client/src/app/+page-not-found/page-not-found.component.html b/client/src/app/+page-not-found/page-not-found.component.html index 37e382b2c..aa57b07e8 100644 --- a/client/src/app/+page-not-found/page-not-found.component.html +++ b/client/src/app/+page-not-found/page-not-found.component.html @@ -1,7 +1,32 @@
- 404 mascot +
+ {{ status }}. + That's an error. -
- Sorry, we couldn't find the page you were looking for. +
+ We couldn't find any ressource tied to the URL {{ pathname }} you were looking for. +
+ +
+ Possible reasons: + +
    +
  • The page may have been moved or deleted
    • +
  • You may have used an outdated or broken link
    • +
  • You may have typed the address or URL incorrectly
    • +
+
+
+ +
+ {{ status }}. + I'm a teapot. + +
+ The requested entity body blends sweet bits with a mellow earthiness. +
+
Sepia seems to like it.
+ + {{ status }} mascot
diff --git a/client/src/app/+page-not-found/page-not-found.component.scss b/client/src/app/+page-not-found/page-not-found.component.scss index 660f4c3b8..06c1d758e 100644 --- a/client/src/app/+page-not-found/page-not-found.component.scss +++ b/client/src/app/+page-not-found/page-not-found.component.scss @@ -1,17 +1,48 @@ +@import '_variables'; +@import '_mixins'; + .root { height: 100%; - width: 100%; + margin-left: auto; + margin-right: auto; text-align: center; padding-top: 150px; + display: flex; + justify-content: center; + flex-direction: column-reverse; + + .box { + text-align: left; + font-size: 120%; + padding: 0 15px; + } img { - margin-bottom: 75px; + margin-left: auto; width: 220px; height: auto; } - .text { - font-size: 30px; + @media screen and (max-width: $mobile-view) { + img { + margin-right: auto; + } + } + + @media screen and (min-width: $mobile-view) { + width: 400px; + } + + @media screen and (min-width: #{breakpoint(lg)}) { + width: 600px; + } + + @media screen and (min-width: #{breakpoint(xl)}) { + width: 700px; + } + + @media screen and (min-width: #{breakpoint(xxl)}) { + width: 800px; } @media screen and (max-height: 600px) { diff --git a/client/src/app/+page-not-found/page-not-found.component.ts b/client/src/app/+page-not-found/page-not-found.component.ts index c91bb8649..81830d415 100644 --- a/client/src/app/+page-not-found/page-not-found.component.ts +++ b/client/src/app/+page-not-found/page-not-found.component.ts @@ -1,10 +1,37 @@ -import { Component } from '@angular/core' +import { Component, OnInit } from '@angular/core' +import { Title } from '@angular/platform-browser' +import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' @Component({ selector: 'my-page-not-found', templateUrl: './page-not-found.component.html', styleUrls: [ './page-not-found.component.scss' ] }) -export class PageNotFoundComponent { +export class PageNotFoundComponent implements OnInit { + status = HttpStatusCode.NOT_FOUND_404 + public constructor ( + private titleService: Title + ) {} + + ngOnInit () { + if (this.pathname.includes('teapot')) { + this.status = HttpStatusCode.I_AM_A_TEAPOT_418 + this.titleService.setTitle($localize`I'm a teapot` + ' - PeerTube') + } + } + + get pathname () { + return window.location.pathname + } + + getMascotName () { + switch (this.status) { + case HttpStatusCode.I_AM_A_TEAPOT_418: + return 'happy' + case HttpStatusCode.NOT_FOUND_404: + default: + return 'defeated' + } + } } diff --git a/client/src/app/core/routing/menu-guard.service.ts b/client/src/app/core/routing/menu-guard.service.ts index 501e009c0..c4e64d434 100644 --- a/client/src/app/core/routing/menu-guard.service.ts +++ b/client/src/app/core/routing/menu-guard.service.ts @@ -26,23 +26,49 @@ export class OpenMenuGuard extends MenuGuard { constructor (menu: MenuService, screen: ScreenService) { super(menu, screen, true) } } +@Injectable() +export class OpenMenuAlwaysGuard extends MenuGuard { + constructor (menu: MenuService, screen: ScreenService) { super(menu, screen, true) } + + canActivate (): boolean { + this.menu.setMenuDisplay(this.display) + return true + } +} + @Injectable() export class CloseMenuGuard extends MenuGuard { constructor (menu: MenuService, screen: ScreenService) { super(menu, screen, false) } } +@Injectable() +export class CloseMenuAlwaysGuard extends MenuGuard { + constructor (menu: MenuService, screen: ScreenService) { super(menu, screen, false) } + + canActivate (): boolean { + this.menu.setMenuDisplay(this.display) + return true + } +} + @Injectable() export class MenuGuards { public static guards = [ OpenMenuGuard, - CloseMenuGuard + OpenMenuAlwaysGuard, + CloseMenuGuard, + CloseMenuAlwaysGuard ] - static open () { - return OpenMenuGuard + static open (always?: boolean) { + return always + ? OpenMenuAlwaysGuard + : OpenMenuGuard } - static close () { - return CloseMenuGuard + static close (always?: boolean) { + return always + ? CloseMenuAlwaysGuard + : CloseMenuGuard } } diff --git a/shared/core-utils/miscs/http-error-codes.ts b/shared/core-utils/miscs/http-error-codes.ts index 9ba725fb9..8c8b87ba0 100644 --- a/shared/core-utils/miscs/http-error-codes.ts +++ b/shared/core-utils/miscs/http-error-codes.ts @@ -291,7 +291,7 @@ export enum HttpStatusCode { /** * This code was defined in 1998 as one of the traditional IETF April Fools' jokes, in RFC 2324, Hyper Text Coffee Pot Control Protocol, * and is not expected to be implemented by actual HTTP servers. The RFC specifies this code should be returned by - * teapots requested to brew coffee. This HTTP status is used as an Easter egg in some websites, including Google.com. + * teapots requested to brew coffee. This HTTP status is used as an Easter egg in some websites, including PeerTube instances ;-). */ I_AM_A_TEAPOT_418 = 418, -- 2.41.0