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 1 import { BrowserModule } from '@angular/platform-browser';
  2 +import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
2 3 import { NgModule } from '@angular/core';
3 4 import { AppRoutingModule } from './app-routing.module';
4 5 import { HttpClientModule } from '@angular/common/http';
... ... @@ -20,6 +21,7 @@ import { SharedModule } from './modules/shared/shared.module';
20 21 ],
21 22 imports: [
22 23 BrowserModule,
  24 + BrowserAnimationsModule,
23 25 AppRoutingModule,
24 26 HttpClientModule,
25 27 FormsModule,
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ d292db8
... ... @@ -13,7 +13,7 @@
13 13 </div>
14 14  
15 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 17 <!-- MENSAJE DE ADVERTENCIA -->
18 18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
19 19 <p class="h5 text-center">No hay artículos en el carrito</p>
... ... @@ -21,7 +21,8 @@
21 21 <!-- ARTICULOS -->
22 22 <div
23 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 26 <!-- ARTICULO -->
26 27 <div class="h-100 px-2 py-4 border border-primary rounded-sm">
27 28 <div class="row mx-0 h-100">
... ... @@ -92,7 +93,9 @@
92 93 <!-- ELIMINAR -->
93 94 <div class="col-3 align-self-center">
94 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 99 <span>
97 100 <small class="pr-2">ELIMINAR</small>
98 101 <img
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ d292db8
... ... @@ -2,11 +2,24 @@ import { Component, OnInit } from &#39;@angular/core&#39;;
2 2 import { Location } from '@angular/common';
3 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 4 import { APP_SETTINGS } from 'src/etc/AppSettings';
  5 +import { trigger, state, style, transition, animate } from '@angular/animations';
5 6  
6 7 @Component({
7 8 selector: 'app-carrito',
8 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 24 export class CarritoComponent implements OnInit {
12 25 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
... ... @@ -18,6 +31,10 @@ export class CarritoComponent implements OnInit {
18 31  
19 32 ngOnInit() { }
20 33  
  34 + deleteArticulo(index: number) {
  35 + this.articuloService.carrito.splice(index, 1);
  36 + }
  37 +
21 38 goBack() {
22 39 this.location.back();
23 40 }
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ d292db8
... ... @@ -74,7 +74,7 @@
74 74 </div>
75 75 </div>
76 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 78 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
79 79 <!-- ARTICULO -->
80 80 <div
... ... @@ -167,7 +167,7 @@
167 167 draggable="false"
168 168 ondragstart="return false;"
169 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 171 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}">
172 172 <p class="d-block mt-auto text-center text-primary text-truncate">
173 173 <small>{{articulo.DetArt}}</small>
src/app/modules/shared/shared.module.ts
Diff comments   View file @ d292db8
1 1 import { NgModule, ModuleWithProviders } from '@angular/core';
2 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
  3 +import { CategoriaService } from 'src/app/services/categoria/categoria.service';
3 4  
4 5 @NgModule({})
5 6 export class SharedModule {
6 7 static forRoot(): ModuleWithProviders {
7 8 return {
8 9 ngModule: SharedModule,
9   - providers: [ArticuloService]
  10 + providers: [
  11 + ArticuloService,
  12 + CategoriaService
  13 + ]
10 14 };
11 15 }
12 16 }
src/scss/scroll.scss
Diff comments   View file @ d292db8
... ... @@ -0,0 +1,44 @@
  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 +}
... ... @@ -3,6 +3,7 @@
3 3 @import "scss/height-width.scss";
4 4 @import "scss/animations.scss";
5 5 @import "scss/icons.scss";
  6 +@import "scss/scroll.scss";
6 7 @import "node_modules/bootstrap/scss/_variables.scss";
7 8  
8 9 @font-face {
... ... @@ -65,19 +66,3 @@ p {
65 66 .rotate-180-neg {
66 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   -}