From e2f81bcf3c25cc2ced155946acdd75b2ff4456bd Mon Sep 17 00:00:00 2001 From: kj1352 Date: Sat, 6 Feb 2021 13:31:46 +0530 Subject: [PATCH] Shop UI --- src/app/fan-zone/fan-zone.page.scss | 2 +- src/app/shop/shop.page.html | 43 +++---- src/app/shop/shop.page.scss | 168 ++++++++++++++++++++++++++-- src/app/shop/shop.page.ts | 15 ++- 4 files changed, 195 insertions(+), 33 deletions(-) diff --git a/src/app/fan-zone/fan-zone.page.scss b/src/app/fan-zone/fan-zone.page.scss index 2983796..b07424c 100644 --- a/src/app/fan-zone/fan-zone.page.scss +++ b/src/app/fan-zone/fan-zone.page.scss @@ -300,7 +300,7 @@ font-size: 1rem; color: darken($blue-grey, 20%); font-weight: 500; - background-color: lighten($light-grey, 40%); + background-color: lighten($light-grey, 45%); width: 100%; border-radius: 30px; box-shadow: 2px 2px 5px $blue-grey; diff --git a/src/app/shop/shop.page.html b/src/app/shop/shop.page.html index 502b688..4c08a19 100644 --- a/src/app/shop/shop.page.html +++ b/src/app/shop/shop.page.html @@ -5,9 +5,10 @@
Just for you
-

KXIP COLLECTIONS

+

KXIP MERCH

Jersey

+
@@ -16,27 +17,31 @@
- +
-
    -
  • -
    - -
    - -

    ₹ {{ product.price }}

    -
    • -
- -
- -
- - - -
+
+

You may like

+ +
+ +
+ + + +
+ diff --git a/src/app/shop/shop.page.scss b/src/app/shop/shop.page.scss index 121b4cd..9160bc8 100644 --- a/src/app/shop/shop.page.scss +++ b/src/app/shop/shop.page.scss @@ -22,12 +22,23 @@ } .upfold { - height: 50vh; + height: 40vh; background-color: rgba($blue-grey, 0.1); padding: 20px 5%; color: $blue-grey; position: relative; + .bg-image { + position: absolute; + right: 0; + top: 0; + width: 50%; + height: 100%; + object-position: left; + object-fit: cover; + opacity: 0.1; + } + p { margin: 0; font-size: 0.8rem; @@ -35,19 +46,19 @@ h2 { margin: 30px 0px 5px 0px; - font-size: 1.5rem; + font-size: 1.8rem; } h4 { margin: 0px; - font-size: 1.1rem; + font-size: 1.2rem; } figure { position: absolute; right: 0; - bottom: 0; - width: 50%; + bottom: 34px; + width: 60%; display: block; height: 100%; @@ -56,15 +67,156 @@ width: 100%; height: 100%; object-fit: contain; + object-position: bottom; } } } .container { - height: calc(50vh - 50px); + height: 60vh; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + background-color: #f3f3f3; + position: relative; + overflow: visible; + display: flex; + align-items: center; + justify-content: center; +} + +.product-container { + width: 90%; + margin: 0 auto; + overflow: auto; + + h2 { + font-size: 1.2rem; + color: $light-grey; + margin: 0; + position: sticky; + left: 0; + } } -.catgories { - height: 50px; +.segments { + position: absolute; + top: -35px; + right: 0; + height: 70px; + display: flex; + align-items: stretch; + background-color: $dark-blue; + box-shadow: 0px 0px 5px $dark-blue; + overflow: hidden; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + + button { + font-size: 1rem; + border: 0px solid white; + width: 100px; + color: white; + background-color: transparent; + position: relative; + + &.active { + color: $pink; + font-weight: 500; + + &::before { + content: ''; + position: absolute; + left: 45px; + bottom: 15px; + width: 5px; + height: 5px; + background-color: $pink; + border-radius: 50%; + } + } + } +} + +.product-list { + white-space: nowrap; + overflow: auto; + display: inline-block; + list-style: none; + margin: 0; + padding: 30px 10px; + + li { + display: inline-block; + width: 40vw; + box-shadow: 0px 5px 10px rgba($blue-grey, 0.5); + border-radius: 10px; + overflow: hidden; + margin-right: 30px; + background-color: white; + + figure { + background-color: rgba($blue-grey, 0.1); + display: block; + + img { + width: 100%; + height: 100%; + display: block; + } + } + + label { + display: block; + color: $light-grey; + font-size: 1rem; + text-align: center; + margin: 10px 0; + padding: 0 20px; + white-space: nowrap; + text-overflow: ellipsis; + width: 100%; + overflow: hidden; + } + + p { + padding: 0 10px; + text-align: center; + margin: 10px 0; + font-size: 1rem; + font-weight: 500; + color: $dark-blue; + } + } +} + +.categories { + height: 60px; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + + button { + color: $dark-blue; + border: none; + border-radius: 30px; + height: 40px; + background-color: transparent; + font-size: 0.8rem; + width: 100px; + font-weight: 500; + display: flex; + align-items: center; + justify-content: center; + + &.active { + background-color: $green; + color: white; + } + } } \ No newline at end of file diff --git a/src/app/shop/shop.page.ts b/src/app/shop/shop.page.ts index 36a5213..44873d5 100644 --- a/src/app/shop/shop.page.ts +++ b/src/app/shop/shop.page.ts @@ -10,7 +10,8 @@ export class ShopPage implements OnInit { products: Array<{ name: string, price: number, - image: string + image: string, + link: string, }> = []; constructor( @@ -26,19 +27,23 @@ export class ShopPage implements OnInit { this.products = [{ name: 'KXIP Jersy', price: 300, - image: 'https://www.kxip.in/static-assets/images/product/player-replica-jersey-ed-2020-front.jpg' + image: 'https://www.kxip.in/static-assets/images/product/player-replica-jersey-ed-2020-front.jpg', + link: 'https://www.t10sports.com/index.php?route=product/product&path=196_214&product_id=1530', }, { name: 'KXIP Practice Jersey', price: 300, - image: 'https://www.kxip.in/static-assets/images/product/kxip-player-replica-practice-jersey-2020.jpg' + image: 'https://www.kxip.in/static-assets/images/product/kxip-player-replica-practice-jersey-2020.jpg', + link: 'https://www.t10sports.com/index.php?route=product/product&path=196_214&product_id=1530' }, { name: 'KXIP Track suit', price: 300, - image: 'https://www.kxip.in/static-assets/images/product/kxip-replica-active-tracksuit-ed-2020.jpg' + image: 'https://www.kxip.in/static-assets/images/product/kxip-replica-active-tracksuit-ed-2020.jpg', + link: 'https://www.t10sports.com/index.php?route=product/product&path=196_214&product_id=1530', }, { name: 'KXIP Track top', price: 300, - image: 'https://www.kxip.in/static-assets/images/product/KXIP-Replica-Active-Track-Top-Ed-2020.jpg' + image: 'https://www.kxip.in/static-assets/images/product/KXIP-Replica-Active-Track-Top-Ed-2020.jpg', + link: 'https://www.t10sports.com/index.php?route=product/product&path=196_214&product_id=1530' }]; }