Commit 4f1f6f3d58ca5076d3aa1139c2c12b00d67c7960
1 parent
9259d189a9
Exists in
master
and in
2 other branches
Cambio nombre de modulo
Showing
14 changed files
with
275 additions
and
275 deletions
Show diff stats
src/app/app-routing.module.ts
| ... | ... | @@ -18,8 +18,8 @@ const routes: Routes = [ |
| 18 | 18 | loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule) |
| 19 | 19 | }, |
| 20 | 20 | { |
| 21 | - path: 'seleccion-productos', | |
| 22 | - loadChildren: () => import('./modules/seleccion-productos/seleccion-productos.module').then(m => m.SeleccionProductosModule) | |
| 21 | + path: 'seleccion-articulos', | |
| 22 | + loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule) | |
| 23 | 23 | }, |
| 24 | 24 | ] |
| 25 | 25 | }, |
src/app/modules/opcion-pedido/opcion-pedido.component.html
| ... | ... | @@ -14,7 +14,7 @@ |
| 14 | 14 | <div class="col-auto px-0 h-auto align-self-start"> |
| 15 | 15 | <div |
| 16 | 16 | class="btn-effect col-auto align-self-center px-0 bg-white" |
| 17 | - (click)="goTo('/seleccion-productos')"> | |
| 17 | + (click)="goTo('/seleccion-articulos')"> | |
| 18 | 18 | <div class="row mx-0 bg-primary badge-pill"> |
| 19 | 19 | <div class="col-auto p-0"> |
| 20 | 20 | <img class="p-1 img-plato" src="assets/img/icono-plato.svg"> |
| ... | ... | @@ -31,7 +31,7 @@ |
| 31 | 31 | <div class="col-auto px-0 h-auto align-self-start"> |
| 32 | 32 | <div |
| 33 | 33 | class="btn-effect col-auto align-self-center px-0 bg-white" |
| 34 | - (click)="goTo('/seleccion-productos')"> | |
| 34 | + (click)="goTo('/seleccion-articulos')"> | |
| 35 | 35 | <div class="row mx-0 bg-primary badge-pill"> |
| 36 | 36 | <div class="col-auto p-0"> |
| 37 | 37 | <img class="p-1 img-plato" src="assets/img/icono-take-away.svg"> |
src/app/modules/seleccion-articulos/seleccion-articulos-routing.module.ts
| ... | ... | @@ -0,0 +1,13 @@ |
| 1 | +import { NgModule } from '@angular/core'; | |
| 2 | +import { Routes, RouterModule } from '@angular/router'; | |
| 3 | +import { SeleccionArticulosComponent } from './seleccion-articulos.component'; | |
| 4 | + | |
| 5 | +const routes: Routes = [ | |
| 6 | + { path: '', component: SeleccionArticulosComponent } | |
| 7 | +]; | |
| 8 | + | |
| 9 | +@NgModule({ | |
| 10 | + imports: [RouterModule.forChild(routes)], | |
| 11 | + exports: [RouterModule] | |
| 12 | +}) | |
| 13 | +export class SeleccionArticulosRoutingModule { } |
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
| ... | ... | @@ -0,0 +1,138 @@ |
| 1 | +<div class="h-92 bg-white"> | |
| 2 | + <!-- PUBLICIDADES --> | |
| 3 | + <div class="row mx-0 h-10"> | |
| 4 | + <div class="col-12 p-3 h-100"> | |
| 5 | + <div class="bg-dark h-100"></div> | |
| 6 | + </div> | |
| 7 | + </div> | |
| 8 | + <div class="h-90"> | |
| 9 | + <!-- CABECERA --> | |
| 10 | + <div class="row mx-4 h-auto border border-primary rounded-sm"> | |
| 11 | + <div class="col-12 p-2 align-self-center"> | |
| 12 | + <div class="px-3"> | |
| 13 | + <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> | |
| 14 | + </div> | |
| 15 | + </div> | |
| 16 | + </div> | |
| 17 | + <!-- CUERPO --> | |
| 18 | + <div class="row mr-4 h-70"> | |
| 19 | + <div class="col-12 h-100 px-0 py-3"> | |
| 20 | + <div class="row mx-0 h-100"> | |
| 21 | + <!-- FILTRO CATEGORIAS --> | |
| 22 | + <div class="col-5 col-sm-3 col-xl-2 h-100"> | |
| 23 | + <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> | |
| 24 | + <div class="row mx-0 h-94 align-items-center"> | |
| 25 | + <div class="col-12 h-5"> | |
| 26 | + <img | |
| 27 | + draggable="false" | |
| 28 | + ondragstart="return false;" | |
| 29 | + (contextmenu)="false" | |
| 30 | + class="h-100 d-block mx-auto rotate-90-neg" | |
| 31 | + src="assets/img/ir-color.svg" | |
| 32 | + (mousedown)="scrollY(templateCategorias, -80)" | |
| 33 | + (mouseup)="mouseup()" | |
| 34 | + (mouseleave)="mouseup()"> | |
| 35 | + </div> | |
| 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 | |
| 41 | + class="row mx-4 mb-2 h-32 justify-content-center tab" | |
| 42 | + [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" | |
| 43 | + (click)="selectCategoria(i)" | |
| 44 | + *ngFor="let categoria of categorias; let i = index;"> | |
| 45 | + <img | |
| 46 | + class="col-12 h-50 align-self-end d-none d-sm-block" | |
| 47 | + src="assets/img/ir-color.svg"> | |
| 48 | + <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small> | |
| 49 | + </div> | |
| 50 | + </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> | |
| 63 | + </div> | |
| 64 | + <!-- LISTA DE ARTICULOS --> | |
| 65 | + <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y"> | |
| 66 | + <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100"> | |
| 67 | + <!-- ARTICULO --> | |
| 68 | + <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]"> | |
| 69 | + <div class="card h-100"> | |
| 70 | + <img src="assets/img/ir-color.svg" class="card-img-top h-55"> | |
| 71 | + <div class="row mx-0 py-1 h-auto justify-content-center"> | |
| 72 | + <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p> | |
| 73 | + <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p> | |
| 74 | + <div class="col-12 px-1 align-self-end btn-effect h-auto"> | |
| 75 | + <div class="row mx-0 justify-content-between bg-primary badge-pill"> | |
| 76 | + <div class="col px-0 align-self-center text-white text-right"> | |
| 77 | + {{55 | currency}} | |
| 78 | + </div> | |
| 79 | + <div class="col-5 px-0"> | |
| 80 | + <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg"> | |
| 81 | + </div> | |
| 82 | + </div> | |
| 83 | + </div> | |
| 84 | + </div> | |
| 85 | + </div> | |
| 86 | + </div> | |
| 87 | + </div> | |
| 88 | + </div> | |
| 89 | + </div> | |
| 90 | + </div> | |
| 91 | + </div> | |
| 92 | + <div class="row mx-0 h-20 justify-content-center"> | |
| 93 | + <div class="col-11 h-100 px-0 border border-primary rounded"> | |
| 94 | + <div class="row mx-0 h-15 border-bottom border-primary"> | |
| 95 | + <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> | |
| 96 | + </div> | |
| 97 | + <div class="row h-85 mx-0 justify-content-between"> | |
| 98 | + <div class="col-auto h-20 align-self-center"> | |
| 99 | + <img | |
| 100 | + draggable="false" | |
| 101 | + ondragstart="return false;" | |
| 102 | + (contextmenu)="false" | |
| 103 | + class="img-ir rotate-180-neg" | |
| 104 | + src="assets/img/ir-fondo-color.svg" | |
| 105 | + (mousedown)="scrollX(templateCarrito, -100)" | |
| 106 | + (mouseup)="mouseup()" | |
| 107 | + (mouseleave)="mouseup()"> | |
| 108 | + </div> | |
| 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 | + <div | |
| 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 | + (click)="selectCategoria(i)" | |
| 114 | + *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;"> | |
| 115 | + <img | |
| 116 | + class="d-block h-55 mx-auto" | |
| 117 | + src="assets/img/ir-color.svg"> | |
| 118 | + <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p> | |
| 119 | + </div> | |
| 120 | + </div> | |
| 121 | + </div> | |
| 122 | + <div class="col-auto h-20 align-self-center"> | |
| 123 | + <img | |
| 124 | + draggable="false" | |
| 125 | + ondragstart="return false;" | |
| 126 | + (contextmenu)="false" | |
| 127 | + class="img-ir" | |
| 128 | + src="assets/img/ir-fondo-color.svg" | |
| 129 | + (mousedown)="scrollX(templateCarrito, 100)" | |
| 130 | + (mouseup)="mouseup()" | |
| 131 | + (mouseleave)="mouseup()"> | |
| 132 | + </div> | |
| 133 | + </div> | |
| 134 | + </div> | |
| 135 | + </div> | |
| 136 | + </div> | |
| 137 | + | |
| 138 | +</div> |
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
| ... | ... | @@ -0,0 +1,36 @@ |
| 1 | +$primary: #aa006b; | |
| 2 | + | |
| 3 | +.box-categorias { | |
| 4 | + height: calc(100% - 100px) !important; | |
| 5 | +} | |
| 6 | + | |
| 7 | +.active { | |
| 8 | + background-color: white; | |
| 9 | + border-bottom: 3px solid $primary !important; | |
| 10 | +} | |
| 11 | + | |
| 12 | +.border-bottom-effect { | |
| 13 | + border: none; | |
| 14 | + position: relative; | |
| 15 | + &:hover { | |
| 16 | + border: none; | |
| 17 | + } | |
| 18 | + &::after { | |
| 19 | + content: ""; | |
| 20 | + position: absolute; | |
| 21 | + width: 0px; | |
| 22 | + height: 3px; | |
| 23 | + left: 50%; | |
| 24 | + bottom: 0; | |
| 25 | + background-color: $primary; | |
| 26 | + transition: all ease-in-out 0.2s; | |
| 27 | + } | |
| 28 | + &:hover::after { | |
| 29 | + width: 100%; | |
| 30 | + left: 0; | |
| 31 | + } | |
| 32 | +} | |
| 33 | + | |
| 34 | +.card { | |
| 35 | + border: none; | |
| 36 | +} |
src/app/modules/seleccion-articulos/seleccion-articulos.component.spec.ts
| ... | ... | @@ -0,0 +1,25 @@ |
| 1 | +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
| 2 | + | |
| 3 | +import { SeleccionArticulosComponent } from './seleccion-articulos.component'; | |
| 4 | + | |
| 5 | +describe('SeleccionArticulosComponent', () => { | |
| 6 | + let component: SeleccionArticulosComponent; | |
| 7 | + let fixture: ComponentFixture<SeleccionArticulosComponent>; | |
| 8 | + | |
| 9 | + beforeEach(async(() => { | |
| 10 | + TestBed.configureTestingModule({ | |
| 11 | + declarations: [ SeleccionArticulosComponent ] | |
| 12 | + }) | |
| 13 | + .compileComponents(); | |
| 14 | + })); | |
| 15 | + | |
| 16 | + beforeEach(() => { | |
| 17 | + fixture = TestBed.createComponent(SeleccionArticulosComponent); | |
| 18 | + component = fixture.componentInstance; | |
| 19 | + fixture.detectChanges(); | |
| 20 | + }); | |
| 21 | + | |
| 22 | + it('should create', () => { | |
| 23 | + expect(component).toBeTruthy(); | |
| 24 | + }); | |
| 25 | +}); |
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
| ... | ... | @@ -0,0 +1,44 @@ |
| 1 | +import { Component, OnInit } from "@angular/core"; | |
| 2 | + | |
| 3 | +@Component({ | |
| 4 | + selector: "app-seleccion-articulos", | |
| 5 | + templateUrl: "./seleccion-articulos.component.html", | |
| 6 | + styleUrls: ["./seleccion-articulos.component.scss"] | |
| 7 | +}) | |
| 8 | +export class SeleccionArticulosComponent implements OnInit { | |
| 9 | + timeoutHandler: any; | |
| 10 | + categorias = [ | |
| 11 | + { id: 1, selected: false }, | |
| 12 | + { id: 2, selected: false }, | |
| 13 | + { id: 3, selected: false } | |
| 14 | + ]; | |
| 15 | + | |
| 16 | + constructor() {} | |
| 17 | + | |
| 18 | + ngOnInit() {} | |
| 19 | + | |
| 20 | + selectCategoria(index: number) { | |
| 21 | + this.categorias.forEach((categoria, i) => { | |
| 22 | + categoria.selected = index === i ? true : false; | |
| 23 | + }); | |
| 24 | + } | |
| 25 | + | |
| 26 | + mouseup() { | |
| 27 | + if (!this.timeoutHandler) return; | |
| 28 | + clearInterval(this.timeoutHandler); | |
| 29 | + } | |
| 30 | + | |
| 31 | + scrollY(el: HTMLElement, value) { | |
| 32 | + el.scroll({ behavior: "smooth", top: value + el.scrollTop }); | |
| 33 | + this.timeoutHandler = setInterval(() => { | |
| 34 | + el.scroll({ behavior: "smooth", top: value + el.scrollTop }); | |
| 35 | + }, 500); | |
| 36 | + } | |
| 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 | + } | |
| 44 | +} |
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
| ... | ... | @@ -0,0 +1,15 @@ |
| 1 | +import { NgModule } from '@angular/core'; | |
| 2 | +import { CommonModule } from '@angular/common'; | |
| 3 | + | |
| 4 | +import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module'; | |
| 5 | +import { SeleccionArticulosComponent } from './seleccion-articulos.component'; | |
| 6 | + | |
| 7 | + | |
| 8 | +@NgModule({ | |
| 9 | + declarations: [SeleccionArticulosComponent], | |
| 10 | + imports: [ | |
| 11 | + CommonModule, | |
| 12 | + SeleccionArticulosRoutingModule | |
| 13 | + ] | |
| 14 | +}) | |
| 15 | +export class SeleccionArticulosModule { } |
src/app/modules/seleccion-productos/seleccion-productos-routing.module.ts
| ... | ... | @@ -1,13 +0,0 @@ |
| 1 | -import { NgModule } from '@angular/core'; | |
| 2 | -import { Routes, RouterModule } from '@angular/router'; | |
| 3 | -import { SeleccionProductosComponent } from './seleccion-productos.component'; | |
| 4 | - | |
| 5 | -const routes: Routes = [ | |
| 6 | - { path: '', component: SeleccionProductosComponent } | |
| 7 | -]; | |
| 8 | - | |
| 9 | -@NgModule({ | |
| 10 | - imports: [RouterModule.forChild(routes)], | |
| 11 | - exports: [RouterModule] | |
| 12 | -}) | |
| 13 | -export class SeleccionProductosRoutingModule { } |
src/app/modules/seleccion-productos/seleccion-productos.component.html
| ... | ... | @@ -1,138 +0,0 @@ |
| 1 | -<div class="h-92 bg-white"> | |
| 2 | - <!-- PUBLICIDADES --> | |
| 3 | - <div class="row mx-0 h-10"> | |
| 4 | - <div class="col-12 p-3 h-100"> | |
| 5 | - <div class="bg-dark h-100"></div> | |
| 6 | - </div> | |
| 7 | - </div> | |
| 8 | - <div class="h-90"> | |
| 9 | - <!-- CABECERA --> | |
| 10 | - <div class="row mx-4 h-auto border border-primary rounded-sm"> | |
| 11 | - <div class="col-12 p-2 align-self-center"> | |
| 12 | - <div class="px-3"> | |
| 13 | - <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> | |
| 14 | - </div> | |
| 15 | - </div> | |
| 16 | - </div> | |
| 17 | - <!-- CUERPO --> | |
| 18 | - <div class="row mr-4 h-70"> | |
| 19 | - <div class="col-12 h-100 px-0 py-3"> | |
| 20 | - <div class="row mx-0 h-100"> | |
| 21 | - <!-- FILTRO CATEGORIAS --> | |
| 22 | - <div class="col-5 col-sm-3 col-xl-2 h-100"> | |
| 23 | - <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> | |
| 24 | - <div class="row mx-0 h-94 align-items-center"> | |
| 25 | - <div class="col-12 h-5"> | |
| 26 | - <img | |
| 27 | - draggable="false" | |
| 28 | - ondragstart="return false;" | |
| 29 | - (contextmenu)="false" | |
| 30 | - class="h-100 d-block mx-auto rotate-90-neg" | |
| 31 | - src="assets/img/ir-color.svg" | |
| 32 | - (mousedown)="scrollY(templateCategorias, -80)" | |
| 33 | - (mouseup)="mouseup()" | |
| 34 | - (mouseleave)="mouseup()"> | |
| 35 | - </div> | |
| 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 | |
| 41 | - class="row mx-4 mb-2 h-32 justify-content-center tab" | |
| 42 | - [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" | |
| 43 | - (click)="selectCategoria(i)" | |
| 44 | - *ngFor="let categoria of categorias; let i = index;"> | |
| 45 | - <img | |
| 46 | - class="col-12 h-50 align-self-end d-none d-sm-block" | |
| 47 | - src="assets/img/ir-color.svg"> | |
| 48 | - <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small> | |
| 49 | - </div> | |
| 50 | - </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> | |
| 63 | - </div> | |
| 64 | - <!-- LISTA DE ARTICULOS --> | |
| 65 | - <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y"> | |
| 66 | - <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100"> | |
| 67 | - <!-- ARTICULO --> | |
| 68 | - <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]"> | |
| 69 | - <div class="card h-100"> | |
| 70 | - <img src="assets/img/ir-color.svg" class="card-img-top h-55"> | |
| 71 | - <div class="row mx-0 py-1 h-auto justify-content-center"> | |
| 72 | - <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p> | |
| 73 | - <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p> | |
| 74 | - <div class="col-12 px-1 align-self-end btn-effect h-auto"> | |
| 75 | - <div class="row mx-0 justify-content-between bg-primary badge-pill"> | |
| 76 | - <div class="col px-0 align-self-center text-white text-right"> | |
| 77 | - {{55 | currency}} | |
| 78 | - </div> | |
| 79 | - <div class="col-5 px-0"> | |
| 80 | - <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg"> | |
| 81 | - </div> | |
| 82 | - </div> | |
| 83 | - </div> | |
| 84 | - </div> | |
| 85 | - </div> | |
| 86 | - </div> | |
| 87 | - </div> | |
| 88 | - </div> | |
| 89 | - </div> | |
| 90 | - </div> | |
| 91 | - </div> | |
| 92 | - <div class="row mx-0 h-20 justify-content-center"> | |
| 93 | - <div class="col-11 h-100 px-0 border border-primary rounded"> | |
| 94 | - <div class="row mx-0 h-15 border-bottom border-primary"> | |
| 95 | - <p class="col align-self-center text-truncate"><small>PRODUCTOS EN TÚ CARRITO DE COMPRAS</small></p> | |
| 96 | - </div> | |
| 97 | - <div class="row h-85 mx-0 justify-content-between"> | |
| 98 | - <div class="col-auto h-20 align-self-center"> | |
| 99 | - <img | |
| 100 | - draggable="false" | |
| 101 | - ondragstart="return false;" | |
| 102 | - (contextmenu)="false" | |
| 103 | - class="img-ir rotate-180-neg" | |
| 104 | - src="assets/img/ir-fondo-color.svg" | |
| 105 | - (mousedown)="scrollX(templateCarrito, -100)" | |
| 106 | - (mouseup)="mouseup()" | |
| 107 | - (mouseleave)="mouseup()"> | |
| 108 | - </div> | |
| 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 | - <div | |
| 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 | - (click)="selectCategoria(i)" | |
| 114 | - *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;"> | |
| 115 | - <img | |
| 116 | - class="d-block h-55 mx-auto" | |
| 117 | - src="assets/img/ir-color.svg"> | |
| 118 | - <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p> | |
| 119 | - </div> | |
| 120 | - </div> | |
| 121 | - </div> | |
| 122 | - <div class="col-auto h-20 align-self-center"> | |
| 123 | - <img | |
| 124 | - draggable="false" | |
| 125 | - ondragstart="return false;" | |
| 126 | - (contextmenu)="false" | |
| 127 | - class="img-ir" | |
| 128 | - src="assets/img/ir-fondo-color.svg" | |
| 129 | - (mousedown)="scrollX(templateCarrito, 100)" | |
| 130 | - (mouseup)="mouseup()" | |
| 131 | - (mouseleave)="mouseup()"> | |
| 132 | - </div> | |
| 133 | - </div> | |
| 134 | - </div> | |
| 135 | - </div> | |
| 136 | - </div> | |
| 137 | - | |
| 138 | -</div> |
src/app/modules/seleccion-productos/seleccion-productos.component.scss
| ... | ... | @@ -1,36 +0,0 @@ |
| 1 | -$primary: #aa006b; | |
| 2 | - | |
| 3 | -.box-categorias { | |
| 4 | - height: calc(100% - 100px) !important; | |
| 5 | -} | |
| 6 | - | |
| 7 | -.active { | |
| 8 | - background-color: white; | |
| 9 | - border-bottom: 3px solid $primary !important; | |
| 10 | -} | |
| 11 | - | |
| 12 | -.border-bottom-effect { | |
| 13 | - border: none; | |
| 14 | - position: relative; | |
| 15 | - &:hover { | |
| 16 | - border: none; | |
| 17 | - } | |
| 18 | - &::after { | |
| 19 | - content: ""; | |
| 20 | - position: absolute; | |
| 21 | - width: 0px; | |
| 22 | - height: 3px; | |
| 23 | - left: 50%; | |
| 24 | - bottom: 0; | |
| 25 | - background-color: $primary; | |
| 26 | - transition: all ease-in-out 0.2s; | |
| 27 | - } | |
| 28 | - &:hover::after { | |
| 29 | - width: 100%; | |
| 30 | - left: 0; | |
| 31 | - } | |
| 32 | -} | |
| 33 | - | |
| 34 | -.card { | |
| 35 | - border: none; | |
| 36 | -} |
src/app/modules/seleccion-productos/seleccion-productos.component.spec.ts
| ... | ... | @@ -1,25 +0,0 @@ |
| 1 | -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
| 2 | - | |
| 3 | -import { SeleccionProductosComponent } from './seleccion-productos.component'; | |
| 4 | - | |
| 5 | -describe('SeleccionProductosComponent', () => { | |
| 6 | - let component: SeleccionProductosComponent; | |
| 7 | - let fixture: ComponentFixture<SeleccionProductosComponent>; | |
| 8 | - | |
| 9 | - beforeEach(async(() => { | |
| 10 | - TestBed.configureTestingModule({ | |
| 11 | - declarations: [ SeleccionProductosComponent ] | |
| 12 | - }) | |
| 13 | - .compileComponents(); | |
| 14 | - })); | |
| 15 | - | |
| 16 | - beforeEach(() => { | |
| 17 | - fixture = TestBed.createComponent(SeleccionProductosComponent); | |
| 18 | - component = fixture.componentInstance; | |
| 19 | - fixture.detectChanges(); | |
| 20 | - }); | |
| 21 | - | |
| 22 | - it('should create', () => { | |
| 23 | - expect(component).toBeTruthy(); | |
| 24 | - }); | |
| 25 | -}); |
src/app/modules/seleccion-productos/seleccion-productos.component.ts
| ... | ... | @@ -1,44 +0,0 @@ |
| 1 | -import { Component, OnInit } from "@angular/core"; | |
| 2 | - | |
| 3 | -@Component({ | |
| 4 | - selector: "app-seleccion-productos", | |
| 5 | - templateUrl: "./seleccion-productos.component.html", | |
| 6 | - styleUrls: ["./seleccion-productos.component.scss"] | |
| 7 | -}) | |
| 8 | -export class SeleccionProductosComponent implements OnInit { | |
| 9 | - timeoutHandler: any; | |
| 10 | - categorias = [ | |
| 11 | - { id: 1, selected: false }, | |
| 12 | - { id: 2, selected: false }, | |
| 13 | - { id: 3, selected: false } | |
| 14 | - ]; | |
| 15 | - | |
| 16 | - constructor() {} | |
| 17 | - | |
| 18 | - ngOnInit() {} | |
| 19 | - | |
| 20 | - selectCategoria(index: number) { | |
| 21 | - this.categorias.forEach((categoria, i) => { | |
| 22 | - categoria.selected = index === i ? true : false; | |
| 23 | - }); | |
| 24 | - } | |
| 25 | - | |
| 26 | - mouseup() { | |
| 27 | - if (!this.timeoutHandler) return; | |
| 28 | - clearInterval(this.timeoutHandler); | |
| 29 | - } | |
| 30 | - | |
| 31 | - scrollY(el: HTMLElement, value) { | |
| 32 | - el.scroll({ behavior: "smooth", top: value + el.scrollTop }); | |
| 33 | - this.timeoutHandler = setInterval(() => { | |
| 34 | - el.scroll({ behavior: "smooth", top: value + el.scrollTop }); | |
| 35 | - }, 500); | |
| 36 | - } | |
| 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 | - } | |
| 44 | -} |
src/app/modules/seleccion-productos/seleccion-productos.module.ts
| ... | ... | @@ -1,15 +0,0 @@ |
| 1 | -import { NgModule } from '@angular/core'; | |
| 2 | -import { CommonModule } from '@angular/common'; | |
| 3 | - | |
| 4 | -import { SeleccionProductosRoutingModule } from './seleccion-productos-routing.module'; | |
| 5 | -import { SeleccionProductosComponent } from './seleccion-productos.component'; | |
| 6 | - | |
| 7 | - | |
| 8 | -@NgModule({ | |
| 9 | - declarations: [SeleccionProductosComponent], | |
| 10 | - imports: [ | |
| 11 | - CommonModule, | |
| 12 | - SeleccionProductosRoutingModule | |
| 13 | - ] | |
| 14 | -}) | |
| 15 | -export class SeleccionProductosModule { } |