fix(demo): badge placement

unrelated to scroll position
davidenke · Oct 21, 2024 · b7bf4b1 · b7bf4b1
1 parent 8f06c63
commit b7bf4b1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -58,7 +58,7 @@ <h1>Astro Decap Collection Demo</h1>
       <fieldset id="input">
         <legend>Decap config</legend>
         <div>
-          <pre><code></code></pre>
+          <pre><div><code></code></div></pre>
           <textarea
             oninput="window.handleInput(event)"
             onscroll="window.handleScroll(event)"
@@ -72,11 +72,11 @@ <h1>Astro Decap Collection Demo</h1>
       </fieldset>
       <fieldset id="config">
         <legend>Parsed config collections</legend>
-        <pre><code></code></pre>
+        <pre><div><code></code></div></pre>
       </fieldset>
       <fieldset id="schemas">
         <legend>Zod schemata</legend>
-        <pre><code></code></pre>
+        <pre><div><code></code></div></pre>
       </fieldset>
     </main>
   </body>

diff --git a/src/demo/demo.css b/src/demo/demo.css
@@ -118,6 +118,8 @@ legend {
 }
 
 #input > div,
+pre > div,
+code,
 textarea,
 pre {
   height: 100%;
@@ -132,7 +134,7 @@ pre {
 }
 
 textarea,
-pre > code {
+code {
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 6px;
@@ -148,7 +150,7 @@ pre {
     flex-direction: row;
   }
 
-  > code {
+  code {
     flex: 1 1 0;
     display: block;
     box-sizing: border-box;
@@ -158,16 +160,18 @@ pre {
   }
 }
 
-code {
+[data-label] {
   position: relative;
 
-  &[data-label]::after {
+  &::before {
     content: attr(data-label);
     position: absolute;
-    inset: 3px 3px auto auto;
+    inset: 4px 4px auto auto;
     padding: 3px 5px;
+
     border-radius: 3px;
     background: #ccc;
+    pointer-events: none;
   }
 }
 
@@ -194,7 +198,7 @@ code {
     border: 1px solid #ccc;
     border-radius: 6px;
 
-    > code {
+    code {
       flex: 0;
       display: block;
       max-height: none;

diff --git a/src/demo/demo.ts b/src/demo/demo.ts
@@ -69,24 +69,24 @@ window.updateInput = event => {
 // update the preview code with the config and schemas
 window.updatePreview = (config, schemas) => {
   const configPreview = document.querySelector<HTMLElement>('#config code')!;
-  configPreview.dataset.label = `count: ${Object.entries(schemas).length}`;
+  configPreview.parentElement!.dataset.label = `count: ${Object.entries(schemas).length}`;
   configPreview.innerHTML = hljs.highlight(config, { language: 'json' }).value;
 
   const schemaPreview = document.querySelector('#schemas pre')!;
   schemaPreview.innerHTML = Object.entries(schemas)
     .map(
       ([name, schema]) =>
-        `<code data-label="${name}">${hljs.highlight(schema, { language: 'ts' }).value}</code>`,
+        `<div data-label="${name}"><code>${hljs.highlight(schema, { language: 'ts' }).value}</code></div>`,
     )
     .join('\n\n');
 };
 
 // clear the code previews
 window.clearPreview = () => {
   const configPreview = document.querySelector<HTMLElement>('#config code')!;
-  delete configPreview.dataset.label;
+  delete configPreview.parentElement!.dataset.label;
   configPreview.innerHTML = '';
 
   const schemaPreview = document.querySelector('#schemas pre')!;
-  schemaPreview.innerHTML = '<code></code>';
+  schemaPreview.innerHTML = '<div><code></code></div>';
 };