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 @@
-
+
+
{{ 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.
+
+
+
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,