examples: improve styling, esp. for mobile.

WebEngineering-FHNW · Dec 6, 2024 · 1d2c1ae · 1d2c1ae
1 parent fe6c283
commit 1d2c1ae
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/docs/src/examples/sequence/BeautifulMath.html b/docs/src/examples/sequence/BeautifulMath.html
@@ -6,8 +6,12 @@
   <link rel="shortcut icon" type="image/png" href="../../../img/logo/logo-60x54.png"/>
 </head>
 <style>
+    body {
+        margin: 1em;
+    }
     svg {
         margin-inline:  auto;
+        max-width:      90vmin ;
         aspect-ratio:   1 / 1;
     }
     svg * {
@@ -23,22 +27,30 @@
     circle {
         fill: transparent;
     }
-    input {
-        max-width:    4em;
-        margin-right: 2em;
+    .inputs {
+        display: grid;
+        grid-template-columns: max-content 3ch auto;
+        gap: .5em 1em;
+        & span {
+            font-variant-numeric: tabular-nums;
+            text-align: end;
+        }
     }
-
 </style>
 <body>
 <header>
   <h2>Simple SVG Graphics: Beautiful Math</h2>
 </header>
-<label for="slices"     >Slices</label> <input id="slices"      type="number" value="10" max="500">
-<label for="tableFactor">Factor</label> <input id="tableFactor" type="number" value="2"  max="50" >
 
 <div id="out">
 </div>
 
+<div class="inputs">
+    <label for="slices"     >Slices</label><span>10</span><input id="slices"      type="range" value="10" min="10" max="500" step="1">
+    <label for="tableFactor">Factor</label><span>2 </span><input id="tableFactor" type="range" value="2"  min="2" max="50"   step="1">
+</div>
+
+
 <p> More solutions in
     <a href="https://dierk.github.io/tryPux/beautifulMathInTS/index.html">TypeScript,  PureScript, and Elm</a>.</p>
 
@@ -72,7 +84,10 @@ <h2>Simple SVG Graphics: Beautiful Math</h2>
         svg.innerHTML = lines;
     };
     draw();
-    [tableFactorEl, slicesEl].forEach( el => el.oninput = draw);
+    [tableFactorEl, slicesEl].forEach( el => el.oninput = () => {
+        draw();
+        el.previousSibling.textContent = el.value;
+    });
 </script>
 </body>
 </html>
diff --git a/docs/src/examples/sequence/Stairs.html b/docs/src/examples/sequence/Stairs.html
@@ -8,6 +8,7 @@
 <style>
     svg {
         margin-inline:  auto;
+        max-width:      90vmin;
         aspect-ratio:   1 / 1;
     }
     svg * {
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,6 +8,7 @@ @@
     <style>
         svg {
             margin-inline:  auto;
+            max-width:      90vmin;
             aspect-ratio:   1 / 1;
         }
         svg * {
@@ Expand Down @@