From 5b3ad9caacea48d737594d7dfb6d31c80af03399 Mon Sep 17 00:00:00 2001
From: mpuebla <mpuebla@focasoftware.com>
Date: Thu, 8 Aug 2019 16:45:53 -0300
Subject: [PATCH] Cambios estilos.

---
 src/app/components/sidebar/sidebar.component.html | 66 ++++++++++++++---------
 src/app/components/sidebar/sidebar.component.scss |  4 ++
 src/app/components/sidebar/sidebar.component.ts   |  9 ++--
 src/app/wrappers/producto.ts                      |  2 +
 src/styles.scss                                   | 21 +++++---
 5 files changed, 67 insertions(+), 35 deletions(-)

diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html
index d047832..83bd3c8 100644
--- a/src/app/components/sidebar/sidebar.component.html
+++ b/src/app/components/sidebar/sidebar.component.html
@@ -1,43 +1,61 @@
-<div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
+<div class="d-flex align-items-center flex-column h-100 pt-2 text-center">
 
-  <h4 class="border-bottom border-white"> Mi compra </h4>
-  <div class="overflow-auto overflow-scroll mb-2">
-    <div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index">
-      <img src="{{prod.img}}" class="card-img-top" alt="...">
-      <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded">
-        <div class="col-8 p-0 text-left my-auto">
-          <p class="m-0 card-description">{{prod.desc}}</p>
-          <p class="m-0 card-description">COD: {{prod.cod}}</p>
+  <h4 class="border-bottom border-white text-white"> Mi compra </h4>
+
+  <div class="overflow-auto overflow-scroll mb-2 w-100">
+    <div class="my-2 bg-white border-0 rounded-sm" *ngFor="let prod of productos; let i = index">
+      <img class="m-auto pt-2" [src]="prod.img">
+      <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
+        <div class="col-12 p-0 pt-2 text-left my-auto">
+          <p class="m-0 h6"><small>{{prod.desc}}</small></p>
+          <p class="m-0 h6"><small>COD: {{prod.cod}}</small></p>
         </div>
-        <div class="col-4 p-1 text-center my-auto">
-          {{prod.precio | currency}}
+        <div class="col-12 pr-1 text-right h6 my-auto ">
+          <p class="m-0">{{prod.precio | currency}}</p>
         </div>
       </div>
       <div class="row m-0 p-0">
-        <div class="col p-1 pb-1 mt-2">
-          <button type="button" class="btn btn-light btn-sm float-left my-auto" (click)="deleteProducto(i)">X</button>
-          <button type="button" class="btn btn-light btn-sm my-auto">Y</button>
-          <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example">
-            <button type="button" class="btn btn-light btn-sm mb-2" (click)="aumentarContador(i)">+</button>
-            <label for="" class="border border.white px-1">{{prod.cantidad}}</label>
-            <button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button>
+        <div class="col px-2 my-2">
+          <div class="btn-group-sm btn-group float-left my-auto" role="group">
+            <button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)">
+              <i class="fa fa-plus" aria-hidden="true"></i>
+            </button>
+            <div class="bg-white border border-white px-3 my-auto text-dark h5">
+              <small>{{prod.cantidad}}</small>
+            </div>
+            <button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)">
+              <i class="fa fa-minus" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+        <div class="col px-2 my-2">
+          <div class="btn-group-sm btn-group float-right my-auto" role="group">
+            <button type="button" class="btn btn-light btn-sm my-auto float-left border mr-2">
+              <i class="fa fa-hand-o-up" aria-hidden="true"></i>
+            </button>
+            <button type="button" class="btn btn-secondary btn-sm my-auto ml-2" (click)="deleteProducto(i)">
+              <i class="fa fa-times" aria-hidden="true"></i>
+            </button>
           </div>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="card mt-auto blue-gradient border-0">
+  <div class="card rounded-top-sm mt-auto blue-gradient border-0">
     <div class="card-body row">
       <div class="col">
-        <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont === 1">({{cont}}) item</h4>
-        <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont > 1">({{cont}}) items</h4>
+        <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</h4>
+        <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</h4>
         <h3 class="text-secondary">Total</h3>
