From bd443a1060decd260ca757d28a9e2487db94ff5d Mon Sep 17 00:00:00 2001
From: Miraty <miraty@antopie.org>
Date: Sun, 11 Jul 2021 21:48:56 +0200
Subject: [PATCH] Fix CSS layout

---
 index.php  | 53 +++++++++++++++++---------------
 style.less | 89 ++++++++++++++++++++++++++++++------------------------
 2 files changed, 78 insertions(+), 64 deletions(-)

diff --git a/index.php b/index.php
index 8e34d9e..c2b078a 100755
--- a/index.php
+++ b/index.php
@@ -120,7 +120,7 @@ if (
 
         <div id="firstWrapper">
 
-          <div class="param">
+          <div class="param" id="txtParam">
             <label for="txt">
               <details>
                 <summary><?= $loc['label_content'] ?></summary>
@@ -202,33 +202,36 @@ if (
 
       </form>
 
-    <?php
+      <section id="output">
 
-    if (!empty($params['txt'])) {
-      require "phpqrcode.php";
+        <?php
 
-      $imagePath = "temp/" . generateRandomString($fileNameLenght) . ".png";
-      QRcode::png(
-        $params['txt'],
-        $imagePath,
-        $params['redondancy'],
-        $params['size'],
-        $params['margin'],
-        false,
-        hexdec(substr($params['bgColor'], -6)),
-        hexdec(substr($params['mainColor'], -6))
-      );
-      ?>
-      <div class="centered">
-        <a href="<?php echo $imagePath; ?>" class="button" download="<?= htmlspecialchars($params['txt']); ?>.png"><?= $loc['button_download'] ?></a>
-      </div>
+        if (!empty($params['txt'])) {
+          require "phpqrcode.php";
 
-      <div class="centered" id="showOnlyQR">
-        <a title="<?= $loc['title_showOnlyQR'] ?>" href="<?= $imagePath; ?>"><img alt='<?= $loc['alt_QR_before'] ?><?= htmlspecialchars($params['txt']); ?><?= $loc['alt_QR_after'] ?>' id="qrCode" src="<?= $imagePath; ?>"/></a>
-      </div>
-    <?php
-    }
-      ?>
+          $imagePath = "temp/" . generateRandomString($fileNameLenght) . ".png";
+          QRcode::png(
+            $params['txt'],
+            $imagePath,
+            $params['redondancy'],
+            $params['size'],
+            $params['margin'],
+            false,
+            hexdec(substr($params['bgColor'], -6)),
+            hexdec(substr($params['mainColor'], -6))
+          );
+          ?>
+          <div class="centered" id="downloadQR">
+            <a href="<?php echo $imagePath; ?>" class="button" download="<?= htmlspecialchars($params['txt']); ?>.png"><?= $loc['button_download'] ?></a>
+          </div>
+
+          <div class="centered" id="showOnlyQR">
+            <a title="<?= $loc['title_showOnlyQR'] ?>" href="<?= $imagePath; ?>"><img alt='<?= $loc['alt_QR_before'] ?><?= htmlspecialchars($params['txt']); ?><?= $loc['alt_QR_after'] ?>' id="qrCode" src="<?= $imagePath; ?>"/></a>
+          </div>
+
+        <?php } ?>
+
+        </section>
 
         <footer>
 
diff --git a/style.less b/style.less
index 3753ee7..b07569d 100755
--- a/style.less
+++ b/style.less
@@ -27,6 +27,27 @@ You should have received a copy of the GNU Affero General Public License along w
   }
 }
 
+html {
+  height: 100%;
+}
+
+body {
+  margin: 0px;
+  font-weight: normal;
+  font-size: 20px;
+  height: 100%;
+
+  @media @light {
+    color: @text-light;
+    background-color: @bg-light;
+  }
+
+  @media @dark {
+    color: @text-dark;
+    background-color: @bg-dark;
+  }
+}
+
 a {
   text-decoration: underline;
 
@@ -43,8 +64,8 @@ a {
   }
 }
 
-p {
-  margin: 10px;
+p.helpText {
+  margin: 5px 0px 0px 0px;
 }
 
 details .helpText {
@@ -61,6 +82,11 @@ details .helpText {
   }
 }
 
+#sideParams {
+  text-align: center;
+  margin-left: 12px;
+}
+
 #sideParams summary {
   text-align: center;
   margin-left: 20px;
@@ -84,44 +110,18 @@ details .helpText {
   text-decoration: none;
 }
 
-form {
-  flex-grow: 1;
-  margin-bottom: 30px;
-}
-
 main {
   display: flex;
   flex-direction: column;
   margin-left: auto;
   margin-right: auto;
   width: 814px;
-  height: 99%;
-}
-
-body {
-  margin: 18px;
-  font-weight: normal;
-  font-size: 20px;
-  height: 99%;
-
-  @media @light {
-    color: @text-light;
-    background-color: @bg-light;
-  }
-
-  @media @dark {
-    color: @text-dark;
-    background-color: @bg-dark;
-  }
-}
-
-html {
-  height: 97%;
+  height: 100%;
 }
 
 header {
   text-align: center;
-  padding: 0px;
+  padding-top: 12px;
   margin: 0px;
   height: 64px;
 }
@@ -156,7 +156,11 @@ h2 {
   flex-direction: row;
 }
 
-#showOnlyQR {
+section#output {
+  flex-grow: 1;
+}
+
+#showOnlyQR, #downloadQR {
   margin-top: 30px;
 }
 
@@ -187,8 +191,8 @@ h2 {
   }
 }
 
-label[for=txt] {
-  padding-left: 22px;
+label[for=txt] summary {
+  margin-left: 22px;
 }
 
 #colors {
@@ -231,7 +235,7 @@ label[for=txt] {
 
 footer {
   font-size: 14px;
-  padding-top: 20px;
+  margin-top: 10px;
   text-align: left;
 }
 
@@ -252,6 +256,10 @@ header, footer {
   }
 }
 
+p.helpText {
+  width: 534px;
+}
+
 /* Inputs */
 
 #redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .button {
@@ -304,8 +312,15 @@ header, footer {
   }
 }
 
-#redondancy, #size, #margin {
+#redondancy {
   width: 250px;
+}
+
+#size, #margin {
+  width: 234px;
+}
+
+#redondancy, #size, #margin {
   height: 40px;
   @media @light {
     background-color: @bgField-light;
@@ -384,10 +399,6 @@ input[type=color] {
     flex-direction: column;
   }
 
-  body {
-    margin: 10px;
-  }
-
   #txt {
     width: 92%;
   }