Martin Macola / autoservicio

Download as
Browse Code ยป

Commit 5b3ad9caacea48d737594d7dfb6d31c80af03399

Authored by Marcelo Puebla
1 parent 24181b4e9e
Exists in master

Cambios estilos.

Showing 5 changed files with 67 additions and 35 deletions   Show diff stats
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 5b3ad9c
1   -<div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
  1 +<div class="d-flex align-items-center flex-column h-100 pt-2 text-center">
2 2  
3   - <h4 class="border-bottom border-white"> Mi compra </h4>
4   - <div class="overflow-auto overflow-scroll mb-2">
5   - <div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index">
6   - <img src="{{prod.img}}" class="card-img-top" alt="...">
7   - <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded">
8   - <div class="col-8 p-0 text-left my-auto">
9   - <p class="m-0 card-description">{{prod.desc}}</p>
10   - <p class="m-0 card-description">COD: {{prod.cod}}</p>
  3 + <h4 class="border-bottom border-white text-white"> Mi compra </h4>
  4 +
  5 + <div class="overflow-auto overflow-scroll mb-2 w-100">
  6 + <div class="my-2 bg-white border-0 rounded-sm" *ngFor="let prod of productos; let i = index">
  7 + <img class="m-auto pt-2" [src]="prod.img">
  8 + <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
  9 + <div class="col-12 p-0 pt-2 text-left my-auto">
  10 + <p class="m-0 h6"><small>{{prod.desc}}</small></p>
  11 + <p class="m-0 h6"><small>COD: {{prod.cod}}</small></p>
11 12 </div>
12   - <div class="col-4 p-1 text-center my-auto">
13   - {{prod.precio | currency}}
  13 + <div class="col-12 pr-1 text-right h6 my-auto ">
  14 + <p class="m-0">{{prod.precio | currency}}</p>
14 15 </div>
15 16 </div>
16 17 <div class="row m-0 p-0">
17   - <div class="col p-1 pb-1 mt-2">
18   - <button type="button" class="btn btn-light btn-sm float-left my-auto" (click)="deleteProducto(i)">X</button>
19   - <button type="button" class="btn btn-light btn-sm my-auto">Y</button>
20   - <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example">
21   - <button type="button" class="btn btn-light btn-sm mb-2" (click)="aumentarContador(i)">+</button>
22   - <label for="" class="border border.white px-1">{{prod.cantidad}}</label>
23   - <button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button>
  18 + <div class="col px-2 my-2">
  19 + <div class="btn-group-sm btn-group float-left my-auto" role="group">
  20 + <button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)">
  21 + <i class="fa fa-plus" aria-hidden="true"></i>
  22 + </button>
  23 + <div class="bg-white border border-white px-3 my-auto text-dark h5">
  24 + <small>{{prod.cantidad}}</small>
  25 + </div>
  26 + <button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)">
  27 + <i class="fa fa-minus" aria-hidden="true"></i>
  28 + </button>
  29 + </div>
  30 + </div>
  31 + <div class="col px-2 my-2">
  32 + <div class="btn-group-sm btn-group float-right my-auto" role="group">
  33 + <button type="button" class="btn btn-light btn-sm my-auto float-left border mr-2">
  34 + <i class="fa fa-hand-o-up" aria-hidden="true"></i>
  35 + </button>
  36 + <button type="button" class="btn btn-secondary btn-sm my-auto ml-2" (click)="deleteProducto(i)">
  37 + <i class="fa fa-times" aria-hidden="true"></i>
  38 + </button>
24 39 </div>
25 40 </div>
26 41 </div>
27 42 </div>
28 43 </div>
29 44  
30   - <div class="card mt-auto blue-gradient border-0">
  45 + <div class="card rounded-top-sm mt-auto blue-gradient border-0">
31 46 <div class="card-body row">
32 47 <div class="col">
33   - <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont === 1">({{cont}}) item</h4>
34   - <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont > 1">({{cont}}) items</h4>
  48 + <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</h4>
  49 + <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</h4>
35 50 <h3 class="text-secondary">Total</h3>
36   - <h3 class="text-dark"><strong>{{total | currency}}</strong></h3>
  51 + <h3 class=""><strong>{{total | currency}}</strong></h3>
37 52 </div>
38 53 <div class="col 12 p-0">
39   - <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito"><strong>Finalizar y pagar</strong></button>
  54 + <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito">
  55 + <strong>Finalizar y pagar</strong>
  56 + </button>
40 57 <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button>
41 58 </div>
42 59 </div>
43   - </div>
44 60 \ No newline at end of file
  61 + </div>
  62 +</div>
src/app/components/sidebar/sidebar.component.scss
Diff comments   View file @ 5b3ad9c
1 1 .card-description{
2 2 font-size: 12px;
  3 +}
  4 +
  5 +app-sidebar {
  6 + background-color: red !important;
3 7 }
4 8 \ No newline at end of file
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ 5b3ad9c
1 1 import { Component, OnInit } from '@angular/core';
  2 +import { Producto } from 'src/app/wrappers/producto';
2 3  
3 4  
4 5 @Component({
... ... @@ -16,10 +17,10 @@ export class SidebarComponent implements OnInit {
16 17 private productos = [
17 18 {
18 19 "id": 1,
19   - "desc": "Galletas Oreo",
  20 + "Detart": "Galletas Oreo",
20 21 "cod": 225412,
21 22 "precio": 15,
22   - "img": "./assets/img/descarga.jpg",
  23 + "img": "./assets/img/logodebo.png",
23 24 "cantidad": 1
24 25 },
25 26 {
... ... @@ -27,7 +28,7 @@ export class SidebarComponent implements OnInit {
27 28 "desc": "Coca cola 500ml",
28 29 "cod": 512632,
29 30 "precio": 40,
30   - "img": "./assets/img/descarga.jpg",
  31 + "img": "./assets/img/logodebo.png",
31 32 "cantidad": 1
32 33 },
33 34 {
... ... @@ -35,7 +36,7 @@ export class SidebarComponent implements OnInit {
35 36 "desc": "Pancho grande",
36 37 "cod": 775987,
37 38 "precio": 45,
38   - "img": "./assets/img/descarga.jpg",
  39 + "img": "./assets/img/logodebo.png",
39 40 "cantidad": 1
40 41 }
41 42 ];
src/app/wrappers/producto.ts
Diff comments   View file @ 5b3ad9c
... ... @@ -87,4 +87,6 @@ export interface Producto {
87 87 IMP_IMP_INT: boolean;
88 88 id: number;
89 89 nombreImagen?: any;
  90 +
  91 + cantidad?:number;
90 92 }
... ... @@ -20,25 +20,28 @@ body {
20 20 }
21 21  
22 22 .blue-gradient {
23   - background: linear-gradient(0deg, rgb(20, 56, 68), rgb(252, 252, 252));
  23 + background: linear-gradient(0deg, #8093a4, #fcfcfc);
24 24 }
25 25  
26 26 .rounded {
27 27 border-radius: 1.5rem !important;
28 28 }
29 29  
  30 +.rounded-top-sm {
  31 + border-top-left-radius: 0.75rem !important;
  32 + border-top-right-radius: 0.75rem !important;
  33 +}
  34 +
30 35 .rounded-sm {
31 36 border-radius: 0.75rem !important;
32 37 }
33 38  
34 39 .card-effect {
35   - &:active,
36   - img {
  40 + &:active {
37 41 background-color: #c9c9c9b3 !important;
38 42 transition: background-color 0.5s;
39 43 }
40   - &:focus,
41   - img {
  44 + &:focus {
42 45 background-color: #c9c9c9b3 !important;
43 46 transition: background-color 0.5s;
44 47 }
... ... @@ -70,6 +73,10 @@ body {
70 73 }
71 74 }
72 75  
73   -.bg-gray{
  76 +.bg-gray {
74 77 background-color: #e6e6e6;
75   -}
76 78 \ No newline at end of file
  79 +}
  80 +
  81 +.bg-primary-gradient {
  82 + background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
  83 +}