-        <h3 class="text-dark"><strong>{{total | currency}}</strong></h3>
+        <h3 class=""><strong>{{total | currency}}</strong></h3>
       </div>
       <div class="col 12 p-0">
-        <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito"><strong>Finalizar y pagar</strong></button>
+        <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito">
+          <strong>Finalizar y pagar</strong>
+          </button>
         <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button>
       </div>
     </div>
-  </div>
\ No newline at end of file
+  </div>
+</div>
diff --git a/src/app/components/sidebar/sidebar.component.scss b/src/app/components/sidebar/sidebar.component.scss
index d2b8114..b2d0590 100644
--- a/src/app/components/sidebar/sidebar.component.scss
+++ b/src/app/components/sidebar/sidebar.component.scss
@@ -1,3 +1,7 @@
 .card-description{
     font-size: 12px;
+}
+
+app-sidebar {
+    background-color: red !important;
 }
\ No newline at end of file
diff --git a/src/app/components/sidebar/sidebar.component.ts b/src/app/components/sidebar/sidebar.component.ts
index e00f2dc..63323ab 100644
--- a/src/app/components/sidebar/sidebar.component.ts
+++ b/src/app/components/sidebar/sidebar.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Producto } from 'src/app/wrappers/producto';
 
 
 @Component({
@@ -16,10 +17,10 @@ export class SidebarComponent implements OnInit {
   private productos = [
     {
       "id": 1,
-      "desc": "Galletas Oreo",
+      "Detart": "Galletas Oreo",
       "cod": 225412,
       "precio": 15,
-      "img": "./assets/img/descarga.jpg",
+      "img": "./assets/img/logodebo.png",
       "cantidad": 1
     },
     {
@@ -27,7 +28,7 @@ export class SidebarComponent implements OnInit {
       "desc": "Coca cola 500ml",
       "cod": 512632,
       "precio": 40,
-      "img": "./assets/img/descarga.jpg",
+      "img": "./assets/img/logodebo.png",
       "cantidad": 1
     },
     {
@@ -35,7 +36,7 @@ export class SidebarComponent implements OnInit {
       "desc": "Pancho grande",
       "cod": 775987,
       "precio": 45,
-      "img": "./assets/img/descarga.jpg",
+      "img": "./assets/img/logodebo.png",
       "cantidad": 1
     }
   ];
diff --git a/src/app/wrappers/producto.ts b/src/app/wrappers/producto.ts
index 2a4ac55..bc83d51 100644
--- a/src/app/wrappers/producto.ts
+++ b/src/app/wrappers/producto.ts
@@ -87,4 +87,6 @@ export interface Producto {
   IMP_IMP_INT: boolean;
   id: number;
   nombreImagen?: any;
+
+  cantidad?:number;
 }
diff --git a/src/styles.scss b/src/styles.scss
index 89c6c82..fb898f3 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -20,25 +20,28 @@ body {
 }
 
 .blue-gradient {
-  background: linear-gradient(0deg, rgb(20, 56, 68), rgb(252, 252, 252));
+  background: linear-gradient(0deg, #8093a4, #fcfcfc);
 }
 
 .rounded {
   border-radius: 1.5rem !important;
 }
 
+.rounded-top-sm {
+  border-top-left-radius: 0.75rem !important;
+  border-top-right-radius: 0.75rem !important;
+}
+
 .rounded-sm {
   border-radius: 0.75rem !important;
 }
 
 .card-effect {
-  &:active,
-  img {
+  &:active {
     background-color: #c9c9c9b3 !important;
     transition: background-color 0.5s;
   }
-  &:focus,
-  img {
+  &:focus {
     background-color: #c9c9c9b3 !important;
     transition: background-color 0.5s;
   }
@@ -70,6 +73,10 @@ body {
   }
 }
 
-.bg-gray{
+.bg-gray {
   background-color: #e6e6e6;
-}
\ No newline at end of file
+}
+
+.bg-primary-gradient {
+  background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
+}
-- 
1.9.1