flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add error page

Browse Source
This commit is contained in:
Félix Péault
2020-03-03 17:41:06 +01:00
parent d823f28054
commit a7831d2202
3 changed files with 95 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/organisms/Footer.svelte
View File

@@ -1,37 +1,39 @@
<script> <script>
// Svelte // Svelte
import { site, currentLocation } from '../utils/store' import { site, currentLocation } from '../utils/store'
// Components // Components
import LinkTranslate from '../atoms/LinkTranslate' import LinkTranslate from '../atoms/LinkTranslate'
import Switcher from '../molecules/Switcher' import Switcher from '../molecules/Switcher'
</script> </script>
<footer class="footer"> <footer class="footer">
<div class="wrap"> <div class="wrap">
<div class="footer__left"> <div class="footer__left">
<Switcher radius="30" /> <Switcher radius="30" />
</div> </div>
<ul class="footer__right"> <ul class="footer__right">
<li> <li>
<ul> <ul>
<li> <li>
<LinkTranslate href="/credits" text="Credits" rel="prefetch" /> <LinkTranslate href="/credits" text="Credits" rel="prefetch" />
</li> </li>
<li class="instagram"> {#if $site}
<LinkTranslate href="https://instagram.com/{$site.instagram}" text="Instagram" target="_blank" rel="noopener"> <li class="instagram">
<img src="/img/icons/instagram.svg" alt="Instagram"> <LinkTranslate href="https://instagram.com/{$site.instagram}" text="Instagram" target="_blank" rel="noopener">
</LinkTranslate> <img src="/img/icons/instagram.svg" alt="Instagram">
</li> </LinkTranslate>
</ul> </li>
</li> {/if}
<li class="cetrucflotte"> </ul>
<span>A project by</span> </li>
<a href="https://cetrucflotte.com" target="_blank" rel="noopener"> <li class="cetrucflotte">
<img src="/img/logo-ctf.svg" alt="Cetrucflotte logo's"> <span>A project by</span>
</a> <a href="https://cetrucflotte.com" target="_blank" rel="noopener">
</li> <img src="/img/logo-ctf.svg" alt="Cetrucflotte logo's">
</ul> </a>
</div> </li>
</ul>
</div>
</footer> </footer>

63
src/routes/_error.svelte
View File

@@ -1,17 +1,64 @@
<script> <script>
export let status import { onMount } from 'svelte'
export let error
const dev = process.env.NODE_ENV === 'development' // Dependencies
import AOS from 'aos'
// Components
import IconArrow from '../atoms/IconArrow'
import TitleSite from '../atoms/TitleSite'
import Button from '../atoms/Button'
import InteractiveGlobe from '../molecules/InteractiveGlobe'
import Footer from '../organisms/Footer'
// Props
export let status
export let error
/*
** Run code on browser only
*/
onMount(() => {
// Scroll apparitions
if (process.browser) {
AOS.init()
}
})
</script> </script>
<svelte:head> <svelte:head>
<title>{status}</title> <title>Houses Of - {error.message}</title>
</svelte:head> </svelte:head>
<h1>{status}</h1> <section class="page">
<p>{error.message}</p> <div class="wrap">
<div class="page__top">
<a href="/" class="button-control button-control--pink dir-left">
<IconArrow direction="left" color="#fff" class="icon" />
<IconArrow direction="left" color="#fff" class="icon" hidden="true" />
</a>
{#if dev && error.stack} <TitleSite />
<pre>{error.stack}</pre> </div>
<div class="page__description style-description">
<p>
Oh no…
Looks like something wrong just happened. Like a nasty error {status}.
</p>
<Button href="/" class="button" text="Go back to the homepage" on:click={() => window.location.href = '/'} />
</div>
<InteractiveGlobe type="part" />
</div>
<Footer />
</section>
{#if process.env.NODE_ENV === 'development' && error.stack}
<div class="wrap">
<pre>{error.stack}</pre>
</div>
{/if} {/if}

8
src/style/pages/_page.scss
View File

@@ -38,6 +38,14 @@
max-width: 472px; max-width: 472px;
margin-bottom: 120px; margin-bottom: 120px;
} }
// Some margins
h1 + p {
margin-top: 24px;
}
p + .button {
margin-top: 40px;
}
} }
// Category // Category