Marcelo Puebla / autoservicio-axion

Commit c1c2a83c5641b04bed059c6393cb4bc9546d4bd8

Authored by Marcelo Puebla 2020-01-30 11:22:40 -0300

Exists in develop

Add

z-index = 1000 a modal de sinonimos y promociones

Showing 3 changed files with 6 additions and 2 deletions Show diff stats

src/app/shared/promocion/promocion.component.html

Diff comments View file @ c1c2a83

1	<!-- <div class="d-flex justify-content-center"	1	<!-- <div class="d-flex justify-content-center"
2	*ngIf="loading">	2	*ngIf="loading">
3	<div class="spinner-border text-primary" role="status">	3	<div class="spinner-border text-primary" role="status">
4	<span class="sr-only">Loading...</span>	4	<span class="sr-only">Loading...</span>
5	</div>	5	</div>
6	</div> -->	6	</div> -->
7	<div class="modal-header bg-primary rounded-top pt-4 px-2" *ngIf="articulosPromo.length">	7	<div class="modal-header bg-primary rounded-top pt-4 px-2" *ngIf="articulosPromo.length">
8	<img	8	<img
9	draggable="false"	9	draggable="false"
10	ondragstart="return false;"	10	ondragstart="return false;"
11	(contextmenu)="false"	11	(contextmenu)="false"
12	(click)="selectPromo(articulosPromo[0])"	12	(click)="selectPromo(articulosPromo[0])"
13	class="btn-effect mt-n3 icon-30 mr-2 position-absolute right-0"	13	class="btn-effect mt-n3 icon-30 mr-2 position-absolute right-0 z-index"
14	src="assets/img/icono-cancelar-blanco.svg">	14	src="assets/img/icono-cancelar-blanco.svg">
15	<div class="row mx-0 w-100 justify-content-between mt-3">	15	<div class="row mx-0 w-100 justify-content-between mt-3">
16	<div class="col-8">	16	<div class="col-8">
17	<p class="h3 mt-n2 text-white">{{articulosPromo[0].DetArt}}</p>	17	<p class="h3 mt-n2 text-white">{{articulosPromo[0].DetArt}}</p>
18	</div>	18	</div>
19	<div class="col-4 align-self-center">	19	<div class="col-4 align-self-center">
20	<div	20	<div
21	class="row mx-0 justify-content-between bg-white badge-pill"	21	class="row mx-0 justify-content-between bg-white badge-pill"
22	(click)="selectPromo(articulosPromo[0])">	22	(click)="selectPromo(articulosPromo[0])">
23	<div class="col px-0 align-self-center text-primary">	23	<div class="col px-0 align-self-center text-primary">
24	<p class="font-weight-bold">{{articulosPromo[0].PreVen \| currency}}</p>	24	<p class="font-weight-bold">{{articulosPromo[0].PreVen \| currency}}</p>
25	</div>	25	</div>
26	<div class="col-3 px-0">	26	<div class="col-3 px-0">
27	<img	27	<img
28	draggable="false"	28	draggable="false"
29	ondragstart="return false;"	29	ondragstart="return false;"
30	(contextmenu)="false"	30	(contextmenu)="false"
31	class="d-block ml-auto py-1 icon-30 mr-2 pt-2"	31	class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
32	src="assets/img/ir-color.svg">	32	src="assets/img/ir-color.svg">
33	</div>	33	</div>
34	</div>	34	</div>
35	</div>	35	</div>
36	</div>	36	</div>
37	</div>	37	</div>
38	<div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">	38	<div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">
39	<div class="row mx-0 w-100">	39	<div class="row mx-0 w-100">
40	<div class="col-9">	40	<div class="col-9">
41	<p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>	41	<p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
42	<h1 class="text-white mb-4">en un combo?</h1>	42	<h1 class="text-white mb-4">en un combo?</h1>
43	</div>	43	</div>
44	<div class="col-3">	44	<div class="col-3">
45	<img	45	<img
46	draggable="false"	46	draggable="false"
47	ondragstart="return false;"	47	ondragstart="return false;"
48	(contextmenu)="false"	48	(contextmenu)="false"
49	src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"	49	src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
50	onerror="this.src='assets/img/imagen-no-encontrada.jpg'"	50	onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
51	class="card-img-top img-fluid rounded-circle">	51	class="card-img-top img-fluid rounded-circle">
52	</div>	52	</div>
53	</div>	53	</div>
54	<div	54	<div
55	class="row mx-0 lista-promociones scroll-y-visible"	55	class="row mx-0 lista-promociones scroll-y-visible"
56	(scroll)="scrollEvent($event)">	56	(scroll)="scrollEvent($event)">
57	<div class="col-12">	57	<div class="col-12">
58	<div *ngFor="let promo of promociones">	58	<div *ngFor="let promo of promociones">
59	<div	59	<div
60	class="mx-0 mb-2 btn-effect bg-white badge-pill text-primary"	60	class="mx-0 mb-2 btn-effect bg-white badge-pill text-primary"
61	(click)="selectPromo(promo)">	61	(click)="selectPromo(promo)">
62	<div class="d-flex">	62	<div class="d-flex">
63	<p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>	63	<p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
64	<p class="font-weight-bold my-auto pr-2">	64	<p class="font-weight-bold my-auto pr-2">
65	<span>{{promo.PreVen \| currency}}</span>	65	<span>{{promo.PreVen \| currency}}</span>
66	</p>	66	</p>
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="d-block ml-auto py-1 icon-30 mr-2 pt-2"	71	class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
72	src="assets/img/ir-color.svg">	72	src="assets/img/ir-color.svg">
73	</div>	73	</div>
74	</div>	74	</div>
75	</div>	75	</div>
76	</div>	76	</div>
77	</div>	77	</div>
78	</div>	78	</div>
79		79

