Some UI fixes

six-two · six-two · commit 2ca4f3d821a4 · 2022-10-11T19:42:06.000+02:00
diff --git a/README.md b/README.md
@@ -33,6 +33,7 @@ You can try out the live demo at [qr.15c.me/tiny-qr.html](https://qr.15c.me/tiny
 
 - QR code size limitation: A maximum of 2950 characters can be used with error correction level L, less if you choose better error correction.
 - When opening `qr.html` using a file URL in chromium and enabling the clipboard monitoring, a permissions dialog is triggered every time the clipboard is read (every second).
+- When resizing the page to make it smaller, the QR code often refuses to shrink. I don't know why and any help/hints are welcome. My current workaround is just reloading the page.
 
 ## Additional features
 
diff --git a/qr.html b/qr.html
@@ -46,7 +46,7 @@
 
         header {
             width: 100%;
-            height: 40px;
+            min-height: 40px;
             background-color: #444;
             color: lightgray;
             display: flex;
@@ -74,21 +74,20 @@
             width: 100%;
             min-height: 50px;
             flex: 1;
-            margin-bottom: 10px;
+            resize: none;
         }
 
-        #error, #clipboard-error {
+        #clipboard-error {
             display: none;
         }
-
+        
         .error, .info {
             width: 100%;
             background-color: rgb(255, 140, 140);
             border: 2px solid red;
             border-radius: 10px;
             padding: 5px;
             text-align: center;
-            margin-bottom: 10px;
         }
 
         .info {
@@ -112,6 +111,11 @@
             margin: auto;
             display: block;
         }
+
+        .block {
+            padding-top: 5px;
+            display: none;
+        }
     </style>
 </head>
 <body>
@@ -122,9 +126,8 @@
         <a href="https://github.com/six-two/qr.html" target="_blank" rel="noopener noreferrer">Source code</a>
     </header>
     <div class="content">
-        <noscript><div class="error">You need to enable JavaScript to use this page</div></noscript>
-        <div id="error" class="error">BUG: You should not see this text</div>
-        <textarea id="input" name="input" id="" autofocus>You can generate QR codes from any text by typing in in this box. The code generation is performed on your local device, no data is sent anywhere.
+        <div id="error" class="error">You need to enable JavaScript to use this page</div>
+        <textarea id="input" class="block" name="input" id="" autofocus>You can generate QR codes from any text by typing in in this box. The code generation is performed on your local device, no data is sent anywhere.
 You can even download this file (see button on the top right) and use it when you are not connected to the Internet.
 
 ⚠️ The maximum size of a QR code is 2950 bytes
@@ -134,7 +137,7 @@
 📁 And you can copy-paste a file to this text area
 </textarea>
 
-        <div id="clipboard-div">
+        <div id="clipboard-div" class="block">
             <div id="clipboard-settings">
                 <input type="checkbox" id="clipboard-checkbox">
                 <label for="clipboard-checkbox"><abbr title="Whenever you copy text, the QR code will be updated to reflect the copied text. You may need to focus this website for this feature to work">Monitor the system clipboard</abbr></label>
@@ -147,6 +150,11 @@
     
 
 <script type="text/javascript">
+    // Only show if JS is enabled
+    for (e of document.getElementsByClassName("block")) {
+        e.style.display = "block"
+    } 
+
     const getQRRecommendedSize = (element) => {
         if (QR_SIZE <= 0) {
             width = element.clientWidth;
@@ -299,6 +307,8 @@
                     // This error only occured on Mac with Safari
                     showClipboardError(`Failed to read clipboard contents because of the follwoing error:<br><i>${error}</i>`);
                 });
+            } else {
+                showClipboardError(null);
             }
         };
 
diff --git a/tiny-qr.html b/tiny-qr.html
@@ -1,4 +1,4 @@
-<noscript>Enable JavaScript!</noscript><textarea autofocus id=i>qr.15c.me</textarea><div id=q></div><style>*{box-sizing:border-box}body{width:100vw;height:100vh;margin:0;padding:5px;display:flex;flex-direction:column;background-color:#ddd}#i{width:100%;min-height:50px;flex:1;margin-bottom:10px}#q{margin:auto;width:100%;padding:5px;flex:3}#q canvas{margin:auto;display:block}</style>
+<noscript><h1>Enable JavaScript!</h1></noscript><textarea autofocus id=i>qr.15c.me</textarea><div id=q></div><style>*{box-sizing:border-box}body{width:100vw;height:100vh;margin:0;padding:5px;display:flex;flex-direction:column;background-color:#ddd}#i{width:100%;min-height:50px;flex:1;margin-bottom:10px;resize:none;}#q{margin:auto;width:100%;padding:5px;flex:3}#q canvas{margin:auto;display:block}</style>
 <script>M=2950,window.onload=(()=>{q=document.getElementById("q"),i=document.getElementById("i"),u=(()=>{if(s=Math.max(Math.min(q.clientWidth,q.clientHeight)-10,50),t=i.value,t.length>M)alert(`Text is ${t.length-M} bytes too long`);else try{q.innerHTML="",QrCreator.render({text:t,radius:0,ecLevel:"L",background:"#fff",size:s},q)}catch(e){alert("Failed to generate QR code")}}),u(),i.oninput=u,window.onresize=u});</script>
 <script>
 //SOURCE: https://cdn.jsdelivr.net/npm/qr-creator/dist/qr-creator.min.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<noscript>Enable JavaScript!</noscript><textarea autofocus id=i>qr.15c.me</textarea><div id=q></div><style>*{box-sizing:border-box}body{width:100vw;height:100vh;margin:0;padding:5px;display:flex;flex-direction:column;background-color:#ddd}#i{width:100%;min-height:50px;flex:1;margin-bottom:10px}#q{margin:auto;width:100%;padding:5px;flex:3}#q canvas{margin:auto;display:block}</style>`
	`1`	`+<noscript><h1>Enable JavaScript!</h1></noscript><textarea autofocus id=i>qr.15c.me</textarea><div id=q></div><style>*{box-sizing:border-box}body{width:100vw;height:100vh;margin:0;padding:5px;display:flex;flex-direction:column;background-color:#ddd}#i{width:100%;min-height:50px;flex:1;margin-bottom:10px;resize:none;}#q{margin:auto;width:100%;padding:5px;flex:3}#q canvas{margin:auto;display:block}</style>`
`2`	`2`	<script>M=2950,window.onload=(()=>{q=document.getElementById("q"),i=document.getElementById("i"),u=(()=>{if(s=Math.max(Math.min(q.clientWidth,q.clientHeight)-10,50),t=i.value,t.length>M)alert(`Text is ${t.length-M} bytes too long`);else try{q.innerHTML="",QrCreator.render({text:t,radius:0,ecLevel:"L",background:"#fff",size:s},q)}catch(e){alert("Failed to generate QR code")}}),u(),i.oninput=u,window.onresize=u});</script>
`3`	`3`	`<script>`
`4`	`4`	`//SOURCE: https://cdn.jsdelivr.net/npm/qr-creator/dist/qr-creator.min.js`