From 31ef9ed96782c1532338709d6cf6b6722c0b9cd3 Mon Sep 17 00:00:00 2001
From: Jarinya <jarinya.jusing@gmail.com>
Date: Fri, 3 May 2024 15:37:09 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20responsive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HeaderHome.vue          | 11 +++-
 src/components/Section2Green.vue       |  8 +--
 src/components/Section3Base.vue        |  4 +-
 src/components/Section4White.vue       |  5 ++
 src/components/edit/FormSteperEdit.vue | 74 ++++++++++++++++--------
 src/components/form/FormSteper.vue     | 79 ++++++++++++++++++--------
 src/views/HomePage.vue                 | 19 ++++++-
 7 files changed, 144 insertions(+), 56 deletions(-)

diff --git a/src/components/HeaderHome.vue b/src/components/HeaderHome.vue
index b336737..13c4a38 100644
--- a/src/components/HeaderHome.vue
+++ b/src/components/HeaderHome.vue
@@ -27,6 +27,7 @@
                 style="color: #0f470f"
                 size="large"
                 height="80"
+                width="470"
               >
                 <span class="text-normal"> ขั้นตอนการใช้งานระบบ</span>
               </v-btn>
@@ -83,7 +84,7 @@
             </div>
             <div class="text-title m-3">ใครสมัคร สว.ได้บ้าง</div>
             <div>
-              สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้ของพรรคการเมืองใดๆ
+              สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้พรรคการเมืองใดๆ
               โดยมีคุณสมบัติดังนี้
             </div>
             <div>เช็คคุณสมบัติกันเลย !</div>
@@ -99,7 +100,7 @@
               height="85"
               to="/check"
             >
-              <span class="text-normal"> ตรวจสอบคุณสมบัติการเป็น สว.</span>
+              <span class="text-normal" style="white-space: break-spaces;"> ตรวจสอบคุณสมบัติการเป็น สว.</span>
               <v-img
                 :aspect-ratio="1"
                 src="../assets/Group 9.png"
@@ -207,4 +208,10 @@ export default {
   width: fit-content;
   padding: 7px 10px;
 }
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .bg-curve {
+  height: 530px;
+  
+}
+}
 </style>
diff --git a/src/components/Section2Green.vue b/src/components/Section2Green.vue
index dd79aee..7651476 100644
--- a/src/components/Section2Green.vue
+++ b/src/components/Section2Green.vue
@@ -2,7 +2,7 @@
   <div style="position: relative" class="bg-green-curve text-normal " >
     <div
      style="width: 90%"
-      class="text-center text-white py-10 pb-20 ma-auto"
+      class="text-center text-white py-10 pb-20 mx-auto"
       v-if="
         getUsername == '' || getUsername == null || getUsername == undefined
       "
@@ -33,7 +33,7 @@
         <span class="text-normal"> แสดงตนเป็นผู้สมัคร</span>
       </v-btn>
     </div>
-    <div class="text-center text-white py-10 pb-20" v-if="getUsername">
+    <div class="text-center text-white py-10 pb-20 mx-auto" v-if="getUsername"  style="width: 90%">
       <div class="text-title my-3">ค้นหาผู้แสดงตนเป็นผู้สมัคร สว.</div>
       <div class="mb-8">
         ค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/เขต
@@ -51,7 +51,7 @@
           :aspect-ratio="1"
           src="../assets/search.png"
           width="100"
-          style="position: absolute; bottom: -20px; right: 0px"
+          style="position: absolute; bottom: -30px; right: -10px"
         ></v-img>
         <span class="text-normal"> ค้นหาผู้สมัคร สว.</span>
       </v-btn>
