Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-05-28 22:33:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Nicer error page for Item page

Browse source
This commit is contained in:
Michał Gdula 2024-04-29 19:19:28 +01:00
parent 383f22bdf8
commit e2e68ab1fb
4 changed files with 33 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
front/src/pages/Page404.svelte
View file

@ -23,7 +23,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 50px; font-size: $font-size-very-fucking-big;
text-align: center; text-align: center;
} }
p { p {

2
front/src/pages/Page500.svelte
View file

@ -23,7 +23,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 50px; font-size: $font-size-very-fucking-big;
text-align: center; text-align: center;
} }
p { p {

41
front/src/pages/PageItem.svelte
View file

@ -1,5 +1,6 @@
<script> <script>
import { replace } from "svelte-spa-router"; import { replace } from "svelte-spa-router";
import { SmileySad } from "phosphor-svelte";
import MenuList from "%/components/MenuList.svelte"; import MenuList from "%/components/MenuList.svelte";
import LoadingBar from "%/components/LoadingBar.svelte"; import LoadingBar from "%/components/LoadingBar.svelte";
@ -65,8 +66,10 @@
</div> </div>
</div> </div>
{:catch error} {:catch error}
<p>Server fucking died...</p> <div id="error">
<p>{error}</p> <h1>Server fucking died...&nbsp;<SmileySad weight="fill" /></h1>
<p>Error: {error.message}</p>
</div>
{/await} {/await}
</div> </div>
@ -160,7 +163,8 @@
} }
.other { .other {
margin: 0 auto; margin-left: auto;
margin-right: auto;
max-width: $sizing-default-width; max-width: $sizing-default-width;
} }
@ -168,6 +172,29 @@
position: relative; position: relative;
} }
#error {
margin-left: auto;
margin-right: auto;
padding: $spacing-large;
max-width: $sizing-default-width;
display: flex;
flex-direction: column;
> h1 {
display: flex;
justify-content: center;
align-items: center;
font-size: $font-size-very-fucking-big;
text-align: center;
}
> p {
text-align: center;
}
}
.loading { .loading {
position: relative; position: relative;
@ -208,14 +235,6 @@
} }
} }
@media only screen and (max-width: 670px) {
.announcement-banner-loading {
margin: -$spacing-small;
margin-bottom: 0;
height: 250px;
}
}
@keyframes loading{ @keyframes loading{
0%{ 0%{
background-position: -500px 0 background-position: -500px 0

1
front/src/styles/vars.scss
View file

@ -35,6 +35,7 @@ $spacing-large: 32px;
// FONT // FONT
$font-family: 'Erode', serif; $font-family: 'Erode', serif;
$font-size-very-fucking-big: 50px;
$font-size-h1: 32.44px; $font-size-h1: 32.44px;
$font-size-h2: 28.83px; $font-size-h2: 28.83px;
$font-size-h3: 25.63px; $font-size-h3: 25.63px;