external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-11 16:26:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1362 from Frank-Mayer/593

Browse Source 
added snack bar inside noscript element
This commit is contained in:
Adam Argyle
2023-04-12 14:31:49 -07:00
committed by GitHub
parent a7dff9475d 82caed4277
commit ecc715fe55
2 changed files with 27 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; position: relative;
flex: 0 1 auto; flex: 0 1 auto;
padding: 8px; padding: 8px;
height: 36px; height: 100%;
margin: auto 8px auto -8px; margin: auto 8px auto -8px;
min-width: 5em; min-width: 5em;
background: none; background: none;
@@ -78,6 +78,7 @@ snack-bar {
overflow: hidden; overflow: hidden;
transition: background-color 200ms ease; transition: background-color 200ms ease;
outline: none; outline: none;
text-decoration: none;
} }
.button:hover { .button:hover {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);

25
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 ogImage from 'url:static-build/assets/icon-large-maskable.png';
import { escapeStyleScriptContent, siteOrigin } from 'static-build/utils'; import { escapeStyleScriptContent, siteOrigin } from 'static-build/utils';
import Intro from 'shared/prerendered-app/Intro'; 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 {} interface Props {}
@@ -73,6 +75,29 @@ const Index: FunctionalComponent<Props> = () => (
<body> <body>
<div id="app"> <div id="app">
<Intro /> <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: This site requires JavaScript, which is
disabled in your browser.
</div>
<a class={snackbarStyle.button} href="/">
reload
</a>
</div>
</snack-bar>
</noscript>
</div> </div>
<script <script
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{