feat(items): Change layout of list of items

Author: Lucas95s

src/app/components/items-list-item/items-list-item.component.html

@@ -2,19 +2,25 @@
   <mat-card (click)="handleCardClick($event)">
     <mat-card-content>
       <div class="row">
-        <div class="col-md-3">
+        <div class="col-md-12">
           <img class="items-list-item__img" [src]="item.image" [alt]="item.label" />
         </div>
-        <div class="col-md-9">
-          <p>
-            {{item.label}}
-          </p>
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          <h4 *ngIf="item.label">
+            <strong>{{item.label}}</strong>
+          </h4>
           <p *ngIf="item.color">
-            Color: {{item.color}}
+            <strong>Color:</strong> {{item.color}}
+          </p>
+          <p *ngIf="item.category">
+            <strong>Category:</strong> {{item.category}}
           </p>
-          <p>
-            Price: {{currencySymbol}}{{item.cost}}
+          <p *ngIf="item.cost">
+            <strong>Price:</strong> {{currencySymbol}}{{item.cost}}
           </p>
+          <button mat-raised-button color="primary">More Info</button>
         </div>
       </div>
     </mat-card-content>

src/app/containers/checkout-cart/checkout-cart.html

@@ -28,6 +28,7 @@ <h1>Checkout</h1>
             </div>
             <div class="col-md-10">
               <p>{{item.brand}} - {{item.label}}</p>
+              <p><strong>Category: {{item.category}}</strong></p>
               <p><strong>Price per item: </strong>{{currencySymbol}}{{item.cost}}</p>
               <p>
                 <strong>Change Quantity: </strong>

src/app/containers/item-desc/item-desc.html

@@ -17,7 +17,8 @@ <h1>Product Details</h1>
           </div>
           <div class="col-md-7">
             <p><strong>Label</strong>: {{item.label}}</p>
-            <p><strong>Price</strong>: {{currencySymbol}}{{item.cost}}</p>
+            <p><strong>Category</strong>: {{item.category}}</p>
+            <p><strong>Price per item</strong>: {{currencySymbol}}{{item.cost}}</p>
             <p><strong>Items Available</strong>: {{getItemsAvailable()}}</p>
             <p [innerHtml]="item.description"></p>
             <button (click)="handleAddToCardClick()" [disabled]="!getItemsAvailable()" mat-raised-button color="primary" class="item-description__add-card">Add To Cart</button>