Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 4e03444ae0a24781c970a9386b99b03f89936ad3

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

Arreglo en efecto en botones

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