From da9fd594a4301d4204fdf751d2bb7d7cacf9bafc Mon Sep 17 00:00:00 2001
From: Simon C <simonc@linux.com>
Date: Wed, 3 May 2023 15:39:20 +0200
Subject: [PATCH] fix: Popup design

---
 src/components/Question.vue | 54 ++++++++++++++++++-------------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/components/Question.vue b/src/components/Question.vue
index cc35528..c7f9096 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -52,8 +52,8 @@ function validatePopup() {
   ).checked = true;
   showHidePopup();
 }
-const h = ref(0);
-const d = ref(0);
+const h = ref(1);
+const d = ref(1);
 </script>
 
 <template>
@@ -106,31 +106,6 @@ const d = ref(0);
       <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>
     <button class="btn next" @click="$emit('nextQuestion')">
       <svg
@@ -145,6 +120,31 @@ const d = ref(0);
       </svg>
     </button>
   </div>
+  <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>
 
 <style lang="sass">