Skip to content

D
dcarfixers_angular
Commit 45b2ceb3 by amalk
Options

18-06-2019

parent 5e52f3b4
Showing with 94 additions and 14 deletions
src/app/home/dashboard/dashboard.component.html
......@@ -12,23 +12,44 @@
<div class="container-fluid">
<ul class="nav nav-tabs">
<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>
</li>
<li class="nav-item">
<a class="nav-link vehicle" data-toggle="tab" href="#vehicle">My Vehicle
<div class="notification" *ngIf="vehDetails">{{ vehDetails?.length || '0' }}</div>
<a class="nav-link vehicle" data-toggle="tab" href="#vehicle">
<span>
My Vehicle
<div class="notification" *ngIf="vehDetails">{{ vehDetails?.length || '0' }}</div>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link appointment" data-toggle="tab" href="#appointment" #appointmentTab>Appointments
<div class="notification" *ngIf="successBookDtls">{{ successBookDtls?.length || '0' }}</div>
<a class="nav-link appointment" data-toggle="tab" href="#appointment" #appointmentTab>
<span>
Appointments
<div class="notification" *ngIf="successBookDtls">{{ successBookDtls?.length || '0' }}</div>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link time" data-toggle="tab" href="#service" #serviceHistoryTab>
Service History
<div class="notification" *ngIf="bookingDetails">{{ bookingDetails?.length || '0' }}</div>
<span>
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>
</li>
</ul>
......@@ -404,6 +425,58 @@
</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>
</section>
......
src/app/home/dashboard/dashboard.component.scss
......@@ -19,7 +19,7 @@
li {
list-style: none;
display: inline-block;
width: 25%;
width: 20%;
color: #fff;
background: transparent;
cursor: pointer;
......@@ -41,6 +41,9 @@
a.time {
background-image: url("/assets/images/asset_time.png");
}
a.reminder {
background-image: url("/assets/images/asset_reminder.png");
}
a {
color: #fff;
padding: 20px;
......@@ -58,7 +61,10 @@
background-repeat: no-repeat;
background-position: 20px;
padding-left: 65px;
position: relative;
span{
position: relative;
}
&:focus {
background-color: rgba(273, 273, 273, 0.2);
}
......@@ -67,15 +73,16 @@
}
.notification{
position: absolute;
top:15px;
right:15px;
width:35px;
height:35px;
font-size: 14px;
top: -10px;
right: -25px;
width:20px;
height:20px;
background: #fff;
border-radius: 50%;
color: #1e1e1e;
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