@@ -69,7 +69,7 @@ export default {
 <style>
 .bg-green-curve {
   background-image: url("/src/assets/Rectangle\ 3.png");
-  min-height: 520px;
+  min-height: 530px;
   height: auto;
   background-position: center bottom;
   background-color: white;
diff --git a/src/components/Section3Base.vue b/src/components/Section3Base.vue
index aaa3d03..5a6e528 100644
--- a/src/components/Section3Base.vue
+++ b/src/components/Section3Base.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="position: relative;background-color: white;" class="text-normal pb-10" >
-    <div class="text-center txt-black py-8">
+    <div class="text-center txt-black py-8 mx-auto" style="width: 90%;">
       <div
         class="text-subtitle mx-10 text-center  box-order mx-auto my-5 txt-black"
 
@@ -22,7 +22,7 @@
         height="80"
         @click="checkPage"
       >
-        <span class="text-normal">เข้าสู่ระบบสำหรับผู้แสดงตนแล้ว</span>
+        <span class="text-normal" style="white-space: break-spaces;">เข้าสู่ระบบสำหรับผู้แสดงตนแล้ว</span>
       </v-btn>
     </div>
   </div>
diff --git a/src/components/Section4White.vue b/src/components/Section4White.vue
index 52e843b..32dece7 100644
--- a/src/components/Section4White.vue
+++ b/src/components/Section4White.vue
@@ -61,4 +61,9 @@ export default {};
   background-color: white;
   height: auto;
 }
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .border-dot {
+    border-right: 0px dashed #f2f7e200 !important;
+  }
+}
 </style>
diff --git a/src/components/edit/FormSteperEdit.vue b/src/components/edit/FormSteperEdit.vue
index 759e317..48c4966 100644
--- a/src/components/edit/FormSteperEdit.vue
+++ b/src/components/edit/FormSteperEdit.vue
@@ -4,7 +4,7 @@
 
     <div>
       <v-stepper v-model="e1">
-        <template v-slot:default="{ prev, next }">
+        <template v-slot:default="">
           <v-stepper-header>
             <template v-for="n in steps" :key="`${n}-step`">
               <v-stepper-item
@@ -40,6 +40,7 @@
                       variant="solo"
                       :rules="rules.required"
                       v-model="payload.firstName"
+                      class="my-2"
                     ></v-text-field>
 
                     <v-text-field
@@ -47,8 +48,11 @@
                       variant="solo"
                       :rules="rules.required"
                       v-model="payload.lastName"
+                      class="my-2"
                     ></v-text-field>
-
+                    <div class="text-medium-emphasis" style="font-size: 15px">
+                      กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123
+                    </div>
                     <v-text-field
                       label="เลขบัตรประชาชน / ID card number"
                       variant="solo"
@@ -56,6 +60,7 @@
                       v-model="payload.cid"
                       counter
                       readonly
+                      class="mb-2"
                     ></v-text-field>
 
                     <v-row>
@@ -133,14 +138,23 @@
                     </v-card>
                   </v-col>
                 </v-row>
+                <div class="btn-next">
+                  <v-btn
+                    @click.prevent="e1++"
+                    :disabled="disabled && !form1"
+                    variant="tonal"
+                    class="float-right"
+                    size="large"
+                    >ถัดไป</v-btn
+                  >
+                </div>
 
-                <!-- <v-btn @click.prevent="e1++" :disabled="!form1">next</v-btn> -->
-                <v-stepper-actions
+                <!-- <v-stepper-actions
                   type="submit"
                   :disabled="disabled && !form1"
                   @click:next="next"
                   @click:prev="prev"
-                ></v-stepper-actions>
+                ></v-stepper-actions> -->
               </v-form>
               <!-- </v-card> -->
             </v-stepper-window-item>
@@ -238,8 +252,12 @@
                   </v-col>
                 </v-row>
                 <div class="btn-next">
-                  <v-btn @click="e1--" variant="text" class="float-left"
-                    >Previous</v-btn
+                  <v-btn
+                    @click="e1--"
+                    class="float-left"
+                    size="large"
+                    variant="tonal"
+                    >ก่อนหน้า</v-btn
                   >
                   <!-- <v-spacer></v-spacer> -->
 
@@ -250,9 +268,10 @@
                       payload.zone.province == null ||
                       payload.zone.id == null
                     "
+                    size="large"
                     variant="tonal"
                     class="float-right"
-                    >next</v-btn
+                    >ถัดไป</v-btn
                   >
                 </div>
                 <!-- <v-stepper-actions
