Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 500c8ce6d3675d5eb7a92fcecf4030b25abc9f0b

Authored by Marcelo Puebla
1 parent d5f68f7607
Exists in develop

Fixes de responsividad

Showing 3 changed files with 70 additions and 83 deletions   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ 500c8ce
... ... @@ -14,7 +14,7 @@
14 14  
15 15 <!-- CARRITO -->
16 16 <div
17   - class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible"
  17 + class="row mx-2 mt-4 h-80 h-lg-60 align-content-start scroll-y-visible"
18 18 (scroll)="scrollEvent($event)">
19 19 <!-- MENSAJE DE ADVERTENCIA -->
20 20 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
... ... @@ -22,87 +22,66 @@
22 22 </div>
23 23 <!-- ARTICULOS -->
24 24 <div
25   - class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
  25 + class="col-12 col-xl-6 p-2 h-50 h-md-25 h-xl-40 text-center text-truncate"
26 26 *ngFor="let articulo of articuloService.carrito; let i = index;"
27 27 @EnterLeave>
28 28 <!-- ARTICULO -->
29   - <div class="h-100 px-2 py-4 border border-primary rounded-sm">
30   - <div class="row mx-0 h-100">
  29 + <div class="h-100 border border-primary rounded-sm">
  30 + <div class="row align-items-center mx-0 h-100">
31 31 <!-- NOMBRE E IMAGEN -->
32   - <div class="col-3 h-100 border-right border-primary align-self-center">
  32 + <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
33 33 <img
34 34 draggable="false"
35 35 ondragstart="return false;"
36 36 (contextmenu)="false"
37   - class="d-block mx-auto h-55 rounded-sm shadow-sm"
  37 + class="d-none d-md-block mx-auto h-55 rounded-sm shadow-sm"
38 38 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
39 39 onerror="this.src='assets/img/image-not-found.jpg'">
40   - <div class="row mx-0 h-45">
41   - <p class="col text-primary text-truncate align-self-end">
  40 + <div class="row mx-0 h-100 h-md-45">
  41 + <p class="col text-primary text-truncate align-self-center">
42 42 <small>{{articulo.DetArt}}</small>
43 43 </p>
44 44 </div>
45 45 </div>
46 46 <!-- CANTIDAD -->
47   - <div class="col-3 border-right border-primary">
48   - <p><small>CANT</small></p>
49   - <div class="row mt-2 mx-0">
50   - <div class="col-12 h-auto">
51   - <div class="row mx-0 justify-content-between bg-primary badge-pill">
52   - <!-- BOTON MENOS -->
53   - <div class="col-auto px-0">
54   - <img
55   - draggable="false"
56   - ondragstart="return false;"
57   - (contextmenu)="false"
58   - class="d-block ml-auto py-2 icon-20 btn-effect"
59   - src="assets/img/menos-blanco.svg"
60   - (click)="substractCant(articulo)">
61   - </div>
62   - <!-- CANTIDAD -->
63   - <div class="col px-0 align-self-center text-white">
64   - <p><small>{{articulo.cantidad}}</small></p>
65   - </div>
66   - <!-- BOTON MAS -->
67   - <div class="col-auto px-0">
68   - <img
69   - draggable="false"
70   - ondragstart="return false;"
71   - (contextmenu)="false"
72   - class="d-block ml-auto py-2 icon-20 btn-effect"
73   - src="assets/img/mas-blanco.svg"
74   - (click)="addCant(articulo)">
75   - </div>
76   - </div>
  47 + <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
  48 + <p class="h-40"><small>CANT</small></p>
  49 + <div class="row mx-0 justify-content-between bg-primary badge-pill">
  50 + <!-- BOTON MENOS -->
  51 + <div class="col-auto px-0 my-auto">
  52 + <img
  53 + draggable="false"
  54 + ondragstart="return false;"
  55 + (contextmenu)="false"
  56 + class="d-block ml-auto py-2 icon-20 btn-effect"
  57 + src="assets/img/menos-blanco.svg"
  58 + (click)="substractCant(articulo)">
  59 + </div>
  60 + <!-- CANTIDAD -->
  61 + <div class="col px-0 py-2 my-auto text-white">
  62 + <p><small>{{articulo.cantidad}}</small></p>
  63 + </div>
  64 + <!-- BOTON MAS -->
  65 + <div class="col-auto px-0 my-auto">
  66 + <img
  67 + draggable="false"
  68 + ondragstart="return false;"
  69 + (contextmenu)="false"
  70 + class="d-block ml-auto py-2 icon-20 btn-effect"
  71 + src="assets/img/mas-blanco.svg"
  72 + (click)="addCant(articulo)">
