feature/modal-playground: put playground in a modal dialog (#39)

Neofonie · May 16, 2024 · cc89255 · cc89255
1 parent fb3ec39
commit cc89255
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 23 deletions.
diff --git a/src/app.css b/src/app.css
@@ -17,12 +17,21 @@
   font-style: normal;
 }
 
+
+:root {
+  --font-family-base: 'Camingo', Arial, Helvetica, sans-serif;
+  --font-family-title: 'Oswald', Arial, Helvetica, sans-serif;
+  --ally-rule-lineheight: 32px;
+  --color-primary-hsl: 0deg 100% 47.5%;
+  --color-primary: hsl(var(--color-primary-hsl));
+}
+
 * {
-  font-family: 'Camingo', arial, helvetica, sans-serif;
+  font-family: var(--font-family-base);
 }
 
 a, button.link {
-  color: red;
+  color: var(--color-primary);
   text-decoration: underline;
   cursor: pointer;
 }

diff --git a/src/lib/components/show-code.svelte b/src/lib/components/show-code.svelte
@@ -1,24 +1,71 @@
 <script lang="ts">
-    let showCode: boolean = false;
-    const toggleCode = () => {
-        showCode = !showCode;
-    }
+    export let
+        title: string = undefined;
+
+    let
+        elmDialog = undefined,
+        showCode: boolean = false;
 
     $: showPlayground = showCode;
 </script>
 
-<button class="link" on:click={toggleCode}>{!showPlayground ? 'Show' : 'Hide'} Code</button>
-{#if showPlayground}
-<playground-ide line-numbers resizable class="playground-theme-zenburn">
-    <svelte:element this="script" type="sample/html" filename="index.html">
-        <slot/>
-    </svelte:element>
-</playground-ide>
-{/if}
+<button class="link" on:click={_ => elmDialog?.showModal()}>{!showPlayground ? 'Show' : 'Hide'} Code</button>
+<dialog bind:this={elmDialog}>
+    <h3><span>A11y-Code Example{title ? ': ' + title : ''}</span> <button on:click={_ => elmDialog?.close()}/></h3>
+    <playground-ide line-numbers resizable class="playground-theme-zenburn">
+        <svelte:element this="script" type="sample/html" filename="index.html">
+            <slot/>
+        </svelte:element>
+    </playground-ide>
+    <button />
+</dialog>
 
 <style>
-    :global(#playground) {
+    playground-ide {
         --playground-code-font-size: 18px;
-        --playground-highlight-color: #f00000;
+        --playground-highlight-color: var(--color-primary);
+    }
+
+    dialog {
+        box-shadow: 0 20px 20px -20px hsl(0deg 25% 25% / .25);
+        resize: both;
+        border: 1px solid var(--color-primary);
+
+        &::backdrop {
+            background-color: hsl(0deg 50% 50% / .25);
+            backdrop-filter: grayscale(.5) blur(2px);
+        }
+        & h3 {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            font-family: var(--font-family-title);
+            font-size: 1.25em;
+            padding: .25em .5em;
+            background-color: hsl(var(--color-primary-hsl) / .05);
+            color: var(--color-primary);
+
+            & * {
+                flex: 1;
+                font: inherit;
+            }
+            & > button {
+                flex: 0;
+
+                &::after {
+                    content: '⨯';
+                    width: 1em;
+                    height: 1em;
+                    font-size: 1.5em;
+                    display: inline-flex;
+                    justify-content: center;
+                    align-items: center;
+                    transition: transform 250ms ease-in-out;
+                }
+                &:hover::after {
+                    transform: scale(1.25);
+                }
+            }
+        }
     }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
   import dedent from 'dedent';
+
+  import { ruleset } from '$lib/helpers/a11y-manager.js';
+
+  import A11yInspector from '$lib/components/a11y-inspector.svelte';
+  import BuildDate from '$lib/components/build-date.svelte';
   import Github from '$lib/components/github.svelte';
-  import Link from '$lib/components/link.svelte';
   import Headline from '$lib/components/headline.svelte';
-  import StoredCheckbox from '$lib/components/stored-checkbox.svelte';
+  import Link from '$lib/components/link.svelte';
   import ShowCode from '$lib/components/show-code.svelte';
-  import BuildDate from '$lib/components/build-date.svelte';
   import SplitPane from '$lib/components/split-pane.svelte';
-  import A11yInspector from '$lib/components/a11y-inspector.svelte';
-  import { ruleset } from '$lib/helpers/a11y-manager.js';
+  import StoredCheckbox from '$lib/components/stored-checkbox.svelte';
 </script>
 
 <svelte:head>
@@ -56,7 +58,7 @@
             <Headline tag="h2">Markup</Headline>
 
             <StoredCheckbox key="html-lang" label="`<html>-Tag` hat korrektes lang-Attribut">
-                <ShowCode slot="show-code">{@html dedent`
+                <ShowCode slot="show-code" title="HTML mit 'lang-Attribute'">{@html dedent`
                     <!doctype html>
                     <!-- lang="language-COUNTRY" -->
                     <html lang="de-DE">
@@ -69,7 +71,7 @@
             </StoredCheckbox>
 
             <StoredCheckbox key="tabindex" label="Es gibt bei tabindex nur 0 oder -1">
-                <ShowCode slot="show-code">{@html dedent`
+                <ShowCode slot="show-code" title="'tabindex' mit 0 oder -1">{@html dedent`
                     <a href="url" tabindex="-1">Ich bin ein Link</a><br />
                     <input type="text" tabindex="0" />
                 `}</ShowCode>