@@ -358,8 +377,8 @@
                     ></v-textarea> -->
 
                     <div class="btn-next">
-                      <v-btn @click="e1--" variant="text" class="float-left"
-                        >Previous</v-btn
+                      <v-btn @click="e1--" variant="tonal" size="large" class="float-left"
+                        >ก่อนหน้า</v-btn
                       >
                       <!-- <v-spacer></v-spacer> -->
 
@@ -368,7 +387,8 @@
                         :disabled="!(checkOpt1.count == checkOpt1.checkcount)"
                         variant="tonal"
                         class="float-right"
-                        >next</v-btn
+                        size="large"
+                        >ถัดไป</v-btn
                       >
                     </div>
                     <!-- {{ checkOpt1 }} -->
@@ -429,7 +449,7 @@
                       ><v-text-field
                         variant="solo"
                         bg-color="#F2EBD1"
-                        label="X"
+                        label="X (twitter)"
                         v-model="payload.twitter"
                       ></v-text-field
                     ></v-col>
@@ -504,20 +524,25 @@
                       <span class="text-sub">บันทึก</span>
                     </v-btn>
                   </div>
+                   <div class="btn-next">
+                      <v-btn @click="e1--"  class="float-left" size="large" variant="tonal"
+
+                        >ก่อนหน้า</v-btn
+                      >
+                    </div>
                 </v-card>
               </div>
             </v-stepper-window-item>
           </v-stepper-window>
-          <!-- v-show="e1 == 3 || el == 4"  -->
 
-          <v-stepper-actions
+          <!-- <v-stepper-actions
             v-show="e1 == 4"
             :disabled="disabled"
             @click:next="next"
             @click:prev="prev"
-          ></v-stepper-actions>
+          ></v-stepper-actions>-->
         </template>
-      </v-stepper>
+      </v-stepper> 
     </div>
   </v-container>
 </template>
@@ -577,7 +602,7 @@ export default {
           (files) =>
             !files ||
             !files.some((file) => file.size > 3_097_152) ||
-            "Avatar size should be less than 3 MB!",
+            "ไฟล์รูปต้องไม่เกิน 3MB!",
         ],
         space: (v) => /^[^ ]+$/.test(v) || "must not contain spaces.",
         username: (v) =>
