Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 378433a0ca6abdf5d69a7138410005a5ec43bdb3

Authored by Marcelo Puebla
1 parent f27a108fc5
Exists in master and in 2 other branches 20200117-axion-responsive, develop

Fix en responsividad de pantalla seleccion de articulos

Showing 1 changed file with 114 additions and 112 deletions   Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 378433a
... ... @@ -5,79 +5,81 @@
5 5 <div class="bg-dark h-100"></div>
6 6 </div>
7 7 </div>
8   - <div class="h-90 row mx-0 align-items-end">
9   - <!-- CABECERA -->
10   - <div class="row mx-4 h-auto border border-primary rounded-sm">
11   - <div class="col-12 p-2 align-self-center">
12   - <div class="px-3">
13   - <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
  8 + <div class="row mx-0 h-90 align-items-end">
  9 + <div class="col-12 px-0 h-100">
  10 + <!-- CABECERA -->
  11 + <div class="row mx-4 h-auto border border-primary rounded-sm">
  12 + <div class="col-12 p-2 align-self-center">
  13 + <div class="px-3">
  14 + <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
  15 + </div>
14 16 </div>
15 17 </div>
16   - </div>
17   - <!-- CUERPO -->
18   - <div class="row mr-4 h-70">
19   - <div class="col-12 h-100 px-0 py-3">
20   - <div class="row mx-0 h-100">
21   - <!-- FILTRO CATEGORIAS -->
22   - <div class="col-5 col-sm-3 col-xl-2 h-100">
23   - <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
24   - <div class="row mx-0 h-94 align-items-center">
25   - <div class="col-12 h-5">
26   - <img
27   - draggable="false"
28   - ondragstart="return false;"
29   - (contextmenu)="false"
30   - class="h-100 d-block mx-auto rotate-90-neg"
31   - src="assets/img/ir-color.svg"
32   - (mousedown)="scrollY(templateCategorias, -80)"
33   - (mouseup)="mouseup()"
34   - (mouseleave)="mouseup()">
35   - </div>
36   - <!-- CATEGORIAS -->
37   - <div
38   - #templateCategorias
39   - class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
  18 + <!-- CUERPO -->
  19 + <div class="row mr-4 h-70">
  20 + <div class="col-12 h-100 px-0 py-3">
  21 + <div class="row mx-0 h-100">
  22 + <!-- FILTRO CATEGORIAS -->
  23 + <div class="col-5 col-sm-3 col-xl-2 h-100">
  24 + <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
  25 + <div class="row mx-0 h-94 align-items-center">
  26 + <div class="col-12 h-5">
  27 + <img
  28 + draggable="false"
  29 + ondragstart="return false;"
  30 + (contextmenu)="false"
  31 + class="h-100 d-block mx-auto rotate-90-neg"
  32 + src="assets/img/ir-color.svg"
  33 + (mousedown)="scrollY(templateCategorias, -80)"
  34 + (mouseup)="mouseup()"
  35 + (mouseleave)="mouseup()">
  36 + </div>
  37 + <!-- CATEGORIAS -->
