Martin Macola / autoservicio

Download as
Browse Code »

Commit e44e84d2946a1f35bc7cd2f080f6f81b44605c8b

Authored by Marcelo Puebla
1 parent ab03e38ead
Exists in master

Arreglo de responsividad.

Showing 2 changed files with 17 additions and 17 deletions   Show diff stats
src/app/components/home/home.component.html
Diff comments   View file @ e44e84d
1 <div class="container-fluid p-0"> 1 <div class="container-fluid p-0">
2 <img 2 <img
3 src="{{apiImagenes}}/imagenes/homeBackground.jpg" 3 src="{{apiImagenes}}/imagenes/homeBackground.jpg"
4 class="background-image vh-100 w-100"> 4 class="background-image vh-100 w-100">
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col p-0"> 6 <div class="col p-0">
7 <div 7 <div
8 class="vh-100 fade-in d-flex align-items-start flex-column disable-user-select" 8 class="vh-100 fade-in d-flex align-items-start flex-column disable-user-select"
9 [routerLink]="['/inicio']"> 9 [routerLink]="['/inicio']">
10 10
11 <!-- HEADER --> 11 <!-- HEADER -->
12 <div class="row m-0 w-100 bg-primary-gradient-horizontal"> 12 <div class="row m-0 w-100 bg-primary-gradient-horizontal">
13 <div class="col-6 bg-white p-3 rounded-bottom-right"> 13 <div class="col-6 bg-white p-3 rounded-bottom-right">
14 <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png"> 14 <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png">
15 </div> 15 </div>
16 </div> 16 </div>
17 17
18 <!-- INFO DE BIENVENIDA --> 18 <!-- INFO DE BIENVENIDA -->
19 <div class="row my-auto mx-0 h-75 w-100"> 19 <div class="row my-auto mx-0 h-75 w-100">
20 <div class="col-8 col-lg-8 my-auto"> 20 <div class="col-6 col-lg-8 my-auto p-3 h-100">
21 <div class="embed-responsive embed-responsive-16by9"> 21 <div class="embed-responsive embed-responsive-16by9">
22 <iframe 22 <iframe
23 class="embed-responsive-item rounded fade-in" 23 class="embed-responsive-item rounded fade-in"
24 src="https://www.youtube.com/embed/vb8ZcalBDyw?&autoplay=1&loop=1&playlist=vb8ZcalBDyw&controls=0&showinfo=0&mute=1"> 24 src="https://www.youtube.com/embed/vb8ZcalBDyw?&autoplay=1&loop=1&playlist=vb8ZcalBDyw&controls=0&showinfo=0&mute=1">
25 </iframe> 25 </iframe>
26 </div> 26 </div>
27 </div> 27 </div>
28 <div class="col-8 col-lg-4 text-center text-white my-auto"> 28 <div class="col-6 col-lg-4 text-center text-white my-auto">
29 <p class="display-4 font-weight-bold m-0">¡BIENVENIDO!</p> 29 <p class="display-4 font-weight-bold m-0">¡BIENVENIDO!</p>
30 <p class="display-4 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p> 30 <p class="display-4 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>
31 </div> 31 </div>
32 32
33 </div> 33 </div>
34 34
35 <!-- FOOTER --> 35 <!-- FOOTER -->
36 <div class="row m-0 w-100 bg-gray"> 36 <div class="row m-0 w-100 bg-gray">
37 <div class="col-6 bg-white offset-6 p-3 rounded-top-left"> 37 <div class="col-6 bg-white offset-6 p-3 rounded-top-left">
38 <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logodebo.png"> 38 <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logodebo.png">
39 </div> 39 </div>
40 </div> 40 </div>
41 41
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
45 </div> 45 </div>
46 46
src/app/components/inicio/inicio.component.html
Diff comments   View file @ e44e84d
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p> 7 <p class="h5 m-0 py-1 bg-gray text-muted text-center">Inicio</p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row m-3 d-flex align-items-start disable-user-select"> 11 <div class="row m-0 d-flex align-items-start disable-user-select">
12 <div class="col-md-5 d-flex align-items-end flex-column"> 12 <div class="col-md-5 py-3 pr-0 d-flex align-items-end flex-column">
13 13
14 <!-- PROMOCIONES --> 14 <!-- PROMOCIONES -->
15 <div 15 <div
16 (click)="irBusquedaProductos('promociones')" 16 (click)="irBusquedaProductos('promociones')"
17 class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 17 class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
18 <div class="card-body text-left px-4 py-3"> 18 <div class="card-body text-left px-4 py-3">
19 <div class="row"> 19 <div class="row">
20 <div class="col-auto"> 20 <div class="col-auto">
21 <p class="h3 card-title">Promociones</p> 21 <p class="m-0 h3 card-title">Promociones</p>
22 </div> 22 </div>
23 <div class="col-auto p-0"> 23 <div class="col-auto p-0">
24 <img src="{{apiImagenes}}/imagenes/primario.promociones.png" class="icon-dim m-0"> 24 <img src="{{apiImagenes}}/imagenes/primario.promociones.png" class="w-15 m-0">
25 </div> 25 </div>
26 </div> 26 </div>
27 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 27 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
28 </div> 28 </div>
29 <!-- CAROUSEL --> 29 <!-- CAROUSEL -->
30 <carousel [showIndicators]="false" [interval]="1500"> 30 <carousel [showIndicators]="false" [interval]="1500">
31 <slide class="h-100"> 31 <slide class="h-100">
32 <img 32 <img
33 src="{{apiImagenes}}/imagenes/beldent.jpg" 33 src="{{apiImagenes}}/imagenes/beldent.jpg"
34 class="fade-in d-block w-75 m-auto rounded"> 34 class="fade-in d-block w-75 m-auto rounded">
35 </slide> 35 </slide>
36 <slide class="h-100"> 36 <slide class="h-100">
37 <img 37 <img
38 src="{{apiImagenes}}/imagenes/cafe con leche y medialunas.jpg" 38 src="{{apiImagenes}}/imagenes/cafe con leche y medialunas.jpg"
39 class="fade-in d-block w-75 m-auto rounded"> 39 class="fade-in d-block w-75 m-auto rounded">
40 </slide> 40 </slide>
41 <slide class="h-100"> 41 <slide class="h-100">
42 <img 42 <img
43 src="{{apiImagenes}}/imagenes/Surtido bagley.jpg" 43 src="{{apiImagenes}}/imagenes/Surtido bagley.jpg"
44 class="fade-in d-block w-75 m-auto rounded"> 44 class="fade-in d-block w-75 m-auto rounded">
45 </slide> 45 </slide>
46 <slide class="h-100"> 46 <slide class="h-100">
47 <img 47 <img
48 src="{{apiImagenes}}/imagenes/yogurisimo.jpg" 48 src="{{apiImagenes}}/imagenes/yogurisimo.jpg"
49 class="fade-in d-block w-75 m-auto rounded"> 49 class="fade-in d-block w-75 m-auto rounded">
50 </slide> 50 </slide>
51 </carousel> 51 </carousel>
52 </div> 52 </div>
53 53
54 <!-- ORDENAR --> 54 <!-- ORDENAR -->
55 <div (click)="irBusquedaProductos('ordenar')" 55 <div (click)="irBusquedaProductos('ordenar')"
56 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 56 class="card card-effect bg-white border-0 shadow rounded w-100 mt-3">
57 <div class="card-body text-left px-4 py-3"> 57 <div class="card-body text-left px-4 py-3">
58 <div class="row"> 58 <div class="row">
59 <div class="col-auto"> 59 <div class="col-auto">
60 <p class="h3 card-title">Ordenar Pedido</p> 60 <p class="m-0 h3 card-title">Ordenar Pedido</p>
61 </div> 61 </div>
62 <div class="col-auto p-0"> 62 <div class="col-auto p-0">
63 <img src="{{apiImagenes}}/imagenes/primario.ordenar.png" class="icon-dim"> 63 <img src="{{apiImagenes}}/imagenes/primario.ordenar.png" class="w-15">
64 </div> 64 </div>
65 </div> 65 </div>
66 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 66 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
67 </div> 67 </div>
68 <img 68 <img
69 class="card-img-bottom d-block w-100 mx-auto rounded" 69 class="card-img-bottom d-block w-100 mx-auto rounded"
70 src="{{apiImagenes}}/imagenes/cafe.jpg"> 70 src="{{apiImagenes}}/imagenes/cafe.jpg">
71 </div> 71 </div>
72 </div> 72 </div>
73 73
74 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0"> 74 <div class="col-md-7 py-3 d-flex align-items-end flex-column mt-4 mt-md-0">
75 75
76 <!-- CARGAR PRODUCTOS --> 76 <!-- CARGAR PRODUCTOS -->
77 <ng-template #popTemplate> 77 <ng-template #popTemplate>
78 <app-popover-promos 78 <app-popover-promos
79 *ngIf="promociones.length > 0 && sinonimos.length === 0" 79 *ngIf="promociones.length > 0 && sinonimos.length === 0"
80 [popover]="popoverDirective" 80 [popover]="popoverDirective"
81 [popoverContent]="promociones" 81 [popoverContent]="promociones"
82 (promoSeleccionada)="promoSeleccionada($event, false)" 82 (promoSeleccionada)="promoSeleccionada($event, false)"
83 class="text-white rounded-sm border-0"> 83 class="text-white rounded-sm border-0">
84 </app-popover-promos> 84 </app-popover-promos>
85 <app-popover-sinonimos 85 <app-popover-sinonimos
86 *ngIf="sinonimos.length > 0" 86 *ngIf="sinonimos.length > 0"
87 [popover]="popoverDirective" 87 [popover]="popoverDirective"
88 [popoverContent]="sinonimos" 88 [popoverContent]="sinonimos"
89 (productosPersonalizados)="productosPersonalizados($event)" 89 (productosPersonalizados)="productosPersonalizados($event)"
90 class="text-white rounded-sm border-0"> 90 class="text-white rounded-sm border-0">
91 </app-popover-sinonimos> 91 </app-popover-sinonimos>
92 </ng-template> 92 </ng-template>
93 <div 93 <div
94 placement="left" 94 placement="left"
95 triggers="" 95 triggers=""
96 [popover]="popTemplate" 96 [popover]="popTemplate"
97 class="w-100" 97 class="w-100"
98 #pop="bs-popover"> 98 #pop="bs-popover">
99 <div class="card bg-white border-0 shadow rounded mb-auto"> 99 <div class="card bg-white border-0 shadow rounded mb-auto">
100 <div class="card-body text-left px-4 py-3"> 100 <div class="card-body text-left px-4 py-3">
101 <div class="row"> 101 <div class="row">
102 <div class="col-auto"> 102 <div class="col-auto">
103 <p class="h3 card-title">Cargar Productos</p> 103 <p class="m-0 h3 card-title">Cargar Productos</p>
104 </div> 104 </div>
105 <div class="col-auto p-0"> 105 <div class="col-auto p-0">
106 <img src="{{apiImagenes}}/imagenes/escanear.png" class="icon-dim mb-2"> 106 <img src="{{apiImagenes}}/imagenes/escanear.png" class="w-15">
107 </div> 107 </div>
108 </div> 108 </div>
109 <p class="h5 card-text text-muted font-weight-light"> 109 <p class="h5 card-text text-muted font-weight-light">
110 Coloque un producto frente<br> 110 Coloque un producto frente<br>
111 al lector de códigos o selecciónelo en pantalla. 111 al lector de códigos o selecciónelo en pantalla.
112 </p> 112 </p>
113 </div> 113 </div>
114 <div class="row m-4"> 114 <div class="row mx-3 mb-3">
115 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> 115 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
116 <!-- IMAGEN DE ESCANER --> 116 <!-- IMAGEN DE ESCANER -->
117 <img 117 <img
118 *ngIf="!productoAcargar" 118 *ngIf="!productoAcargar"
119 class="card-img-top d-block w-100 mx-auto rounded-sm" 119 class="card-img-top d-block w-100 mx-auto rounded-sm"
120 src="{{apiImagenes}}/imagenes/escanner.jpg"> 120 src="{{apiImagenes}}/imagenes/escanner.jpg">
121 121
122 <!-- PRODUCTO A CARGAR --> 122 <!-- PRODUCTO A CARGAR -->
123 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> 123 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
124 <img 124 <img
125 class="card-img-top d-block w-75 mx-auto rounded-sm" 125 class="card-img-top d-block w-75 mx-auto rounded-sm"
126 src="{{apiImagenes}}/imagenes/{{productoAcargar.imagenes[0].imagen}}"> 126 src="{{apiImagenes}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
127 127
128 <div class="row justify-content-between m-3"> 128 <div class="row justify-content-between m-3">
129 <div class="col-12 text-left px-1"> 129 <div class="col-12 text-left px-1">
130 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DET_LAR}}</p> 130 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DET_LAR}}</p>
131 </div> 131 </div>
132 <div class="col-12 text-right mt-2"> 132 <div class="col-12 text-right mt-2">
133 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 133 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
134 </div> 134 </div>
135 </div> 135 </div>
136 </div> 136 </div>
137 137
138 <!-- PROMO A CARGAR --> 138 <!-- PROMO A CARGAR -->
139 <div class="fade-in m-0" *ngIf="promoAcargar"> 139 <div class="fade-in m-0" *ngIf="promoAcargar">
140 <img 140 <img
141 class="card-img-top d-block w-100 mx-auto rounded-sm" 141 class="card-img-top d-block w-100 mx-auto rounded-sm"
142 src="{{apiImagenes}}/imagenes/{{promoAcargar.imagenes[0].imagen}}"> 142 src="{{apiImagenes}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">
143 143
144 <div class="row justify-content-between m-3"> 144 <div class="row justify-content-between m-3">
145 <div class="col-12 text-left px-1"> 145 <div class="col-12 text-left px-1">
146 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DET_LAR}}</p> 146 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DET_LAR}}</p>
147 </div> 147 </div>
148 <div class="col-12 text-right mt-2 align-self-end"> 148 <div class="col-12 text-right mt-2 align-self-end">
149 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p> 149 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p>
150 </div> 150 </div>
151 </div> 151 </div>
152 </div> 152 </div>
153 153
154 </div> 154 </div>
155 <!-- BOTONES DE CARGAR PRODUCTOS--> 155 <!-- BOTONES DE CARGAR PRODUCTOS-->
156 <div 156 <div
157 class="col-5 pr-0" 157 class="col-5 pr-0"
158 *ngIf="promociones.length > 0"> 158 *ngIf="promociones.length > 0">
159 <button 159 <button
160 *ngIf="!promoAcargar || sinonimos.length == 0" 160 *ngIf="!promoAcargar || sinonimos.length == 0"
161 type="button" 161 type="button"
162 class="btn btn-primary btn-block shadow-sm" 162 class="btn btn-primary btn-block shadow-sm"
163 (click)="pop.show()"> 163 (click)="pop.show()">
164 <span class="pr-2">Mostrar promociones</span> 164 <span class="pr-2">Mostrar promociones</span>
165 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 165 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
166 </button> 166 </button>
167 <button 167 <button
168 type="button" 168 type="button"
169 class="btn btn-light btn-block shadow-sm my-3" 169 class="btn btn-light btn-block shadow-sm my-3"
170 (click)="confirmarProducto()"> 170 (click)="confirmarProducto()">
171 <span class="pr-2 font-weight-bold">Confirmar</span> 171 <span class="pr-2 font-weight-bold">Confirmar</span>
172 <i class="fa fa-check text-success" aria-hidden="true"></i> 172 <i class="fa fa-check text-success" aria-hidden="true"></i>
173 </button> 173 </button>
174 <button 174 <button
175 type="button" 175 type="button"
176 class="btn btn-light btn-block shadow-sm" 176 class="btn btn-light btn-block shadow-sm"
177 (click)="deshacerCarga()"> 177 (click)="deshacerCarga()">
178 <span class="pr-2">Deshacer</span> 178 <span class="pr-2">Deshacer</span>
179 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 179 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
180 </button> 180 </button>
181 </div> 181 </div>
182 </div> 182 </div>
183 </div> 183 </div>
184 </div> 184 </div>
185 185
186 <!-- BUSCAR PRODUCTOS --> 186 <!-- BUSCAR PRODUCTOS -->
187 <div (click)="irBusquedaProductos('todos')" 187 <div (click)="irBusquedaProductos('todos')"
188 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 188 class="card card-effect bg-white border-0 shadow rounded w-100 mt-3">
189 <div class="card-body text-left px-4 py-3"> 189 <div class="card-body text-left px-4 py-3">
190 <div class="row"> 190 <div class="row">
191 <div class="col-auto"> 191 <div class="col-auto">
192 <p class="h3 card-title">Buscar Productos</p> 192 <p class="m-0 h3 card-title">Buscar Productos</p>
193 <p class="h5 card-text text-muted font-weight-light"> 193 <p class="h5 card-text text-muted font-weight-light">
194 Busque aquí los productos<br> 194 Busque aquí los productos<br>
195 que no tienen código.</p> 195 que no tienen código.</p>
196 </div> 196 </div>
197 <div class="col-auto p-0"> 197 <div class="col-auto p-0">
198 <img src="{{apiImagenes}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 198 <img src="{{apiImagenes}}/imagenes/primario.buscar.png" class="w-15">
199 </div> 199 </div>
200 </div> 200 </div>
201 201
202 </div> 202 </div>
203 </div> 203 </div>
204 204
205 </div> 205 </div>
206 206
207 </div> 207 </div>
208 208
209 </div> 209 </div>
210 </div> 210 </div>
211 211