Amal 29-03-2019|15:39

angular.json

@@ -30,10 +30,12 @@
                             "src/styles.scss",
                             "node_modules/bootstrap/dist/css/bootstrap.min.css",
                             "src/assets/css/responsive.scss",
+                            "node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css",
                             "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
                         ],
                         "scripts": [
                             "node_modules/jquery/dist/jquery.min.js",
+                            "node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js",
                             "node_modules/bootstrap/dist/js/bootstrap.min.js"  
                         ]
                     },

package-lock.json

@@ -1382,6 +1382,22 @@
         "@types/jasmine": "*"
       }
     },
+    "@types/jquery": {
+      "version": "3.3.29",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.29.tgz",
+      "integrity": "sha512-FhJvBninYD36v3k6c+bVk1DSZwh7B5Dpb/Pyk3HKVsiohn0nhbefZZ+3JXbWQhFyt0MxSl2jRDdGQPHeOHFXrQ==",
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
+    "@types/mcustomscrollbar": {
+      "version": "2.8.32",
+      "resolved": "https://registry.npmjs.org/@types/mcustomscrollbar/-/mcustomscrollbar-2.8.32.tgz",
+      "integrity": "sha512-eLo1In4lCsisdCShgZx9sD8TTUTnqWuDyCyXPFFszt3QxgOc9JYu3HsOExmr2jQ5q46VIwYcF4sKzOFl37J2wQ==",
+      "requires": {
+        "@types/jquery": "*"
+      }
+    },
     "@types/node": {
       "version": "8.9.5",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-8.9.5.tgz",
@@ -1400,6 +1416,11 @@
       "integrity": "sha1-CyCiNw5rG4MiycPfyqQJ5sfAwKk=",
       "dev": true
     },
+    "@types/sizzle": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
+      "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg=="
+    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -4303,12 +4324,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4328,7 +4351,8 @@
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -4476,6 +4500,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4483,7 +4508,8 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
@@ -6011,6 +6037,11 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
       "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
     },
+    "jquery-mousewheel": {
+      "version": "3.1.13",
+      "resolved": "https://registry.npmjs.org/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz",
+      "integrity": "sha1-BvAzXxbjU6aV5yBr9QUDy1I6buU="
+    },
     "js-base64": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.0.tgz",
@@ -6580,6 +6611,14 @@
         }
       }
     },
+    "malihu-custom-scrollbar-plugin": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/malihu-custom-scrollbar-plugin/-/malihu-custom-scrollbar-plugin-3.1.5.tgz",
+      "integrity": "sha1-MQzsxeWUFaHCnp37XStuAdZqKe8=",
+      "requires": {
+        "jquery-mousewheel": ">=3.0.6"
+      }
+    },
     "map-age-cleaner": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
@@ -6992,6 +7031,17 @@
       "resolved": "https://registry.npmjs.org/ngx-google-places-autocomplete/-/ngx-google-places-autocomplete-2.0.3.tgz",
       "integrity": "sha512-AFwgwQeHPW16l7TWE/8qpOlQ4zbQ9uvApqb3zCIWyENc2kaD+xkuMO+OOORO2DvFmjQJz5maOQxlH5JQiOlrAg=="
     },
+    "ngx-malihu-scrollbar": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-malihu-scrollbar/-/ngx-malihu-scrollbar-7.0.0.tgz",
+      "integrity": "sha512-s063w5JNpQ28n5BQME/vXjihmWVoKDsNML0gHlRalk+o5a/wtQ+7lRU1cI1/VygdvJUL+SbMWuNobm7RecK1zQ==",
+      "requires": {
+        "@types/mcustomscrollbar": "^2.8.30",
+        "jquery": "^3.0.0",
+        "malihu-custom-scrollbar-plugin": "^3.1.5",
+        "tslib": "^1.9.0"
+      }
+    },
     "ngx-slick": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/ngx-slick/-/ngx-slick-0.2.1.tgz",

package.json

@@ -36,6 +36,7 @@
     "ngx-bootstrap": "^3.2.0",
     "ngx-carousel": "^1.3.5",
     "ngx-google-places-autocomplete": "^2.0.3",
