Mercurial > qr-html

changeset 14:1fbe0b098f0f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Adjust styling - max 256px - 8px padding - plain line instead of hr (more precise margin)
author nanaya <me@nanaya.net>
date Wed, 11 Sep 2024 21:27:58 +0900
parents a56d5a527f6c
children d6a6c128cd5a
files index.html
diffstat 1 files changed, 16 insertions(+), 26 deletions(-) [+]
line wrap: on
line diff
--- a/index.html	Wed Sep 11 21:17:14 2024 +0900
+++ b/index.html	Wed Sep 11 21:27:58 2024 +0900
@@ -19,13 +19,13 @@
 
         body {
             margin: 0;
-            padding: 10px;
+            padding: 8px;
             height: 100%;
         }
 
         .inputbox {
             width: 100%;
-            margin-bottom: 10px;
+            margin-bottom: 8px;
             resize: vertical;
             font-family: Courier New, monospace;
             /* prevent ios zoom */
@@ -37,21 +37,18 @@
             min-height: 100%;
             max-width: 600px;
             margin: 0 auto;
-            display: flex;
-            flex-direction: column;
-            padding: 10px;
+            display: grid;
+            grid-template-rows: 1fr auto;
+            gap: 8px;
         }
 
-        .page__main {
-            flex: 1;
+        .page__footer {
+            border-top: 1px solid #333;
+            padding-top: 8px;
         }
 
         .outputbox {
-            will-change: opacity;
-        }
-
-        .outputbox.js-hidden {
-            opacity: 0;
+            max-width: 256px;
         }
 
         .outputbox > canvas {
@@ -60,7 +57,6 @@
 
         .outputbox > img {
             max-width: 100%;
-            max-height: calc(100vh - 250px);
         }
 
         .title {
@@ -82,9 +78,7 @@
             <div class="outputbox js-qr-output"></div>
         </div>
 
-        <div>
-            <hr>
-
+        <div class="page__footer">
             <a href="https://hg.sr.ht/~nanaya/qr-html">Source</a>
         </div>
     </div>
@@ -94,26 +88,22 @@
     <script>
         var inputDom = document.querySelector(".js-qr-input")
         var outputDom = document.querySelector(".js-qr-output")
-        var qr = new QRCode(outputDom, { correctLevel: QRCode.CorrectLevel.L, width: 1024, height: 1024 })
+        var qr = new QRCode(outputDom, { correctLevel: QRCode.CorrectLevel.L, width: 256, height: 256 })
 
         var runTimeout = null
-        var debouncedRefreshCode = function() {
-            clearTimeout(runTimeout)
-            runTimeout = setTimeout(refreshCode, 100)
-        }
 
         var refreshCode = function() {
             var text = inputDom.value
 
-            if (text !== "") {
+            if (text === "") {
+                outputDom.style.display = 'none';
+            } else {
+                outputDom.style.display = 'block';
                 qr.makeCode(text)
-                outputDom.classList.remove('js-hidden')
-            } else {
-                outputDom.classList.add('js-hidden')
             }
         }
 
-        inputDom.addEventListener('input', debouncedRefreshCode)
+        inputDom.addEventListener('input', refreshCode)
         refreshCode()
     </script>
 </body>