Skip to content

D
dcarfixers_angular
Commit 2bb23a63 by amal
Options

Merge branch 'amal' into 'master'

Amal See merge request !44
parents d0ebfab2 9a40e234
Showing with 94 additions and 14 deletions
src/app/home/dashboard/dashboard.component.html
...@@ -12,23 +12,44 @@ ...@@ -12,23 +12,44 @@
<div class="container-fluid"> <div class="container-fluid">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active profile" data-toggle="tab" href="#profile">Profile <a class="nav-link active profile" data-toggle="tab" href="#profile">
<span>
Profile
</span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link vehicle" data-toggle="tab" href="#vehicle">My Vehicle <a class="nav-link vehicle" data-toggle="tab" href="#vehicle">
<div class="notification" *ngIf="vehDetails">{{ vehDetails?.length || '0' }}</div> <span>
My Vehicle
<div class="notification" *ngIf="vehDetails">{{ vehDetails?.length || '0' }}</div>
</span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link appointment" data-toggle="tab" href="#appointment" #appointmentTab>Appointments <a class="nav-link appointment" data-toggle="tab" href="#appointment" #appointmentTab>
<div class="notification" *ngIf="successBookDtls">{{ successBookDtls?.length || '0' }}</div> <span>
Appointments
<div class="notification" *ngIf="successBookDtls">{{ successBookDtls?.length || '0' }}</div>
</span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link time" data-toggle="tab" href="#service" #serviceHistoryTab> <a class="nav-link time" data-toggle="tab" href="#service" #serviceHistoryTab>
Service History <span>
<div class="notification" *ngIf="bookingDetails">{{ bookingDetails?.length || '0' }}</div> Service History
<div class="notification" *ngIf="bookingDetails">{{ bookingDetails?.length || '0' }}</div>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link reminder" data-toggle="tab" href="#reminder">
<span>
Reminder
</span>
</a> </a>
</li> </li>
</ul> </ul>
...@@ -404,6 +425,58 @@ ...@@ -404,6 +425,58 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tab-pane container fade" id="reminder">
<div class="row">
<div class="col-md-12">
<div class="row line_row">
<div class="col-md-12">
<h3>Set reminder for service booking</h3>
<hr>
</div>
</div>
<div class="row line_row">
<div class="col-md-12">
<div class="vehicle_list">
<ul>
<li>
<div class="car_details">
<h5><strong>UI458792</strong>booking name</h5>
<div class="row">
<div class="col-md-3">Booking id</div>
<div class="col-md-1">:</div>
<div class="col-md-7">UI458792</div>
</div>
<div class="row">
<div class="col-md-3">Date</div>
<div class="col-md-1">:</div>
<div class="col-md-7">12 June 2019</div>
</div>
<div class="row">
<div class="col-md-3">Time</div>
<div class="col-md-1">:</div>
<div class="col-md-7">13:00:00</div>
</div>
<div class="row">
<div class="col-md-3">Snooze time</div>
<div class="col-md-1">:</div>
<div class="col-md-7">10 minutes</div>
</div>
</div>
<div class="clear"></div>
<div class="button_bay">
<div class="btn-group-justified" role="group" aria-label="Basic example">
<button type="button" class="btn book btn-sm">Enable reminder</button>
<button type="button" class="btn btn-danger btn-sm">Cancel reminder</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>
......
src/app/home/dashboard/dashboard.component.scss
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
li { li {
list-style: none; list-style: none;
display: inline-block; display: inline-block;
width: 25%; width: 20%;
color: #fff; color: #fff;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
...@@ -41,6 +41,9 @@ ...@@ -41,6 +41,9 @@
a.time { a.time {
background-image: url("/assets/images/asset_time.png"); background-image: url("/assets/images/asset_time.png");
} }
a.reminder {
background-image: url("/assets/images/asset_reminder.png");
}
a { a {
color: #fff; color: #fff;
padding: 20px; padding: 20px;
...@@ -58,7 +61,10 @@ ...@@ -58,7 +61,10 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 20px; background-position: 20px;
padding-left: 65px; padding-left: 65px;
position: relative; span{
position: relative;
}
&:focus { &:focus {
background-color: rgba(273, 273, 273, 0.2); background-color: rgba(273, 273, 273, 0.2);
} }
...@@ -67,15 +73,16 @@ ...@@ -67,15 +73,16 @@
} }
.notification{ .notification{
position: absolute; position: absolute;
top:15px; font-size: 14px;
right:15px; top: -10px;
width:35px; right: -25px;
height:35px; width:20px;
height:20px;
background: #fff; background: #fff;
border-radius: 50%; border-radius: 50%;
color: #1e1e1e; color: #1e1e1e;
text-align: center; text-align: center;
padding: 4px; padding:0px;
} }
} }
} }
......
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