From 09523a9a3b2bbb045ef01da8d6849bca93b7eaf5 Mon Sep 17 00:00:00 2001
From: Joy Cheng <joy.cheng97324@gmail.com>
Date: Sat, 21 Aug 2021 00:30:42 +0800
Subject: [PATCH] [edit] forms

---
 app/assets/style/helpers/_helpers.scss |  8 +++----
 app/order-info.html                    | 31 +++++++++++++-------------
 app/order.html                         |  2 +-
 app/payment-info.html                  | 25 ++++++++++++---------
 4 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/app/assets/style/helpers/_helpers.scss b/app/assets/style/helpers/_helpers.scss
index 749f40a..4e8a7be 100644
--- a/app/assets/style/helpers/_helpers.scss
+++ b/app/assets/style/helpers/_helpers.scss
@@ -44,9 +44,9 @@
 
 /* vh */
 
-.vh-100-minus-header {
-  height: calc(100vh - 60px);
-  @include media-breakpoint-up(md) {
-    height: calc(100vh - 90px);
+.vh-100-lg-header {
+
+  @include media-breakpoint-up(lg) {
+    height: calc(100vh - 92px);
   }
 }
\ No newline at end of file
diff --git a/app/order-info.html b/app/order-info.html
index 15d3eda..263ce3d 100644
--- a/app/order-info.html
+++ b/app/order-info.html
@@ -10,7 +10,7 @@
 <main>
   <!-- 修正版型不使用d-none 使用order -->
   <section>
-    <div class="container-md vh-100-minus-header">
+    <div class="container-md vh-100-lg-header">
       <div class="d-flex flex-column h-100">
         <!-- timeline -->
         <div class="row">
@@ -43,7 +43,7 @@
         <div class="row flex-lg-grow-1">
           <!--  buyer info form 記得加上validation-->
           <div class="col-lg-4 order-md-1 order-lg-2">
-            <form class="mb-12">
+            <form class="mb-12 needs-validation" novalidate>
               <h3 class="h6 fw-medium mb-6">訂購人資訊</h3>
 
               <div class="mb-6">
@@ -54,7 +54,7 @@ <h3 class="h6 fw-medium mb-6">訂購人資訊</h3>
                   id="buyerEmail"
                   class="form-control text-dark py-2"
                   placeholder="example@gmail.com"
-                />
+                  required>
               </div>
               <div class="mb-6">
                 <label for="buyerName" class="form-label">姓名</label>
@@ -64,7 +64,7 @@ <h3 class="h6 fw-medium mb-6">訂購人資訊</h3>
                   id="buyerName"
                   class="form-control text-dark py-2"
                   placeholder="請輸入您的姓名"
-                />
+                  required>
               </div>
               <div class="mb-6">
                 <label for="buyerPhoneNum" class="form-label">聯絡電話</label>
@@ -74,25 +74,26 @@ <h3 class="h6 fw-medium mb-6">訂購人資訊</h3>
                   id="buyerPhoneNum"
                   class="form-control text-dark py-2"
                   placeholder="請輸入電話"
-                />
+                  required>
               </div>
               <div class="mb-6">
-                <label for="couponCode" class="form-label">優惠碼</label>
+              <label for="couponCode" class="form-label">優惠碼</label>
+              <div class="input-group has-validation">
                 <input
                   type="text"
                   name="input coupon"
                   id="couponCode"
                   class="form-control text-dark py-2 mb-1"
                   placeholder="TG87526"
-                  aria-describedby="couponCheckBlock"
-                />
-                <div
-                  id="couponCheckBlock"
-                  class="form-text text-end text-primary"
-                >
-                  優惠碼已生效
-                </div>
+                  aria-describedby="validtextCheckFeedback"
+                  required
+                  >
+                  <button class="btn btn-outline-primary rounded-end py-2 mb-1" type="submit">優惠碼驗證</button>
+                  <!-- 這邊不知道為什麼 即使沒有填寫內容 送出資料後 invalid 的情況下還是會出現這組字-->
+                  <div id="validtextCheckFeedback" class="text-end text-primary valid-feedback">優惠碼已生效</div>
               </div>
+              
+            </div>
             </form>
           </div>
           <!-- 小計 mobile -->
@@ -508,7 +509,7 @@ <h2 class="fs-7 fw-bold mb-0">高雄設計節</h2>
           <div class="col-6 col-lg-2">
             <a
               href="order.html"
-              class="btn btn-outline-primary w-100 me-5 | hvr-shrink"
+              class="btn btn-outline-primary w-100 | hvr-shrink"
               >返回</a
             >
           </div>
diff --git a/app/order.html b/app/order.html
index e8ebb8a..26f0c6a 100644
--- a/app/order.html
+++ b/app/order.html
@@ -13,7 +13,7 @@
   <section>
     <div class="container-lg">
       <div
-        class="d-flex flex-column justify-content-between vh-100-minus-header"
+        class="d-flex flex-column justify-content-between vh-100-lg-header"
       >
         <div class="content">
           <!-- timeline -->
diff --git a/app/payment-info.html b/app/payment-info.html
index 8e20cd1..e91d365 100644
--- a/app/payment-info.html
+++ b/app/payment-info.html
@@ -10,7 +10,7 @@
 <main>
   <!-- 修正d-none 為order 排列方式 mobile 為優先排列 -->
   <section>
-    <div class="container-md vh-100-minus-header">
+    <div class="container-md vh-100-lg-header">
       <div class="d-flex flex-column h-100">
         <!-- timeline -->
         <div class="row">
@@ -43,7 +43,7 @@
         <div class="row flex-lg-grow-1">
           <!--  payment info form 記得加上validation-->
           <div class="col-lg-4 order-md-1 order-lg-2">
-            <form class="mb-12">
+            <form class="mb-12 needs-validation" novalidate>
               <h3 class="h6 fw-medium mb-6">付款資訊</h3>
 
               <div class="mb-6">
@@ -56,7 +56,8 @@ <h3 class="h6 fw-medium mb-6">付款資訊</h3>
                   id="buyerCreditCard"
                   class="form-control text-dark py-2"
                   placeholder="Xxxx-xxxx-xxxx-xxxx"
-                />
+                  required
+                >
               </div>
               <div class="mb-6">
                 <label for="validDate" class="form-label">有效日期</label>
@@ -66,9 +67,10 @@ <h3 class="h6 fw-medium mb-6">付款資訊</h3>
                   id="validDate"
                   class="form-control text-dark py-2"
                   placeholder="(MM/YY)"
-                />
+                  required
+                >
               </div>
-              <div class="mb-6">
+              <div class="mb-10">
                 <label for="securityCode" class="form-label">安全碼</label>
                 <input
                   type="password"
@@ -76,12 +78,14 @@ <h3 class="h6 fw-medium mb-6">付款資訊</h3>
                   id="securityCode"
                   class="form-control text-dark py-2"
                   placeholder="***"
-                />
+                  required
+                >
               </div>
+              <button type="submit" class="btn btn-outline-primary w-100">確認付款資訊</button>
             </form>
           </div>
           <!-- 小計 mobile -->
-          <div class="col order-md-2 d-lg-none mb-5 mb-lg-0">
+          <div class="col order-md-2 d-lg-none mb-12">
             <ul>
               <li
                 class="
@@ -122,7 +126,7 @@ <h3 class="h6 fw-medium mb-6">付款資訊</h3>
             </ul>
           </div>
           <!-- exhibition info -->
-          <div class="col-lg-8 order-md-3 order-lg-1 mb-lg-0 mb-12">
+          <div class="col-lg-8 order-md-3 order-lg-1 mb-12">
             <ul>
               <li class="card border-0 mb-6 card-close">
                 <div class="card-body d-flex justify-content-between p-0 mb-2">
@@ -336,7 +340,7 @@ <h2 class="fs-7 fw-bold mb-0">No.22 線上設計展</h2>
                   </div>
                 </div>
               </li>
-              <li class="card border-0 mb-6 card-close">
+              <li class="card border-0 card-close">
                 <div class="card-body d-flex justify-content-between p-0 mb-2">
                   <div class="d-flex">
                     <div class="w-50 w-md-25 me-5">
@@ -493,7 +497,7 @@ <h2 class="fs-7 fw-bold mb-0">高雄設計節</h2>
           <div class="col-6 col-md-3 col-lg-2">
             <a
               href="order-info.html"
-              class="btn btn-outline-primary w-100 me-5 | hvr-shrink"
+              class="btn btn-outline-primary w-100 | hvr-shrink"
               >返回</a
             >
           </div>
@@ -501,6 +505,7 @@ <h2 class="fs-7 fw-bold mb-0">高雄設計節</h2>
             <a
               href="payment-done.html"
               class="btn btn-secondary w-100 | hvr-shrink"
+              type="submit"
               >下一步
             </a>
           </div>