Skip to content

Commit

Permalink
Update shopping list quantity style
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrlarano
jrlarano committed Jul 30, 2024
1 parent bdba11d commit 4fb2c30
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 34 deletions.
59 changes: 53 additions & 6 deletions lib/kits/core-ui/components/common/shopping-list.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,24 +78,38 @@
.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
border 1px solid rgba(0, 0, 0, 0.12)
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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
60 changes: 32 additions & 28 deletions lib/kits/core-ui/components/common/shopping-list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit 4fb2c30

Please sign in to comment.