Skip to content

D
dcarfixers_angular
Commit 1fc271d6 by amal
Options

Merge branch 'amal' into 'master'

Amal See merge request !8
parents 91a4535f 46b89fc9
Showing with 407 additions and 32 deletions
src/app/home/index/index.component.html
...@@ -303,7 +303,8 @@ ...@@ -303,7 +303,8 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<button class="log_btn prev_btn floatLeft" type="button" data-dismiss="modal">PREVIOUS</button> <button class="log_btn prev_btn floatLeft" type="button" data-dismiss="modal">PREVIOUS</button>
<button [ngClass]="{'log_btn_diabled':vehicleDataForm.invalid}" type="submit" class="log_btn next_btn floatRight" (click)="jumpToStep1()">NEXT</button> <!-- <button [ngClass]="{'log_btn_diabled':vehicleDataForm.invalid}" type="submit" class="log_btn next_btn floatRight" (click)="jumpToStep1()">NEXT</button> -->
<button #goTostep1 goToStep="1">NEXT</button>
</div> </div>
</div> </div>
</form> </form>
...@@ -315,6 +316,239 @@ ...@@ -315,6 +316,239 @@
<input class="search" placeholder="Search Services" (keyup)="searchIssues($event)"> <input class="search" placeholder="Search Services" (keyup)="searchIssues($event)">
</div> </div>
</div> </div>
<!-- service-tabs-->
<div class="service_tab_inner">
<div class="row">
<div class="col">
<div class="arrow_btn up_arrow">
</div>
<ul class="nav services_tab">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#service1"><img src="../../../assets/images/default.png">Service 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#service2"><img src="../../../assets/images/default.png">Service 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#service3"><img src="../../../assets/images/default.png">Service 3</a>
</li>
<li class="nav-item">
<a class="nav-link " data-toggle="pill" href="#service4"><img src="../../../assets/images/default.png">Service 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#service5"><img src="../../../assets/images/default.png">Service 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#service6"><img src="../../../assets/images/default.png">Service 3</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#service7"><img src="../../../assets/images/default.png">Service 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#service8"><img src="../../../assets/images/default.png">Service 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#service9"><img src="../../../assets/images/default.png">Service 3</a>
</li>
</ul>
<div class="arrow_btn down_arrow">
</div>
</div>
<div class="col">
<div class="arrow_btn up_arrow">
</div>
<div class="tab-content">
<div class="tab-pane container active" id="service1">
<ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC inspection: test for leaks, fluid levels</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater core replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC system recharge</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater blower motor replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater blower motor resistor..</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC condenser replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Other</p>
</label>
</button>
</li>
</ul>
</div>
<div class="tab-pane container fade" id="service2">
<ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC inspection: test for leaks, fluid levels</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater core replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC system recharge</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater blower motor replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater blower motor resistor..</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC condenser replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Other</p>
</label>
</button>
</li>
</ul>
</div>
<div class="tab-pane container fade" id="service3">
<ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC inspection: test for leaks, fluid levels</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater core replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC system recharge</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater blower motor replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Heater blower motor resistor..</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>AC condenser replacement</p>
</label>
</button>
</li>
<li>
<button id="custom_check_button">
<label>
<input type="checkbox" name="services">
<p>Other</p>
</label>
</button>
</li>
</ul>
</div>
</div>
<div class="arrow_btn down_arrow">
</div>
</div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="service_methods" malihu-scrollbar [scrollbarOptions]="scrollbarOptions"> <div class="service_methods" malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
......
src/app/home/index/index.component.scss
...@@ -411,11 +411,11 @@ ...@@ -411,11 +411,11 @@
text-align: center; text-align: center;
width: 100%; width: 100%;
height: 45px; height: 45px;
border-radius: 20px; border-radius: 10px;
-webkit-border-radius: 20px; -webkit-border-radius: 10px;
-moz-border-radius: 20px; -moz-border-radius: 10px;
-ms-border-radius: 20px; -ms-border-radius: 10px;
-o-border-radius: 20px; -o-border-radius: 10px;
border: none; border: none;
font-size: 20px; font-size: 20px;
font-weight: 300; font-weight: 300;
...@@ -434,21 +434,159 @@ ...@@ -434,21 +434,159 @@
padding-bottom: 10px; padding-bottom: 10px;
} }
.search { .search {
background: url("/assets/images/asset_search.png"); text-align: center;
background-position: right 10px top 5px;
background-repeat: no-repeat; background-repeat: no-repeat;
padding-right: 50px; border:none;
border-bottom: 1px solid #f4f4f4;
font-size: 28px;
padding-bottom: 20px;
&::placeholder{
color: #e7e7e7;
}
}
.service_tab_inner{
width: 100%;
padding-top: 30px;
.arrow_btn{
width: 35px;
height: 35px;
background-position: center !important;
background-repeat: no-repeat !important;
position: relative;
left: 20px;
}
.up_arrow{
background: url("../../../assets/images/asset_scroll_up.png");
}
.down_arrow{
background: url("../../../assets/images/asset_scroll_down.png");
}
.services_tab{
padding:0px;
padding-top: 10px;
padding-bottom: 10px;
margin:0px;
overflow: scroll;
overflow-x: hidden;
padding-right: 20px;
width: 100%;
height: 250px;
&::-webkit-scrollbar {
display: none;
}
li{
width:100%;
margin-bottom: 10px;
a{
padding:8px;
padding-left:15px;
border-radius: 8px;
color: #272a31;
background-image: url("../../../assets/images/asset_arrow.png");
background-size: 17px;
background-position: right 12px top 11px;
background-repeat: no-repeat;
img{
margin-right: 10px;
position: relative;
bottom: 2px;
}
}
.active{
background-color: #f2f2f2;
padding:8px;
padding-left: 15px;
border-radius: 8px;
}
}
}
.tab-content{
padding-top: 10px;
padding-bottom: 10px;
ul{
padding:0px;
margin:0px;
height: 230px;
overflow: scroll;
overflow-x: hidden;
padding-right: 20px;
li{
list-style: none;
display: inline-block;
position: relative;
min-width:300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0px;
padding: 0px;
border: none;
background-image: none;
margin-bottom:0px;
#custom_check_button {
margin: 0px;
height: 40px;
background-color: #fff;
border-radius: 0px !important;
overflow: auto;
color: #2655bf;
border: 1px solid transparent;
position: relative;
outline: none;
border-radius: 8px !important;
width: 100%;
}
#custom_check_button p {
padding:8px;
padding-left: 15px;
border-radius: 8px;
margin: 0px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
color: #2655bf;
text-align: left;
}
#custom_check_button label {
width: 100%;
margin: 0px;
}
#custom_check_button label span {
text-align:left;
display: block;
}
#custom_check_button label input {
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
opacity: 0;
}
#custom_check_button input:checked+p {
background-color: #2655bf;
color: #fff;
border-radius: 0px !important;
margin: 0px;
}
}
}
}
} }
input { input {
border: 1px solid #1e1e1e; border: 1px solid #1e1e1e;
height: 40px; height: 40px;
width: 100%; width: 100%;
border-radius: 25px; border-radius: 10px;
padding-left: 15px; padding-left: 15px;
-webkit-border-radius: 25px; -webkit-border-radius: 10px;
-moz-border-radius: 25px; -moz-border-radius: 10px;
-ms-border-radius: 25px; -ms-border-radius: 10px;
-o-border-radius: 25px; -o-border-radius: 10px;
text-align: left; text-align: left;
font-size: 16px; font-size: 16px;
&::placeholder { &::placeholder {
...@@ -464,11 +602,11 @@ ...@@ -464,11 +602,11 @@
height: 40px; height: 40px;
width: 100%; width: 100%;
padding-left: 15px; padding-left: 15px;
border-radius: 25px; border-radius: 10px;
-webkit-border-radius: 25px; -webkit-border-radius: 10px;
-moz-border-radius: 25px; -moz-border-radius: 10px;
-ms-border-radius: 25px; -ms-border-radius: 10px;
-o-border-radius: 25px; -o-border-radius: 10px;
text-align: center; text-align: center;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
...@@ -497,7 +635,7 @@ ...@@ -497,7 +635,7 @@
.log_btn { .log_btn {
height: 40px; height: 40px;
width: 160px; width: 160px;
border-radius: 25px; border-radius: 10px;
color: #fff; color: #fff;
background-color: #2655bf; background-color: #2655bf;
border: none; border: none;
...@@ -1115,7 +1253,7 @@ ...@@ -1115,7 +1253,7 @@
.service_map { .service_map {
width: 100%; width: 100%;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
height: 5450px; height: 560px;
margin-top: 10px; margin-top: 10px;
} }
} }
......
src/app/home/index/index.component.ts
...@@ -104,6 +104,9 @@ export class IndexComponent implements OnInit { ...@@ -104,6 +104,9 @@ export class IndexComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.wizardModalTrrigerInput.nativeElement.click();
this.vehicleDataForm = new FormGroup({ this.vehicleDataForm = new FormGroup({
trim: new FormControl(''), milage: new FormControl(''), emgine: new FormControl(''), trim: new FormControl(''), milage: new FormControl(''), emgine: new FormControl(''),
last_date: new FormControl(''), last_date: new FormControl(''),
......
src/app/navbar/navbar.component.scss
...@@ -191,11 +191,11 @@ ...@@ -191,11 +191,11 @@
text-align: center; text-align: center;
width: 100%; width: 100%;
height: 40px; height: 40px;
border-radius: 20px; border-radius: 10px;
-webkit-border-radius: 20px; -webkit-border-radius: 10px;
-moz-border-radius: 20px; -moz-border-radius: 10px;
-ms-border-radius: 20px; -ms-border-radius: 10px;
-o-border-radius: 20px; -o-border-radius: 10px;
border: none; border: none;
font-size: 20px; font-size: 20px;
font-weight: 300; font-weight: 300;
...@@ -216,12 +216,12 @@ ...@@ -216,12 +216,12 @@
border: 1px solid #1e1e1e; border: 1px solid #1e1e1e;
height: 40px; height: 40px;
width: 100%; width: 100%;
border-radius: 25px; border-radius: 10px;
font-size: 16px; font-size: 16px;
-webkit-border-radius: 25px; -webkit-border-radius: 10px;
-moz-border-radius: 25px; -moz-border-radius: 10px;
-ms-border-radius: 25px; -ms-border-radius:10px;
-o-border-radius: 25px; -o-border-radius: 10px;
text-align: center; text-align: center;
&::placeholder { &::placeholder {
color: #bbbbbb; color: #bbbbbb;
...@@ -236,7 +236,7 @@ ...@@ -236,7 +236,7 @@
.log_btn { .log_btn {
height: 45px; height: 45px;
width: 100%; width: 100%;
border-radius: 25px; border-radius: 10px;
color: #fff; color: #fff;
background: #2655bf; background: #2655bf;
border: none; border: none;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment