Luis Suarez / autoservicio-axion

Commit 2d44360e2e1dd5a98597a55224c3724444fb1b87

Authored by Marcelo Puebla 2020-01-24 12:48:52 -0300

Exists in develop

Merge branch 'develop' into 'develop'

Develop

See merge request !53

Showing 5 changed files Show diff stats

src/app/modules/info-formas-pago/info-formas-pago.component.html

Diff comments View file @ 2d44360

 <div class="h-92 bg-white fade-in-left">
   <div class="row mx-0 h-15">
     <div class="col-12 px-0 h-80 my-auto">
       <img
         draggable="false"
         ondragstart="return false;"
         (contextmenu)="false"
         class="d-block mx-auto h-100"
         src="assets/img/logo-spot.svg">
     </div>
   </div>
   <div class="h-85">
     <div class="row h-auto mt-6 mx-0 justify-content-center text-center">
       <div
         [routerLink]="['/opcion-pedido']"
         class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto
-              btn-effect align-self-end border border-secondary rounded">
+              btn-effect align-self-end border border-secondary rounded reduce-card-1">
         <img
           draggable="false"
           ondragstart="return false;"
           (contextmenu)="false"
           class="img-in-top px-4 bg-white"
           src="assets/img/icono-tarjetas.svg">
         <p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
         <p class="h2 mb-3 text-secondary">
           tarjetas y
           <img
             draggable="false"
             ondragstart="return false;"
             (contextmenu)="false"
             class="icon-150"
             src="assets/img/icono-mercado-pago.svg">
         </p>
         <div class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white">
           CONTINUAR
           <img
             draggable="false"
             ondragstart="return false;"
             (contextmenu)="false"
             class="icon-30"
             src="assets/img/ir.svg">
         </div>
       </div>
-      <div class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto align-self-center
+      <div
-                  btn-effect border border-primary rounded reduce-card-2">
+        class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto align-self-center
+              btn-effect border border-primary rounded reduce-card-2"
+        (click)="openGoCaja(templateGoCaja)">
         <img
           draggable="false"
           ondragstart="return false;"
           (contextmenu)="false"
           class="img-in-top px-4 bg-white"
           src="assets/img/icono-efectivo.svg">
         <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
         <p class="h2 m-0 text-primary">haga su pedido<br>en caja</p>
       </div>
     </div>
   </div>
 </div>
+<ng-template #templateGoCaja>
+  <div class="bg-primary rounded shadow text-white">
+    <div class="modal-body text-center">
+      Por favor, hace tu pedido en la caja.
+    </div>
+  </div>
+</ng-template>

src/app/modules/info-formas-pago/info-formas-pago.component.scss

Diff comments View file @ 2d44360

 .mt-6 {
   margin-top: 4.5rem;
 }
 .reduce-card-1.media-pantalla {
-  position: absolute;
+  flex: 0 0 35% !important;
-  bottom: 0;
+  max-width: 35% !important;
-  -webkit-box-flex: 0;
-  flex: 0 0 41.6666666667%;
-  max-width: 41.6666666667%;
-  left: 5%;
-  margin-left: 0 !important;
 }
 .reduce-card-2.media-pantalla {
-  position: absolute;
+  flex: 0 0 35% !important;
-  bottom: 0;
+  max-width: 35% !important;
-  -webkit-box-flex: 0;
-  flex: 0 0 41.6666666667%;
-  max-width: 41.6666666667%;
-  right: 5%;
-  margin-right: 0 !important;
-  height: 202px !important;
 }

src/app/modules/info-formas-pago/info-formas-pago.component.ts

Diff comments View file @ 2d44360

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
 @Component({
   selector: 'app-formas-pago',
   templateUrl: './info-formas-pago.component.html',
   styleUrls: ['./info-formas-pago.component.scss']
 })
 export class InfoFormasPagoComponent implements OnInit {
   mediaPantalla = false;
-  constructor() { }
+  constructor(
+    private modalService: BsModalService,
+  ) { }
   ngOnInit() {
-    this.reducirPantalla();
   }
-  reducirPantalla() {
+  openGoCaja(templateRef: TemplateRef<any>) {
-    if ($('body').hasClass('media-pantalla')) {
+    this.modalService.show(templateRef, { class: 'modal-promo modal-sm modal-dialog-centered' });
-      $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla');
-    }

src/scss/styles-bootstrap.scss

Diff comments View file @ 2d44360

 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins";
 $primary: #aa006b;
 $secondary: #00acd8;
 $info: #f4b223;
 $light: #e6e7e9;
 $dark: #61666c;
 $theme-colors: (
   primary: $primary,
   secondary: $secondary,
   info: $info,
   light: $light,
   dark: $dark
 );
 $border-radius: 1.5rem;
 $border-radius-lg: 2.5rem;
 $border-radius-sm: 0.5rem;
 .custom-modal {
   max-width: 90% !important;
   & > .modal-content {
     background-color: $primary !important;
     color: white;
     border: none !important;
     border-radius: $border-radius !important;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
   }
 }
 .carousel-control {
   visibility: hidden !important;
 }
 .carousel,
 .carousel-inner,
 .carousel-item,
 .item {
   height: 100% !important;
 }
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
   background-color: $primary !important;
 }
 .custom-control-input:checked ~ .custom-control-label::before {
   border-color: $primary !important;
   background-color: $primary !important;
 }
 .custom-control-input:checked ~ .custom-control-label::before {
   color: #fff;
   border-color: $primary !important;
   background-color: $primary !important;
 }
 .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;
+}
 @import "node_modules/bootstrap/scss/bootstrap";

src/styles.scss

Diff comments View file @ 2d44360

 @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: 50% !important;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
 .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;
 }
 .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;
 }
-body.media-pantalla {
-  height: 50% !important;
-  position: absolute;
-  bottom: 0;
-  width: 100%;