@@ -599,7 +624,7 @@ export default {
           const pattern = /[\u0E00-\u0E7F']/;
           return pattern.test(v) || "ใช้ภาษาไทยเท่านั้น";
         },
-        required: [(value) => !!value || "Please fill out."],
+        required: [(value) => !!value || "กรุณากรอกข้อมูล"],
         password: (v) =>
           /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/.test(v) ||
           // /^[a-zA-Z0-9?><;.,{}[\]\-_+=!@#$%\^&*|']*$/.test(v) ||
@@ -612,19 +637,22 @@ export default {
         tel: [
           (v) =>
             // (parseInt(v) == v && v.length == 10) || 'เบอร์โทรไม่ถูกต้อง',
-            /^([0-9]{10})$/.test(v) || "Invalid phone number",
+            /^([0-9]{10})$/.test(v) || "เบอร์โทรศัพท์ไม่ถูกต้อง",
         ],
         id: [
           (v) =>
-            (parseInt(v) == v && v.length == 13 && validateThaiID(v)) ||
-            "Invalid ID card number",
+            (/^\d+$/.test(v) &&
+              parseInt(v) == v &&
+              v.length == 13 &&
+              validateThaiID(v)) ||
+            "เลขบัตรประชาชนไม่ถูกต้อง",
         ],
-        age: [(v) => parseInt(v) >= 40 || "Age must be over 40"],
+        age: [(v) => parseInt(v) >= 40 || "อายุต้องมากกว่า 40 ปี"],
         email: [
           (value) => {
             const pattern =
               /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-            return pattern.test(value) || "invalid email";
+            return pattern.test(value) || "อีเมลไม่ต้องถูก";
           },
         ],
       },
diff --git a/src/components/form/FormSteper.vue b/src/components/form/FormSteper.vue
index 6cbf25d..b426953 100644
--- a/src/components/form/FormSteper.vue
+++ b/src/components/form/FormSteper.vue
@@ -4,7 +4,7 @@
 
     <div>
       <v-stepper v-model="e1">
-        <template v-slot:default="{ prev, next }">
+        <template v-slot:default="">
           <v-stepper-header>
             <template v-for="n in steps" :key="`${n}-step`">
               <v-stepper-item
@@ -40,6 +40,7 @@
                       variant="solo"
                       :rules="rules.required"
                       v-model="payload.firstName"
+                      class="my-2"
                     ></v-text-field>
 
                     <v-text-field
@@ -47,14 +48,20 @@
                       variant="solo"
                       :rules="rules.required"
                       v-model="payload.lastName"
+                      class="my-2"
                     ></v-text-field>
-
+                    <div class="text-medium-emphasis" style="font-size: 15px">
+                      กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123
+                    </div>
                     <v-text-field
                       label="เลขบัตรประชาชน / ID card number"
                       variant="solo"
                       :rules="rules.id"
                       v-model="payload.cid"
                       counter
+                      type="number"
+                      hide-spin-buttons
+                      class="mb-2"
                     ></v-text-field>
 
                     <v-row>
@@ -90,6 +97,7 @@
                       variant="solo"
                       :rules="rules.required"
                       v-model="payload.education"
+                      class="my-2"
                     ></v-text-field>
 
                     <v-text-field
@@ -97,6 +105,9 @@
                       variant="solo"
                       :rules="rules.tel"
                       v-model="payload.phone"
+                      type="number"
+                      hide-spin-buttons
+                      class="my-2"
                     ></v-text-field>
                   </v-col>
 
@@ -131,14 +142,22 @@
                     </v-card>
                   </v-col>
                 </v-row>
-
-                <!-- <v-btn @click.prevent="e1++" :disabled="!form1">next</v-btn> -->
-                <v-stepper-actions
+                <div class="btn-next">
+                  <v-btn
+                    @click.prevent="e1++"
+                    :disabled="disabled && !form1"
+                    variant="tonal"
+                    class="float-right"
+                    size="large"
+                    >ถัดไป</v-btn
+                  >
+                </div>
+                <!-- <v-stepper-actions
                   type="submit"
                   :disabled="disabled && !form1"
                   @click:next="next"
                   @click:prev="prev"
-                ></v-stepper-actions>
+                ></v-stepper-actions> -->
               </v-form>
               <!-- </v-card> -->
             </v-stepper-window-item>
@@ -235,10 +254,9 @@
                   </v-col>
                 </v-row>
                 <div class="btn-next">
-                  <v-btn @click="e1--" variant="text" class="float-left"
-                    >Previous</v-btn
+                  <v-btn @click="e1--"  variant="tonal" class="float-left"
+                  size="large"   >ก่อนหน้า</v-btn
                   >
-                  <!-- <v-spacer></v-spacer> -->
 
                   <v-btn
                     @click="e1++"
@@ -249,7 +267,8 @@
                     "
                     variant="tonal"
                     class="float-right"
-                    >next</v-btn
+                    size="large"
+                    >ถัดไป</v-btn
                   >
                 </div>
                 <!-- <v-stepper-actions
@@ -336,8 +355,9 @@
                     ></v-textarea> -->
 
                     <div class="btn-next">
-                      <v-btn @click="e1--" variant="text" class="float-left"
-                        >Previous</v-btn
+                      <v-btn @click="e1--"  class="float-left" size="large" variant="tonal"
+
+                        >ก่อนหน้า</v-btn
                       >
                       <!-- <v-spacer></v-spacer> -->
 
@@ -346,7 +366,8 @@
                         :disabled="!(checkOpt1.count == checkOpt1.checkcount)"
                         variant="tonal"
                         class="float-right"
-                        >next</v-btn
+                        size="large"
+                        >ถัดไป</v-btn
                       >
                     </div>
                     <!-- {{ checkOpt1 }} -->
@@ -408,7 +429,7 @@
                       ><v-text-field
                         variant="solo"
                         bg-color="#F2EBD1"
-                        label="X"
+                        label="X (twitter)"
                         v-model="payload.twitter"
                       ></v-text-field
                     ></v-col>
@@ -483,17 +504,24 @@
                       <span class="text-sub">บันทึก</span>
                     </v-btn>
                   </div>
+
+                  <div class="btn-next">
+                      <v-btn @click="e1--"  class="float-left" size="large" variant="tonal"
+
+                        >ก่อนหน้า</v-btn
+                      >
+                    </div>
                 </v-card>
               </div>
             </v-stepper-window-item>
           </v-stepper-window>
           <!-- v-show="e1 == 3 || el == 4"  -->
-          <v-stepper-actions
+          <!-- <v-stepper-actions
             v-show="e1 == 4"
             :disabled="disabled"
             @click:next="next"
             @click:prev="prev"
-          ></v-stepper-actions>
+          ></v-stepper-actions> -->
         </template>
       </v-stepper>
     </div>
@@ -552,7 +580,7 @@ export default {
           (files) =>
             !files ||
             !files.some((file) => file.size > 3_097_152) ||
-            "Avatar size should be less than 3 MB!",
+            "ไฟล์รูปต้องไม่เกิน 3MB!",
         ],
         // ^[a-zA-Z0-9?><;,{}[\]\-_+=!@#$%\^&*|']*$
         space: (v) => /^[^ ]+$/.test(v) || "must not contain spaces.",
@@ -575,7 +603,7 @@ export default {
           const pattern = /[\u0E00-\u0E7F']/;
           return pattern.test(v) || "ใช้ภาษาไทยเท่านั้น";
         },
-        required: [(value) => !!value || "Please fill out."],
+        required: [(value) => !!value || "กรุณากรอกข้อมูล"],
         password: (v) =>
           /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/.test(v) ||
           // /^[a-zA-Z0-9?><;.,{}[\]\-_+=!@#$%\^&*|']*$/.test(v) ||
@@ -588,19 +616,22 @@ export default {
         tel: [
           (v) =>
             // (parseInt(v) == v && v.length == 10) || 'เบอร์โทรไม่ถูกต้อง',
-            /^([0-9]{10})$/.test(v) || "Invalid phone number",
+            /^([0-9]{10})$/.test(v) || "เบอร์โทรศัพท์ไม่ถูกต้อง",
         ],
         id: [
           (v) =>
-            (parseInt(v) == v && v.length == 13 && validateThaiID(v)) ||
-            "Invalid ID card number",
+            (/^\d+$/.test(v) &&
+              parseInt(v) == v &&
+              v.length == 13 &&
+              validateThaiID(v)) ||
+            "เลขบัตรประชาชนไม่ถูกต้อง",
         ],
-        age: [(v) => parseInt(v) >= 40 || "Age must be over 40"],
+        age: [(v) => parseInt(v) >= 40 || "อายุต้องมากกว่า 40 ปี"],
         email: [
           (value) => {
             const pattern =
               /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-            return pattern.test(value) || "invalid email";
+            return pattern.test(value) || "อีเมลไม่ต้องถูก";
           },
         ],
       },
@@ -823,7 +854,7 @@ export default {
         .mutate({})
         .then((data) => {
           localStorage.setItem("username", data.firstName);
-          console.log('data.image',data);
+          console.log("data.image", data);
           localStorage.setItem("img", data.image);
           this.$store.commit("setUsername", data.firstName);
           this.$store.commit("setImg", data.image);
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 8292f43..f5d5d78 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -10,7 +10,24 @@ export default {
   components: {
     MainVote,
   },
+  mounted() {
+    // this.$emitter.on("loginUser", (val) => {
+    //   console.log("user", val);
+    //   if (val) {
+    //     this.username = localStorage.getItem("username");
+    //   }
+    // });
+    this.username = localStorage.getItem("username");
+    this.img = localStorage.getItem("img");
+    if (this.getUsername == "") {
+      this.$store.commit("setUsername", this.username);
+    }
+    if (this.getImg == ""||this.getImg == null||this.getImg == undefined) {
+      this.$store.commit("setImg", this.img);
+    }
+  },
 };
 </script>
 
-<style></style>
+<style>
+</style>