feat(page): remove image margin in product list component

duocun · May 2, 2020 · 404e330 · 404e330
1 parent e1f502d
commit 404e330
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/app/components/product-list/product-list.component.html b/src/app/components/product-list/product-list.component.html
@@ -1,17 +1,17 @@
 <ng-container *ngIf="!loading; Else skeleton">
   <ng-container *ngIf="products.length < 7; Else thumbnailMode">
-    <ion-row *ngIf="products.length > 0; Else empty">
+    <ion-row class="ion-padding" *ngIf="products.length > 0; Else empty">
       <ion-col *ngFor="let product of products" size="6">
         <ion-card class="ion-no-margin" (click)="handleClick(product)">
           <ion-card-content>
-            <div class="ion-margin-bottom">
+            <div class="wrapper-product-img">
               <app-ion-image
                 [src]="getPictureUrl(product)"
                 [alt]="product.name"
                 style="height:180px; object-fit:cover;"
               ></app-ion-image>
             </div>
-            <ion-label>
+            <ion-label class="label-product-name">
               <h3 localValue [data]="product" [key]="'name'"></h3>
               <p>{{product|price}}</p>
             </ion-label>

diff --git a/src/app/components/product-list/product-list.component.scss b/src/app/components/product-list/product-list.component.scss
@@ -0,0 +1,9 @@
+.wrapper-product-img {
+  margin-top: -20px;
+  margin-left: -20px;
+  margin-right: -20px;
+  margin-bottom: 10px;
+}
+.label-product-name > h3 {
+  font-weight: 600;
+}