+    "ngx-malihu-scrollbar": "^7.0.0",
     "ngx-slick": "^0.2.1",
     "node-sass": "^4.11.0",
     "rebuild": "^0.1.2",

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { NavbarComponent } from './navbar/navbar.component';
 import { FooterComponent } from './footer/footer.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';
 
 @NgModule({
   declarations: [
@@ -21,6 +22,7 @@ import { HashLocationStrategy, LocationStrategy } from '@angular/common';
     HomeModule,
     ReactiveFormsModule,
     HttpClientModule,
+    MalihuScrollbarModule.forRoot()
   ],
   providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
   bootstrap: [AppComponent]

src/app/home/home.module.ts

@@ -10,6 +10,7 @@ import 'hammerjs';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { BsDatepickerModule } from 'ngx-bootstrap';
+import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { BsDatepickerModule } from 'ngx-bootstrap';
     NgxCarouselModule,
     ReactiveFormsModule,
     BsDatepickerModule.forRoot(),
+    MalihuScrollbarModule.forRoot(),
     AgmCoreModule.forRoot({
       apiKey: 'AIzaSyCcc-YDSJyDpehNE6qfntfWpEQ4uS4aq6A',
       libraries: ["places"]

src/app/home/index/index.component.html

@@ -478,7 +478,7 @@
                                 </div>
                             </div>
                             <div class="quote_schedule_list">
-                                <ul>
+                                <ul  malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
                                     <li *ngFor="let mechanic of mechanicData">
                                         <div class="row">
                                             <div class="col-md-6 pr0">
@@ -538,7 +538,7 @@
                                             </div>
                                             <div class="col-md-6">
                                                 <div class="scheduletiming_listing">
-                                                    <ul id="scroll_0_{{mechanic.mechanic_id}}">
+                                                    <ul id="scroll_0_{{mechanic.mechanic_id}}" malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
                                                         <li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
                                                             <label>
                                                                 <input type="radio" name="scheduleTime" (click)="getSchedule(time,'0'); 
@@ -547,7 +547,7 @@
                                                             </label>
                                                         </li>
                                                     </ul>
-                                                    <ul id="scroll_1_{{mechanic.mechanic_id}}">
+                                                    <ul id="scroll_1_{{mechanic.mechanic_id}}" malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
                                                         <li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
                                                             <label>
                                                                 <input type="radio" name="scheduleTime" (click)="getSchedule(time,'1'); 

src/app/home/index/index.component.scss

@@ -121,6 +121,19 @@
             -ms-border-radius: 25px;
             -o-border-radius: 25px;
             margin-top: 30px;
+            transition: all 0.5s ease;
+            &:focus{
+                outline: none;
+                background: #2655bf;
+                color: #fff;
+                transition: all 0.5s ease;
+            }
+            &:hover{
+                outline: none;
+                background: #2655bf;
+                color: #fff;
+                transition: all 0.5s ease;
+            }
         }
     }
     .service_check {
@@ -160,6 +173,19 @@
             -ms-border-radius: 25px;
             -o-border-radius: 25px;
             margin-top: 30px;
+            transition: all 0.5s ease;
+            &:focus{
+                outline: none;
+                background: #2655bf;
+                color: #fff;
+                transition: all 0.5s ease;
+            }
+            &:hover{
+                outline: none;
+                background: #2655bf;
+                color: #fff;
+                transition: all 0.5s ease;
+            }
         }
     }
     .testimonial_div {
@@ -769,7 +795,7 @@
             background-image: url("/assets/images/asset_quote_right.png");
         }
         .schedule_dates {
-            width: calc(100% - 80px);
+            width: calc(100% - 45px);
             height: 35px;
             ul {
                 padding: 0px;
@@ -800,6 +826,7 @@
             padding: 0px;
             max-height: 500px;
             overflow: scroll;
+            overflow-x: hidden;
             li {
                 list-style: none;
                 padding: 10px;
@@ -956,7 +983,8 @@
                     }
                 }
                 .scheduletiming_listing {
-                    width: calc(100% - 80px);
+                    
+                    width: calc(100% - 45px);
                     margin: 0 auto;
                     height: 200px;
                     position: relative;
@@ -1024,7 +1052,7 @@
                     }
                 }
                 .scheduletiming_btm_btns {
-                    width: calc(100% - 80px);
+                    width: calc(100% - 45px);
                     position: relative;
                     left: 5px;
                     margin: 0 auto;

src/app/home/index/index.component.ts

@@ -21,6 +21,7 @@ declare const google: any;
   styleUrls: ['./index.component.scss']
 })
 
