From 6832804dc0ad475cfe3976075eec51ae81fb6723 Mon Sep 17 00:00:00 2001
From: Miraty <miraty@antopie.org>
Date: Sun, 6 Mar 2022 18:04:25 +0100
Subject: [PATCH] New CSS layout

---
 README.md            |   2 +-
 README_fr.md         |   2 +-
 index.php            | 116 ++++++++++++++++++++-----------------------
 locales/template.php |   2 -
 style.less           |  89 +++++++++++----------------------
 5 files changed, 86 insertions(+), 125 deletions(-)

diff --git a/README.md b/README.md
index 4a89128..feee282 100755
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# ![](themes/dark/icons/32.png) LibreQR
+# ![](themes/libreqr/icons/32.png) LibreQR
 
 [Lire ceci en français](README_fr.md)
 
diff --git a/README_fr.md b/README_fr.md
index 292f29d..a334ea2 100644
--- a/README_fr.md
+++ b/README_fr.md
@@ -1,4 +1,4 @@
-# ![](themes/dark/icons/32.png) LibreQR
+# ![](themes/libreqr/icons/32.png) LibreQR
 
 [Read this in english](README.md)
 
diff --git a/index.php b/index.php
index f9dd933..2421f4b 100755
--- a/index.php
+++ b/index.php
@@ -135,67 +135,63 @@ if (
 
     <form method="post" action="./#output">
 
-      <div id="firstWrapper">
+      <div class="param" id="txtParam">
+        <details>
+          <summary><label for="txt"><?= $loc['label_content'] ?></label></summary>
+          <div class="helpText">
+            <?= $loc['help_content'] ?>
+          </div>
+        </details>
+        <textarea rows="3" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt"><?= htmlspecialchars($params['txt']) ?></textarea>
+      </div>
 
-        <div class="param" id="txtParam">
+      <div id="sideParams">
+
+        <div class="param">
           <details>
-            <summary><label for="txt"><?= $loc['label_content'] ?></label></summary>
-            <div class="helpText">
-              <?= $loc['help_content'] ?>
-            </div>
+            <summary><label for="redundancy"><?= $loc['label_redundancy'] ?></label></summary>
+            <p class="helpText">
+              <?= $loc['help_redundancy'] ?>
+            </p>
           </details>
-          <textarea rows="8" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt"><?= htmlspecialchars($params['txt']) ?></textarea>
+          <select id="redundancy" name="redundancy">
+            <option <?php if ($params['redundancy'] === "low") echo 'selected="" '; ?>value="low">L - 7%</option>
+            <option <?php if ($params['redundancy'] === "medium") echo 'selected="" '; ?>value="medium">M - 15%</option>
+            <option <?php if ($params['redundancy'] === "quartile") echo 'selected="" '; ?>value="quartile">Q - 25%</option>
+            <option <?php if ($params['redundancy'] === "high") echo 'selected="" '; ?>value="high">H - 30%</option>
+          </select>
         </div>
 
-        <div id="sideParams">
-
-          <div class="param">
-            <details>
-              <summary><label for="redundancy"><?= $loc['label_redundancy'] ?></label></summary>
-              <p class="helpText">
-                <?= $loc['help_redundancy'] ?>
-              </p>
-            </details>
-            <select id="redundancy" name="redundancy">
-              <option <?php if ($params['redundancy'] === "low") echo 'selected="" '; ?>value="low">L - 7%</option>
-              <option <?php if ($params['redundancy'] === "medium") echo 'selected="" '; ?>value="medium">M - 15%</option>
-              <option <?php if ($params['redundancy'] === "quartile") echo 'selected="" '; ?>value="quartile">Q - 25%</option>
-              <option <?php if ($params['redundancy'] === "high") echo 'selected="" '; ?>value="high">H - 30%</option>
-            </select>
-          </div>
-
-          <div class="param">
-            <details>
-              <summary><label for="margin"><?= $loc['label_margin'] ?></label></summary>
-              <p class="helpText">
-                <?= $loc['help_margin'] ?>
-              </p>
-            </details>
-            <input type="number" list="margins" id="margin" placeholder="<?= $loc['placeholder_pixels'] ?>" name="margin" min="0" max="1024" value="<?= htmlspecialchars($params['margin']) ?>">
-            <datalist id="margins">
-              <option value="16">
-              <option value="32">
-              <option value="64">
-              <option value="128">
-            </datalist>
-          </div>
-
-          <div class="param">
-            <details>
-              <summary><label for="size"><?= $loc['label_size'] ?></label></summary>
-              <p class="helpText">
-                <?= $loc['help_size'] ?>
-              </p>
-            </details>
-            <input type="number" list="sizes" id="size" placeholder="<?= $loc['placeholder_pixels'] ?>" name="size" min="1" max="4096" value="<?= htmlspecialchars($params['size']) ?>">
-            <datalist id="sizes">
-              <option value="128">
-              <option value="256">
-              <option value="512">
-              <option value="1024">
-            </datalist>
-          </div>
+        <div class="param">
+          <details>
+            <summary><label for="margin"><?= $loc['label_margin'] ?></label></summary>
+            <p class="helpText">
+              <?= $loc['help_margin'] ?>
+            </p>
+          </details>
+          <input type="number" list="margins" id="margin" placeholder="<?= $loc['placeholder_pixels'] ?>" name="margin" min="0" max="1024" value="<?= htmlspecialchars($params['margin']) ?>">
+          <datalist id="margins">
+            <option value="16">
+            <option value="32">
+            <option value="64">
+            <option value="128">
+          </datalist>
+        </div>
 
+        <div class="param">
+          <details>
+            <summary><label for="size"><?= $loc['label_size'] ?></label></summary>
+            <p class="helpText">
+              <?= $loc['help_size'] ?>
+            </p>
+          </details>
+          <input type="number" list="sizes" id="size" placeholder="<?= $loc['placeholder_pixels'] ?>" name="size" min="1" max="4096" value="<?= htmlspecialchars($params['size']) ?>">
+          <datalist id="sizes">
+            <option value="128">
+            <option value="256">
+            <option value="512">
+            <option value="1024">
+          </datalist>
         </div>
 
       </div>
@@ -204,16 +200,12 @@ if (
 
         <div class="param">
           <label for="bgColor"><?= $loc['label_bgColor'] ?></label>
-          <div class="inputColorContainer">
-            <input type="color" name="bgColor" id="bgColor" value="#<?= htmlspecialchars($params['bgColor']) ?>">
-          </div>
+          <input type="color" name="bgColor" id="bgColor" value="#<?= htmlspecialchars($params['bgColor']) ?>">
         </div>
 
         <div class="param">
           <label for="mainColor"><?= $loc['label_mainColor'] ?></label>
-          <div class="inputColorContainer">
-            <input type="color" name="mainColor" id="mainColor" value="#<?= htmlspecialchars($params['mainColor']) ?>">
-          </div>
+          <input type="color" name="mainColor" id="mainColor" value="#<?= htmlspecialchars($params['mainColor']) ?>">
         </div>
       </div>
 
@@ -290,7 +282,7 @@ if (
         <?php } ?>
 
         <section class="metaText">
-          <?= $loc['metaText_legal'] ?>
+          <small><?= $loc['metaText_legal'] ?></small>
         </section>
 
       </footer>
diff --git a/locales/template.php b/locales/template.php
index 181da90..1050f78 100644
--- a/locales/template.php
+++ b/locales/template.php
@@ -29,6 +29,4 @@ $loc = array(
 
   'metaText_qr' => "metaText_qr",
   'metaText_legal' => "metaText_legal",
-
-  'opensearch_description' => "opensearch_description",
 );
diff --git a/style.less b/style.less
index cc5e4a8..bdcee14 100755
--- a/style.less
+++ b/style.less
@@ -35,7 +35,7 @@ body {
   display: flex;
   flex-direction: column;
 
-  width: 814px;
+  max-width: 812px;
   height: 100%;
 
   margin: 0px;
@@ -103,28 +103,22 @@ code {
   }
 }
 
-#txtParam {
-  width: 100%;
-}
-
 #sideParams {
   width: 100%;
   text-align: center;
-  margin-left: 12px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  & .param {
+    max-width: 270px;
+    box-sizing: border-box;
+  }
 }
 
 summary {
   margin-left: 20px;
   cursor: help;
-
-  #sideParams & {
-    text-align: center;
-  }
-}
-
-#firstWrapper {
-  display: flex;
-  flex-direction: row;
 }
 
 #qrCode {
