Commit aff73e180816a6af9545a0546473aa21d8f9193d

Authored by Marcelo Puebla
1 parent 8f98ba4a3a
Exists in develop

Arreglo en navegacion

src/app/modules/seleccion-articulos/seleccion-articulos.component.html
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 class="col-12 h-50 align-self-end d-none d-sm-block" 43 class="col-12 h-50 align-self-end d-none d-sm-block"
44 src="assets/img/ir-color.svg"> 44 src="assets/img/ir-color.svg">
45 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small> 45 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>
46 </div> 46 </div>
47 </div> 47 </div>
48 <div class="col-12 h-5"> 48 <div class="col-12 h-5">
49 <img 49 <img
50 draggable="false" 50 draggable="false"
51 ondragstart="return false;" 51 ondragstart="return false;"
52 (contextmenu)="false" 52 (contextmenu)="false"
53 class="h-100 d-block mx-auto rotate-90" 53 class="h-100 d-block mx-auto rotate-90"
54 src="assets/img/ir-color.svg" 54 src="assets/img/ir-color.svg"
55 (mousedown)="scrollY(templateCategorias, 80)" 55 (mousedown)="scrollY(templateCategorias, 80)"
56 (mouseup)="mouseup()" 56 (mouseup)="mouseup()"
57 (mouseleave)="mouseup()"> 57 (mouseleave)="mouseup()">
58 </div> 58 </div>
59 </div> 59 </div>
60 </div> 60 </div>
61 <!-- LISTA DE ARTICULOS --> 61 <!-- LISTA DE ARTICULOS -->
62 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y"> 62 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
63 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100"> 63 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
64 <!-- ARTICULO --> 64 <!-- ARTICULO -->
65 <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]"> 65 <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
66 <div class="card h-100"> 66 <div class="card h-100">
67 <img src="assets/img/ir-color.svg" class="card-img-top h-55"> 67 <img src="assets/img/ir-color.svg" class="card-img-top h-55">
68 <div class="row mx-0 py-1 h-auto justify-content-center"> 68 <div class="row mx-0 py-1 h-auto justify-content-center">
69 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p> 69 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
70 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p> 70 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
71 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 71 <div class="col-12 px-1 align-self-end btn-effect h-auto">
72 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 72 <div class="row mx-0 justify-content-between bg-primary badge-pill">
73 <div class="col px-0 align-self-center text-white text-right"> 73 <div class="col px-0 align-self-center text-white text-right">
74 {{55 | currency}} 74 {{55 | currency}}
75 </div> 75 </div>
76 <div class="col-5 px-0"> 76 <div class="col-5 px-0">
77 <img class="d-block ml-auto py-1 icon-30" src="assets/img/ir.svg"> 77 <img class="d-block ml-auto py-1 icon-30" src="assets/img/ir.svg">
78 </div> 78 </div>
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 </div> 82 </div>
83 </div> 83 </div>
84 </div> 84 </div>
85 </div> 85 </div>
86 </div> 86 </div>
87 </div> 87 </div>
88 </div> 88 </div>
89 <!-- FOOTER CARRITO DE COMPRAS --> 89 <!-- FOOTER CARRITO DE COMPRAS -->
90 <div class="row w-90 mx-auto h-auto justify-content-center"> 90 <div class="row w-90 mx-auto h-auto justify-content-center">
91 <div class="col-12 h-75 px-0 border border-primary rounded"> 91 <div class="col-12 h-75 px-0 border border-primary rounded">
92 <div class="row mx-0 h-15 border-bottom border-primary"> 92 <div class="row mx-0 h-15 border-bottom border-primary">
93 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 93 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
94 </div> 94 </div>
95 <div class="row h-85 mx-0 justify-content-between"> 95 <div class="row h-85 mx-0 justify-content-between">
96 <div class="col-auto h-20 align-self-center"> 96 <div class="col-auto h-20 align-self-center">
97 <img 97 <img
98 draggable="false" 98 draggable="false"
99 ondragstart="return false;" 99 ondragstart="return false;"
100 (contextmenu)="false" 100 (contextmenu)="false"
101 class="icon-30 rotate-180-neg" 101 class="icon-30 rotate-180-neg"
102 src="assets/img/ir-fondo-color.svg" 102 src="assets/img/ir-fondo-color.svg"
103 (mousedown)="scrollX(templateCarrito, -100)" 103 (mousedown)="scrollX(templateCarrito, -100)"
104 (mouseup)="mouseup()" 104 (mouseup)="mouseup()"
105 (mouseleave)="mouseup()"> 105 (mouseleave)="mouseup()">
106 </div> 106 </div>
107 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 107 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
108 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x"> 108 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
109 <div 109 <div
110 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" 110 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"
111 (click)="selectCategoria(i)" 111 (click)="selectCategoria(i)"
112 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;"> 112 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
113 <img 113 <img
114 class="d-block h-55 p-2 mx-auto" 114 class="d-block h-55 p-2 mx-auto"
115 src="assets/img/ir-color.svg"> 115 src="assets/img/ir-color.svg">
116 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p> 116 <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
117 </div> 117 </div>
118 </div> 118 </div>
119 </div> 119 </div>
120 <div class="col-auto h-20 align-self-center"> 120 <div class="col-auto h-20 align-self-center">
121 <img 121 <img
122 draggable="false" 122 draggable="false"
123 ondragstart="return false;" 123 ondragstart="return false;"
124 (contextmenu)="false" 124 (contextmenu)="false"
125 class="icon-30" 125 class="icon-30"
126 src="assets/img/ir-fondo-color.svg" 126 src="assets/img/ir-fondo-color.svg"
127 (mousedown)="scrollX(templateCarrito, 100)" 127 (mousedown)="scrollX(templateCarrito, 100)"
128 (mouseup)="mouseup()" 128 (mouseup)="mouseup()"
129 (mouseleave)="mouseup()"> 129 (mouseleave)="mouseup()">
130 </div> 130 </div>
131 </div> 131 </div>
132 </div> 132 </div>
133 <div class="col-auto p-0 mt-2 ml-auto h-20"> 133 <div class="col-auto p-0 mt-2 ml-auto h-20">
134 <div 134 <div
135 class="btn-effect col-auto align-self-center px-0 bg-white" 135 class="btn-effect col-auto align-self-center px-0 bg-white"
136 [routerLink]="['/carrito']"> 136 [routerLink]="['/carrito']" skipLocationChange>
137 <div class="row mx-0 bg-light"> 137 <div class="row mx-0 bg-light">
138 <div class="col-auto align-self-center text-primary">VER CARRITO</div> 138 <div class="col-auto align-self-center text-primary">VER CARRITO</div>
139 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 139 <div class="col-auto p-0 bg-primary d-none d-sm-block">
140 <img class="p-2 icon-40" src="assets/img/carrito.svg"> 140 <img class="p-2 icon-40" src="assets/img/carrito.svg">
141 </div> 141 </div>
142 </div> 142 </div>
143 </div> 143 </div>
144 </div> 144 </div>
145 </div> 145 </div>
146 </div> 146 </div>
147 147
148 </div> 148 </div>
149 149
src/app/shared/footer/footer.component.ts
1 import { Component, OnInit } from "@angular/core"; 1 import { Component, OnInit } from '@angular/core';
2 import { Location } from "@angular/common"; 2 import { Location } from '@angular/common';
3 3
4 @Component({ 4 @Component({
5 selector: "app-footer", 5 selector: 'app-footer',
6 templateUrl: "./footer.component.html", 6 templateUrl: './footer.component.html',
7 styleUrls: ["./footer.component.scss"] 7 styleUrls: ['./footer.component.scss']
8 }) 8 })
9 export class FooterComponent implements OnInit { 9 export class FooterComponent implements OnInit {
10 constructor(private location: Location) {} 10 constructor(private location: Location) {}
11 11
12 ngOnInit() {} 12 ngOnInit() {}
13 13
14 goBack() { 14 goBack() {
15 this.location.back(); 15 this.location.back();
16 } 16 }
17 } 17 }
18 18