Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 97be65005b1a208b9fc9f0e57a2ded4e3846d76e

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

Arreglo visual

Showing 1 changed file with 112 additions and 114 deletions   Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 97be650
... ... @@ -5,81 +5,79 @@
5 5 <div class="bg-dark h-100"></div>
6 6 </div>
7 7 </div>
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>
  8 + <div class="mx-0 h-90 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>
16 14 </div>
17 15 </div>
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 -->
  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">
38 40 <div
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">
  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;">
53 45 <img
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()">
  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>
62 49 </div>
63 50 </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>
64 62 </div>
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>
  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">
83 81 </div>
84 82 </div>
85 83 </div>
... ... @@ -90,57 +88,57 @@
90 88 </div>
91 89 </div>
92 90 </div>
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>
  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()">
98 109 </div>
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>
  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>
122 120 </div>
123 121 </div>
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>
  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()">
135 133 </div>
136 134 </div>
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>
  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">
144 142 </div>
145 143 </div>
146 144 </div>