Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit d292db89d535035df516c4b3c36b36e042935f39

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

Agregada archivo scss con clases para el scroll

Showing 7 changed files with 78 additions and 23 deletions   Show diff stats
src/app/app.module.ts
Diff comments   View file @ d292db8
1 import { BrowserModule } from '@angular/platform-browser'; 1 import { BrowserModule } from '@angular/platform-browser';
2 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
2 import { NgModule } from '@angular/core'; 3 import { NgModule } from '@angular/core';
3 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
4 import { HttpClientModule } from '@angular/common/http'; 5 import { HttpClientModule } from '@angular/common/http';
5 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 6 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
6 import { SplitPipe } from './pipes/split.pipe'; 7 import { SplitPipe } from './pipes/split.pipe';
7 import { AppComponent } from './app.component'; 8 import { AppComponent } from './app.component';
8 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; 9 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
9 import { AdminComponent } from './modules/admin/admin.component'; 10 import { AdminComponent } from './modules/admin/admin.component';
10 import { FooterComponent } from './shared/footer/footer.component'; 11 import { FooterComponent } from './shared/footer/footer.component';
11 import { SharedModule } from './modules/shared/shared.module'; 12 import { SharedModule } from './modules/shared/shared.module';
12 13
13 @NgModule({ 14 @NgModule({
14 declarations: [ 15 declarations: [
15 AppComponent, 16 AppComponent,
16 SplashScreenComponent, 17 SplashScreenComponent,
17 SplitPipe, 18 SplitPipe,
18 AdminComponent, 19 AdminComponent,
19 FooterComponent, 20 FooterComponent,
20 ], 21 ],
21 imports: [ 22 imports: [
22 BrowserModule, 23 BrowserModule,
24 BrowserAnimationsModule,
23 AppRoutingModule, 25 AppRoutingModule,
24 HttpClientModule, 26 HttpClientModule,
25 FormsModule, 27 FormsModule,
26 ReactiveFormsModule, 28 ReactiveFormsModule,
27 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), 29 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
28 SharedModule.forRoot(), 30 SharedModule.forRoot(),
29 ], 31 ],
30 bootstrap: [AppComponent] 32 bootstrap: [AppComponent]
31 }) 33 })
32 export class AppModule { } 34 export class AppModule { }
33 35
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ d292db8
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="h-85"> 5 <div class="h-85">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 px-0 py-2 align-self-center"> 8 <div class="col-12 px-0 py-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p> 10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 <!-- CARRITO --> 15 <!-- CARRITO -->
16 <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y"> 16 <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible">
17 <!-- MENSAJE DE ADVERTENCIA --> 17 <!-- MENSAJE DE ADVERTENCIA -->
18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length"> 18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
19 <p class="h5 text-center">No hay artículos en el carrito</p> 19 <p class="h5 text-center">No hay artículos en el carrito</p>
20 </div> 20 </div>
21 <!-- ARTICULOS --> 21 <!-- ARTICULOS -->
22 <div 22 <div
23 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" 23 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
24 *ngFor="let articulo of articuloService.carrito"> 24 *ngFor="let articulo of articuloService.carrito; let i = index;"
25 @EnterLeave>
25 <!-- ARTICULO --> 26 <!-- ARTICULO -->
26 <div class="h-100 px-2 py-4 border border-primary rounded-sm"> 27 <div class="h-100 px-2 py-4 border border-primary rounded-sm">
27 <div class="row mx-0 h-100"> 28 <div class="row mx-0 h-100">
28 <!-- NOMBRE E IMAGEN --> 29 <!-- NOMBRE E IMAGEN -->
29 <div class="col-3 h-100 border-right border-primary align-self-center"> 30 <div class="col-3 h-100 border-right border-primary align-self-center">
30 <img 31 <img
31 draggable="false" 32 draggable="false"
32 ondragstart="return false;" 33 ondragstart="return false;"
33 (contextmenu)="false" 34 (contextmenu)="false"
34 class="d-block mx-auto h-55 rounded-sm shadow-sm" 35 class="d-block mx-auto h-55 rounded-sm shadow-sm"
35 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"> 36 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}">
36 <div class="row mx-0 h-45"> 37 <div class="row mx-0 h-45">
37 <p class="col text-primary text-truncate align-self-end"> 38 <p class="col text-primary text-truncate align-self-end">
38 <small>{{articulo.DetArt}}</small> 39 <small>{{articulo.DetArt}}</small>
39 </p> 40 </p>
40 </div> 41 </div>
41 </div> 42 </div>
42 <!-- CANTIDAD --> 43 <!-- CANTIDAD -->
43 <div class="col-3 border-right border-primary"> 44 <div class="col-3 border-right border-primary">
44 <p><small>CANT</small></p> 45 <p><small>CANT</small></p>
45 <div class="row mt-2 mx-0"> 46 <div class="row mt-2 mx-0">
46 <div class="col-12 h-auto"> 47 <div class="col-12 h-auto">
47 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 48 <div class="row mx-0 justify-content-between bg-primary badge-pill">
48 <!-- BOTON MENOS --> 49 <!-- BOTON MENOS -->
49 <div class="col-auto px-0"> 50 <div class="col-auto px-0">
50 <img 51 <img
51 draggable="false" 52 draggable="false"
52 ondragstart="return false;" 53 ondragstart="return false;"
53 (contextmenu)="false" 54 (contextmenu)="false"
54 class="d-block ml-auto py-2 icon-20 btn-effect" 55 class="d-block ml-auto py-2 icon-20 btn-effect"
55 src="assets/img/menos-blanco.svg"> 56 src="assets/img/menos-blanco.svg">
56 </div> 57 </div>
57 <!-- CANTIDAD --> 58 <!-- CANTIDAD -->
58 <div class="col px-0 align-self-center text-white"> 59 <div class="col px-0 align-self-center text-white">
59 <p><small>{{articulo.cantidad}}</small></p> 60 <p><small>{{articulo.cantidad}}</small></p>
60 </div> 61 </div>
61 <!-- BOTON MAS --> 62 <!-- BOTON MAS -->
62 <div class="col-auto px-0"> 63 <div class="col-auto px-0">
63 <img 64 <img
64 draggable="false" 65 draggable="false"
65 ondragstart="return false;" 66 ondragstart="return false;"
66 (contextmenu)="false" 67 (contextmenu)="false"
67 class="d-block ml-auto py-2 icon-20 btn-effect" 68 class="d-block ml-auto py-2 icon-20 btn-effect"
68 src="assets/img/mas-blanco.svg"> 69 src="assets/img/mas-blanco.svg">
69 </div> 70 </div>
70 </div> 71 </div>
71 </div> 72 </div>
72 </div> 73 </div>
73 </div> 74 </div>
74 <!-- OPCIONALES --> 75 <!-- OPCIONALES -->
75 <div class="col-3 border-right border-primary"> 76 <div class="col-3 border-right border-primary">
76 <p><small>OPCIONALES</small></p> 77 <p><small>OPCIONALES</small></p>
77 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div> 78 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
78 <div class="row mx-0 mt-2 justify-content-center"> 79 <div class="row mx-0 mt-2 justify-content-center">
79 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white"> 80 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
80 <span> 81 <span>
81 <small class="pr-2">CAMBIAR</small> 82 <small class="pr-2">CAMBIAR</small>
82 <img 83 <img
83 draggable="false" 84 draggable="false"
84 ondragstart="return false;" 85 ondragstart="return false;"
85 (contextmenu)="false" 86 (contextmenu)="false"
86 class="icon-20" 87 class="icon-20"
87 src="assets/img/ir.svg"> 88 src="assets/img/ir.svg">
88 </span> 89 </span>
89 </div> 90 </div>
90 </div> 91 </div>
91 </div> 92 </div>
92 <!-- ELIMINAR --> 93 <!-- ELIMINAR -->
93 <div class="col-3 align-self-center"> 94 <div class="col-3 align-self-center">
94 <div class="row mx-0 justify-content-center"> 95 <div class="row mx-0 justify-content-center">
95 <div class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"> 96 <div
97 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
98 (click)="deleteArticulo(i)">
96 <span> 99 <span>
97 <small class="pr-2">ELIMINAR</small> 100 <small class="pr-2">ELIMINAR</small>
98 <img 101 <img
99 draggable="false" 102 draggable="false"
100 ondragstart="return false;" 103 ondragstart="return false;"
101 (contextmenu)="false" 104 (contextmenu)="false"
102 class="icon-20 rotate-45" 105 class="icon-20 rotate-45"
103 src="assets/img/mas-blanco.svg"> 106 src="assets/img/mas-blanco.svg">
104 </span> 107 </span>
105 </div> 108 </div>
106 </div> 109 </div>
107 </div> 110 </div>
108 </div> 111 </div>
109 </div> 112 </div>
110 </div> 113 </div>
111 </div> 114 </div>
112 <!-- CONTINUAR --> 115 <!-- CONTINUAR -->
113 <div 116 <div
114 *ngIf="articuloService.carrito.length" 117 *ngIf="articuloService.carrito.length"
115 class="row mx-3 mt-4 h-auto justify-content-end"> 118 class="row mx-3 mt-4 h-auto justify-content-end">
116 <div 119 <div
117 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 120 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
118 [routerLink]="['/forma-pago']"> 121 [routerLink]="['/forma-pago']">
119 <span> 122 <span>
120 <small class="pr-2">CONTINUAR</small> 123 <small class="pr-2">CONTINUAR</small>
121 <img 124 <img
122 draggable="false" 125 draggable="false"
123 ondragstart="return false;" 126 ondragstart="return false;"
124 (contextmenu)="false" 127 (contextmenu)="false"
125 class="icon-20" 128 class="icon-20"
126 src="assets/img/ir.svg"> 129 src="assets/img/ir.svg">
127 </span> 130 </span>
128 </div> 131 </div>
129 </div> 132 </div>
130 <!-- SEGUIR COMPRANDO --> 133 <!-- SEGUIR COMPRANDO -->
131 <div class="row mx-3 mt-2 h-auto justify-content-end"> 134 <div class="row mx-3 mt-2 h-auto justify-content-end">
132 <div 135 <div
133 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 136 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
134 (click)="goBack()"> 137 (click)="goBack()">
135 <span> 138 <span>
136 <small class="pr-2">SEGUIR COMPRANDO</small> 139 <small class="pr-2">SEGUIR COMPRANDO</small>
137 <img 140 <img
138 draggable="false" 141 draggable="false"
139 ondragstart="return false;" 142 ondragstart="return false;"
140 (contextmenu)="false" 143 (contextmenu)="false"
141 class="icon-20" 144 class="icon-20"
142 src="assets/img/ir.svg"> 145 src="assets/img/ir.svg">
143 </span> 146 </span>
144 </div> 147 </div>
145 </div> 148 </div>
146 </div> 149 </div>
147 150
148 </div> 151 </div>
149 152
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ d292db8
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 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { APP_SETTINGS } from 'src/etc/AppSettings'; 4 import { APP_SETTINGS } from 'src/etc/AppSettings';
5 import { trigger, state, style, transition, animate } from '@angular/animations';
5 6
6 @Component({ 7 @Component({
7 selector: 'app-carrito', 8 selector: 'app-carrito',
8 templateUrl: './carrito.component.html', 9 templateUrl: './carrito.component.html',
9 styleUrls: ['./carrito.component.scss'] 10 styleUrls: ['./carrito.component.scss'],
11 animations: [
12 trigger('EnterLeave', [
13 state('flyIn', style({ transform: 'translateX(0)' })),
14 transition(':enter', [
15 style({ transform: 'translateX(-100%)' }),
16 animate('1s ease-in')
17 ]),
18 transition(':leave', [
19 animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
20 ])
21 ])
22 ]
10 }) 23 })
11 export class CarritoComponent implements OnInit { 24 export class CarritoComponent implements OnInit {
12 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 25 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
13 26
14 constructor( 27 constructor(
15 private location: Location, 28 private location: Location,
16 public articuloService: ArticuloService, 29 public articuloService: ArticuloService,
17 ) { } 30 ) { }
18 31
19 ngOnInit() { } 32 ngOnInit() { }
20 33
34 deleteArticulo(index: number) {
35 this.articuloService.carrito.splice(index, 1);
36 }
37
21 goBack() { 38 goBack() {
22 this.location.back(); 39 this.location.back();
23 } 40 }
24 41
25 } 42 }
26 43
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ d292db8
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 justify-content-center align-items-center"> 21 <div class="row mx-0 h-94 justify-content-center align-items-center">
22 <div class="col-auto btn-effect h-5"> 22 <div class="col-auto btn-effect 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, -100)" 29 (mousedown)="scrollY(templateCategorias, -100)"
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': allActive, 'border-bottom-effect': !allActive }" 39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
40 (click)="selectCategoria(-1, 0)"> 40 (click)="selectCategoria(-1, 0)">
41 <img 41 <img
42 draggable="false" 42 draggable="false"
43 ondragstart="return false;" 43 ondragstart="return false;"
44 (contextmenu)="false" 44 (contextmenu)="false"
45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
46 src="assets/img/ir-color.svg"> 46 src="assets/img/ir-color.svg">
47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small> 47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
48 </div> 48 </div>
49 <div 49 <div
50 class="row mx-4 mb-2 h-32 justify-content-center tab" 50 class="row mx-4 mb-2 h-32 justify-content-center tab"
51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
52 (click)="selectCategoria(i, categoria.id)" 52 (click)="selectCategoria(i, categoria.id)"
53 *ngFor="let categoria of categorias; let i = index;"> 53 *ngFor="let categoria of categorias; let i = index;">
54 <img 54 <img
55 draggable="false" 55 draggable="false"
56 ondragstart="return false;" 56 ondragstart="return false;"
57 (contextmenu)="false" 57 (contextmenu)="false"
58 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 58 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
59 src="assets/img/ir-color.svg"> 59 src="assets/img/ir-color.svg">
60 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 60 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
61 </div> 61 </div>
62 </div> 62 </div>
63 <div class="col-auto btn-effect h-5"> 63 <div class="col-auto btn-effect h-5">
64 <img 64 <img
65 draggable="false" 65 draggable="false"
66 ondragstart="return false;" 66 ondragstart="return false;"
67 (contextmenu)="false" 67 (contextmenu)="false"
68 class="h-100 d-block mx-auto rotate-90" 68 class="h-100 d-block mx-auto rotate-90"
69 src="assets/img/ir-color.svg" 69 src="assets/img/ir-color.svg"
70 (mousedown)="scrollY(templateCategorias, 100)" 70 (mousedown)="scrollY(templateCategorias, 100)"
71 (mouseup)="mouseup()" 71 (mouseup)="mouseup()"
72 (mouseleave)="mouseup()"> 72 (mouseleave)="mouseup()">
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 <!-- LISTA DE ARTICULOS --> 76 <!-- LISTA DE ARTICULOS -->
77 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y"> 77 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible">
78 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 78 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
79 <!-- ARTICULO --> 79 <!-- ARTICULO -->
80 <div 80 <div
81 class="col px-2 my-1 my-md-3 h-auto" 81 class="col px-2 my-1 my-md-3 h-auto"
82 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 82 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
83 <div class="swing-in-top-fwd card h-auto"> 83 <div class="swing-in-top-fwd card h-auto">
84 <img 84 <img
85 draggable="false" 85 draggable="false"
86 ondragstart="return false;" 86 ondragstart="return false;"
87 (contextmenu)="false" 87 (contextmenu)="false"
88 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 88 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
89 class="card-img-top h-55 shadow-sm rounded-sm"> 89 class="card-img-top h-55 shadow-sm rounded-sm">
90 <div class="row mx-0 py-1 h-auto justify-content-center"> 90 <div class="row mx-0 py-1 h-auto justify-content-center">
91 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p> 91 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p>
92 <p class="col-12 px-1 h-auto text-center line-height-sm"> 92 <p class="col-12 px-1 h-auto text-center line-height-sm">
93 <small>{{articulo.DET_LAR}}</small> 93 <small>{{articulo.DET_LAR}}</small>
94 </p> 94 </p>
95 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 95 <div class="col-12 px-1 align-self-end btn-effect h-auto">
96 <div 96 <div
97 [ngClass]="{'bg-secondary': articulo.promo}" 97 [ngClass]="{'bg-secondary': articulo.promo}"
98 class="row mx-0 justify-content-between bg-primary badge-pill" 98 class="row mx-0 justify-content-between bg-primary badge-pill"
99 (click)="elegirArticulo(articulo)"> 99 (click)="elegirArticulo(articulo)">
100 <div class="col px-0 align-self-center text-white text-right"> 100 <div class="col px-0 align-self-center text-white text-right">
101 {{articulo.PreVen | currency}} 101 {{articulo.PreVen | currency}}
102 </div> 102 </div>
103 <div class="col-5 px-0"> 103 <div class="col-5 px-0">
104 <img 104 <img
105 draggable="false" 105 draggable="false"
106 ondragstart="return false;" 106 ondragstart="return false;"
107 (contextmenu)="false" 107 (contextmenu)="false"
108 class="d-block ml-auto py-1 icon-30" 108 class="d-block ml-auto py-1 icon-30"
109 src="assets/img/ir.svg"> 109 src="assets/img/ir.svg">
110 </div> 110 </div>
111 </div> 111 </div>
112 </div> 112 </div>
113 </div> 113 </div>
114 </div> 114 </div>
115 </div> 115 </div>
116 </div> 116 </div>
117 <!-- BOTON VER MAS --> 117 <!-- BOTON VER MAS -->
118 <div class="row mx-0"> 118 <div class="row mx-0">
119 <div 119 <div
120 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 120 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
121 class="col-12 px-0 mb-2"> 121 class="col-12 px-0 mb-2">
122 <button 122 <button
123 (click)="increaseShow()" 123 (click)="increaseShow()"
124 class="btn btn-block btn-outline-primary"> 124 class="btn btn-block btn-outline-primary">
125 Ver Más 125 Ver Más
126 </button> 126 </button>
127 </div> 127 </div>
128 </div> 128 </div>
129 </div> 129 </div>
130 </div> 130 </div>
131 </div> 131 </div>
132 </div> 132 </div>
133 <!-- FOOTER CARRITO DE COMPRAS --> 133 <!-- FOOTER CARRITO DE COMPRAS -->
134 <div class="row w-90 mx-auto h-auto justify-content-center"> 134 <div class="row w-90 mx-auto h-auto justify-content-center">
135 <div class="col-12 h-75 px-0 border border-primary rounded"> 135 <div class="col-12 h-75 px-0 border border-primary rounded">
136 <!-- CABECERA --> 136 <!-- CABECERA -->
137 <div class="row mx-0 h-15 border-bottom border-primary"> 137 <div class="row mx-0 h-15 border-bottom border-primary">
138 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 138 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
139 </div> 139 </div>
140 <!-- CUERPO --> 140 <!-- CUERPO -->
141 <div class="row h-85 mx-0 justify-content-around"> 141 <div class="row h-85 mx-0 justify-content-around">
142 <!-- BOTON SCROLL IZQUIERDA --> 142 <!-- BOTON SCROLL IZQUIERDA -->
143 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 143 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
144 <img 144 <img
145 draggable="false" 145 draggable="false"
146 ondragstart="return false;" 146 ondragstart="return false;"
147 (contextmenu)="false" 147 (contextmenu)="false"
148 class="icon-30 rotate-180-neg" 148 class="icon-30 rotate-180-neg"
149 src="assets/img/ir-fondo-color.svg" 149 src="assets/img/ir-fondo-color.svg"
150 (mousedown)="scrollX(templateCarrito, -100)" 150 (mousedown)="scrollX(templateCarrito, -100)"
151 (mouseup)="mouseup()" 151 (mouseup)="mouseup()"
152 (mouseleave)="mouseup()"> 152 (mouseleave)="mouseup()">
153 </div> 153 </div>
154 <!-- CARRITO --> 154 <!-- CARRITO -->
155 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 155 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
156 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"> 156 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">
157 <!-- MENSAJE DE ADVERTENCIA --> 157 <!-- MENSAJE DE ADVERTENCIA -->
158 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 158 <div *ngIf="!articuloService.carrito.length" class="col h-100">
159 <p class="text-center py-5">No hay articulos en el carrito</p> 159 <p class="text-center py-5">No hay articulos en el carrito</p>
160 </div> 160 </div>
161 <!-- ARTICULOS --> 161 <!-- ARTICULOS -->
162 <div 162 <div
163 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 163 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
164 *ngFor="let articulo of articuloService.carrito; let i = index;"> 164 *ngFor="let articulo of articuloService.carrito; let i = index;">
165 <div class="swing-in-top-fwd"> 165 <div class="swing-in-top-fwd">
166 <img 166 <img
167 draggable="false" 167 draggable="false"
168 ondragstart="return false;" 168 ondragstart="return false;"
169 (contextmenu)="false" 169 (contextmenu)="false"
170 class="d-block h-55 img-fluid p-2 mx-auto rounded" 170 class="d-block img-fluid p-2 mx-auto rounded"
171 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"> 171 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}">
172 <p class="d-block mt-auto text-center text-primary text-truncate"> 172 <p class="d-block mt-auto text-center text-primary text-truncate">
173 <small>{{articulo.DetArt}}</small> 173 <small>{{articulo.DetArt}}</small>
174 </p> 174 </p>
175 </div> 175 </div>
176 </div> 176 </div>
177 </div> 177 </div>
178 </div> 178 </div>
179 <!-- BOTON SCROLL DERECHA --> 179 <!-- BOTON SCROLL DERECHA -->
180 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 180 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
181 <img 181 <img
182 draggable="false" 182 draggable="false"
183 ondragstart="return false;" 183 ondragstart="return false;"
184 (contextmenu)="false" 184 (contextmenu)="false"
185 class="icon-30" 185 class="icon-30"
186 src="assets/img/ir-fondo-color.svg" 186 src="assets/img/ir-fondo-color.svg"
187 (mousedown)="scrollX(templateCarrito, 100)" 187 (mousedown)="scrollX(templateCarrito, 100)"
188 (mouseup)="mouseup()" 188 (mouseup)="mouseup()"
189 (mouseleave)="mouseup()"> 189 (mouseleave)="mouseup()">
190 </div> 190 </div>
191 </div> 191 </div>
192 </div> 192 </div>
193 <!-- VER CARRITO --> 193 <!-- VER CARRITO -->
194 <div class="col-auto p-0 mt-2 ml-auto h-20"> 194 <div class="col-auto p-0 mt-2 ml-auto h-20">
195 <div 195 <div
196 class="btn-effect col-auto align-self-center px-0 bg-white" 196 class="btn-effect col-auto align-self-center px-0 bg-white"
197 [routerLink]="['/carrito']"> 197 [routerLink]="['/carrito']">
198 <div class="row mx-0 bg-light"> 198 <div class="row mx-0 bg-light">
199 <div class="col-auto align-self-center text-primary">VER CARRITO</div> 199 <div class="col-auto align-self-center text-primary">VER CARRITO</div>
200 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 200 <div class="col-auto p-0 bg-primary d-none d-sm-block">
201 <img 201 <img
202 draggable="false" 202 draggable="false"
203 ondragstart="return false;" 203 ondragstart="return false;"
204 (contextmenu)="false" 204 (contextmenu)="false"
205 class="p-2 icon-40" 205 class="p-2 icon-40"
206 src="assets/img/carrito.svg"> 206 src="assets/img/carrito.svg">
207 </div> 207 </div>
208 </div> 208 </div>
209 </div> 209 </div>
210 </div> 210 </div>
211 </div> 211 </div>
212 </div> 212 </div>
213 213
214 </div> 214 </div>
215 215
src/app/modules/shared/shared.module.ts
Diff comments   View file @ d292db8
1 import { NgModule, ModuleWithProviders } from '@angular/core'; 1 import { NgModule, ModuleWithProviders } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
3 4
4 @NgModule({}) 5 @NgModule({})
5 export class SharedModule { 6 export class SharedModule {
6 static forRoot(): ModuleWithProviders { 7 static forRoot(): ModuleWithProviders {
7 return { 8 return {
8 ngModule: SharedModule, 9 ngModule: SharedModule,
9 providers: [ArticuloService] 10 providers: [
11 ArticuloService,
12 CategoriaService
13 ]
10 }; 14 };
11 } 15 }
12 } 16 }
13 17
src/scss/scroll.scss
Diff comments   View file @ d292db8
File was created 1 @import "node_modules/bootstrap/scss/variables";
2
3 .scroll-y {
4 overflow-y: auto;
5 scrollbar-width: none;
6 &::-webkit-scrollbar {
7 display: none;
8 }
9 }
10
11 .scroll-y-visible {
12 overflow-y: auto;
13 &::-webkit-scrollbar {
14 width: 0.75em;
15 }
16 &::-webkit-scrollbar-track {
17 border-radius: 10px;
18 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
19 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
20 background-color: $white;
21 }
22 &::-webkit-scrollbar-thumb {
23 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
24 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
25 outline: 1px solid slategrey;
26 border-radius: 10px;
27 height: 12px;
28 &:active {
29 box-shadow: inset 0 0 8px $primary;
30 -webkit-box-shadow: inset 0 0 8px $primary;
31 }
32 }
33 &::-webkit-scrollbar-corner {
34 border-radius: 10px;
35 }
36 }
37
38 .scroll-x {
39 overflow-x: auto;
40 scrollbar-width: none;
41 &::-webkit-scrollbar {
42 display: none;
43 }
44 }
45
1 @import "scss/styles-bootstrap.scss"; 1 @import "scss/styles-bootstrap.scss";
2 @import "scss/typography.scss"; 2 @import "scss/typography.scss";
3 @import "scss/height-width.scss"; 3 @import "scss/height-width.scss";
4 @import "scss/animations.scss"; 4 @import "scss/animations.scss";
5 @import "scss/icons.scss"; 5 @import "scss/icons.scss";
6 @import "scss/scroll.scss";
6 @import "node_modules/bootstrap/scss/_variables.scss"; 7 @import "node_modules/bootstrap/scss/_variables.scss";
7 8
8 @font-face { 9 @font-face {
9 font-family: "Gotham"; 10 font-family: "Gotham";
10 font-style: normal; 11 font-style: normal;
11 font-weight: normal; 12 font-weight: normal;
12 src: url("assets/fonts/gotham-medium.woff") format("woff"); 13 src: url("assets/fonts/gotham-medium.woff") format("woff");
13 } 14 }
14 15
15 html, 16 html,
16 body { 17 body {
17 min-height: 100vh; 18 min-height: 100vh;
18 max-height: 100vh; 19 max-height: 100vh;
19 height: 100vh; 20 height: 100vh;
20 font-family: "Gotham"; 21 font-family: "Gotham";
21 overflow: hidden; 22 overflow: hidden;
22 user-select: none; 23 user-select: none;
23 } 24 }
24 25
25 .btn-effect { 26 .btn-effect {
26 transition: all 0.3s; 27 transition: all 0.3s;
27 &:hover { 28 &:hover {
28 cursor: pointer; 29 cursor: pointer;
29 opacity: 0.7; 30 opacity: 0.7;
30 } 31 }
31 &:active { 32 &:active {
32 transform: scale(1.02); 33 transform: scale(1.02);
33 } 34 }
34 } 35 }
35 36
36 .cursor-pointer { 37 .cursor-pointer {
37 cursor: pointer; 38 cursor: pointer;
38 } 39 }
39 40
40 p { 41 p {
41 margin: 0 !important; 42 margin: 0 !important;
42 } 43 }
43 44
44 .img-in-top { 45 .img-in-top {
45 position: absolute; 46 position: absolute;
46 top: -35px; 47 top: -35px;
47 left: 50%; 48 left: 50%;
48 height: 70px; 49 height: 70px;
49 -webkit-transform: translateX(-50%); 50 -webkit-transform: translateX(-50%);
50 transform: translateX(-50%); 51 transform: translateX(-50%);
51 } 52 }
52 53
53 .rotate-45 { 54 .rotate-45 {
54 transform: rotate(45deg); 55 transform: rotate(45deg);
55 } 56 }
56 57
57 .rotate-90 { 58 .rotate-90 {
58 transform: rotate(90deg); 59 transform: rotate(90deg);
59 } 60 }
60 61
61 .rotate-90-neg { 62 .rotate-90-neg {
62 transform: rotate(-90deg); 63 transform: rotate(-90deg);
63 } 64 }
64 65
65 .rotate-180-neg { 66 .rotate-180-neg {
66 transform: rotate(-180deg); 67 transform: rotate(-180deg);
67 } 68 }
68
69 .scroll-y {
70 overflow-y: auto;
71 scrollbar-width: none;
72 &::-webkit-scrollbar {
73 display: none;
74 }
75 }
76
77 .scroll-x {
78 overflow-x: auto;
79 scrollbar-width: none;
80 &::-webkit-scrollbar {
81 display: none;
82 }
83 }