From 924d1d4f5d4e4ca23b603639d4cf0e3bffdc3db9 Mon Sep 17 00:00:00 2001
From: Marcelo Puebla <mpuebla@focasoftware.com>
Date: Thu, 30 Jan 2020 12:32:52 -0300
Subject: [PATCH] Fix Modales

---
 .../info-formas-pago/info-formas-pago.component.ts |   2 +-
 .../seleccion-articulos.component.ts               |   4 +-
 src/app/shared/footer/footer.component.ts          |   1 -
 .../header-publicidad.component.ts                 |   6 +-
 src/app/shared/promocion/promocion.component.html  | 121 +++++++++++----------
 src/app/shared/promocion/promocion.component.ts    |   2 +-
 src/scss/styles-bootstrap.scss                     |   6 -
 7 files changed, 69 insertions(+), 73 deletions(-)

diff --git a/src/app/modules/info-formas-pago/info-formas-pago.component.ts b/src/app/modules/info-formas-pago/info-formas-pago.component.ts
index eb2af98..5ae0005 100644
--- a/src/app/modules/info-formas-pago/info-formas-pago.component.ts
+++ b/src/app/modules/info-formas-pago/info-formas-pago.component.ts
@@ -22,7 +22,7 @@ export class InfoFormasPagoComponent implements OnInit, OnDestroy {
   }
 
   openGoCaja(templateRef: TemplateRef<any>) {
-    const modalRef = this.modalService.show(templateRef, { class: 'modal-promo modal-dialog-centered' });
+    const modalRef = this.modalService.show(templateRef, { class: 'modal-dialog-centered' });
     this.timer = setTimeout(() => {
       modalRef.hide();
     }, 3000);
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
index f39e2f8..cd40738 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
@@ -131,7 +131,7 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes
   openModalPromos(articulo: IArticulo) {
     this.modalRef = this.modalService.show(PromocionComponent, {
       initialState: { articulosPromo: [articulo] },
-      class: 'modal-promo modal-dialog-centered'
+      class: 'modal-dialog-centered'
     });
     this.mediaPantalla();
   }
@@ -142,7 +142,7 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes
         sinonimos: sinonimosData,
         articulo
       },
-      class: 'modal-promo modal-dialog-centered'
+      class: 'modal-dialog-centered'
     });
 
     this.modalRef.content.onClose
