corkine/squoosh
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added snack bar inside noscript element

Browse Source
This commit is contained in:
Frank-Mayer
2023-04-08 18:27:29 +02:00
parent cee51bf355
commit 25bc43e409
2 changed files with 26 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/shared/custom-els/snack-bar/styles.css
View File

@ -62,7 +62,7 @@ snack-bar {
position: relative;
flex: 0 1 auto;
padding: 8px;
height: 36px;
height: 100%;
margin: auto 8px auto -8px;
min-width: 5em;
background: none;
@ -78,6 +78,7 @@ snack-bar {
overflow: hidden;
transition: background-color 200ms ease;
outline: none;
text-decoration: none;
}
.button:hover {
background-color: rgba(0, 0, 0, 0.15);

24
src/static-build/pages/index/index.tsx
View File

@ -19,6 +19,8 @@ import favicon from 'url:static-build/assets/favicon.ico';
import ogImage from 'url:static-build/assets/icon-large-maskable.png';
import { escapeStyleScriptContent, siteOrigin } from 'static-build/utils';
import Intro from 'shared/prerendered-app/Intro';
import snackbarCss from 'css:../../../shared/custom-els/snack-bar/styles.css';
import * as snackbarStyle from '../../../shared/custom-els/snack-bar/styles.css';
interface Props {}
@ -73,6 +75,28 @@ const Index: FunctionalComponent<Props> = () => (
<body>
<div id="app">
<Intro />
<noscript>
<style
dangerouslySetInnerHTML={{
__html: escapeStyleScriptContent(snackbarCss),
}}
/>
<snack-bar>
<div
class={snackbarStyle.snackbar}
aria-live="assertive"
aria-atomic="true"
aria-hidden="false"
>
<div class={snackbarStyle.text}>
Initialization error: JavaScript is disabled
</div>
<a class={snackbarStyle.button} href="/">
reload
</a>
</div>
</snack-bar>
</noscript>
</div>
<script
dangerouslySetInnerHTML={{