diff --git a/angular.json b/angular.json
index 3ce4086..2cc37eb 100644
--- a/angular.json
+++ b/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"
]
},
diff --git a/package-lock.json b/package-lock.json
index 8006c59..7ca23a2 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index caa004b..dc8c87f 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b57f39e..153291a 100644
--- a/src/app/app.module.ts
+++ b/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]
diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
index 1f24aa6..d7e0642 100644
--- a/src/app/home/home.module.ts
+++ b/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"]
diff --git a/src/app/home/index/index.component.html b/src/app/home/index/index.component.html
index 8c21c43..a229f2b 100644
--- a/src/app/home/index/index.component.html
+++ b/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');
diff --git a/src/app/home/index/index.component.scss b/src/app/home/index/index.component.scss
index 411158d..3ad6a24 100644
--- a/src/app/home/index/index.component.scss
+++ b/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;
diff --git a/src/app/home/index/index.component.ts b/src/app/home/index/index.component.ts
index 7393def..589617c 100644
--- a/src/app/home/index/index.component.ts
+++ b/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();
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index a3b24a6..c34de9d 100644
--- a/src/app/navbar/navbar.component.html
+++ b/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">
×
</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()">
×
</div>
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index 13688d3..a5e1f60 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/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;
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index 2051647..a0e21cd 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/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');
});
}
diff --git a/src/assets/images/asset_down_white_arrow.png b/src/assets/images/asset_down_white_arrow.png
new file mode 100644
index 0000000..95dec0d
Binary files /dev/null and b/src/assets/images/asset_down_white_arrow.png differ
diff --git a/src/styles.scss b/src/styles.scss
index e4e8bfa..35d4852 100644
--- a/src/styles.scss
+++ b/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;
}