Merge branch 'css_fixes'

pagarevijayy · Jul 18, 2021 · 12a809c · 12a809c
2 parents 5d29c7f + 2bffd44
commit 12a809c
Show file tree

Hide file tree

Showing 13 changed files with 164 additions and 93 deletions.
diff --git a/README.md b/README.md
@@ -1,27 +1,10 @@
-# Ecom frontend eragap
+# Ecom fronten
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.1.
+1. production branch is v1 something
 
-## Development server
+### Project dependencies
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+(that needs to be updated project to project)
 
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+1. Change inbrowser data (in assets folder)
+2. Environment variables
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "internet": "ng serve --host=192.168.0.105",
+    "internet": "ng serve --host=192.168.0.106",
     "pwa": "ng build --prod && http-server dist/ecom-frontend-eragap -p 8081",
     "build": "ng build",
     "test": "ng test",

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -3,6 +3,7 @@
     <router-outlet></router-outlet>
     <footer class="secondary-text text-center fs-12 my-4">
         <div class="store-credits"> {{footerText}} </div>
-        <div class="powered-by pt-2 cursor-pointer" (click)="poweredByEragapTech()"> <small style="font-size: 8px;">Powered by</small> Eragap Tech Company</div>
+        <div class="powered-by pt-2 cursor-pointer" (click)="poweredByEragapTech()"> <small
+                style="font-size: 8px;">Powered by</small> Eragap Tech</div>
     </footer>
 </app-main-nav>
diff --git a/src/app/components/homepage/homepage.component.html b/src/app/components/homepage/homepage.component.html
@@ -80,18 +80,18 @@ <h5 class="py-3 fs-18">{{item?.displayTitle}}</h5>
     </div>
 
     <!-- homepage: whatsapp CTA -->
-    <div class="whatsapp-cta p-3 my-4">
+    <div class="whatsapp-cta py-3 px-1 my-4">
         <a class="btn btn-whatsapp-style"
             href="https://wa.me/{{whatsAppContactNumber}}?text={{whatsAppEnquiryTextPrimary}}" target="_blank">
             <section class="d-flex align-items-center">
                 <img src="assets/images/whatsapp.svg" alt="whatsapp">
-                <span class="px-2 fs-12"> {{whatsAppButtonLabelSecondary}}</span>
+                <span class="px-1 fs-12"> {{whatsAppButtonLabelSecondary}}</span>
             </section>
         </a>
     </div>
 
     <!-- homepage: footer section  -->
-    <div class="footer-styling row no-gutters py-4">
+    <div class="footer-styling row no-gutters py-4 border-radius-xl ">
         <!-- section: Contact Map -->
         <section class="col-sm">
             <div class="footer-text-cosmetics">
@@ -103,7 +103,7 @@ <h5 class="py-3 fs-18">{{item?.displayTitle}}</h5>
                     class='map-style' allowfullscreen="" aria-hidden="false" tabindex="0">
                 </iframe>
             </div>
-            <aside class="pt-3 fs-12">
+            <aside class="pt-4 fs-12">
                 <span class="d-block">{{storeAddressLineOne}} </span>
                 <span class="d-block">{{storeAddressLineTwo}}</span>
             </aside>
@@ -115,13 +115,16 @@ <h5 class="py-3 fs-18">{{item?.displayTitle}}</h5>
                     <h5 class="fs-18" *ngIf="!(isHandset$ | async)"> follow us:</h5>
                     <div class="pt-1">
                         <span class="px-2" *ngIf="!!storeFacebookURL">
-                            <i class="fa fa-facebook cursor-pointer" (click)="socialMediaCTA('facebook')" aria-hidden="true"></i>
+                            <i class="fa fa-facebook cursor-pointer" (click)="socialMediaCTA('facebook')"
+                                aria-hidden="true"></i>
                         </span>
                         <span class="px-2" *ngIf="!!storeInstagramURL">
-                            <i class="fa fa-instagram cursor-pointer" (click)="socialMediaCTA('instagram')" aria-hidden="true"></i>
+                            <i class="fa fa-instagram cursor-pointer" (click)="socialMediaCTA('instagram')"
+                                aria-hidden="true"></i>
                         </span>
                         <span class="px-2" *ngIf="!!storeTwitterURL">
-                            <i class="fa fa-twitter cursor-pointer" (click)="socialMediaCTA('twitter')" aria-hidden="true"></i>
+                            <i class="fa fa-twitter cursor-pointer" (click)="socialMediaCTA('twitter')"
+                                aria-hidden="true"></i>
                         </span>
                     </div>
                     <aside class="py-3">

