From 9944bfbb827f991d56ce7c614335b493d7fb536e Mon Sep 17 00:00:00 2001
From: Miraty <miraty@antopie.org>
Date: Sun, 7 Mar 2021 19:06:32 +0100
Subject: [PATCH] Use HTML summary/details to display help text

---
 index.php            | 58 ++++++++++++++++++--------------
 locales/en.php       |  1 -
 locales/fr.php       |  1 -
 locales/oc.php       |  1 -
 locales/template.php |  1 -
 style.less           | 80 ++++++++------------------------------------
 6 files changed, 46 insertions(+), 96 deletions(-)

diff --git a/index.php b/index.php
index bc5bad1..a20df53 100755
--- a/index.php
+++ b/index.php
@@ -135,14 +135,14 @@ if (badQuery()) {
         <div id="firstWrapper">
 
           <div class="param">
-            <label for="txt"><?= $loc['label_content'] ?></label>
-            <span class="helpContainer">
-              <span class="helpButton" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="<?= $loc['alt_help'] ?>"></span>
-              <span class="helpContent">
-                <?= $loc['help_content'] ?>
-              </span>
-            </span>
-            <br>
+            <label for="txt">
+              <details>
+                <summary><?= $loc['label_content'] ?></summary>
+                <p class="helpText">
+                  <?= $loc['help_content'] ?>
+                </p>
+              </details>
+            </label>
             <textarea rows="8" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt"><?php
 
             if (isset($_GET['txt'])) {
@@ -155,12 +155,14 @@ if (badQuery()) {
           <div id="menusDeroulants">
 
             <div class="param">
-              <label for="redondancy"><?= $loc['label_redondancy'] ?></label>
-              <span class="helpContainer">
-                <span class="helpButton" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="<?= $loc['alt_help'] ?>"></span>
-                <span class="helpContent"><?= $loc['help_redondancy'] ?></span>
-              </span>
-              <br>
+              <label for="redondancy">
+                <details>
+                  <summary><?= $loc['label_redondancy'] ?></summary>
+                  <p class="helpText">
+                    <?= $loc['help_redondancy'] ?>
+                  </p>
+                </details>
+              </label>
               <select id="redondancy" name="redondancy">
                 <option <?php if (isset($_GET['redondancy']) AND ($_GET['redondancy'] == "L")) {echo 'selected="" ';} ?>value="L">L - 7%</option>
                 <option <?php if (isset($_GET['redondancy']) AND ($_GET['redondancy'] == "M")) {echo 'selected="" ';} ?>value="M">M - 15%</option>
@@ -170,12 +172,14 @@ if (badQuery()) {
             </div>
 
             <div class="param">
-              <label for="margin"><?= $loc['label_margin'] ?></label>
-              <span class="helpContainer">
-                <span class="helpButton" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="<?= $loc['alt_help'] ?>"></span>
-                <span class="helpContent"><?= $loc['help_margin'] ?></span>
-              </span>
-              <br>
+              <label for="margin">
+                <details>
+                  <summary><?= $loc['label_margin'] ?></summary>
+                  <p class="helpText">
+                    <?= $loc['help_margin'] ?>
+                  </p>
+                </details>
+              </label>
               <select id="margin" name="margin">
                 <option <?php if (isset($_GET['margin']) AND ($_GET['margin'] == "0")) {echo 'selected="" ';} ?>value="0">0</option>
                 <option <?php if (isset($_GET['margin']) AND ($_GET['margin'] == "1")) {echo 'selected="" ';} ?>value="1">1</option>
@@ -189,12 +193,14 @@ if (badQuery()) {
             </div>
 
             <div class="param">
-              <label for="size"><?= $loc['label_size'] ?></label>
-              <span class="helpContainer">
-                <span class="helpButton" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="<?= $loc['alt_help'] ?>"></span>
-                <span class="helpContent"><?= $loc['help_size'] ?></span>
-              </span>
-              <br>
+              <label for="size">
+                <details>
+                  <summary><?= $loc['label_size'] ?></summary>
+                  <p class="helpText">
+                    <?= $loc['help_size'] ?>
+                  </p>
+                </details>
+              </label>
               <select id="size" name="size">
                 <option <?php if (isset($_GET['size']) AND ($_GET['size'] == 1)) {echo 'selected="" ';} ?>value="1">1</option>
                 <option <?php if (isset($_GET['size']) AND ($_GET['size'] == 2)) {echo 'selected="" ';} ?>value="2">2</option>
diff --git a/locales/en.php b/locales/en.php
index 99de743..09dd67e 100644
--- a/locales/en.php
+++ b/locales/en.php
@@ -35,7 +35,6 @@ $loc = array(
 
   'title_showOnlyQR' => "Show this QR code only",
 
-  'alt_help' => "Help",
   'alt_QR_before' => 'QR code meaning "',
   'alt_QR_after' => '"',
 
diff --git a/locales/fr.php b/locales/fr.php
index db76da5..4985bf7 100644
--- a/locales/fr.php
+++ b/locales/fr.php
@@ -35,7 +35,6 @@ $loc = array(
 
   'title_showOnlyQR' => "Afficher uniquement ce code QR",
 
-  'alt_help' => "Aide",
   'alt_QR_before' => "Code QR signifiant « ",
   'alt_QR_after' => " »",
 
diff --git a/locales/oc.php b/locales/oc.php
index 036ce5e..309beb6 100644
--- a/locales/oc.php
+++ b/locales/oc.php
@@ -35,7 +35,6 @@ $loc = array(
 
   'title_showOnlyQR' => "Mostrar sonque aqueste còdi QR",
 
-  'alt_help' => "Ajuda",
   'alt_QR_before' => 'Significacion de còdi QR"',
   'alt_QR_after' => '"',
 
diff --git a/locales/template.php b/locales/template.php
index 05e1f10..a0f0bbe 100644
--- a/locales/template.php
+++ b/locales/template.php
@@ -24,7 +24,6 @@ $loc = array(
 
   'title_showOnlyQR' => "title_showOnlyQR",
 
-  'alt_help' => "alt_help",
   'alt_QR_before' => "alt_QR_before",
   'alt_QR_after' => "alt_QR_after",
 
diff --git a/style.less b/style.less
index 71667ba..9e2be91 100755
--- a/style.less
+++ b/style.less
@@ -30,16 +30,23 @@ p {
   margin: 10px;
 }
 
+details .helpText {
+  background-color: @bgHelp;
+  padding: 5px;
+  border-radius: 10px;
+  text-align: left;
+}
+
+#menusDeroulants summary {
+  text-align: center;
+  margin-left: 20px;
+}
+
 #firstWrapper {
   display: flex;
   flex-direction: row;
 }
 
-#menusDeroulants {
-  text-align: center;
-  margin-left: 20px;
-}
-
 #qrCode {
   max-width: 480px;
 }
@@ -160,20 +167,13 @@ label[for=txt] {
 }
 
 .metaText {
-  color: @secondaryText;
-  transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
+  color: @text;
   padding: 6px;
 
   & a, a:visited {
-    transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
-    color: @secondaryText;
+    color: @text;
     text-decoration: underline;
   }
-
-  &:hover, &:hover a {
-    color: @text;
-  }
-
 }
 
 footer {
@@ -260,58 +260,6 @@ input[type=color] {
   border: 2px @border solid;
 }
 
-/* Help message */
-
-.helpImg {
-  width: 22px;
-  height: 22px;
-  margin-bottom: -3px;
-  display: inline-block;
-}
-
-.helpButton {
-  height: 22px;
-  width: 22px;
-  color: @secondaryText;
-  cursor: help;
-  font-size: 0.8em;
-  display: inline-block;
-}
-
-.helpContainer {
-  display: inline-block;
-  margin-left: 5px;
-}
-
-.helpContent {
-  position: absolute;
-  transform: scale(0) rotate(-12deg);
-  color: @text;
-  background: @bgHelp;
-  padding: 15px;
-  border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0,0,0,.5);
-  margin-top: 23px;
-  margin-left: -35px;
-  transition: all .25s;
-  opacity: 0;
-  max-width: 500px;
-  font-size: 20px;
-  text-align: left;
-
-  @media (max-width: 500px) {
-    position: fixed;
-    margin: 5px;
-    left: 0px;
-    top: 0px;
-  }
-}
-
-.helpContainer:hover .helpContent, .helpContainer:focus-within .helpContent {
-  transform: scale(1) rotate(0);
-  opacity: 1;
-}
-
 /* Media queries */
 
 @media (max-width: 850px) {