Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Improved 404 and 500 pages

This commit is contained in:
DrMint 2022-09-15 00:04:16 +02:00
parent 7db5578b3c
commit 06c61d0222
6 changed files with 62 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/gameover_cards.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

2
public/local-data/websiteInterfaces.json
View File

File diff suppressed because one or more lines are too long

1
src/components/Panels/MainPanel.tsx
View File

@ -52,7 +52,6 @@ export const MainPanel = (): JSX.Element => {
/>
</div>
)}
<div>
<div className="grid place-items-center">
<Link href="/" className="flex w-full justify-center">

14
src/pages/404.tsx
View File

@ -4,6 +4,8 @@ import { ReturnButton } from "components/PanelComponents/ReturnButton";
import { ContentPanel } from "components/Panels/ContentPanel";
import { getOpenGraph } from "helpers/openGraph";
import { getLangui } from "graphql/fetchLocalData";
import { Img } from "components/Img";
import { useAppLayout } from "contexts/AppLayoutContext";
/*
* ╭────────╮
@ -12,18 +14,24 @@ import { getLangui } from "graphql/fetchLocalData";
interface Props extends AppLayoutRequired {}
const FourOhFour = ({ openGraph, ...otherProps }: Props): JSX.Element => (
const FourOhFour = ({ openGraph, ...otherProps }: Props): JSX.Element => {
const { langui } = useAppLayout();
return (
<AppLayout
contentPanel={
<ContentPanel>
<h1>{openGraph.title}</h1>
<Img src={"/gameover_cards.webp"} className="animate-zoom-in drop-shadow-shade-lg" />
<div className="mt-8 grid place-items-center gap-6">
<h2>{langui.page_not_found}</h2>
<ReturnButton href="/" title="Home" />
</div>
</ContentPanel>
}
openGraph={openGraph}
{...otherProps}
/>
);
);
};
export default FourOhFour;
/*

14
src/pages/500.tsx
View File

@ -4,6 +4,8 @@ import { ReturnButton } from "components/PanelComponents/ReturnButton";
import { ContentPanel } from "components/Panels/ContentPanel";
import { getOpenGraph } from "helpers/openGraph";
import { getLangui } from "graphql/fetchLocalData";
import { Img } from "components/Img";
import { useAppLayout } from "contexts/AppLayoutContext";
/*
* ╭────────╮
@ -12,18 +14,24 @@ import { getLangui } from "graphql/fetchLocalData";
interface Props extends AppLayoutRequired {}
const FiveHundred = ({ openGraph, ...otherProps }: Props): JSX.Element => (
const FiveHundred = ({ openGraph, ...otherProps }: Props): JSX.Element => {
const { langui } = useAppLayout();
return (
<AppLayout
contentPanel={
<ContentPanel>
<h1>{openGraph.title}</h1>
<Img src={"/gameover_cards.webp"} className="animate-zoom-in drop-shadow-shade-lg" />
<div className="mt-8 grid place-items-center gap-6">
<h2>{langui.page_not_found}</h2>
<ReturnButton href="/" title="Home" />
</div>
</ContentPanel>
}
openGraph={openGraph}
{...otherProps}
/>
);
);
};
export default FiveHundred;
/*

21
src/tailwind.css
View File

@ -175,7 +175,26 @@ input[type="submit"] {
/* ANIMATION */
.animation-carret {
animation: blink 1s step-end infinite;
animation-name: blink;
animation-duration: 1s;
animation-timing-function: step-end;
animation-iteration-count: infinite;
}
.animate-zoom-in {
animation-name: zoom-in;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
@keyframes zoom-in {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes blink {