77 73 </div>
78 74 </div>
79 75 </div>
80   - <!-- OPCIONALES -->
81   - <!-- <div class="col-3 border-right border-primary">
82   - <p><small>OPCIONALES</small></p>
83   - <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
84   - <div class="row mx-0 mt-2 justify-content-center">
85   - <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
86   - <span>
87   - <small class="pr-2">CAMBIAR</small>
88   - <img
89   - draggable="false"
90   - ondragstart="return false;"
91   - (contextmenu)="false"
92   - class="icon-20"
93   - src="assets/img/ir.svg">
94   - </span>
95   - </div>
96   - </div> -->
97 76 <!-- PRECIO -->
98   - <div class="col-3 border-right border-primary">
99   - <p><small>PRECIO</small></p>
100   - <div class="py-1 mt-2 badge-pill bg-dark text-white">
  77 + <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
  78 + <p class="h-40"><small>PRECIO</small></p>
  79 + <div class="py-2 badge-pill bg-dark text-white">
101 80 <p><small>{{articulo.PreVen | currency}}</small></p>
102 81 </div>
103 82 </div>
104 83 <!-- ELIMINAR -->
105   - <div class="col-3 align-self-center">
  84 + <div class="col-6 col-md-3 align-self-center">
106 85 <div class="row mx-0 justify-content-center">
107 86 <div
108 87 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
... ... @@ -148,22 +127,6 @@
148 127 </span>
149 128 </div>
150 129 </div>
151   - <!-- SEGUIR COMPRANDO -->
152   - <!-- <div class="row mx-3 mt-2 h-auto justify-content-end">
153   - <div
154   - class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
155   - (click)="goBack()">
156   - <span>
157   - <small class="pr-2">SEGUIR COMPRANDO</small>
158   - <img
159   - draggable="false"
160   - ondragstart="return false;"
161   - (contextmenu)="false"
162   - class="icon-20"
163   - src="assets/img/ir.svg">
164   - </span>
165   - </div>
166   - </div> -->
167 130 </div>
168 131  
169 132 </div>
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 500c8ce
... ... @@ -12,7 +12,7 @@
12 12 </div>
13 13 </div>
14 14 <!-- CUERPO -->
15   - <div class="row w-100 mr-4 h-70">
  15 + <div class="row w-100 mr-4 h-50 h-md-70">
16 16 <div class="col-12 h-100 px-0 py-3">
17 17 <div class="row mx-0 h-100">
18 18 <!-- FILTRO CATEGORIAS -->
... ... @@ -36,7 +36,7 @@
36 36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"
37 37 (scroll)="scrollEvent($event)">
38 38 <div
39   - class="row mx-4 mb-2 h-32 justify-content-center tab"
  39 + class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab"
40 40 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
41 41 (click)="selectCategoria(-1, 0)">
42 42 <img
... ... @@ -45,10 +45,10 @@
45 45 (contextmenu)="false"
46 46 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
47 47 src="assets/img/logo-spot.svg">
48   - <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
  48 + <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
49 49 </div>
50 50 <div
51   - class="row mx-4 mb-2 h-32 justify-content-center tab"
  51 + class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab"
52 52 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
53 53 (click)="selectCategoria(i, categoria.id)"
54 54 *ngFor="let categoria of categorias; let i = index;">
... ... @@ -59,7 +59,7 @@
59 59 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
60 60 src="{{urlImagenes}}{{categoria.path_imagen}}"
61 61 onerror="this.src='assets/img/image-not-found.jpg'">
62   - <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
  62 + <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
63 63 </div>
64 64 </div>
65 65 <div class="col-auto btn-effect h-5">
... ... @@ -91,7 +91,7 @@
91 91 (contextmenu)="false"
92 92 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
93 93 onerror="this.src='assets/img/image-not-found.jpg'"
94   - class="card-img-top h-55 rounded-sm">
  94 + class="card-img-top h-30 h-md-55 rounded-sm">
95 95 <div class="row mx-0 py-1 h-auto justify-content-center">
96 96 <p
97 97 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
... ... @@ -216,7 +216,7 @@
216 216  
217 217 <!-- VER CARRITO -->
218 218 <div
219   - class="col-auto mt-2 h-20"
  219 + class="col-auto px-0 mt-2 h-20"
220 220 *ngIf="articuloService.carrito.length">
221 221 <div
222 222 class="btn-effect col-auto px-0 align-self-center bg-white"
src/scss/height-width.scss
Diff comments   View file @ 500c8ce
1 1 @for $i from 1 through 100 {
2 2 $heightValue: 1% * $i;
3 3 .h-#{$i} {
4   - height: $heightValue !important;
  4 + height: $heightValue;
  5 + }
  6 + @media (min-width: 576px) {
  7 + .h-sm-#{$i} {
  8 + height: $heightValue !important;
  9 + }
  10 + }
  11 + @media (min-width: 768px) {
  12 + .h-md-#{$i} {
  13 + height: $heightValue !important;
  14 + }
  15 + }
  16 + @media (min-width: 992px) {
  17 + .h-lg-#{$i} {
  18 + height: $heightValue !important;
  19 + }
  20 + }
  21 + @media (min-width: 1200px) {
  22 + .h-xl-#{$i} {
  23 + height: $heightValue !important;
  24 + }
5 25 }
6 26 }
7 27  
... ... @@ -19,3 +39,7 @@
19 39 .min-h-60 {
20 40 min-height: 60px;
21 41 }
  42 +
  43 +.max-h-80 {
  44 + max-height: 80%;
  45 +}