design fix

b0bde269 · Adarsh K · 5ef7866a · c56c1ad8 · b0bde269 · b0bde269
Commit b0bde269 authored Feb 14, 2020 by Adarsh K
8 changed files
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -8,7 +8,7 @@
 .side_menu_wrapper {
    background: rgba(41, 40, 91, 1);
    width: 100%;
-    height: 100vh;
+    height: auto;
    padding-left: 20px;
    padding-top: 20px;
    padding-right: 10px;

--- a/src/app/cart/cart.page.scss
+++ b/src/app/cart/cart.page.scss
@@ -500,13 +500,14 @@
        bottom: 0px;
        left: 0px;
        right: 0px;
-        padding: 20px;
+        overflow: scroll;
+        top: 40%;
+        padding: 20px 20px 50px 20px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        background: #fff;
-        -webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
-        -moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
+    }
    h5 {
        color: rgba(41, 40, 91, 1);
        margin: 0px;
@@ -576,5 +577,4 @@
            }
        }
    }
-    }
 }
\ No newline at end of file
--- a/src/app/home/home.page.html
+++ b/src/app/home/home.page.html
@@ -117,17 +117,19 @@
            <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
        </agm-map>
        <div class="add_address_wrapper">
-            <h5>
+            <div class="add-address-c">
-                <span class="floatLeft">NEW ADDRESS</span>
+                <span>NEW ADDRESS</span>
-                <span class="floatRight" (click)="istoggle(); goToPage('nearby')">ADD NEW</span>
+                <span (click)="istoggle(); goToPage('nearby')">ADD NEW</span>
-                <div class="clear"></div>
+            </div>
-            </h5>
+            <div>
                <ul class="address-ul" *ngIf="addressService.addressList && addressService.addressList.length > 0">
                    <li *ngFor="let address of addressService.addressList; let i = index">
                        <div class="floatLeft">
                            {{address.default}}
                            <input class="styled-checkbox" name="addressId" id="styled-checkbox-{{i}}" type="radio" (click)="setDefault(address.addressId)" [value]="address.addressId" #addressType [checked]="address.defaultVal == 1" />
-                        <label for="styled-checkbox-{{i}}"> {{address.addressType}} </label>
+                            <label for="styled-checkbox-{{i}}">
+                {{address.addressType}}
+              </label>
                        </div>
                        <div class="floatLeft">
                            <p>
@@ -138,5 +140,6 @@
                    </li>
                </ul>
            </div>
+        </div>
    </ion-content>
 </div>