+
 export class IndexComponent implements OnInit {
   public featuredOn: NgxCarousel;
   public carouselTile: NgxCarousel;
@@ -56,6 +57,8 @@ export class IndexComponent implements OnInit {
   defIssuesData: any[] = new Array();
   selectedIssues: any[] = new Array();
 
+  public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };
+
   //Quote Page
   step: number;
   today: any = new Date();

src/app/navbar/navbar.component.html

@@ -20,10 +20,34 @@
         <div class="collapse navbar-collapse" id="collapsibleNavbar">
             <ul class="navbar-nav ml-auto">
                 <li class="nav-item">
-                    <a class="nav-link" href="#">CAR OWNERS<img src="assets/images/asset_down_small.png"></a>
+                    <a class="nav-link base_arrow dropdown">
+                        <div class="dropdown-toggle" data-toggle="dropdown">
+                            CAR OWNERS
+                        </div>
+                        <div class="dropdown-menu">
+                            <a class="dropdown-item">My Dashboard</a>
+                            <a class="dropdown-item">Find parts and accessories</a>
+                            <a class="dropdown-item">Rewards</a>
+                            <a class="dropdown-item">Messages</a>
+                            <a class="dropdown-item">Request a Service </a>
+                            <a class="dropdown-item">Repair/Maintenance Service reminder</a>
+                            <a class="dropdown-item">Road Service </a>
+                        </div>
+                    </a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#">AUTO SERVICE PROVIDER<img src="assets/images/asset_down_small.png"></a>
+                    <a class="nav-link base_arrow dropdown" href="#">
+                        <div class="dropdown-toggle" data-toggle="dropdown">
+                            AUTO SERVICE PROVIDER
+                        </div>
+                        <div class="dropdown-menu">
+                                <a class="dropdown-item">Option menu 1</a>
+                                <a class="dropdown-item">Option menu 2</a>
+                                <a class="dropdown-item">Option menu 3</a>
+                                <a class="dropdown-item">Option menu 4</a>
+                                <a class="dropdown-item">Option menu 5</a>
+                            </div>
+                    </a>
                 </li>
                 <li class="nav-item" *ngIf="!loginDetails">
                     <button (click)="resetForm()" class="sign_btn" data-toggle="modal" data-target="#login">
@@ -67,7 +91,7 @@
 
 <div class="modal" id="signup" style="z-index: 99999 !important;">
     <div class="modal-dialog modal-full">
-        <div class="modal-content login_modal_wrapper">
+        <div class="modal-content login_modal_wrapper" malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
             <div #signupModal class="modal_close" data-dismiss="modal">
                 &times;
             </div>
@@ -193,7 +217,7 @@
 
 <div class="modal" id="login" style="z-index: 99999 !important;">
     <div class="modal-dialog modal-full">
-        <div class="modal-content login_modal_wrapper">
+        <div class="modal-content login_modal_wrapper" malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
             <div #loginModal class="modal_close" data-dismiss="modal" (click)="resetForm()">
                 &times;
             </div>

src/app/navbar/navbar.component.scss

@@ -31,6 +31,16 @@
                         }
                     }
                 }
+                .base_arrow{
+                    background:url("../../assets/images/asset_down_white_arrow.png");
+                    background-repeat: no-repeat;
+                    background-position: right;
+                    background-size: 30px;
+                    padding-right: 30px;
+                    .dropdown-toggle::after{
+                        display: none;
+                    }
+                }
                 .sign_btn {
                     background: transparent;
                     border: 1px solid #fff;
@@ -133,12 +143,13 @@
     position: relative;
     overflow: scroll;
     .modal_close {
-        width: 50px;
-        height: 50px;
+        width: 40px;
+        height: 40px;
         border: 1px solid #fff;
         position: fixed;
-        top: 10px;
-        right: 10px;
+        top: 20px;
+        right:20px;
+        cursor: pointer;
         border-radius: 50%;
         -webkit-border-radius: 50%;
         -moz-border-radius: 50%;
@@ -147,7 +158,7 @@
         z-index: 999;
         color: #fff;
         text-align: center;
-        font-size: 30px;
+        font-size:24px;
         padding: 0px;
         font-weight: 700;
         cursor: pointer;
@@ -163,9 +174,7 @@
         -ms-border-radius: 10px;
         -o-border-radius: 10px;
         padding: 30px;
-        padding-top: 50px;
         position: relative;
-        top: 85px;
         .login_modal_inner {
             width: 85%;
             margin: 0 auto;

src/app/navbar/navbar.component.ts

@@ -46,6 +46,8 @@ export class NavbarComponent implements OnInit {
   @ViewChild('loginModal') loginModal: ElementRef;
   @ViewChild('signupModal') signupModal: ElementRef;
 
+  public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };
+
   ngOnInit() {
     this.subjectService.getLoginData().subscribe(loginData => {
       this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
@@ -175,7 +177,7 @@ export class NavbarComponent implements OnInit {
     $(window).scroll(function() {
       var sticky = $('.navbar'),
           scroll = $(window).scrollTop();
-      if (scroll > 100) sticky.addClass('scrolled_navbar');
+      if (scroll > 10) sticky.addClass('scrolled_navbar');
       else sticky.removeClass('scrolled_navbar');
     });
   }

src/styles.scss

@@ -36,14 +36,18 @@
     -webkit-font-smoothing: antialiased;
 }
 
-*::-webkit-scrollbar {
-    display: none;
-}
+// *::-webkit-scrollbar {
+//     display: none;
+// }
 
 .no-scroll .scroll-content {
     overflow: hidden;
 }
 
+.modal {
+    padding:0px !important;
+}
+
 button {
     cursor: pointer;
     &:focus {
@@ -409,7 +413,7 @@ body {
     padding-right: 10px !important;
     padding-left: 10px !important;
     font-weight: 300;
-    left: 25px;
+    left: 0px;
     top: 10px;
 }