Improve 404 navigation and styling

This commit is contained in:
shamoon
2023-08-08 23:59:13 -07:00
parent f6dadd8c82
commit 9291c98189
16 changed files with 160 additions and 74 deletions

View File

@@ -1,8 +1,17 @@
<div class="jumbotron text-center">
<svg width="5em" height="7em" viewBox="0 0 16 16" class="bi bi-emoji-frown" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683z"/>
<path d="M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
</svg>
<h1 i18n>404 Not Found</h1>
</div>
<div class="d-sm-flex flex-wrap p-2 align-items-center justify-content-center" style="height: 75vh;">
<div class="p-4 pt-0">
<h1 style="font-size: 10rem;" class="fw-bold">404</h1>
</div>
<div class="p-4 pt-0">
<h1 class="display-6" i18n>Not Found</h1>
<p>
<a class="btn btn-primary" routerLink="/dashboard">
<svg class="buttonicon me-1" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#house" />
</svg>
<ng-container i18n>Go to Dashboard</ng-container>
</a>
</p>
</div>
<app-logo extra_classes="p-3 position-absolute bottom-0 start-50 translate-middle"></app-logo>
</div>

View File

@@ -1,5 +1,7 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'
import { NotFoundComponent } from './not-found.component'
import { By } from '@angular/platform-browser'
import { LogoComponent } from '../common/logo/logo.component'
describe('NotFoundComponent', () => {
let component: NotFoundComponent
@@ -7,7 +9,7 @@ describe('NotFoundComponent', () => {
beforeEach(async () => {
TestBed.configureTestingModule({
declarations: [NotFoundComponent],
declarations: [NotFoundComponent, LogoComponent],
}).compileComponents()
fixture = TestBed.createComponent(NotFoundComponent)
@@ -18,6 +20,7 @@ describe('NotFoundComponent', () => {
it('should create component', () => {
expect(component).toBeTruthy()
expect(fixture.nativeElement.textContent).toContain('404 Not Found')
expect(fixture.nativeElement.textContent).toContain('Not Found')
expect(fixture.debugElement.queryAll(By.css('a'))).toHaveLength(1)
})
})