Luis Suarez / autoservicio-axion

Browse Code »

Commit 9259d189a957e44d2caa344cfcfaa99a552c90ac

Authored by Marcelo Puebla 2019-12-30 10:25:46 -0300

1 parent f5f122fef2

Exists in master and in 2 other branches

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

 <div class="h-92 bg-white">
   <!-- PUBLICIDADES -->
   <div class="row mx-0 h-10">
     <div class="col-12 p-3 h-100">
       <div class="bg-dark h-100"></div>
     </div>
   </div>
   <div class="h-90">
     <!-- CABECERA -->
     <div class="row mx-4 h-auto border border-primary rounded-sm">
       <div class="col-12 p-2 align-self-center">
         <div class="px-3">
           <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
         </div>
       </div>
     </div>
     <!-- CUERPO -->
     <div class="row mr-4 h-70">
       <div class="col-12 h-100 px-0 py-3">
         <div class="row mx-0 h-100">
           <!-- FILTRO CATEGORIAS -->
           <div class="col-5 col-sm-3 col-xl-2 h-100">
             <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
             <div class="row mx-0 h-94 align-items-center">
               <div class="col-12 h-5">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90-neg"
                   src="assets/img/ir-color.svg"
-                  (mousedown)="scroll(templateCategorias, -80)"
+                  (mousedown)="scrollY(templateCategorias, -80)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
               <!-- CATEGORIAS -->
               <div
                 #templateCategorias
                 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
                 <div
                   class="row mx-4 mb-2 h-32 justify-content-center tab"
                   [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
                   (click)="selectCategoria(i)"
                   *ngFor="let categoria of categorias; let i = index;">
                   <img
                     class="col-12 h-50 align-self-end d-none d-sm-block"
                     src="assets/img/ir-color.svg">
                   <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>
                 </div>
               </div>
               <div class="col-12 h-5">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90"
                   src="assets/img/ir-color.svg"
-                  (mousedown)="scroll(templateCategorias, 80)"
+                  (mousedown)="scrollY(templateCategorias, 80)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
             </div>
           </div>
           <!-- LISTA DE ARTICULOS -->
           <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
             <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
               <!-- ARTICULO -->
               <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
                 <div class="card h-100">
                   <img src="assets/img/ir-color.svg" class="card-img-top h-55">
                   <div class="row mx-0 py-1 h-auto justify-content-center">
                     <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
                     <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
                     <div class="col-12 px-1 align-self-end btn-effect h-auto">
                       <div class="row mx-0 justify-content-between bg-primary badge-pill">
                         <div class="col px-0 align-self-center text-white text-right">
                           {{55 | currency}}
                         </div>
                         <div class="col-5 px-0">
                           <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg">
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div class="row mx-0 h-20 justify-content-center">
       <div class="col-11 h-100 px-0 border border-primary rounded">
         <div class="row mx-0 h-15 border-bottom border-primary">
-          <p class="col align-self-center"><small>PRODUCTOS EN TÚ CARRITO DE COMPRAS</small></p>
+          <p class="col align-self-center text-truncate"><small>PRODUCTOS EN TÚ CARRITO DE COMPRAS</small></p>
         </div>
-        <div class="row h-85 mx-auto">
+        <div class="row h-85 mx-0 justify-content-between">
           <div class="col-auto h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="img-ir rotate-180-neg"
               src="assets/img/ir-fondo-color.svg"
-              (mousedown)="scroll(templateCarrito, -80)"
+              (mousedown)="scrollX(templateCarrito, -100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
-          <div class="col h-100">
+          <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
-            <div #templateCarrito class="row h-100 mx-0 scroll-x">
+            <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
               <div
-                class="col-12 col-md-3 col-xl-2 p-2 h-100"
+                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"
                 (click)="selectCategoria(i)"
-                *ngFor="let categoria of [{},{},{},{},{},{},{}]; let i = index;">
+                *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
                 <img
-                  class="h-55 mx-auto"
+                  class="d-block h-55 mx-auto"
                   src="assets/img/ir-color.svg">
-                <p class="mt-1 text-center text-primary"><small>{{'lala'}}</small></p>
+                <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
               </div>
             </div>
           </div>
           <div class="col-auto h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="img-ir"
               src="assets/img/ir-fondo-color.svg"
-              (mousedown)="scroll(templateCarrito, -80)"
+              (mousedown)="scrollX(templateCarrito, 100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</div>

src/app/modules/seleccion-productos/seleccion-productos.component.ts

Diff comments View file @ 9259d18

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
 @Component({
-  selector: 'app-seleccion-productos',
+  selector: "app-seleccion-productos",
-  templateUrl: './seleccion-productos.component.html',
+  templateUrl: "./seleccion-productos.component.html",
-  styleUrls: ['./seleccion-productos.component.scss']
+  styleUrls: ["./seleccion-productos.component.scss"]
 })
 export class SeleccionProductosComponent implements OnInit {
   timeoutHandler: any;
   categorias = [
     { id: 1, selected: false },
     { id: 2, selected: false },
-    { id: 3, selected: false },
+    { id: 3, selected: false }
   ];
-  constructor() { }
+  constructor() {}
-  ngOnInit() {
+  ngOnInit() {}
-  }
   selectCategoria(index: number) {
     this.categorias.forEach((categoria, i) => {
       categoria.selected = index === i ? true : false;
     });
   }
   mouseup() {
     if (!this.timeoutHandler) return;
     clearInterval(this.timeoutHandler);
   }
-  scroll(el: HTMLElement, value) {
+  scrollY(el: HTMLElement, value) {
-    el.scroll({ behavior: 'smooth', top: (value + el.scrollTop) });
+    el.scroll({ behavior: "smooth", top: value + el.scrollTop });
     this.timeoutHandler = setInterval(() => {
-      el.scroll({ behavior: 'smooth', top: (value + el.scrollTop) });
+      el.scroll({ behavior: "smooth", top: value + el.scrollTop });
     }, 500);
   }
+  scrollX(el: HTMLElement, value) {
+    el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
+    this.timeoutHandler = setInterval(() => {
+      el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
+    }, 500);
+  }
 }