Marcelo Puebla / autoservicio-axion

Commit 19eab28b48189d759af31604de6bfb448342763e

Authored by Marcelo Puebla 2020-02-10 12:21:14 -0300

Exists in develop

Fix

Tamaño en texto en carrito

Showing 2 changed files with 7 additions and 1 deletions Show diff stats

src/app/modules/carrito/carrito.component.html

Diff comments View file @ 19eab28

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-75 carrito-content" #carritoContent>	5	<div class="h-75 carrito-content" #carritoContent>
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	16	<div
17	class="row mx-2 mt-4 h-80 h-lg-60 align-content-start scroll-y-visible"	17	class="row mx-2 mt-4 h-80 h-lg-60 align-content-start scroll-y-visible"
18	(scroll)="scrollEvent($event)">	18	(scroll)="scrollEvent($event)">
19	<!-- MENSAJE DE ADVERTENCIA -->	19	<!-- MENSAJE DE ADVERTENCIA -->
20	<div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">	20	<div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
21	<p class="h5 text-center">No hay artículos en el carrito</p>	21	<p class="h5 text-center">No hay artículos en el carrito</p>
22	</div>	22	</div>
23	<!-- ARTICULOS -->	23	<!-- ARTICULOS -->
24	<div	24	<div
25	class="col-12 col-xl-6 p-2 h-50 h-md-25 h-xl-40 text-center text-truncate carrito-articulo"	25	class="col-12 col-xl-6 p-2 h-50 h-md-25 h-xl-40 text-center text-truncate carrito-articulo"
26	[ngClass]="{'media-pantalla': carritoContent.classList.contains('media-pantalla')}"	26	[ngClass]="{'media-pantalla': carritoContent.classList.contains('media-pantalla')}"
27	*ngFor="let articulo of articuloService.carrito; let i = index;"	27	*ngFor="let articulo of articuloService.carrito; let i = index;"
28	@EnterLeaveX>	28	@EnterLeaveX>
29	<!-- ARTICULO -->	29	<!-- ARTICULO -->
30	<div class="h-100 border border-primary rounded-sm">	30	<div class="h-100 border border-primary rounded-sm">
31	<div class="row align-items-center mx-0 h-100">	31	<div class="row align-items-center mx-0 h-100">
32	<!-- NOMBRE E IMAGEN -->	32	<!-- NOMBRE E IMAGEN -->
33	<div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">	33	<div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
34	<img	34	<img
35	draggable="false"	35	draggable="false"
36	ondragstart="return false;"	36	ondragstart="return false;"
37	(contextmenu)="false"	37	(contextmenu)="false"
38	class="d-none d-md-block mx-auto h-55 rounded-sm shadow-sm"	38	class="d-none d-md-block mx-auto h-55 rounded-sm shadow-sm"
39	src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"	39	src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
40	onerror="this.src='assets/img/imagen-no-encontrada.jpg'">	40	onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
41	<div class="row mx-0 h-100 h-md-45">	41	<div class="row mx-0 h-100 h-md-45">
42	<p class="col text-primary text-truncate align-self-center">	42	<p class="col px-0 text-primary carrito-text-desc align-self-center">
43	<small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small>	43	<small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small>
44	</p>	44	</p>
45	</div>	45	</div>
46	</div>	46	</div>
47	<!-- CANTIDAD -->	47	<!-- CANTIDAD -->
48	<div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">	48	<div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
49	<p class="h-40"><small>CANT</small></p>	49	<p class="h-40"><small>CANT</small></p>
50	<app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>	50	<app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
51	</div>	51	</div>
52	<!-- PRECIO -->	52	<!-- PRECIO -->
53	<div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">	53	<div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
54	<p class="h-40"><small>PRECIO</small></p>	54	<p class="h-40"><small>PRECIO</small></p>
55	<div class="py-1 badge-pill bg-dark text-white">	55	<div class="py-1 badge-pill bg-dark text-white">
56	<p><small>{{articulo.PreVen \| currency}}</small></p>	56	<p><small>{{articulo.PreVen \| currency}}</small></p>
57	</div>	57	</div>
58	</div>	58	</div>
59	<!-- ELIMINAR -->	59	<!-- ELIMINAR -->
60	<div class="col-6 col-md-3 align-self-center">	60	<div class="col-6 col-md-3 align-self-center">
61	<div class="row mx-0 justify-content-center">	61	<div class="row mx-0 justify-content-center">
62	<div	62	<div
63	class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"	63	class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
64	(click)="deleteArticulo(i)">	64	(click)="deleteArticulo(i)">
65	<span>	65	<span>
66	<small class="pr-2">ELIMINAR</small>	66	<small class="pr-2">ELIMINAR</small>
67	<img	67	<img
68	draggable="false"	68	draggable="false"
69	ondragstart="return false;"	69	ondragstart="return false;"
70	(contextmenu)="false"	70	(contextmenu)="false"
71	class="icon-20 rotate-45"	71	class="icon-20 rotate-45"
72	src="assets/img/mas-blanco.svg">	72	src="assets/img/mas-blanco.svg">
73	</span>	73	</span>
74	</div>	74	</div>
75	</div>	75	</div>
76	</div>	76	</div>
77	</div>	77	</div>
78	</div>	78	</div>
79	</div>	79	</div>
80	</div>	80	</div>
81	<!-- TOTAL -->	81	<!-- TOTAL -->
82	<div class="row mx-3 mt-2 h-auto justify-content-end">	82	<div class="row mx-3 mt-2 h-auto justify-content-end">
83	<div class="col-auto font-weight-bold align-self-center text-primary py-2 h3">TOTAL</div>	83	<div class="col-auto font-weight-bold align-self-center text-primary py-2 h3">TOTAL</div>
84	<div class="col-auto align-self-center bg-primary badge-pill">	84	<div class="col-auto align-self-center bg-primary badge-pill">
85	<p class="text-center font-weight-bold text-white py-2 h3 px-2">{{articuloService.total \| currency}}</p>	85	<p class="text-center font-weight-bold text-white py-2 h3 px-2">{{articuloService.total \| currency}}</p>
86	</div>	86	</div>
87	</div>	87	</div>
88	<!-- CONTINUAR -->	88	<!-- CONTINUAR -->
89	<div	89	<div
90	*ngIf="articuloService.carrito.length"	90	*ngIf="articuloService.carrito.length"
91	class="row mx-3 mt-4 h-auto justify-content-end">	91	class="row mx-3 mt-4 h-auto justify-content-end">
92	<div	92	<div
93	class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"	93	class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
94	[routerLink]="['/forma-pago']">	94	[routerLink]="['/forma-pago']">
95	<span>	95	<span>
96	<small class="pr-2">CONTINUAR</small>	96	<small class="pr-2">CONTINUAR</small>
97	<img	97	<img
98	draggable="false"	98	draggable="false"
99	ondragstart="return false;"	99	ondragstart="return false;"
100	(contextmenu)="false"	100	(contextmenu)="false"
101	class="icon-20"	101	class="icon-20"
102	src="assets/img/ir.svg">	102	src="assets/img/ir.svg">
103	</span>	103	</span>
104	</div>	104	</div>
105	</div>	105	</div>
106	</div>	106	</div>
107		107
108	</div>	108	</div>
109		109

src/app/modules/carrito/carrito.component.scss

Diff comments View file @ 19eab28

 .carrito-content.media-pantalla {
   max-height: 65% !important;
 }
 .carrito-articulo.media-pantalla {
   min-height: 160px !important;
 }
+.carrito-text-desc {
+  min-height: 30px;
+  max-height: 70px;
+  white-space: normal;
+}