@@ -200,7 +194,7 @@ header {
 }
 
 #titles {
-  margin-left: 20px;
+  margin-left: 2%;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -224,7 +218,11 @@ h2 {
   flex-direction: row;
 }
 
-#showOnlyQR, #downloadQR {
+#downloadQR {
+  margin-top: 20px;
+}
+
+#showOnlyQR {
   margin-top: 30px;
 }
 
@@ -234,12 +232,6 @@ h2 {
   margin-right: 0px;
 }
 
-.inputColorContainer {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-
 ::selection {
 
   @media @light {
@@ -260,7 +252,8 @@ label[for=txt] summary {
 #colors {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: space-around;
+  flex-wrap: wrap;
   text-align: center;
 
   & .param {
@@ -268,7 +261,7 @@ label[for=txt] summary {
     display: flex;
     justify-content: center;
     flex-direction: column;
-    width: 100%;
+    align-items: center;
   }
 }
 
@@ -296,15 +289,18 @@ label[for=txt] summary {
 }
 
 footer {
-  font-size: 14px;
+  font-size: 16px;
   margin-top: auto;
+  padding-top: 10px;
   text-align: left;
 }
 
+small {
+  font-size: 14px;
+}
+
 #info {
   font-size: 16px;
-  bottom: 20px;
-  right: 20px;
   margin: 0px;
 
   & h3 {
@@ -411,9 +407,14 @@ input[type=color] {
   }
 }
 
+#txtParam {
+  display: flex;
+  flex-direction: column;
+}
+
 #txt {
   padding: 10px;
-  width: 500px;
+  width: auto;
   scrollbar-width: auto;
 
   @media @light {
@@ -451,36 +452,6 @@ input[type=submit] {
   }
 }
 
-/* Media queries */
-
-@media (max-width: 850px) {
-
-  body {
-    width: auto;
-  }
-
-  #firstWrapper {
-    flex-direction: column;
-  }
-
-  #txt {
-    width: 92%;
-  }
-
-}
-
-@media (max-width: 500px) { // Mobile version
-
-  #colors {
-    flex-direction: column;
-  }
-
-  #txt {
-    width: 85%;
-  }
-
-}
-
 a[download]::before {
   content: "💾 ";