diff --git a/src/app/shared/footer/footer.component.ts b/src/app/shared/footer/footer.component.ts
index 0f4c935..d1092c2 100644
--- a/src/app/shared/footer/footer.component.ts
+++ b/src/app/shared/footer/footer.component.ts
@@ -30,7 +30,6 @@ export class FooterComponent implements OnInit {
       .carrito-articulo,
       .carrito-content,
       .pago-tarjeta,
-      .modal-promo,
       .modal-content,
       .qr-mt`)
       .toggleClass('media-pantalla');
diff --git a/src/app/shared/header-publicidad/header-publicidad.component.ts b/src/app/shared/header-publicidad/header-publicidad.component.ts
index 8fee0af..f7d60f6 100644
--- a/src/app/shared/header-publicidad/header-publicidad.component.ts
+++ b/src/app/shared/header-publicidad/header-publicidad.component.ts
@@ -64,7 +64,7 @@ export class HeaderPublicidadComponent implements OnInit {
         initialState: {
           idArticulo: articulo.id
         },
-        class: 'modal-promo modal-dialog-centered'
+        class: 'modal-dialog-centered'
       });
   }
 
@@ -79,7 +79,7 @@ export class HeaderPublicidadComponent implements OnInit {
           footerConfirmation: articulo.PreVen,
           footerClose: `volver`
         },
-        class: 'modal-promo modal-dialog-centered'
+        class: 'modal-dialog-centered'
       });
     this.modalRef.content.onClose.subscribe(() => {
       this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
@@ -107,7 +107,7 @@ export class HeaderPublicidadComponent implements OnInit {
         sinonimos: sinonimosData,
         articulo
       },
-      class: 'modal-promo modal-dialog-centered'
+      class: 'modal-dialog-centered'
     });
     modalSinonimo.content.onClose
       .subscribe((res: any) => {
diff --git a/src/app/shared/promocion/promocion.component.html b/src/app/shared/promocion/promocion.component.html
index 0f0a589..c510736 100644
--- a/src/app/shared/promocion/promocion.component.html
+++ b/src/app/shared/promocion/promocion.component.html
@@ -4,75 +4,78 @@
     <span class="sr-only">Loading...</span>
   </div>
 </div> -->
-<div class="modal-header bg-primary rounded-top pt-4 px-2" *ngIf="articulosPromo.length">
-  <img
-    draggable="false"
-    ondragstart="return false;"
-    (contextmenu)="false"
-    (click)="selectPromo(articulosPromo[0])"
-    class="btn-effect mt-n3 icon-30 mr-2 position-absolute right-0 z-index"
-    src="assets/img/icono-cancelar-blanco.svg">
-  <div class="row mx-0 w-100 justify-content-between mt-3">
-    <div class="col-8">
-      <p class="h3 mt-n2 text-white">{{articulosPromo[0].DetArt}}</p>
-    </div>
-    <div class="col-4 align-self-center">
-      <div
-        class="row mx-0 justify-content-between bg-white badge-pill btn-effect"
-        (click)="selectPromo(articulosPromo[0])">
-        <div class="col px-0 align-self-center text-primary">
-          <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p> 
-        </div>
-        <div class="col-3 px-0">
-          <img
-            draggable="false"
-            ondragstart="return false;"
-            (contextmenu)="false"
-            class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
-            src="assets/img/ir-color.svg">
-        </div>
+<div class="bg-primary rounded">
+  <div class="modal-header" *ngIf="articulosPromo.length">
+    <img
+      draggable="false"
+      ondragstart="return false;"
+      (contextmenu)="false"
+      (click)="selectPromo(articulosPromo[0])"
+      class="btn-effect icon-30 mt-2 mr-2 position-absolute top-0 right-0 z-index"
+      src="assets/img/icono-cancelar-blanco.svg">
+    <div class="row w-100 no-gutters justify-content-between">
+      <div class="col align-self-center">
+        <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
       </div>
-    </div>
-  </div>
-</div>
-<div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">
-  <div class="row mx-0 w-100">
-    <div class="col-9">
-      <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
-      <h1 class="text-white mb-4">en un combo?</h1>
-    </div>
-    <div class="col-3">
-      <img
-        draggable="false"
-        ondragstart="return false;"
-        (contextmenu)="false"
-        src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
-        onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
-        class="card-img-top img-fluid rounded-circle">
-    </div>
-  </div>
-  <div
-    class="row mx-0 lista-promociones scroll-y-visible"
-    (scroll)="scrollEvent($event)">
-    <div class="col-12">
-      <div *ngFor="let promo of promociones">
+      <div class="col-auto align-self-center mt-4 pl-2">
         <div
-          class="mx-0 mb-2 btn-effect bg-white badge-pill text-primary"
-          (click)="selectPromo(promo)">
-          <div class="d-flex">
-            <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
-            <p class="font-weight-bold my-auto pr-2">
-              <span>{{promo.PreVen | currency}}</span>
-            </p>
+          class="row mx-0 justify-content-between bg-white badge-pill btn-effect"
+          (click)="selectPromo(articulosPromo[0])">
+          <div class="col-auto align-self-center text-primary">
+            <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p> 
+          </div>
+          <div class="col-auto px-0">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
-              class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
+              class="d-block ml-auto my-1 icon-20"
               src="assets/img/ir-color.svg">
           </div>
         </div>
       </div>
     </div>
   </div>
+  <div class="modal-body" *ngIf="articulosPromo.length">
+    <div class="row no-gutters w-100">
+      <div class="col-9">
+        <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
+        <p class="h1 text-white">en un combo?</p>
+      </div>
+      <div class="col-3">
+        <img
+          draggable="false"
+          ondragstart="return false;"
+          (contextmenu)="false"
+          src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
+          onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
+          class="card-img-top img-fluid rounded-circle">
+      </div>
+    </div>
+    <div
+      class="row mt-3 no-gutters lista-promociones scroll-y-visible"
+      (scroll)="scrollEvent($event)">
+      <div class="col-12">
+        <div *ngFor="let promo of promociones; let i = index">
+          <div
+            [ngClass]="{ 'mt-2': i !== 0 }"
+            class="btn-effect bg-white badge-pill text-primary"
+            (click)="selectPromo(promo)">
+            <div class="d-flex">
+              <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
+              <p class="font-weight-bold ml-auto my-auto pr-2">
+                <span>{{promo.PreVen | currency}}</span>
+              </p>
+              <img
+                draggable="false"
+                ondragstart="return false;"
+                (contextmenu)="false"
+                class="d-block py-1 icon-30"
+                src="assets/img/ir-color.svg">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/src/app/shared/promocion/promocion.component.ts b/src/app/shared/promocion/promocion.component.ts
index 947afb4..0090700 100644
--- a/src/app/shared/promocion/promocion.component.ts
+++ b/src/app/shared/promocion/promocion.component.ts
@@ -63,7 +63,7 @@ export class PromocionComponent implements OnInit {
         sinonimos: sinonimosData,
         articulo
       },
-      class: 'modal-promo modal-dialog-centered'
+      class: 'modal-dialog-centered'
     });
 
     modalSinonimo.content.onClose
diff --git a/src/scss/styles-bootstrap.scss b/src/scss/styles-bootstrap.scss
index d89ada2..8339e15 100644
--- a/src/scss/styles-bootstrap.scss
+++ b/src/scss/styles-bootstrap.scss
@@ -69,12 +69,6 @@ $border-radius-sm: 0.5rem;
   background-color: #0000004d;
 }
 
-.modal-promo > div {
-  border: none !important;
-  border-radius: $border-radius;
-  margin-left: 10px !important;
-}
-
 .modal-content.media-pantalla {
   margin-top: auto !important;
   margin-bottom: 50px !important;
-- 
1.9.1