Skip to content

G
getme
Commit def7acba by Arjun
Options

product details style fix

parent 3c2f6b03
Showing with 26 additions and 64 deletions
src/app/app.component.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
.side_menu_wrapper { .side_menu_wrapper {
background: rgba(41, 40, 91, 1); background: rgba(41, 40, 91, 1);
width: 100%; width: 100%;
height: 100vh; height: auto;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 20px;
padding-right: 10px; padding-right: 10px;
......
src/app/productdetail/productdetail.page.html
...@@ -13,10 +13,7 @@ ...@@ -13,10 +13,7 @@
<ion-content> <ion-content>
<div class="product_detail_wrapper" *ngIf="product"> <div class="product_detail_wrapper" *ngIf="product">
<div class="product_banner"> <div class="product_banner">
<div <div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></div>
[ngClass]="checkFavStatus(product.prodId)"
(click)="changeFav(product.prodId)"
></div>
<div class="featured_badge" *ngIf="product.featured">Featured</div> <div class="featured_badge" *ngIf="product.featured">Featured</div>
<ion-slides pager="true" [options]="bannerOptions" *ngIf="slideData"> <ion-slides pager="true" [options]="bannerOptions" *ngIf="slideData">
<ion-slide *ngFor="let prodImg of slideData"> <ion-slide *ngFor="let prodImg of slideData">
...@@ -41,22 +38,15 @@ ...@@ -41,22 +38,15 @@
<ion-col size="8"> <ion-col size="8">
<h3>{{product.prodName}}</h3> <h3>{{product.prodName}}</h3>
<p> <p>
<strong <strong><span><img src="../assets/Path61_2.png" /></span>{{product.rating}}</strong>&nbsp; {{product.category}}, {{product.subCate}}
><span><img src="../assets/Path61_2.png"/></span
>{{product.rating}}</strong
>&nbsp; {{product.category}}, {{product.subCate}}
<br /> <br />
<span *ngFor="let tag of product.tag" <span *ngFor="let tag of product.tag"><span *ngIf="tag !=='No-Tag'">#{{tag}}&nbsp;</span></span>
><span *ngIf="tag !=='No-Tag'">#{{tag}}&nbsp;</span></span
>
</p> </p>
</ion-col> </ion-col>
<ion-col size="4"> <ion-col size="4">
<h5>A$ {{product.price}}</h5> <h5>A$ {{product.price}}</h5>
<p> <p>
<span class="offer" *ngIf="product.discount > 0" <span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span>
>-{{product.discount}}%</span
>
</p> </p>
</ion-col> </ion-col>
</ion-row> </ion-row>
...@@ -71,14 +61,8 @@ ...@@ -71,14 +61,8 @@
<li *ngIf="color !=='No-Color'"> <li *ngIf="color !=='No-Color'">
<button id="custom_check_button"> <button id="custom_check_button">
<label> <label>
<input <input id="{{color}}" type="radio" name="color" value="{{color}}"
id="{{color}}" (click)="cartService.choose_color(color)" [checked]="i==0" />
type="radio"
name="color"
value="{{color}}"
(click)="cartService.choose_color(color)"
[checked]="i==0"
/>
<p>{{color}}</p> <p>{{color}}</p>
</label> </label>
</button> </button>
...@@ -95,14 +79,8 @@ ...@@ -95,14 +79,8 @@
<li *ngIf="size !=='Any-Size'"> <li *ngIf="size !=='Any-Size'">
<button id="custom_check_button"> <button id="custom_check_button">
<label> <label>
<input <input id="{{size}}" type="radio" name="services" value="{{size}}"
id="{{size}}" (click)="cartService.choose_size(size)" [checked]="i==0" />
type="radio"
name="services"
value="{{size}}"
(click)="cartService.choose_size(size)"
[checked]="i==0"
/>
<p>{{size}}</p> <p>{{size}}</p>
</label> </label>
</button> </button>
...@@ -235,10 +213,7 @@ ...@@ -235,10 +213,7 @@
</ul> </ul>
</div> --> </div> -->
<h5 *ngIf="product.similar && product.similar.length > 0"> <h5 *ngIf="product.similar && product.similar.length > 0">
<span class="floatLeft">Related Products</span <span class="floatLeft">Related Products</span><span class="floatRight" (click)="goToPage('productlist', data)">MORE</span>
><span class="floatRight" (click)="goToPage('productlist', data)"
>MORE</span
>
<div class="clear"></div> <div class="clear"></div>
</h5> </h5>
<div class="related_product_slider"> <div class="related_product_slider">
...@@ -247,14 +222,9 @@ ...@@ -247,14 +222,9 @@
<ion-slide *ngFor="let similar of product.similar"> <ion-slide *ngFor="let similar of product.similar">
<li (click)="viewProd(similar)"> <li (click)="viewProd(similar)">
<div class="product_image"> <div class="product_image">
<img <img [src]="similar.image" onerror="this.src='../assets/[email protected]'" />
[src]="similar.image" <div [ngClass]="checkFavStatus(similar.prodId)" (click)="changeFav(similar.prodId)">
onerror="this.src='../assets/[email protected]'" </div>
/>
<div
[ngClass]="checkFavStatus(similar.prodId)"
(click)="changeFav(similar.prodId)"
></div>
</div> </div>
<h5>{{similar.prodName}}</h5> <h5>{{similar.prodName}}</h5>
<p>{{similar.price}}</p> <p>{{similar.price}}</p>
...@@ -275,19 +245,9 @@ ...@@ -275,19 +245,9 @@
<ion-footer *ngIf="product"> <ion-footer *ngIf="product">
<div class="footer_div"> <div class="footer_div">
<div class="footer_options"> <div class="footer_options">
<button <button class="share" (click)="socialShare(product.prodName, product.category, product.subCate, product.price, product.image)"></button>
class="share" <button [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></button>
(click)="socialShare(product.prodName, product.category, product.subCate, product.price, product.image)" <button class="cart" [disabled]="!disCart" (click)="buyNow(product,0)"></button>
></button>
<button
[ngClass]="checkFavStatus(product.prodId)"
(click)="changeFav(product.prodId)"
></button>
<button
class="cart"
[disabled]="!disCart"
(click)="buyNow(product,0)"
></button>
</div> </div>
<div class="footer_btn" (click)="buyNow(product,1)">BUY NOW</div> <div class="footer_btn" (click)="buyNow(product,1)">BUY NOW</div>
</div> </div>
......
src/app/productdetail/productdetail.page.scss
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
z-index: 2; z-index: 2;
} }
img { img {
width: 100%; // width: 100%;
height: 100%; height: 100%;
object-position: center; object-position: center;
object-fit: cover; object-fit: cover;
...@@ -55,10 +55,10 @@ ...@@ -55,10 +55,10 @@
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
color: rgba(41, 40, 91, 1); color: rgba(41, 40, 91, 1);
font-size: 26px; font-size: 20px;
font-weight: 900; font-weight: 900;
padding-bottom: 5px; padding-bottom: 5px;
white-space: nowrap; // white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
color: rgba(121, 119, 139, 1); color: rgba(121, 119, 139, 1);
white-space: nowrap; // white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
strong { strong {
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
height: 100%; height: 100%;
outline: none; outline: none;
font-size: 17px; font-size: 17px;
white-space: nowrap; // white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
...@@ -137,6 +137,9 @@ ...@@ -137,6 +137,9 @@
padding-top: 35px; padding-top: 35px;
padding-bottom: 35px; padding-bottom: 35px;
text-align: center; text-align: center;
display: flex;
align-items: center;
font-size: 14px;
} }
#custom_check_button label { #custom_check_button label {
width: 100%; width: 100%;
...@@ -150,7 +153,7 @@ ...@@ -150,7 +153,7 @@
top: 0px; top: 0px;
opacity: 0; opacity: 0;
} }
#custom_check_button input:checked + p { #custom_check_button input:checked+p {
background-color: rgba(41, 40, 91, 1); background-color: rgba(41, 40, 91, 1);
color: #fff; color: #fff;
border-radius: 10px !important; border-radius: 10px !important;
...@@ -213,7 +216,7 @@ ...@@ -213,7 +216,7 @@
top: 0px; top: 0px;
opacity: 0; opacity: 0;
} }
#custom_check_button input:checked + p { #custom_check_button input:checked+p {
border: 3px dashed #29285b; border: 3px dashed #29285b;
color: transparent; color: transparent;
border-radius: 10px !important; border-radius: 10px !important;
...@@ -411,7 +414,6 @@ ...@@ -411,7 +414,6 @@
.fav_active { .fav_active {
background-image: url('../../assets/heart.png'); background-image: url('../../assets/heart.png');
} }
.share { .share {
background-image: url('../../assets/Group57_2.png'); background-image: url('../../assets/Group57_2.png');
} }
......
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