Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 9259d189a957e44d2caa344cfcfaa99a552c90ac

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

Agregado scroll horizontal en la seccion de articulos en el carrito

Showing 2 changed files with 29 additions and 24 deletions   Show diff stats
src/app/modules/seleccion-productos/seleccion-productos.component.html
Diff comments   View file @ 9259d18
... ... @@ -29,7 +29,7 @@
29 29 (contextmenu)="false"
30 30 class="h-100 d-block mx-auto rotate-90-neg"
31 31 src="assets/img/ir-color.svg"
32   - (mousedown)="scroll(templateCategorias, -80)"
  32 + (mousedown)="scrollY(templateCategorias, -80)"
33 33 (mouseup)="mouseup()"
34 34 (mouseleave)="mouseup()">
35 35 </div>
... ... @@ -55,7 +55,7 @@
55 55 (contextmenu)="false"
56 56 class="h-100 d-block mx-auto rotate-90"
57 57 src="assets/img/ir-color.svg"
58   - (mousedown)="scroll(templateCategorias, 80)"
  58 + (mousedown)="scrollY(templateCategorias, 80)"
59 59 (mouseup)="mouseup()"
60 60 (mouseleave)="mouseup()">
61 61 </div>
... ... @@ -92,9 +92,9 @@
92 92 <div class="row mx-0 h-20 justify-content-center">
93 93 <div class="col-11 h-100 px-0 border border-primary rounded">
94 94 <div class="row mx-0 h-15 border-bottom border-primary">
95   - <p class="col align-self-center"><small>PRODUCTOS EN TÚ CARRITO DE COMPRAS</small></p>
  95 + <p class="col align-self-center text-truncate"><small>PRODUCTOS EN TÚ CARRITO DE COMPRAS</small></p>
96 96 </div>
97   - <div class="row h-85 mx-auto">
  97 + <div class="row h-85 mx-0 justify-content-between">
98 98 <div class="col-auto h-20 align-self-center">
99 99 <img
100 100 draggable="false"
... ... @@ -102,20 +102,20 @@
102 102 (contextmenu)="false"
103 103 class="img-ir rotate-180-neg"
104 104 src="assets/img/ir-fondo-color.svg"
105   - (mousedown)="scroll(templateCarrito, -80)"
  105 + (mousedown)="scrollX(templateCarrito, -100)"
106 106 (mouseup)="mouseup()"
107 107 (mouseleave)="mouseup()">
108 108 </div>
109   - <div class="col h-100">
110   - <div #templateCarrito class="row h-100 mx-0 scroll-x">
  109 + <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
  110 + <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
111 111 <div
112   - class="col-12 col-md-3 col-xl-2 p-2 h-100"
  112 + 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"
113 113 (click)="selectCategoria(i)"
114   - *ngFor="let categoria of [{},{},{},{},{},{},{}]; let i = index;">
  114 + *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
115 115 <img
116   - class="h-55 mx-auto"
  116 + class="d-block h-55 mx-auto"
117 117 src="assets/img/ir-color.svg">
118   - <p class="mt-1 text-center text-primary"><small>{{'lala'}}</small></p>
  118 + <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
119 119 </div>
120 120 </div>
121 121 </div>
... ... @@ -126,7 +126,7 @@
126 126 (contextmenu)="false"
127 127 class="img-ir"
128 128 src="assets/img/ir-fondo-color.svg"
129   - (mousedown)="scroll(templateCarrito, -80)"
  129 + (mousedown)="scrollX(templateCarrito, 100)"
130 130 (mouseup)="mouseup()"
131 131 (mouseleave)="mouseup()">
132 132 </div>
... ... @@ -135,4 +135,4 @@
135 135 </div>
136 136 </div>
137 137  
138   -</div>
139 138 \ No newline at end of file
  139 +</div>
src/app/modules/seleccion-productos/seleccion-productos.component.ts
Diff comments   View file @ 9259d18
1   -import { Component, OnInit } from '@angular/core';
  1 +import { Component, OnInit } from "@angular/core";
2 2  
3 3 @Component({
4   - selector: 'app-seleccion-productos',
5   - templateUrl: './seleccion-productos.component.html',
6   - styleUrls: ['./seleccion-productos.component.scss']
  4 + selector: "app-seleccion-productos",
  5 + templateUrl: "./seleccion-productos.component.html",
  6 + styleUrls: ["./seleccion-productos.component.scss"]
7 7 })
8 8 export class SeleccionProductosComponent implements OnInit {
9 9 timeoutHandler: any;
10 10 categorias = [
11 11 { id: 1, selected: false },
12 12 { id: 2, selected: false },
13   - { id: 3, selected: false },
  13 + { id: 3, selected: false }
14 14 ];
15 15  
16   - constructor() { }
  16 + constructor() {}
17 17  
18   - ngOnInit() {
19   - }
  18 + ngOnInit() {}
20 19  
21 20 selectCategoria(index: number) {
22 21 this.categorias.forEach((categoria, i) => {
... ... @@ -29,11 +28,17 @@ export class SeleccionProductosComponent implements OnInit {
29 28 clearInterval(this.timeoutHandler);
30 29 }
31 30  
32   - scroll(el: HTMLElement, value) {
33   - el.scroll({ behavior: 'smooth', top: (value + el.scrollTop) });
  31 + scrollY(el: HTMLElement, value) {
  32 + el.scroll({ behavior: "smooth", top: value + el.scrollTop });
34 33 this.timeoutHandler = setInterval(() => {
35   - el.scroll({ behavior: 'smooth', top: (value + el.scrollTop) });
  34 + el.scroll({ behavior: "smooth", top: value + el.scrollTop });
36 35 }, 500);
37 36 }
38 37  
  38 + scrollX(el: HTMLElement, value) {
  39 + el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
  40 + this.timeoutHandler = setInterval(() => {
  41 + el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
  42 + }, 500);
  43 + }
39 44 }