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
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 <div class="row mx-0 h-10"> 3 <div class="row mx-0 h-10">
4 <div class="col-12 p-3 h-100"> 4 <div class="col-12 p-3 h-100">
5 <div class="bg-dark h-100"></div> 5 <div class="bg-dark h-100"></div>
6 </div> 6 </div>
7 </div> 7 </div>
8 <div class="h-90 row mx-0 align-items-end"> 8 <div class="row mx-0 h-90 align-items-end">
9 <!-- CABECERA --> 9 <div class="col-12 px-0 h-100">
10 <div class="row mx-4 h-auto border border-primary rounded-sm"> 10 <!-- CABECERA -->
11 <div class="col-12 p-2 align-self-center"> 11 <div class="row mx-4 h-auto border border-primary rounded-sm">
12 <div class="px-3"> 12 <div class="col-12 p-2 align-self-center">
13 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 13 <div class="px-3">
14 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
15 </div>
14 </div> 16 </div>
15 </div> 17 </div>
16 </div> 18 <!-- CUERPO -->
17 <!-- CUERPO --> 19 <div class="row mr-4 h-70">
18 <div class="row mr-4 h-70"> 20 <div class="col-12 h-100 px-0 py-3">
19 <div class="col-12 h-100 px-0 py-3"> 21 <div class="row mx-0 h-100">
20 <div class="row mx-0 h-100"> 22 <!-- FILTRO CATEGORIAS -->
21 <!-- FILTRO CATEGORIAS --> 23 <div class="col-5 col-sm-3 col-xl-2 h-100">
22 <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>
23 <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">
24 <div class="row mx-0 h-94 align-items-center"> 26 <div class="col-12 h-5">
25 <div class="col-12 h-5"> 27 <img
26 <img 28 draggable="false"
27 draggable="false" 29 ondragstart="return false;"
28 ondragstart="return false;" 30 (contextmenu)="false"
29 (contextmenu)="false" 31 class="h-100 d-block mx-auto rotate-90-neg"
30 class="h-100 d-block mx-auto rotate-90-neg" 32 src="assets/img/ir-color.svg"
31 src="assets/img/ir-color.svg" 33 (mousedown)="scrollY(templateCategorias, -80)"
32 (mousedown)="scrollY(templateCategorias, -80)" 34 (mouseup)="mouseup()"
33 (mouseup)="mouseup()" 35 (mouseleave)="mouseup()">
34 (mouseleave)="mouseup()"> 36 </div>
35 </div> 37 <!-- CATEGORIAS -->
36 <!-- CATEGORIAS -->
37 <div
38 #templateCategorias
39 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
40 <div 38 <div
41 class="row mx-4 mb-2 h-32 justify-content-center tab" 39 #templateCategorias
42 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 40 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
43 (click)="selectCategoria(i)" 41 <div
44 *ngFor="let categoria of categorias; let i = index;"> 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 <img 53 <img
46 class="col-12 h-50 align-self-end d-none d-sm-block" 54 draggable="false"
47 src="assets/img/ir-color.svg"> 55 ondragstart="return false;"
48 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small> 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 </div> 62 </div>
50 </div> 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 </div> 64 </div>
63 </div> 65 <!-- LISTA DE ARTICULOS -->
64 <!-- LISTA DE ARTICULOS --> 66 <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"> 67 <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"> 68 <!-- ARTICULO -->
67 <!-- ARTICULO --> 69 <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 [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]"> 70 <div class="card h-100">
69 <div class="card h-100"> 71 <img src="assets/img/ir-color.svg" class="card-img-top h-55">
70 <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">
71 <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>
72 <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>
73 <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">
74 <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">
75 <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">
76 <div class="col px-0 align-self-center text-white text-right"> 78 {{55 | currency}}
77 {{55 | currency}} 79 </div>
78 </div> 80 <div class="col-5 px-0">
79 <div class="col-5 px-0"> 81 <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg">
80 <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg"> 82 </div>
81 </div> 83 </div>
82 </div> 84 </div>
83 </div> 85 </div>
84 </div> 86 </div>
85 </div> 87 </div>
86 </div> 88 </div>
87 </div> 89 </div>
88 </div> 90 </div>
89 </div> 91 </div>
90 </div> 92 </div>
91 </div> 93 <!-- FOOTER CARRITO DE COMPRAS -->
92 <!-- FOOTER CARRITO DE COMPRAS --> 94 <div class="row w-90 mx-auto h-auto justify-content-center">
93 <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">
94 <div class="col-12 h-75 px-0 border border-primary rounded"> 96 <div class="row mx-0 h-15 border-bottom border-primary">
95 <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>
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()">
109 </div> 98 </div>
110 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 99 <div class="row h-85 mx-0 justify-content-between">
111 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x"> 100 <div class="col-auto h-20 align-self-center">
112 <div 101 <img
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" 102 draggable="false"
114 (click)="selectCategoria(i)" 103 ondragstart="return false;"
115 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;"> 104 (contextmenu)="false"
116 <img 105 class="img-ir rotate-180-neg"
117 class="d-block h-55 p-2 mx-auto" 106 src="assets/img/ir-fondo-color.svg"
118 src="assets/img/ir-color.svg"> 107 (mousedown)="scrollX(templateCarrito, -100)"
119 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p> 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 </div> 122 </div>
121 </div> 123 </div>
122 </div> 124 <div class="col-auto h-20 align-self-center">