\ No newline at end of file
--- a/src/app/home/home.page.scss
+++ b/src/app/home/home.page.scss
@@ -19,7 +19,7 @@
            p {
                margin: 0px;
                text-align: right;
-        background-image: url("../../assets/Path 55_2.png");
+                background-image: url('../../assets/Path 55_2.png');
                background-position: left;
                background-repeat: no-repeat;
                background-size: 12px;
@@ -91,7 +91,7 @@
        .nearby_icon {
            width: 25px;
            height: 25px;
-      background-image: url("../../assets/location.png");
+            background-image: url('../../assets/location.png');
            background-position: center;
            background-size: contain;
        }
@@ -284,15 +284,15 @@
    .styled-checkbox {
        position: absolute; // take it out of document flow
        opacity: 0; // hide it
-    & + label {
+        &+label {
            position: relative;
            cursor: pointer;
            padding: 0;
            width: 100%;
        }
        // Box.
-    & + label:before {
+        &+label:before {
-      content: "";
+            content: '';
            margin-right: 10px;
            display: inline-block;
            vertical-align: text-top;
@@ -302,30 +302,29 @@
            background: white;
            border: 1px solid rgba(215, 213, 228, 1);
        }
-    &:checked + label:before {
+        &:checked+label:before {
            background: #29285b;
        }
        // Disabled state label.
-    &:disabled + label {
+        &:disabled+label {
            color: #b8b8b8;
            cursor: auto;
        }
        // Disabled box.
-    &:disabled + label:before {
+        &:disabled+label:before {
            box-shadow: none;
            background: #ddd;
        }
        // Checkmark. Could be replaced with an image
-    &:checked + label:after {
+        &:checked+label:after {
-      content: "";
+            content: '';
            position: absolute;
            left: 6px;
            top: 10px;
            background: white;
            width: 2px;
            height: 2px;
-      box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white,
+            box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
-        4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
            transform: rotate(45deg);
        }
    }

--- a/src/app/nearby/nearby.page.scss
+++ b/src/app/nearby/nearby.page.scss
-.nearby_map {
+    .nearby_map {
        width: 100%;
        height: 100%;
        .overlay {
@@ -11,6 +11,17 @@
        }
        agm-map {
            width: 100%;
+            height: 100vh;
+            .overlay {
+                position: absolute;
+                top: 0px;
+                left: 0px;
+                right: 0px;
+                bottom: 0px;
+                background: rgba(29, 27, 130, 0.2);
+            }
+            agm-map {
+                width: 100%;
                height: 100%;
                position: relative;
            }
@@ -26,9 +37,8 @@
                    padding: 0px;
                }
            }
-}
+        }
+        .add_address_wrapper {
-.add_address_wrapper {
            position: fixed;
            bottom: 0px;
            left: 0px;
@@ -71,18 +81,17 @@
                color: #fff;
                border-radius: 4px;
            }
-}
+        }
+        .styled-checkbox {
-.styled-checkbox {
            position: absolute; // take it out of document flow
            opacity: 0; // hide it
-  & + label {
+            &+label {
                position: relative;
                cursor: pointer;
                padding: 0;
            }
            // Box.
-  & + label:before {
+            &+label:before {
                content: '';
                margin-right: 10px;
                display: inline-block;
@@ -95,21 +104,21 @@
            }
            // Box hover
            // Box checked
-  &:checked + label:before {
+            &:checked+label:before {
                background: #29285b;
            }
            // Disabled state label.
-  &:disabled + label {
+            &:disabled+label {
                color: #b8b8b8;
                cursor: auto;
            }
            // Disabled box.
-  &:disabled + label:before {
+            &:disabled+label:before {
                box-shadow: none;
                background: #ddd;
            }
            // Checkmark. Could be replaced with an image
-  &:checked + label:after {
+            &:checked+label:after {
                content: '';
                position: absolute;
                left: 6px;
@@ -117,8 +126,8 @@
                background: white;
                width: 2px;
                height: 2px;
-    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white,
+                box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
-      4px -6px 0 white, 4px -8px 0 white;
                transform: rotate(45deg);
            }
-}
+        }
+    }
\ No newline at end of file
--- a/src/app/productdetail/productdetail.page.html
+++ b/src/app/productdetail/productdetail.page.html
@@ -13,10 +13,7 @@
 <ion-content>
    <div class="product_detail_wrapper" *ngIf="product">
        <div class="product_banner">
-      <div
+            <div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></div>
-        [ngClass]="checkFavStatus(product.prodId)"
-        (click)="changeFav(product.prodId)"
-      ></div>
            <div class="featured_badge" *ngIf="product.featured">Featured</div>
            <ion-slides pager="true" [options]="bannerOptions" *ngIf="slideData">
                <ion-slide *ngFor="let prodImg of slideData">
@@ -39,24 +36,18 @@
        <div class="product_header">
            <ion-row>
                <ion-col size="8">
-          <h3 [innerHTML]="product.prodName"></h3>
+                    <h3>{{product.prodName}}</h3>
                    <p>
-            <strong
+                        <strong><span><img src="../assets/Path61_2.png" /></span>{{product.rating}}</strong>&nbsp;
-              ><span><img src="../assets/Path61_2.png"/></span
+                        {{product.category}}, {{product.subCate}}
-              >{{product.rating}}</strong
-            >&nbsp; {{product.category}}, {{product.subCate}}
                        <br />
-            <span *ngFor="let tag of product.tag"
+                        <span *ngFor="let tag of product.tag"><span *ngIf="tag !=='No-Tag'">#{{tag}}&nbsp;</span></span>
-              ><span *ngIf="tag !=='No-Tag'">#{{tag}}&nbsp;</span></span
-            >
                    </p>
                </ion-col>
                <ion-col size="4">
                    <h5>A$ {{product.price}}</h5>
                    <p>
-            <span class="offer" *ngIf="product.discount > 0"
+                        <span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span>
-              >-{{product.discount}}%</span
-            >
                    </p>
                </ion-col>
            </ion-row>
@@ -71,14 +62,8 @@
                            <li *ngIf="color !=='No-Color'">
                                <button id="custom_check_button">
                                    <label>
-                    <input
+                                        <input id="{{color}}" type="radio" name="color" value="{{color}}"
-                      id="{{color}}"
+                                            (click)="cartService.choose_color(color)" [checked]="i==0" />
-                      type="radio"
-                      name="color"
-                      value="{{color}}"
-                      (click)="cartService.choose_color(color)"
-                      [checked]="i==0"
-                    />
                                        <p>{{color}}</p>
                                    </label>
                                </button>
@@ -95,14 +80,8 @@
                            <li *ngIf="size !=='Any-Size'">
                                <button id="custom_check_button">
                                    <label>
-                    <input
+                                        <input id="{{size}}" type="radio" name="services" value="{{size}}"
-                      id="{{size}}"
+                                            (click)="cartService.choose_size(size)" [checked]="i==0" />
-                      type="radio"
-                      name="services"
-                      value="{{size}}"
-                      (click)="cartService.choose_size(size)"
-                      [checked]="i==0"
-                    />
                                        <p>{{size}}</p>
                                    </label>
                                </button>
@@ -169,7 +148,7 @@
                </ul>
            </div> -->
            <h5>Description</h5>
-      <p [innerHTML]="product.prodDesc"></p>
+            <p>{{product.prodDesc}}</p>
            <!--<h5>
                <span class="floatLeft">Reviews</span><span class="floatRight" (click)="goToPage('reviewlist')">MORE</span>
                <div class="clear"></div>
@@ -235,10 +214,8 @@
                </ul>
            </div> -->
            <h5 *ngIf="product.similar && product.similar.length > 0">
-        <span class="floatLeft">Related Products</span
+                <span class="floatLeft">Related Products</span><span class="floatRight"
-        ><span class="floatRight" (click)="goToPage('productlist', data)"
+                    (click)="goToPage('productlist', data)">MORE</span>
-          >MORE</span
-        >
                <div class="clear"></div>
            </h5>
            <div class="related_product_slider">
@@ -247,16 +224,11 @@
                        <ion-slide *ngFor="let similar of product.similar">
                            <li (click)="viewProd(similar)">
                                <div class="product_image">
-                  <img
+                                    <img [src]="similar.image" onerror="this.src='../assets/[email protected]'" />
-                    [src]="similar.image"
+                                    <div [ngClass]="checkFavStatus(similar.prodId)" (click)="changeFav(similar.prodId)">
-                    onerror="this.src='../assets/[email protected]'"
+                                    </div>
-                  />
-                  <div
-                    [ngClass]="checkFavStatus(similar.prodId)"
-                    (click)="changeFav(similar.prodId)"
-                  ></div>
                                </div>
-                <h5 [innerHTML]="similar.prodName"></h5>
+                                <h5>{{similar.prodName}}</h5>
                                <p>{{similar.price}}</p>
                            </li>
                        </ion-slide>
@@ -275,19 +247,10 @@
 <ion-footer *ngIf="product">
    <div class="footer_div">
        <div class="footer_options">
-      <button
+            <button class="share"
-        class="share"
+                (click)="socialShare(product.prodName, product.category, product.subCate, product.price, product.image)"></button>
-        (click)="socialShare(product.prodName, product.category, product.subCate, product.price, product.image)"
+            <button [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></button>
-      ></button>
+            <button class="cart" [disabled]="!disCart" (click)="buyNow(product,0)"></button>
-      <button
-        [ngClass]="checkFavStatus(product.prodId)"
-        (click)="changeFav(product.prodId)"
-      ></button>
-      <button
-        class="cart"
-        [disabled]="!disCart"
-        (click)="buyNow(product,0)"
-      ></button>
        </div>
        <div class="footer_btn" (click)="buyNow(product,1)">BUY NOW</div>
    </div>

--- a/src/app/productdetail/productdetail.page.scss
+++ b/src/app/productdetail/productdetail.page.scss
@@ -43,7 +43,7 @@
            z-index: 2;
        }
        img {
-      width: 100%;
+            // width: 100%;
            height: 100%;
            object-position: center;
            object-fit: cover;
@@ -55,10 +55,10 @@
            margin: 0px;
            padding: 0px;
            color: rgba(41, 40, 91, 1);
-      font-size: 26px;
+            font-size: 20px;
            font-weight: 900;
            padding-bottom: 5px;
-      white-space: nowrap;
+            // white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
@@ -66,7 +66,7 @@
            margin: 0px;
            padding: 0px;
            color: rgba(121, 119, 139, 1);
-      white-space: nowrap;
+            // white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            strong {
@@ -122,7 +122,7 @@
                        height: 100%;
                        outline: none;
                        font-size: 17px;
-            white-space: nowrap;
+                        // white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
@@ -137,6 +137,9 @@
                        padding-top: 35px;
                        padding-bottom: 35px;
                        text-align: center;
+                        display: flex;
+                        align-items: center;
+                        font-size: 14px;
                    }
                    #custom_check_button label {
                        width: 100%;
@@ -150,7 +153,7 @@
                        top: 0px;
                        opacity: 0;
                    }
-          #custom_check_button input:checked + p {
+                    #custom_check_button input:checked+p {
                        background-color: rgba(41, 40, 91, 1);
                        color: #fff;
                        border-radius: 10px !important;
@@ -213,7 +216,7 @@
                        top: 0px;
                        opacity: 0;
                    }
-          #custom_check_button input:checked + p {
+                    #custom_check_button input:checked+p {
                        border: 3px dashed #29285b;
                        color: transparent;
                        border-radius: 10px !important;
@@ -411,7 +414,6 @@
        .fav_active {
            background-image: url('../../assets/heart.png');
        }
        .share {
            background-image: url('../../assets/Group57_2.png');
        }

--- a/src/app/storelist/storelist.page.scss
+++ b/src/app/storelist/storelist.page.scss
 .home_wrapper {
    width: 100%;
+    padding-bottom: 50px;
    .home_banner {
        width: 100%;
        height: 300px;