Skip to content

D
dcarfixers_angular
Commit a916ef9e by amalk
Options

23-05-2019|12:56

parent 060d2dd0
Showing with 179 additions and 7 deletions
src/app/purchase/productlist/productlist.component.html
......@@ -7,7 +7,7 @@
<h5>FILTERS</h5>
<div *ngIf="productBrand && productBrand.length > 0">
<h6 href="#ac1" data-toggle="collapse">Brands</h6>
<ul id="ac1" class="collapse in show" malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
<ul id="ac1" class="collapse in show" malihu-scrollbar [scrollbarOptions]="scrollbarOptions" style="height:150px;">
<li class="relative" *ngFor="let brands of productBrand; let i=index">
<div class="custom_checkbox_filter">
<input class="custom_checkbox" id="custom_checkbox_{{i}}" (click) ="selectBrand($event,brands.brand_id)" type="checkbox" value="value1">
......
src/app/purchase/productlist/productlist.component.scss
......@@ -44,7 +44,6 @@
padding:0px;
padding-top: 10px;
padding-bottom: 10px;
height: 150px;
li{
list-style: none;
padding-left: 25px;
......
src/app/purchase/searchbar/searchbar.component.html
......@@ -13,7 +13,11 @@
</div>
<div *ngIf="productArray && productArray.length > 0" class="nav_bar_search_list">
<ul class="filter-select">
<li class="cpoint" *ngFor="let prdt of productArray" (click)="clickProduct(prdt.product_id)">{{prdt.product_name}}</li>
<li class="cpoint" *ngFor="let prdt of productArray" (click)="clickProduct(prdt.product_id)">
<div class="search_list_image"></div>
<p>{{prdt.product_name}}</p>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
......
src/app/purchase/searchbar/searchbar.component.scss
......@@ -11,7 +11,7 @@
background: #fff;
top: 55px;
width: 100%;
z-index: 9;
z-index: 9999;
-webkit-box-shadow: -1px 9px 14px -5px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 9px 14px -5px rgba(0,0,0,0.75);
box-shadow: -1px 9px 14px -5px rgba(0,0,0,0.75);
......@@ -20,8 +20,28 @@ box-shadow: -1px 9px 14px -5px rgba(0,0,0,0.75);
padding: 0px;
li{
list-style: none;
padding: 10px;
padding: 8px;
cursor: pointer;
.search_list_image{
width:40px;
height:40px;
background: #a8a8a8;
border-radius: 50%;
float: left;
img{
width:100%;
height:100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
}
p{
width: calc(100% - 40px);
padding: 10px;
margin: 0px;
float: left;
}
&:hover{
background: #2655bf;
color: #fff;
......
src/app/purchase/track/track.component.html
......@@ -16,7 +16,8 @@
<div class="col-md-8">
<div class="product_details" *ngIf="orderDetails">
<h1>{{orderDetails.product_name}}</h1>
<div class="review" (click)="reviewBtn()">Write review</div>
<!-- <div class="review" (click)="reviewBtn()">Write review</div> -->
<div class="review" data-toggle="modal" data-target="#review">Write review</div>
<div class="clear"></div>
<h2>{{orderDetails.short_description}}</h2>
<div class="others">
......@@ -80,3 +81,64 @@
</div>
</div>
</div>
<!-- START-RATTING-DIV -->
<div class="modal" id="review">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="ratting_inner">
<div class="">
<p>Rate this Product</p>
<div class="ratting_star">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" formControlName="rating"/>
<label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4.5" formControlName="rating"/>
<label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" formControlName="rating"/>
<label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3.5" formControlName="rating"/>
<label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" formControlName="rating"/>
<label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2.5" formControlName="rating"/>
<label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" formControlName="rating"/>
<label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1.5" formControlName="rating" />
<label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" formControlName="rating"/>
<label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="0.5" formControlName="rating" />
<label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<div class="clear"></div>
</div>
</div>
<hr>
<div class="">
<p>Give a Title</p>
<input class="title_input" placeholder="Type Here">
</div>
<hr>
<div class="">
<p>Write a Review</p>
<input class="title_input" placeholder="Type Here">
</div>
<hr>
<button class="submit_btn">Submit</button>
</div>
</div>
</div>
</div>
<!-- END-RATTING-DIV -->
\ No newline at end of file
src/app/purchase/track/track.component.scss
......@@ -486,3 +486,84 @@
}
}
}
.ratting_inner{
padding: 20px;
p{
color: #000000;
margin: 0px;
padding:0px;
font-size: 20px;
border-left:6px solid #fef160;
padding-left: 20px;
width: 100%;
margin-bottom: 20px;
}
hr{
margin: 0px;
margin-bottom: 20px;
margin-top: 20px;
}
.submit_btn{
background: #2655bf;
color: #fff;
border:none;
height:50px;
padding-left: 8%;
padding-right: 8%;
font-size: 18px;
}
.title_input{
border:none;
width: 100%;
height:50px;
font-size: 20px;
padding-left: 20px;
font-weight: 300;
&:focus{
outline: none;
}
&::placeholder{
color: #cad2db;
font-weight: 300;
}
}
.ratting_star{
.rating {
border: none;
float: left;
}
.rating > input { display: none; }
.rating > label:before {
margin: 6px;
font-size: 30px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #ddd;
float: right;
margin:0px;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
}
}
\ No newline at end of file
src/styles.scss
......@@ -89,7 +89,7 @@ body {
}
.purchase_wrapper{
padding-top:85px;
padding-top:120px;
background: #f1f3f6;
.container-fluid {
max-width: calc(100% - 15%);
......@@ -843,3 +843,7 @@ bs-datepicker-container{
background-color: #7e7f7fc9 !important;
}
.purchase_content_wrapper{
padding-bottom: 50px;
}
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