From 4fb2c30564a43a8707f37029b8de8876e161393b Mon Sep 17 00:00:00 2001
From: Jevy Larano <32891190+jrlarano@users.noreply.github.com>
Date: Tue, 30 Jul 2024 12:12:48 +0800
Subject: [PATCH] Update shopping list quantity style

---
 .../components/common/shopping-list.styl      | 59 ++++++++++++++++--
 .../components/common/shopping-list.ts        | 60 ++++++++++---------
 2 files changed, 85 insertions(+), 34 deletions(-)

diff --git a/lib/kits/core-ui/components/common/shopping-list.styl b/lib/kits/core-ui/components/common/shopping-list.styl
index 03582934..3dd24827 100644
--- a/lib/kits/core-ui/components/common/shopping-list.styl
+++ b/lib/kits/core-ui/components/common/shopping-list.styl
@@ -78,9 +78,19 @@
     .sgn-shopping-list-content-heading
         flex 1
 
+    .sgn-product-price-container
+        display flex
+        flex-direction row
+        justify-content center
+        align-items center
+
     .sgn-shopping-list-content-price
         font-weight 500
         font-size 1.2rem
+        margin-left 0.3rem
+
+    .sgn-offer-product-quantity
+        width 110px
 
     .sgn-offer-product-quantity-content
         display flex
@@ -88,14 +98,18 @@
         border-radius 19.5px
         overflow hidden
         padding 2px
-
+        margin-right .1rem
+        
         button
             min-width 0
-            padding 8px 9px
+            padding 0
             background transparent
             color #4e4e4e
             border-radius 100%
-            border 2px solid #000000
+            border 1px solid #7b7b7b
+            text-align center
+            width 36px
+            height 36px
 
             svg
                 vertical-align middle
@@ -144,6 +158,38 @@
     .sgn-shopping-list-items-container
         height 400px
 
+@media (max-width 840px)
+    .sgn-shopping-popup
+        .sgn-product-price-container
+            flex-direction column-reverse
+            align-items flex-end
+
+        .sgn-offer-product-quantity
+            width auto
+            margin-top .833rem
+
+        .sgn-product-price
+            flex 1
+            font-size 1.2rem
+            margin-top 1rem
+
+        .sgn-offer-product-quantity-content
+            button
+                cursor pointer
+                border 0.5px solid #7b7b7b
+
+                svg
+                    width 10px
+                    height 10px
+
+            input
+                color #202020
+                border unset
+                background unset
+                width 30px
+                padding 8px 0
+                text-align center
+
 @media print
     .sgn__header
         overflow visible
@@ -200,9 +246,10 @@
         .sgn-shopping-list-content
             width 100%
             white-space normal
+            display flex
 
             .sgn-shopping-list-content-heading
-                width 95%
+                flex 1
 
-            .sgn-offer-product-quantity
-                width 5%
+            .sgn-product-price-container
+                flex-direction row
diff --git a/lib/kits/core-ui/components/common/shopping-list.ts b/lib/kits/core-ui/components/common/shopping-list.ts
index cabf07bc..880f9468 100644
--- a/lib/kits/core-ui/components/common/shopping-list.ts
+++ b/lib/kits/core-ui/components/common/shopping-list.ts
@@ -32,22 +32,24 @@ const defaultTemplate = `\
                         <div class="sgn-shopping-list-content-heading sgn-truncate-elipsis">
                             <span>{{name}}</span>
                         </div>
-                        <div id="sgn-offer-product-quantity-{{id}}" class="sgn-offer-product-quantity">
-                            <div class="sgn-offer-product-quantity-content">
-                                <button id="sgn-offer-product-quantity-minus-{{id}}" class="sgn-offer-product-quantity-minus sgn-hide-print">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-minus-circle-fill" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
-                                </button>
-                                <input type="text" id="sgn-offer-product-quantity-text-{{id}}" class="sgn-offer-product-quantity-text" value="{{quantity}}" disabled/>
-                                <button id="sgn-offer-product-quantity-plus-{{id}}" class="sgn-offer-product-quantity-plus sgn-hide-print">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-plus-circle-fill" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
-                                </button>
+                        <div class="sgn-product-price-container">
+                            <div id="sgn-offer-product-quantity-{{id}}" class="sgn-offer-product-quantity">
+                                <div class="sgn-offer-product-quantity-content">
+                                    <button id="sgn-offer-product-quantity-minus-{{id}}" class="sgn-offer-product-quantity-minus sgn-hide-print">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-minus-circle-fill" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
+                                    </button>
+                                    <input type="text" id="sgn-offer-product-quantity-text-{{id}}" class="sgn-offer-product-quantity-text" value="{{quantity}}" disabled/>
+                                    <button id="sgn-offer-product-quantity-plus-{{id}}" class="sgn-offer-product-quantity-plus sgn-hide-print">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-plus-circle-fill" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
+                                    </button>
+                                </div>
                             </div>
+                            {{#price}}
+                            <div class="sgn-shopping-list-content-price">
+                                <span>{{price}}</span>
+                            </div>
+                            {{/price}}
                         </div>
-                        {{#price}}
-                        <div class="sgn-shopping-list-content-price">
-                            <span>{{price}}</span>
-                        </div>
-                        {{/price}}
                     </div>
                 </div>
             </li>
@@ -62,22 +64,24 @@ const defaultTemplate = `\
                         <div class="sgn-shopping-list-content-heading sgn-truncate-elipsis">
                             <span>{{name}}</span>
                         </div>
-                        <div id="sgn-offer-product-quantity-{{id}}" class="sgn-offer-product-quantity">
-                            <div class="sgn-offer-product-quantity-content">
-                                <button id="sgn-offer-product-quantity-minus-{{id}}" class="sgn-offer-product-quantity-minus sgn-hide-print" disabled>
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-minus-circle-fill" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
-                                </button>
-                                <input type="text" id="sgn-offer-product-quantity-text-{{id}}" class="sgn-offer-product-quantity-text" value="{{quantity}}" disabled/>
-                                <button id="sgn-offer-product-quantity-plus-{{id}}" class="sgn-offer-product-quantity-plus sgn-hide-print" disabled>
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-plus-circle-fill" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
-                                </button>
+                        <div class="sgn-product-price-container">
+                            <div id="sgn-offer-product-quantity-{{id}}" class="sgn-offer-product-quantity">
+                                <div class="sgn-offer-product-quantity-content">
+                                    <button id="sgn-offer-product-quantity-minus-{{id}}" class="sgn-offer-product-quantity-minus sgn-hide-print" disabled>
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-minus-circle-fill" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
+                                    </button>
+                                    <input type="text" id="sgn-offer-product-quantity-text-{{id}}" class="sgn-offer-product-quantity-text" value="{{quantity}}" disabled/>
+                                    <button id="sgn-offer-product-quantity-plus-{{id}}" class="sgn-offer-product-quantity-plus sgn-hide-print" disabled>
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-plus-circle-fill" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
+                                    </button>
+                                </div>
                             </div>
+                            {{#price}}
+                            <div class="sgn-shopping-list-content-price">
+                                <span>{{price}}</span>
+                            </div>
+                            {{/price}}
                         </div>
-                        {{#price}}
-                        <div class="sgn-shopping-list-content-price">
-                            <span>{{price}}</span>
-                        </div>
-                        {{/price}}
                     </div>
                 </div>
             </li>