refactor 404 page

pull/3397/head
Rigel Kent 2020-12-03 13:13:46 +01:00
parent 5bfc33b6f1
commit 19b7ebfaa8
No known key found for this signature in database
GPG Key ID: 5E53E96A494E452F
7 changed files with 128 additions and 18 deletions

View File

@ -124,7 +124,7 @@ const myAccountRoutes: Routes = [
component: MyAccountApplicationsComponent, component: MyAccountApplicationsComponent,
data: { data: {
meta: { meta: {
title: 'Applications' title: $localize`Applications`
} }
} }
} }

View File

@ -1,13 +1,14 @@
import { NgModule } from '@angular/core' import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router' import { RouterModule, Routes } from '@angular/router'
import { PageNotFoundComponent } from './page-not-found.component' import { PageNotFoundComponent } from './page-not-found.component'
import { MetaGuard } from '@ngx-meta/core' import { MenuGuards } from '@app/core'
const pageNotFoundRoutes: Routes = [ const pageNotFoundRoutes: Routes = [
{ {
path: '', path: '',
component: PageNotFoundComponent, component: PageNotFoundComponent,
canActivate: [ MetaGuard ], canActivate: [ MenuGuards.close(true) ],
canDeactivate: [ MenuGuards.open(true) ],
data: { data: {
meta: { meta: {
title: $localize`Not found` title: $localize`Not found`

View File

@ -1,7 +1,32 @@
<div class="root"> <div class="root">
<img src="/client/assets/images/mascot/defeated.svg" alt="404 mascot"> <div *ngIf="status === 404" class="box">
<strong>{{ status }}.</strong>
<span class="ml-1 text-muted" i18n>That's an error.</span>
<div class="text" i18n> <div class="text mt-4" i18n>
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.
</div>
<div class="text-muted mt-4">
<span i18n="Possible reasons preceding a list of reasons a `Not Found` error page may occur">Possible reasons:</span>
<ul>
<li i18n>The page may have been moved or deleted</li>
<li i18n>You may have used an outdated or broken link</li>
<li i18n>You may have typed the address or URL incorrectly</li>
</ul>
</div>
</div> </div>
<div *ngIf="status === 418" class="box">
<strong>{{ status }}.</strong>
<span class="ml-1 text-muted">I'm a teapot.</span>
<div class="text mt-4" i18n="Description of a tea flavour, keeping the 'requested entity body' as a technical expression referring to a web request">
The requested entity body blends sweet bits with a mellow earthiness.
</div>
<div class="text-muted" i18n="This is about Sepia's tea">Sepia seems to like it.</div>
</div>
<img src='/client/assets/images/mascot/{{ getMascotName() }}.svg' alt='{{ status }} mascot'>
</div> </div>

View File

@ -1,17 +1,48 @@
@import '_variables';
@import '_mixins';
.root { .root {
height: 100%; height: 100%;
width: 100%; margin-left: auto;
margin-right: auto;
text-align: center; text-align: center;
padding-top: 150px; padding-top: 150px;
display: flex;
justify-content: center;
flex-direction: column-reverse;
.box {
text-align: left;
font-size: 120%;
padding: 0 15px;
}
img { img {
margin-bottom: 75px; margin-left: auto;
width: 220px; width: 220px;
height: auto; height: auto;
} }
.text { @media screen and (max-width: $mobile-view) {
font-size: 30px; 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) { @media screen and (max-height: 600px) {

View File

@ -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({ @Component({
selector: 'my-page-not-found', selector: 'my-page-not-found',
templateUrl: './page-not-found.component.html', templateUrl: './page-not-found.component.html',
styleUrls: [ './page-not-found.component.scss' ] 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'
}
}
} }

View File

@ -26,23 +26,49 @@ export class OpenMenuGuard extends MenuGuard {
constructor (menu: MenuService, screen: ScreenService) { super(menu, screen, true) } 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() @Injectable()
export class CloseMenuGuard extends MenuGuard { export class CloseMenuGuard extends MenuGuard {
constructor (menu: MenuService, screen: ScreenService) { super(menu, screen, false) } 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() @Injectable()
export class MenuGuards { export class MenuGuards {
public static guards = [ public static guards = [
OpenMenuGuard, OpenMenuGuard,
CloseMenuGuard OpenMenuAlwaysGuard,
CloseMenuGuard,
CloseMenuAlwaysGuard
] ]
static open () { static open (always?: boolean) {
return OpenMenuGuard return always
? OpenMenuAlwaysGuard
: OpenMenuGuard
} }
static close () { static close (always?: boolean) {
return CloseMenuGuard return always
? CloseMenuAlwaysGuard
: CloseMenuGuard
} }
} }

View File

@ -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, * 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 * 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, I_AM_A_TEAPOT_418 = 418,