40 38 <div
41   - class="row mx-4 mb-2 h-32 justify-content-center tab"
42   - [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
43   - (click)="selectCategoria(i)"
44   - *ngFor="let categoria of categorias; let i = index;">
  39 + #templateCategorias
  40 + class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
  41 + <div
  42 + class="row mx-4 mb-2 h-32 justify-content-center tab"
  43 + [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
  44 + (click)="selectCategoria(i)"
  45 + *ngFor="let categoria of categorias; let i = index;">
  46 + <img
  47 + class="col-12 h-50 align-self-end d-none d-sm-block"
  48 + src="assets/img/ir-color.svg">
  49 + <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>
  50 + </div>
  51 + </div>
  52 + <div class="col-12 h-5">
45 53 <img
46   - class="col-12 h-50 align-self-end d-none d-sm-block"
47   - src="assets/img/ir-color.svg">
48   - <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>
  54 + draggable="false"
  55 + ondragstart="return false;"
  56 + (contextmenu)="false"
  57 + class="h-100 d-block mx-auto rotate-90"
  58 + src="assets/img/ir-color.svg"
  59 + (mousedown)="scrollY(templateCategorias, 80)"
  60 + (mouseup)="mouseup()"
  61 + (mouseleave)="mouseup()">
49 62 </div>
50 63 </div>
51   - <div class="col-12 h-5">
52   - <img
53   - draggable="false"
54   - ondragstart="return false;"
55   - (contextmenu)="false"
56   - class="h-100 d-block mx-auto rotate-90"
57   - src="assets/img/ir-color.svg"
58   - (mousedown)="scrollY(templateCategorias, 80)"
59   - (mouseup)="mouseup()"
60   - (mouseleave)="mouseup()">
61   - </div>
62 64 </div>
63   - </div>
64   - <!-- LISTA DE ARTICULOS -->
65   - <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
66   - <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
67   - <!-- ARTICULO -->
68   - <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
69   - <div class="card h-100">
70   - <img src="assets/img/ir-color.svg" class="card-img-top h-55">
71   - <div class="row mx-0 py-1 h-auto justify-content-center">
72   - <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
73   - <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
74   - <div class="col-12 px-1 align-self-end btn-effect h-auto">
75   - <div class="row mx-0 justify-content-between bg-primary badge-pill">
76   - <div class="col px-0 align-self-center text-white text-right">
77   - {{55 | currency}}
78   - </div>
79   - <div class="col-5 px-0">
80   - <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg">
  65 + <!-- LISTA DE ARTICULOS -->
  66 + <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
  67 + <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
  68 + <!-- ARTICULO -->
  69 + <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
  70 + <div class="card h-100">
  71 + <img src="assets/img/ir-color.svg" class="card-img-top h-55">
  72 + <div class="row mx-0 py-1 h-auto justify-content-center">
  73 + <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
  74 + <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
  75 + <div class="col-12 px-1 align-self-end btn-effect h-auto">
  76 + <div class="row mx-0 justify-content-between bg-primary badge-pill">
  77 + <div class="col px-0 align-self-center text-white text-right">
  78 + {{55 | currency}}
  79 + </div>
  80 + <div class="col-5 px-0">
  81 + <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg">
  82 + </div>
81 83 </div>
82 84 </div>
83 85 </div>
... ... @@ -88,57 +90,57 @@
88 90 </div>
89 91 </div>
90 92 </div>
91   - </div>
92   - <!-- FOOTER CARRITO DE COMPRAS -->
93   - <div class="row w-90 mx-auto h-auto justify-content-center">
94   - <div class="col-12 h-75 px-0 border border-primary rounded">
95   - <div class="row mx-0 h-15 border-bottom border-primary">
96   - <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
97   - </div>
98   - <div class="row h-85 mx-0 justify-content-between">
99   - <div class="col-auto h-20 align-self-center">
100   - <img
101   - draggable="false"
102   - ondragstart="return false;"
103   - (contextmenu)="false"
104   - class="img-ir rotate-180-neg"
105   - src="assets/img/ir-fondo-color.svg"
106   - (mousedown)="scrollX(templateCarrito, -100)"
107   - (mouseup)="mouseup()"
108   - (mouseleave)="mouseup()">
  93 + <!-- FOOTER CARRITO DE COMPRAS -->
  94 + <div class="row w-90 mx-auto h-auto justify-content-center">
  95 + <div class="col-12 h-75 px-0 border border-primary rounded">
  96 + <div class="row mx-0 h-15 border-bottom border-primary">
  97 + <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
109 98 </div>
110   - <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
111   - <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
112   - <div
113   - class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-auto align-self-center border-right border-primary"
114   - (click)="selectCategoria(i)"
115   - *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
116   - <img
117   - class="d-block h-55 p-2 mx-auto"
118   - src="assets/img/ir-color.svg">
119   - <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
  99 + <div class="row h-85 mx-0 justify-content-between">
  100 + <div class="col-auto h-20 align-self-center">
  101 + <img
  102 + draggable="false"
  103 + ondragstart="return false;"
  104 + (contextmenu)="false"
  105 + class="img-ir rotate-180-neg"
  106 + src="assets/img/ir-fondo-color.svg"
  107 + (mousedown)="scrollX(templateCarrito, -100)"
  108 + (mouseup)="mouseup()"
  109 + (mouseleave)="mouseup()">
  110 + </div>
  111 + <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
  112 + <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
  113 + <div
  114 + class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-auto align-self-center border-right border-primary"
  115 + (click)="selectCategoria(i)"
  116 + *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
  117 + <img
  118 + class="d-block h-55 p-2 mx-auto"
  119 + src="assets/img/ir-color.svg">
  120 + <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
  121 + </div>
120 122 </div>
121 123 </div>
122   - </div>
123   - <div class="col-auto h-20 align-self-center">
124   - <img
125   - draggable="false"
126   - ondragstart="return false;"
127   - (contextmenu)="false"
128   - class="img-ir"
129   - src="assets/img/ir-fondo-color.svg"
130   - (mousedown)="scrollX(templateCarrito, 100)"
131   - (mouseup)="mouseup()"
132   - (mouseleave)="mouseup()">
  124 + <div class="col-auto h-20 align-self-center">
  125 + <img
  126 + draggable="false"
  127 + ondragstart="return false;"
  128 + (contextmenu)="false"
  129 + class="img-ir"
  130 + src="assets/img/ir-fondo-color.svg"
  131 + (mousedown)="scrollX(templateCarrito, 100)"
  132 + (mouseup)="mouseup()"
  133 + (mouseleave)="mouseup()">
  134 + </div>
133 135 </div>
134 136 </div>
135   - </div>
136   - <div class="col-auto p-0 mt-2 ml-auto h-20">
137   - <div class="btn-effect col-auto align-self-center px-0 bg-white">
138   - <div class="row mx-0 bg-light">
139   - <div class="col-auto align-self-center text-primary">VER CARRITO</div>
140   - <div class="col-auto p-0 bg-primary d-none d-sm-block">
141   - <img class="p-2 img-volver" src="assets/img/carrito.svg">
  137 + <div class="col-auto p-0 mt-2 ml-auto h-20">
  138 + <div class="btn-effect col-auto align-self-center px-0 bg-white">
  139 + <div class="row mx-0 bg-light">
  140 + <div class="col-auto align-self-center text-primary">VER CARRITO</div>
  141 + <div class="col-auto p-0 bg-primary d-none d-sm-block">
  142 + <img class="p-2 img-volver" src="assets/img/carrito.svg">
  143 + </div>
142 144 </div>
143 145 </div>
144 146 </div>