Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 2ee1df2a89f39d71757b2e2a7ad2514f77bd0831

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

agregado margin

Showing 1 changed file with 1 additions and 1 deletions   Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 2ee1df2
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 align-items-center">
22 <div class="col-12 h-5"> 22 <div class="col-12 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" 46 class="col-12 h-50 align-self-end d-none d-sm-block"
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-12 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 class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]"> 68 <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
69 <div class="card h-100"> 69 <div class="card h-100">
70 <img 70 <img
71 draggable="false" 71 draggable="false"
72 ondragstart="return false;" 72 ondragstart="return false;"
73 (contextmenu)="false" 73 (contextmenu)="false"
74 src="assets/img/ir-color.svg" 74 src="assets/img/ir-color.svg"
75 class="card-img-top h-55"> 75 class="card-img-top h-55">
76 <div class="row mx-0 py-1 h-auto justify-content-center"> 76 <div class="row mx-0 py-1 h-auto justify-content-center">
77 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p> 77 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
78 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p> 78 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
79 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 79 <div class="col-12 px-1 align-self-end btn-effect h-auto">
80 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 80 <div class="row mx-0 justify-content-between bg-primary badge-pill">
81 <div class="col px-0 align-self-center text-white text-right"> 81 <div class="col px-0 align-self-center text-white text-right">
82 {{55 | currency}} 82 {{55 | currency}}
83 </div> 83 </div>
84 <div class="col-5 px-0"> 84 <div class="col-5 px-0">
85 <img 85 <img
86 draggable="false" 86 draggable="false"
87 ondragstart="return false;" 87 ondragstart="return false;"
88 (contextmenu)="false" 88 (contextmenu)="false"
89 class="d-block ml-auto py-1 icon-30" 89 class="d-block ml-auto py-1 icon-30"
90 src="assets/img/ir.svg"> 90 src="assets/img/ir.svg">
91 </div> 91 </div>
92 </div> 92 </div>
93 </div> 93 </div>
94 </div> 94 </div>
95 </div> 95 </div>
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 <!-- FOOTER CARRITO DE COMPRAS --> 102 <!-- FOOTER CARRITO DE COMPRAS -->
103 <div class="row w-90 mx-auto h-auto justify-content-center"> 103 <div class="row w-90 mx-auto h-auto justify-content-center">
104 <div class="col-12 h-75 px-0 border border-primary rounded"> 104 <div class="col-12 h-75 px-0 border border-primary rounded">
105 <div class="row mx-0 h-15 border-bottom border-primary"> 105 <div class="row mx-0 h-15 border-bottom border-primary">
106 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 106 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
107 </div> 107 </div>
108 <div class="row h-85 mx-0 justify-content-between"> 108 <div class="row h-85 mx-0 justify-content-between">
109 <div class="col-auto h-20 align-self-center"> 109 <div class="col-auto h-20 align-self-center">
110 <img 110 <img
111 draggable="false" 111 draggable="false"
112 ondragstart="return false;" 112 ondragstart="return false;"
113 (contextmenu)="false" 113 (contextmenu)="false"
114 class="icon-30 rotate-180-neg" 114 class="icon-30 rotate-180-neg"
115 src="assets/img/ir-fondo-color.svg" 115 src="assets/img/ir-fondo-color.svg"
116 (mousedown)="scrollX(templateCarrito, -100)" 116 (mousedown)="scrollX(templateCarrito, -100)"
117 (mouseup)="mouseup()" 117 (mouseup)="mouseup()"
118 (mouseleave)="mouseup()"> 118 (mouseleave)="mouseup()">
119 </div> 119 </div>
120 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 120 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
121 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x"> 121 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
122 <div 122 <div
123 class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-100 align-self-center border-right border-primary" 123 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"
124 (click)="selectCategoria(i)" 124 (click)="selectCategoria(i)"
125 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;"> 125 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
126 <img 126 <img
127 draggable="false" 127 draggable="false"
128 ondragstart="return false;" 128 ondragstart="return false;"
129 (contextmenu)="false" 129 (contextmenu)="false"
130 class="d-block h-55 p-2 mx-auto" 130 class="d-block h-55 p-2 mx-auto"
131 src="assets/img/ir-color.svg"> 131 src="assets/img/ir-color.svg">
132 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p> 132 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
133 </div> 133 </div>
134 </div> 134 </div>
135 </div> 135 </div>
136 <div class="col-auto h-20 align-self-center"> 136 <div class="col-auto h-20 align-self-center">
137 <img 137 <img
138 draggable="false" 138 draggable="false"
139 ondragstart="return false;" 139 ondragstart="return false;"
140 (contextmenu)="false" 140 (contextmenu)="false"
141 class="icon-30" 141 class="icon-30"
142 src="assets/img/ir-fondo-color.svg" 142 src="assets/img/ir-fondo-color.svg"
143 (mousedown)="scrollX(templateCarrito, 100)" 143 (mousedown)="scrollX(templateCarrito, 100)"
144 (mouseup)="mouseup()" 144 (mouseup)="mouseup()"
145 (mouseleave)="mouseup()"> 145 (mouseleave)="mouseup()">
146 </div> 146 </div>
147 </div> 147 </div>
148 </div> 148 </div>
149 <div class="col-auto p-0 mt-2 ml-auto h-20"> 149 <div class="col-auto p-0 mt-2 ml-auto h-20">
150 <div 150 <div
151 class="btn-effect col-auto align-self-center px-0 bg-white" 151 class="btn-effect col-auto align-self-center px-0 bg-white"
152 [routerLink]="['/carrito']"> 152 [routerLink]="['/carrito']">
153 <div class="row mx-0 bg-light"> 153 <div class="row mx-0 bg-light">
154 <div class="col-auto align-self-center text-primary">VER CARRITO</div> 154 <div class="col-auto align-self-center text-primary">VER CARRITO</div>
155 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 155 <div class="col-auto p-0 bg-primary d-none d-sm-block">
156 <img 156 <img
157 draggable="false" 157 draggable="false"
158 ondragstart="return false;" 158 ondragstart="return false;"
159 (contextmenu)="false" 159 (contextmenu)="false"
160 class="p-2 icon-40" 160 class="p-2 icon-40"
161 src="assets/img/carrito.svg"> 161 src="assets/img/carrito.svg">
162 </div> 162 </div>
163 </div> 163 </div>
164 </div> 164 </div>
165 </div> 165 </div>
166 </div> 166 </div>
167 </div> 167 </div>
168 168
169 </div> 169 </div>
170 170