Skip to content

Commit

Permalink
[edit] forms
Browse files Browse the repository at this point in the history
  • Loading branch information
@Joy-port
Joy-port committed Aug 20, 2021
1 parent 8c3ee2a commit 09523a9
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 30 deletions.
8 changes: 4 additions & 4 deletions app/assets/style/helpers/_helpers.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
31 changes: 16 additions & 15 deletions app/order-info.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand All @@ -54,7 +54,7 @@ <h3 class="h6 fw-medium mb-6">訂購人資訊</h3>
id="buyerEmail"
class="form-control text-dark py-2"
placeholder="[email protected]"
/>
required>
</div>
<div class="mb-6">
<label for="buyerName" class="form-label">姓名</label>
Expand All @@ -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>
Expand All @@ -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 -->
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/order.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
25 changes: 15 additions & 10 deletions app/payment-info.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -66,22 +67,25 @@ <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"
name="input security code"
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="
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -493,14 +497,15 @@ <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>
<div class="col-6 col-md-5 col-lg-4">
<a
href="payment-done.html"
class="btn btn-secondary w-100 | hvr-shrink"
type="submit"
>下一步
</a>
</div>
Expand Down

0 comments on commit 09523a9

Please sign in to comment.