From 3598d33f74dddd99208518719580ec5a5d98282a Mon Sep 17 00:00:00 2001
From: Joy Cheng <joy.cheng97324@gmail.com>
Date: Sat, 21 Aug 2021 00:43:57 +0800
Subject: [PATCH] [edit] payment done page

---
 app/assets/style/helpers/_helpers.scss |  7 +++-
 app/layout.ejs                         | 58 +++++++++++++++++++++++---
 app/payment-done.html                  |  4 +-
 3 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/app/assets/style/helpers/_helpers.scss b/app/assets/style/helpers/_helpers.scss
index 4e8a7be..cb83668 100644
--- a/app/assets/style/helpers/_helpers.scss
+++ b/app/assets/style/helpers/_helpers.scss
@@ -44,8 +44,13 @@
 
 /* vh */
 
-.vh-100-lg-header {
+.vh-100-md-header-navbar {
+  @include media-breakpoint-up(md) {
+    height: calc(100vh - 145px);
+  }
+}
 
+.vh-100-lg-header {
   @include media-breakpoint-up(lg) {
     height: calc(100vh - 92px);
   }
diff --git a/app/layout.ejs b/app/layout.ejs
index 4a7ac55..758d775 100644
--- a/app/layout.ejs
+++ b/app/layout.ejs
@@ -603,7 +603,7 @@
             </div>
           </div>
         </li>
-        <li class="card border-0 card-close">
+        <li class="card border-0 mb-2 card-close">
           <button
             type="button"
             class="btn-close text-reset p-2"
@@ -651,6 +651,54 @@
             </div>
           </div>
         </li>
+        <li class="card border-0 mb-2 card-close">
+          <button
+            type="button"
+            class="btn-close text-reset p-2"
+            data-bs-dismiss="card-close"
+            aria-label="Close"
+          ></button>
+
+          <div class="card-body d-flex px-10 pt-0 pb-5 mb-2">
+            <div class="d-flex justify-content-between w-100">
+              <div class="d-flex w-100">
+                <img
+                  src="https://images.unsplash.com/photo-1505149538339-f92450a5783c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
+                  alt="exhibition img"
+                  class="card-img h-120 w-120"
+                />
+                <div class="d-flex flex-column justify-content-between ms-5">
+                  <div class="title flex-grow-1">
+                    <h4 class="fs-7 fw-bold mb-0">虛擬戀人 the Future of Humans</h4>
+                    <p class="mb-0">01 JUN — 31 OCT</p>
+                    <p class="link-dark">全票</p>
+                  </div>
+                  <p class="h6 fw-bold mb-0">NT$450</p>
+                </div>
+              </div>
+              <!-- - 01 + -->
+              <div
+                class="
+                  d-flex
+                  flex-column flex-md-row
+                  justify-content-center
+                  align-items-center
+                  w-30
+                "
+              >
+                <a href="#" class="link-black mb-1 mb-md-0 p-0 pe-md-1"
+                  ><span class="material-icons-outlined"> remove </span></a
+                >
+                <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
+                  <p class="h1 fw-bold mb-0">01</p>
+                </a>
+                <a href="#" class="link-black mb-1 mb-md-0 p-0 ps-md-1"
+                  ><span class="material-icons-outlined"> add </span></a
+                >
+              </div>
+            </div>
+          </div>
+        </li>
       </ul>
       <!-- bottom btn -->
       <div class="bg-black py-8">
@@ -714,12 +762,12 @@
               </div>
               <button
                 class="btn btn-secondary text-center w-100"
-                type="submi
+                type="submit"
               >
                 登入
               </button>
             </form>
-            <p class="fw-light text-dark text-center">其他登入方式</p>
+            <p class="fw-light text-dark text-center mb-3">其他登入方式</p>
             <div class="d-flex justify-content-center align-items-center mb-5">
               <a href="#" class="link-dark fs-3 py-0 px-3">
                 <i class="fab fa-apple"></i>
@@ -732,7 +780,7 @@
               ></a>
             </div>
 
-            <div class="modal-footer border-light justify-content-center">
+            <div class="modal-footer border-light justify-content-between">
               <p class="fw-light text-dark text-center me-5">還沒申請帳號?</p>
               <button
                 class="btn btn-outline-secondary px-5"
@@ -835,7 +883,7 @@
                 立即註冊
               </button>
             </form>
-            <p class="fw-light text-dark text-center">其他註冊方式</p>
+            <p class="fw-light text-dark text-center mb-3">其他註冊方式</p>
             <div class="d-flex justify-content-center align-items-center mb-8">
               <a href="#" class="link-dark fs-3 py-0 px-3">
                 <i class="fab fa-apple"></i>
diff --git a/app/payment-done.html b/app/payment-done.html
index fbbdb77..882ed23 100644
--- a/app/payment-done.html
+++ b/app/payment-done.html
@@ -10,10 +10,10 @@
 <!-- main -->
 <main>
     <section>
-        <div class="vh-100-minus-header-navbar container-lg">
+        <div class="vh-100-md-header-navbar container-md">
                 <div class="row flex-md-column justify-content-md-center h-100">
                     <div class="col-md-8 col-lg-6 mx-auto h-100 | d-flex flex-column justify-content-between | d-md-block h-md-auto">
-                        <div class="flex-grow-1 h-100 | h-md-auto | mt-12 | mt-md-0 mb-md-13">
+                        <div class="flex-grow-1 h-100 | h-md-auto | mb-13 mt-12 | mt-md-0">
                             <i class="far fa-check-circle | d-block h1 text-center  text-primary | mb-2"></i>
                             <h2 class="text-center text-primary mt-1 mb-7 ">完成訂購</h2>
                             <p class="mb-12">您的展覽憑證代碼為：</p>