diff --git a/src/app/components/homepage/homepage.component.scss b/src/app/components/homepage/homepage.component.scss
@@ -1,4 +1,8 @@
 .home-page {
+  width: 100%;
+  max-width: 1280px;
+  margin: auto;
+
   .carousel-banner {
 
     .carousel-indicators li {
@@ -7,27 +11,28 @@
     }
 
     .carousel-item-lg-screen {
-      height: 55vh;
+      height: 400px;
 
       img {
-        height: 55vh;
+        height: 400px;
+        object-fit: cover;
       }
 
     }
 
-    @media only screen and (min-width: 600px) {
-      margin: -1em;
-      padding: 0;
-    }
+    // @media only screen and (min-width: 600px) {
+    //   margin: -1em;
+    //   padding: 0;
+    // }
 
   }
 
   .border-radius-8 {
     border-radius: 8px;
 
-    @media only screen and (min-width: 600px) {
-      border-radius: 0;
-    }
+    // @media only screen and (min-width: 600px) {
+    //   border-radius: 0;
+    // }
   }
 
   .map-responsive {
@@ -42,12 +47,16 @@
         width: 100%;
       }
     }
+
+    @media only screen and (min-width: 960px) {
+      max-height: 300px;
+    }
   }
 
   .image-wrapper {
     position: relative;
     display: inline-block;
-    
+
     .image-title-overlay {
       border-radius: 4px;
       position: absolute;
@@ -87,7 +96,7 @@
       margin: 4em;
       background: #fff;
       border-radius: 16px;
-      padding: 1em 0 4em 0;
+      padding: 1em 4em 4em 4em;
     }
   }
 
@@ -138,6 +147,11 @@
   }
 }
 
+.border-radius-xl {
+  @media only screen and (min-width: 1279px) {
+    border-radius: 1.75rem;
+  }
+}
 
 //  Layouts: 
 
