From ce5b3ec3aba723b0ccfb5c4cc1ea14d486dbfdb0 Mon Sep 17 00:00:00 2001
From: Simon C <simonc@linux.com>
Date: Tue, 2 May 2023 23:19:22 +0200
Subject: [PATCH] feat: Center buttons

---
 src/components/Question.vue | 91 ++++++++++++++++++++-----------------
 1 file changed, 50 insertions(+), 41 deletions(-)

diff --git a/src/components/Question.vue b/src/components/Question.vue
index 20822be..72e96d3 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -102,51 +102,60 @@ const d = ref(0);
       </template>
     </div>
   </div>
-  <template v-if="question.function == 'rapport_hd'">
-    <button class="btn calculette" @click="showHidePopup">
-      <img src="/abacus.svg" alt="" />
-    </button>
-    <template v-if="displayPopup">
-      <div class="popup">
-        <button class="btn close" @click="showHidePopup">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
-            <path
-              d="M21.529 18.006l8.238-8.238c.977-.976.977-2.559 0-3.535-.977-.977-2.559-.977-3.535 0l-8.238 8.238-8.238-8.238c-.976-.977-2.56-.977-3.535 0-.977.976-.977 2.559 0 3.535l8.238 8.238-8.258 8.258c-.977.977-.977 2.559 0 3.535.488.488 1.128.732 1.768.732s1.28-.244 1.768-.732l8.258-8.259 8.238 8.238c.488.488 1.128.732 1.768.732s1.279-.244 1.768-.732c.977-.977.977-2.559 0-3.535l-8.24-8.237z"
-              fill="#000"
-            />
-          </svg>
-        </button>
-        <label for="H">H (m)</label>
-        <input v-model="h" type="number" name="H" />
-        <label for="D">D (cm)</label>
-        <input v-model="d" type="number" name="D" />
-        <p>({{ h }} * 100) / {{ d }} ≃ {{ Math.round((h * 100) / d) }}</p>
-        <button class="btn equal" @click="validatePopup">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
-            <path
-              fill="#31373D"
-              d="M34.459 1.375c-1.391-.902-3.248-.506-4.149.884L13.5 28.17l-8.198-7.58c-1.217-1.125-3.114-1.051-4.239.166-1.125 1.216-1.051 3.115.166 4.239l10.764 9.952s.309.266.452.359c.504.328 1.07.484 1.63.484.982 0 1.945-.482 2.52-1.368L35.343 5.524c.902-1.39.506-3.248-.884-4.149z"
-            />
-          </svg>
-        </button>
-      </div>
+  <div class="btns">
+    <template v-if="question.function == 'rapport_hd'">
+      <button class="btn calculette" @click="showHidePopup">
+        <img src="/abacus.svg" alt="" />
+      </button>
+      <template v-if="displayPopup">
+        <div class="popup">
+          <button class="btn close" @click="showHidePopup">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+              <path
+                d="M21.529 18.006l8.238-8.238c.977-.976.977-2.559 0-3.535-.977-.977-2.559-.977-3.535 0l-8.238 8.238-8.238-8.238c-.976-.977-2.56-.977-3.535 0-.977.976-.977 2.559 0 3.535l8.238 8.238-8.258 8.258c-.977.977-.977 2.559 0 3.535.488.488 1.128.732 1.768.732s1.28-.244 1.768-.732l8.258-8.259 8.238 8.238c.488.488 1.128.732 1.768.732s1.279-.244 1.768-.732c.977-.977.977-2.559 0-3.535l-8.24-8.237z"
+                fill="#000"
+              />
+            </svg>
+          </button>
+          <label for="H">H (m)</label>
+          <input v-model="h" type="number" name="H" />
+          <label for="D">D (cm)</label>
+          <input v-model="d" type="number" name="D" />
+          <p>({{ h }} * 100) / {{ d }} ≃ {{ Math.round((h * 100) / d) }}</p>
+          <button class="btn equal" @click="validatePopup">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+              <path
+                fill="#31373D"
+                d="M34.459 1.375c-1.391-.902-3.248-.506-4.149.884L13.5 28.17l-8.198-7.58c-1.217-1.125-3.114-1.051-4.239.166-1.125 1.216-1.051 3.115.166 4.239l10.764 9.952s.309.266.452.359c.504.328 1.07.484 1.63.484.982 0 1.945-.482 2.52-1.368L35.343 5.524c.902-1.39.506-3.248-.884-4.149z"
+              />
+            </svg>
+          </button>
+        </div>
+      </template>
     </template>
-  </template>
-  <button class="btn next" @click="$emit('nextQuestion')">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 40 40"
-      width="40"
-      height="40"
-    >
-      <path
-        d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"
-      ></path>
-    </svg>
-  </button>
+    <button class="btn next" @click="$emit('nextQuestion')">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 40 40"
+        width="40"
+        height="40"
+      >
+        <path
+          d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"
+        ></path>
+      </svg>
+    </button>
+  </div>
 </template>
 
 <style lang="sass">
+.btns
+  width: 400px
+  max-width: 100%
+  min-width: 280px
+  position: relative
+  margin: 0 auto
+
 .popup
   position: absolute
   background: var(--color-highlight-background)