src/app/shared/sinonimo/sinonimo.component.html

Diff comments View file @ c1c2a83

1	<div class="bg-primary rounded text-white">	1	<div class="bg-primary rounded text-white">
2	<div class="modal-header">	2	<div class="modal-header">
3	<img	3	<img
4	draggable="false"	4	draggable="false"
5	ondragstart="return false;"	5	ondragstart="return false;"
6	(contextmenu)="false"	6	(contextmenu)="false"
7	(click)="modalRef.hide()"	7	(click)="modalRef.hide()"
8	class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0"	8	class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0 z-index"
9	src="assets/img/icono-cancelar-blanco.svg">	9	src="assets/img/icono-cancelar-blanco.svg">
10	<p class="col-7 h4 px-0 align-self-center">{{articulo.DetArt}}</p>	10	<p class="col-7 h4 px-0 align-self-center">{{articulo.DetArt}}</p>
11	<div class="col-5 pt-4 pr-0 text-right">	11	<div class="col-5 pt-4 pr-0 text-right">
12	<p *ngFor="let s of sinonimos; let i = index">	12	<p *ngFor="let s of sinonimos; let i = index">
13	<span	13	<span
14	class="btn-effect"	14	class="btn-effect"
15	(click)="scrollTo(i)">	15	(click)="scrollTo(i)">
16	Ir a opción {{i+1}}	16	Ir a opción {{i+1}}
17	<i class="far fa-hand-point-left"></i>	17	<i class="far fa-hand-point-left"></i>
18	</span>	18	</span>
19	</p>	19	</p>
20	</div>	20	</div>
21	</div>	21	</div>
22		22
23	<div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2">	23	<div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2">
24	<div *ngFor="let s of sinonimos; let i = index">	24	<div *ngFor="let s of sinonimos; let i = index">
25	<div [id]="i"></div>	25	<div [id]="i"></div>
26	<hr [hidden]="i === 0" class="bg-white">	26	<hr [hidden]="i === 0" class="bg-white">
27	<div *ngFor="let articulo of s.productos">	27	<div *ngFor="let articulo of s.productos">
28	<div class="custom-control custom-checkbox">	28	<div class="custom-control custom-checkbox">
29	<input	29	<input
30	type="checkbox"	30	type="checkbox"
31	class="custom-control-input"	31	class="custom-control-input"
32	[(ngModel)]="articulo.seleccionado"	32	[(ngModel)]="articulo.seleccionado"
33	(click)="selectSinonimo(i, articulo)"	33	(click)="selectSinonimo(i, articulo)"
34	[id]="articulo.id">	34	[id]="articulo.id">
35	<label	35	<label
36	class="custom-control-label"	36	class="custom-control-label"
37	[for]="articulo.id">	37	[for]="articulo.id">
38	{{articulo.DET_LAR.toUpperCase()}}	38	{{articulo.DET_LAR.toUpperCase()}}
39	</label>	39	</label>
40	</div>	40	</div>
41	</div>	41	</div>
42	</div>	42	</div>
43	</div>	43	</div>
44		44
45	<div class="modal-footer">	45	<div class="modal-footer">
46	<div	46	<div
47	[ngClass]="validate()"	47	[ngClass]="validate()"
48	class="d-inline-block py-1 bg-white badge-pill text-primary"	48	class="d-inline-block py-1 bg-white badge-pill text-primary"
49	(click)="continue()">	49	(click)="continue()">
50	CONTINUAR	50	CONTINUAR
51	<img	51	<img
52	draggable="false"	52	draggable="false"
53	ondragstart="return false;"	53	ondragstart="return false;"
54	(contextmenu)="false"	54	(contextmenu)="false"
55	class="icon-30"	55	class="icon-30"
56	src="assets/img/ir-color.svg">	56	src="assets/img/ir-color.svg">
57	</div>	57	</div>
58	</div>	58	</div>
59	</div>	59	</div>
60		60

