feat: add back button and i18n support on 404 page (#1700)
This commit is contained in:
Ashish Kumar Goyal
@@ -1,5 +1,9 @@
|
||||
<div id="particles-js"></div>
|
||||
<div class="text">
|
||||
<h1 id="title">404</h1>
|
||||
<p id="subtitle">Something went wrong.</p>
|
||||
<div class="not-found-container">
|
||||
<div id="title">404</div>
|
||||
<div id="subtitle" class="f30">{{'not_found_subtitle' | translate}}</div>
|
||||
<div class="back-button m-t-20">
|
||||
<button type="button" (click)="goBack()" mat-raised-button>
|
||||
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
|
||||
{{'labels.buttons.Back' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,28 +1,18 @@
|
||||
#particles-js {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: cornflowerblue;
|
||||
}
|
||||
@import "assets/styles/helper";
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 50%;
|
||||
transform: translate(50%,-50%);
|
||||
max-width: 90%;
|
||||
padding: 2em 3em;
|
||||
color: white;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
.not-found-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: $accent;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 120pt;
|
||||
font-size: 160px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
#subtitle {
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
declare var particlesJS: any;
|
||||
import { Component } from '@angular/core';
|
||||
import {Location} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-not-found',
|
||||
templateUrl: './not-found.component.html',
|
||||
styleUrls: ['./not-found.component.scss']
|
||||
})
|
||||
export class NotFoundComponent implements OnInit {
|
||||
export class NotFoundComponent {
|
||||
|
||||
constructor() { }
|
||||
constructor(private location: Location) {}
|
||||
|
||||
ngOnInit() {
|
||||
particlesJS.load('particles-js', '/assets/particles.json');
|
||||
goBack(): void {
|
||||
this.location.back();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,110 +0,0 @@
|
||||
{
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 80,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.5,
|
||||
"random": false,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 3,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 40,
|
||||
"size_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": true,
|
||||
"distance": 150,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.4,
|
||||
"width": 1
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 6,
|
||||
"direction": "none",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
"APP_NAME": "Mifos X",
|
||||
"Logged in as": "Logged in as",
|
||||
"Remember me": "Remember me",
|
||||
"not_found_subtitle": "Oops.. Looks like this page doesn't exist.",
|
||||
"languages": {
|
||||
"en-US": "English",
|
||||
"fr-FR": "French",
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
"APP_NAME": "Mifos X",
|
||||
"Logged in as": "Sesión activa como",
|
||||
"Remember me": "Recordarme",
|
||||
"not_found_subtitle": "Vaya... Parece que esta página no existe.",
|
||||
"languages": {
|
||||
"en-US": "Inglés",
|
||||
"fr-FR": "Francés",
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
"APP_NAME": "Mifos X",
|
||||
"Logged in as": "Logged in as",
|
||||
"Remember me": "Remember me",
|
||||
"not_found_subtitle": "Oups.. Il semble que cette page n'existe pas.",
|
||||
"languages": {
|
||||
"en-US": "English",
|
||||
"fr-FR": "French",
|
||||
|
||||
+1
-3
@@ -15,7 +15,6 @@
|
||||
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:300" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
|
||||
<!-- Load environment variables -->
|
||||
<script src="assets/env.js"></script>
|
||||
</head>
|
||||
@@ -48,7 +47,6 @@
|
||||
</div>
|
||||
</mifosx-web-app>
|
||||
|
||||
<!-- ParticlesJS -->
|
||||
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user