@@ -168,13 +182,12 @@
   overflow-x: auto;
 
   .showcase-card-long {
-    // background-color: aquamarine;
-    // height: 250px;
+
     border-radius: 4px;
-    min-width: calc(65vw);
+    max-width: 350px;
 
-    @media only screen and (min-width: 600px) {
-      min-width: calc(25%);
+    @media only screen and (max-width: 600px) {
+      min-width: calc(65vw);
     }
 
   }
@@ -192,13 +205,11 @@
   margin-left: auto;
 
   .showcase-card-long {
-    // background-color: aquamarine;
-    // height: 250px;
     border-radius: 4px;
-    min-width: calc(50vw - 1.5em);
+    max-width: 350px;
 
-    @media only screen and (min-width: 600px) {
-      min-width: calc(33% - 0.5em);
+    @media only screen and (max-width: 600px) {
+      min-width: calc(50vw - 1.5em);
     }
   }
 }
@@ -210,13 +221,11 @@
   overflow-x: auto;
 
   .showcase-card-long {
-    // background-color: aquamarine;
-    // height: 250px;
     border-radius: 4px;
-    min-width: calc(33vw - 1.25em);
+    max-width: 350px;
 
-    @media only screen and (min-width: 600px) {
-      min-width: calc(20%);
+    @media only screen and (max-width: 600px) {
+      min-width: calc(33vw - 1.25em);
     }
   }
 }

diff --git a/src/app/components/main-nav/main-nav.component.html b/src/app/components/main-nav/main-nav.component.html
@@ -1,38 +1,42 @@
 <mat-sidenav-container class="sidenav-container">
-  <mat-sidenav #drawer class="sidenav text-center" fixedInViewport
+  <mat-sidenav [autoFocus]="false" #drawer class="sidenav text-center" fixedInViewport
     [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'">
     <mat-toolbar class="secondary-text fs-18">Categories</mat-toolbar>
     <mat-nav-list class="pt-0">
-      <a mat-list-item *ngFor="let item of homepageItems" (click)="navigationRoute(true, item?.route); menuItemClicked(item)">
+      <a mat-list-item *ngFor="let item of homepageItems"
+        (click)="navigationRoute(true, item?.route); menuItemClicked(item)">
         <span> {{item?.categoryLabel}} </span>
         <span> <img src="assets/images/chevron_right.svg" alt="chevron"> </span>
       </a>
     </mat-nav-list>
     <div class="whatsapp-cta p-3 mt-2">
-      <a class="btn btn-whatsapp-style" href="https://wa.me/{{whatsAppContactNumber}}?text={{whatsAppEnquiryTextPrimary}}" target="_blank">
-        <section class="d-flex align-items-center">
+      <a class="btn btn-whatsapp-style w-100"
+        href="https://wa.me/{{whatsAppContactNumber}}?text={{whatsAppEnquiryTextPrimary}}" target="_blank">
+        <section class="d-flex align-items-center justify-content-center">
           <img src="assets/images/whatsapp.svg" alt="whatsapp">
           <span class="px-2 fs-12">{{whatsAppButtonLabelPrimary}}</span>
         </section>
       </a>
     </div>
     <div class="copyright-text pt-2">
       <span class="d-block secondary-text fs-12">{{copyrightText}}</span>
-      <span class="d-block secondary-text fs-12 pt-2 cursor-pointer" (click)="poweredByEragapTech()"> <small style="font-size: 8px;">Powered by</small> Eragap Tech Company</span>
+      <span class="d-block secondary-text fs-12 pt-2 cursor-pointer" (click)="poweredByEragapTech()"> <small
+          style="font-size: 8px;">Powered by</small> Eragap Tech</span>
     </div>
   </mat-sidenav>
   <mat-sidenav-content>
     <mat-toolbar class="main-toolbar mb-3">
-      <button type="button" aria-label="Toggle sidenav"
-        mat-icon-button style="outline: none;" 
-        (click)="drawer.toggle()"
+      <button type="button" aria-label="Toggle sidenav" mat-icon-button style="outline: none;" (click)="drawer.toggle()"
         *ngIf="isHandset$ | async">
         <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
       </button>
-      <span  class="px-2 cursor-pointer logo-font" (click)="navigationRoute(false, 'home')">{{storeName}}</span>
-      <nav class="d-flex flex-wrap mx-2 margin-pull" *ngIf="!(isHandset$ | async)">
-        <a class="nav-item-link mx-2 cursor-pointer" *ngFor="let item of homepageItems" (click)="navigationRoute(true, item?.route); menuItemClicked(item)">{{item?.categoryLabel}}</a>
-      </nav>
+      <div class="menu-wrapper">
+        <div class="px-3 cursor-pointer logo-font" (click)="navigationRoute(false, 'home')">{{storeName}}</div>
+        <nav class="d-flex flex-wrap mx-2 margin-pull" *ngIf="!(isHandset$ | async)">
+          <a class="nav-item-link mx-2 cursor-pointer" *ngFor="let item of homepageItems"
+            (click)="navigationRoute(true, item?.route); menuItemClicked(item)">{{item?.categoryLabel}}</a>
+        </nav>
+      </div>
     </mat-toolbar>
     <!-- Add Main Page Content Here -->
     <ng-content></ng-content>

diff --git a/src/app/components/main-nav/main-nav.component.scss b/src/app/components/main-nav/main-nav.component.scss
@@ -1,5 +1,9 @@
 .sidenav-container {
   height: 100%;
+
+  @media only screen and (min-width: 960px) {
+    height: auto;
+  }
 }
 
 .sidenav {
@@ -62,3 +66,11 @@
   font-weight: bolder;
   text-transform: uppercase;
 }
+
+.menu-wrapper {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1280px;
+  margin: auto;
+}
diff --git a/src/app/components/product-details/product-details.component.scss b/src/app/components/product-details/product-details.component.scss
@@ -1,4 +1,13 @@
 .product-container {
+  max-width: 1280px;
+  width: 100%;
+  margin: auto;
+
+  @media only screen and (min-width: 960px) {
+    min-height: calc(100vh - 172px);
+  }
+
+
   .product-details {
 
     &.large-screen-details-layout {
@@ -16,12 +25,18 @@
       }
     }
 
+    .product-content-wrapper {
+      @media only screen and (min-width: 960px) {
+        width: 65ch;
+      }
+    }
+
     .product-content {
       display: grid;
       grid-gap: 1em;
       grid-template-columns: 2fr 3fr;
 
-      .vertically-centered-grid-item{
+      .vertically-centered-grid-item {
         display: flex;
         align-items: center;
       }
@@ -44,11 +59,12 @@
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: center;
-      margin:0 -0.5rem;
+      margin: 0 -0.5rem;
 
-      .product-wrapper{
+      .product-wrapper {
         padding: 0.5rem;
         max-width: 250px;
+
         @media only screen and (max-width: 600px) {
           flex: 1;
         }
@@ -69,6 +85,6 @@
   }
 }
 
-:host ::ng-deep .mat-form-field-wrapper{
+:host ::ng-deep .mat-form-field-wrapper {
   padding: 0;
 }