feature/cleanup-page-and-global-css (#40)

Neofonie · May 16, 2024 · fec9af9 · fec9af9
1 parent a852e42
commit fec9af9
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 77 deletions.
diff --git a/src/app.css b/src/app.css
@@ -28,9 +28,45 @@
   font-family: var(--font-family-base);
 }
 
+body {
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
 a,
 button.link {
   color: var(--color-primary);
   text-decoration: underline;
   cursor: pointer;
 }
+
+/**
+ * A11y-rules.
+ *
+ * (Note that the related CSS-classes are set by JS from `a11y-manager.js` therefore the CSS
+ *   for it is defined globally in here)
+ **/
+*:has(> .--a11yRuleLinked)::after {
+  content: " ";
+  margin: 0 0.5em;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  width: var(--ally-rule-lineheight);
+  height: var(--ally-rule-lineheight);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  background-color: hsl(0deg 0% 0% / 0.1);
+}
+*:has(> .--a11yRuleLinked.--a11yFailed)::after {
+  content: "👎";
+  background-color: var(--color-primary);
+}
+*:has(> .--a11yRuleLinked.--a11ySuccess)::after {
+  content: "👍";
+  background-color: hsl(120deg 100% 50%);
+}
diff --git a/src/lib/components/a11y-list-view.svelte b/src/lib/components/a11y-list-view.svelte
@@ -0,0 +1,103 @@
+<script>
+    import { ruleset } from '$lib/helpers/a11y-manager.js';
+
+    import StoredCheckbox from './stored-checkbox.svelte';
+
+</script>
+
+{#each Object.keys(ruleset.groups) as group }
+    {#if Object.keys(ruleset.groups[group]).length > 0}
+        {@const uuid = crypto.randomUUID()}
+        <section>
+            <h2>
+                <input id={uuid} type="checkbox" hidden />
+                <label for={uuid}><span>{group}</span><span></span></label>
+            </h2>
+
+            {#each Object.keys(ruleset.groups[group]) as rule}
+                <div>
+                    <StoredCheckbox id={rule} key={rule} label={ruleset.groups[group][rule].description} />
+                </div>
+            {/each}
+        </section>
+    {/if}
+{/each}
+
+<style>
+    section {
+        ---ally-rule-lineheight: 2.5em;
+        box-sizing: border-box;
+        background-color: hsl(0deg 0% 0% / .05);
+        border-radius: 5px;
+        margin-bottom: 1em;
+        overflow: hidden;
+
+        & > h2 {
+            font-family: var(--font-family-title);
+            font-size: 1.5em;
+            color: var(--color-primary);
+            padding: .25em 1em 0;
+            transition: background-position 250ms ease-in-out, box-shadow 250ms ease-in-out;
+            background-image: linear-gradient(hsl(0deg 100% 50% / .05), transparent 50%);
+            background-size: 100% 200%;
+            background-position: 0 100%;
+
+            &:hover {
+                background-position: 0 0;
+            }
+            & > label {
+                display: flex;
+                width: 100%;
+                font: inherit;
+                align-items: center;
+                cursor: pointer;
+                transition: background-color 250ms;
+
+                & > * {
+                    flex: 1;
+                    font: inherit;
+                }
+                & > *:last-child {
+                    flex: 0;
+                    min-width: 32px;
+                    min-height: 32px;
+                    max-width: 32px;
+                    max-height: 32px;
+                    display: inline-flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    &::after {
+                        content: '˄';
+                    }
+                }
+            }
+            & > input[type=checkbox]:checked + label {
+                & > *:last-child::after {
+                    content: '˅';
+                }
+            }
+        }
+        & > div {
+            position: relative;
+            max-height: 999px;
+            padding: .5em 1em .5em 2.5em;
+            transition: max-height 250ms ease-in-out, padding 250ms ease-in-out;
+
+            & > * {
+                position: relative;
+                height: var(---ally-rule-lineheight);
+            }
+        }
+        &:has(h2 > input[type=checkbox]:checked) {
+            box-shadow: inset 0 -2px 0 hsl(0deg 100% 50% / .25);
+
+            & > div {
+                max-height: 0;
+                padding: 0 0 0 1em;
+                transition: max-height 150ms ease-in-out, padding 150ms ease-in-out;
+                overflow: hidden;
+            }
+        }
+    }
+</style>
diff --git a/src/lib/components/split-pane.svelte b/src/lib/components/split-pane.svelte
@@ -76,8 +76,7 @@
     use:watchResize
     on:element:resize={onElementResize}
     class="--{orientation}"
-    style="---containerSize: {containerSize}; ---dividerPosition: {dividerPosition}; ---dividerSize: {dividerSize}; ---initialPosition: {normalizedInitialPosition}; ---minContentSize: {minContentSize}; ---leftMinContentSize: {leftMinContentSize}; ---rightMinContentSize: {rightMinContentSize}; ---dividerColor: {dividerColor}; ---dividerHighlightColor: {dividerHighlightColor}; ---dividerHandleColor: {dividerHandleColor}; {style}"
->
+    style="---containerSize: {containerSize}; ---dividerPosition: {dividerPosition}; ---dividerSize: {dividerSize}; ---initialPosition: {normalizedInitialPosition}; ---minContentSize: {minContentSize}; ---leftMinContentSize: {leftMinContentSize}; ---rightMinContentSize: {rightMinContentSize}; ---dividerColor: {dividerColor}; ---dividerHighlightColor: {dividerHighlightColor}; ---dividerHandleColor: {dividerHandleColor}; {style}{$$props.style}">
     <div class="first">
         <div class="dragHandle">
             <div class="dragSpacer"></div>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import dedent from 'dedent';
-  import { ruleset } from '$lib/helpers/a11y-manager.js';
+
   import A11yInspector from '$lib/components/a11y-inspector.svelte';
+  import A11yListView from '$lib/components/a11y-list-view.svelte';
   import BuildDate from '$lib/components/build-date.svelte';
   import Github from '$lib/components/github.svelte';
   import Headline from '$lib/components/headline.svelte';
@@ -18,7 +19,7 @@
 <Github/>
 
 <SplitPane
-    class="splitpane"
+    style="width: 100%; height: 100%;"
     initialPosition="50%"
 >
     <div slot="first">
@@ -128,66 +129,17 @@
 
         <hr />
 
-        {#each Object.keys(ruleset.groups) as group }
-            <section class="a11y-group">
-                <h2>{group}</h2>
-
-                {#each Object.keys(ruleset.groups[group]) as rule}
-                    <div class="a11y-rule">
-                        <StoredCheckbox id={rule} key={rule} label={ruleset.groups[group][rule].description} />
-                    </div>
-                {/each}
-            </section>
-        {/each}
+        <A11yListView />
     </div>
     <div slot="second">
         <A11yInspector></A11yInspector>
     </div>
 </SplitPane>
 
 <style>
-    @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
-
-    :global(:root) {
-        ---ally-rule-lineheight: 32px;
-    }
-    :global(body) {
-        margin: 0;
-        width: 100vw;
-        height: 100vh;
-        font-family: 'Ubuntu';
-
-        & *:has(>.--a11yRuleLinked)::after {
-            content: ' ';
-            margin: 0 .5em;
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: var(---ally-rule-lineheight);
-            height: var(---ally-rule-lineheight);
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: 5px;
-            background-color: hsl(0deg 0% 0% / .1);
-        }
-        & *:has(>.--a11yRuleLinked.--a11yFailed)::after {
-            content: '👎';
-            background-color: hsl(0deg 100% 50%);
-        }
-        & *:has(>.--a11yRuleLinked.--a11ySuccess)::after {
-            content: '👍';
-            background-color: hsl(120deg 100% 50%);
-        }
-    }
-
-    /**
-     * UI
+    /*
+     * Splitpane adjustments.
      */
-    .splitpane {
-        width: 100%;
-        height: 100%;
-    }
     div[slot=first],
     div[slot=second] {
         width: 100%;
@@ -203,25 +155,4 @@
         justify-content: center;
         align-items: center;
     }
-
-    /**
-     * Page content
-     */
-    .a11y-group {
-        box-sizing: border-box;
-        background-color: hsl(0deg 0% 0% / .05);
-        padding: .5em 1em;
-        border-radius: 5px;
-        margin-bottom: 1em;
-    }
-    .a11y-rule {
-        position: relative;
-        height: var(---ally-rule-lineheight);
-
-        & .checkbox {
-            height: var(---ally-rule-lineheight);
-            display: flex;
-            align-items: center;
-        }
-    }
 </style>