src/styles.scss

Diff comments View file @ c1c2a83

 @import "scss/styles-bootstrap.scss";
 @import "scss/typography.scss";
 @import "scss/height-width.scss";
 @import "scss/animations.scss";
 @import "scss/icons.scss";
 @import "scss/scroll.scss";
 @import "node_modules/bootstrap/scss/_variables.scss";
 @font-face {
   font-family: "Gotham";
   font-style: normal;
   font-weight: normal;
   src: url("assets/fonts/gotham-medium.woff") format("woff");
 }
 html,
 body {
   max-height: 100vh;
   height: 100%;
   font-family: "Gotham";
   overflow: hidden;
   user-select: none;
 }
 body.media-pantalla {
   height: calc(50%) !important;
   position: absolute;
   bottom: 0;
   width: 100%;
   background-color: #3d3d3d;
 }
 .btn-effect {
   transition: all 0.3s !important;
   &:hover {
     cursor: pointer !important;
     opacity: 0.7 !important;
   }
   &:active {
     transform: scale(1.02) !important;
   }
 }
 .cursor-pointer {
   cursor: pointer;
 }
 p {
   margin: 0 !important;
 }
 .img-in-top {
   position: absolute;
   top: -35px;
   left: 50%;
   height: 70px;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
 }
 .right-0 {
   right: 0;
 }
 .top-0 {
   top: 0;
 }
 .left-0 {
   left: 0;
 }
 .rotate-45 {
   transform: rotate(45deg);
 }
 .rotate-90 {
   transform: rotate(90deg);
 }
 .rotate-90-neg {
   transform: rotate(-90deg);
 }
 .rotate-180-neg {
   transform: rotate(-180deg);
 }
 .disabled {
   opacity: 0.5;
 }
 .modal-content.media-pantalla {
   margin-top: auto !important;
   margin-bottom: 50px !important;
 }
 .modal-content {
   background: transparent !important;
 }
+.z-index {
+  z-index: 1000;
+}