Martin Macola / autoservicio

Browse Code »

Commit 102a882378ee924fb1fea51f66f636a8f2c46560

Authored by Marcelo Puebla 2019-09-06 13:28:22 -0300

1 parent 79ea687e2c

Exists in master

Agregada marca de agua en pantallas azules.

Showing 4 changed files with 43 additions and 7 deletions Show diff stats

src/app/components/confirmacion-carrito/confirmacion-carrito.component.html

Diff comments View file @ 102a882

 <div
   *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
   class="row m-0 fade-in bg-primary-gradient disable-user-select"
   (click)="reiniciarTimer">
   <div class="col-12 p-0 vh-100">
     <!-- TOP HEADER -->
     <app-header></app-header>
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 py-1 bg-gray text-muted text-center m-0">
           &nbsp;
         </p>
       </div>
     </div>
     <div class="row m-0">
       <div class="col-10 px-1">
         <!-- TEXTO DE IZQUIERDA -->
         <div *ngIf="!verQR" class="row mx-2 mt-4 text-white">
           <div class="col-sm-auto my-auto">
             <p class="h2">Mi Compra
               <i class="fa fa-shopping-cart "></i>
             </p>
           </div>
           <div class="col-sm-9 my-auto">
             <p class="h4">Por favor, controle y confirme su compra.</p>
           </div>
         </div>
         <div [ngClass]="{'mt-5': verQR}" class="row m-0">
           <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
           <div *ngIf="!verQR" class="col-sm-9 pr-1">
             <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark">
               <div class="mh-100 col-4 p-2" *ngFor="let producto of productos">
                 <div class="row m-0 h-100 bg-white rounded-sm shadow border-0">
                   <div class="d-flex align-items-end flex-column">
                     <div class="w-100">
                       <img
                         src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
                         class="shadow rounded-sm w-100 m-auto">
                     </div>
                     <div class="w-100 pt-2 px-2">
                       <p class="h6 text-left">
                         <small class="font-weight-bold">
                           {{producto.DET_LAR}}
                         </small>
                       </p>
                       <div *ngIf="producto.tieneSinonimos">
                         <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
                           <small>
                             - {{p.cantidad * producto.cantidad}} {{p.DET_LAR}}
                           </small>
                         </p>
                       </div>
                     </div>
                     <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2">
                       <span class="text-left m-0 px-1 h6">
                         {{producto.cantidad}} x {{producto.PreVen | currency}}
                       </span>
                       <span class="text-right m-0 px-1 h6">
                         {{producto.cantidad * producto.PreVen | currency}}
                       </span>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <!-- CODIGO QR -->
           <div *ngIf="verQR" class="col-sm-9">
             <div class="col-6 offset-3 border-0 mb-auto">
               <img
                 src="{{apiImagenes}}/imagenes/qrmp.jpg"
                 class="w-100 mx-auto d-block shadow rounded-sm">
             </div>
           </div>
           <!-- TICKET -->
           <div class="col-sm-3 px-1">
             <div class="card shadow">
               <div class="card-body">
                 <p class="h5 card-title">Su Ticket</p>
                 <div class="row mt-4 m-0">
                   <div class="col-12 p-0 mb-2">
                     <p class="h6 m-0 card-text text-left">
                       <small class="font-weight-bold">DESCRIPCIÓN</small>
                     </p>
                     <p class="h6 m-0 card-text text-left">
                       <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
                     </p>
                   </div>
                 </div>
                 <div class="row vh-50 px-2 overflow-scroll m-0">
                   <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
                     <p class="h6 m-0 card-text text-left">
                       <small>{{producto.DET_LAR}}</small>
                     </p>
                     <div class="row d-flex justify-content-between m-0">
                       <div class="col p-0">
                         <p class="h6 m-0 card-text text-left">
                           <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
                         </p>
                       </div>
                       <div class="col p-0">
                         <p class="h6 m-0 card-text text-right">
                           <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
                 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
                   Total {{getTotal() | currency}}
                 </p>
               </div>
             </div>
           </div>
         </div>
         <!-- OPCIONES ABAJO DERECHA -->
         <div class="row m-0 fixed-bottom">
           <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
             <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
               <div class="card-body row m-0 p-1">
                 <div class="col-12 p-3">
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     (click)="volverPreviousPage()">
                     <span class="pr-2">Volver</span>
                     <i class="fa fa-undo text-warning"></i>
                   </button>
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     [routerLink]="['/cancelar-compra']">
                     <span class="pr-2">Cancelar</span>
                     <i class="fa fa-times text-danger"></i>
                   </button>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
       <!-- FORMAS DE PAGO -->
       <div *ngIf="!verQR" class="col-2 px-1">
         <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white">
           Forma de pago
         </p>
         <!-- EFECTIVO -->
         <div
           class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white"
           (click)="pagoEfectivo('efectivo')">
           <div class="col-7 text-center my-auto py-3 px-2">
             <span class="h5">Efectivo</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
             src="{{apiImagenes}}/imagenes/efectivo.png"
             class="w-100 float-right">
           </div>
         </div>
         <!-- TARJETA -->
         <div class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white">
           <div class="col-7 text-center my-auto py-3 px-2">
             <span class="h5">Tarjeta</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
             src="{{apiImagenes}}/imagenes/tarjeta.png"
             class="w-100 float-right">
           </div>
         </div>
         <!-- QR -->
         <div
           class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white"
           (click)="pagar('electronico')">
           <div class="col-7 text-center my-auto py-1 px-2">
             <span class="h5">Pago Electrónico</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
             src="{{apiImagenes}}/imagenes/qr.png"
             class="w-100 float-right">
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
 <div
   *ngIf="compraConQRfinalizada"
   class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
   <div class="col-12 text-center text-white my-auto">
     <p class="font-weight-bold display-4">
       Su pago fue<br>
       acreditado
       exitosamente
     </p>
     <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
   </div>
+  <div class="row z-index-0 fixed-top m-0 w-100">
+    <div class="col-12 p-3">
+      <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
+    </div>
+  </div>
 </div>
 <div
   *ngIf="compraConEfectivofinalizada"
   class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
   <div class="col-12 text-center text-white my-auto">
     <p class="font-weight-bold display-4">
-        Retire su ticket<br>
+      Retire su ticket<br>
-        y diríjase a caja para<br>
+      y diríjase a caja para<br>
-        efectuar el pago.
+      efectuar el pago.
     </p>
   </div>
+  <div class="row z-index-0 fixed-top m-0 w-100">
+    <div class="col-12 p-3">
+      <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
+    </div>
+  </div>
 </div>

src/app/components/pedidos-salientes/pedidos-salientes.component.html

Diff comments View file @ 102a882

 <div class="bg-primary-gradient vh-100 disable-user-select">
   <div class="d-flex justify-content-center">
+    <div class="row z-index-0 fixed-top m-0 w-100">
+      <div class="col-12 p-3">
+        <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
+      </div>
+    </div>
     <div class="row m-5 text-white text-center">
       <div class="col-12 p-0">
         <p class="h1 m-0">Su pedido ya esta listo.</p>
         <p class="h2 m-0">Nº de Pedido</p>
       </div>
       <div
         *ngIf="pedidosRecientes.length"
         class="col-12 p-2">
         <div class="border rounded shadow h-big">
           <div class="font-weight-bold heartbeat m-0 h-100">
             {{rellenar(pedidosRecientes[0].id.toString().slice(pedidosRecientes[0].id.toString().length - 2), 2)}}
           </div>
         </div>
       </div>
       <div
         *ngFor="let pedido of pedidosRecientes; let i = index"
         [hidden]="i == 0 || i > 8"
         class="col-3 p-2">
         <p class="font-weight-bold display-1 m-0 py-1 border rounded shadow">
           {{rellenar(pedido.id.toString().slice(pedido.id.toString().length - 2), 2)}}
         </p>
       </div>
     </div>
   </div>
 </div>

src/assets/img/debo-gray.png

Diff comments View file @ 102a882

22.3 KB

src/styles.scss

Diff comments View file @ 102a882

 @import "./assets/scss/animation.scss";
 @import "./assets/scss/bootstrap-override.scss";
 @import "../node_modules/bootstrap/scss/_variables.scss";
 html,
 body {
-  background-color: #f0f0f0;
+  height: 100%;
+  background: linear-gradient(
+    0deg,
+    #e6e6e6,
+    #fff
+  );
   font-family: bahnschrift;
   overflow: hidden !important;
 }
 .blur {
   filter: blur(10px);
   -webkit-filter: blur(10px);
 }
 .disable-user-select {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 .blue-gradient {
   background: linear-gradient(0deg, #ffffff00, $white);
 }
 .rounded {
   border-radius: 1.5rem !important;
 }
 .rounded-top-sm {
   border-top-left-radius: 0.75rem !important;
   border-top-right-radius: 0.75rem !important;
 }
 .rounded-sm {
   border-radius: 0.75rem !important;
 }
 .card-effect {
   &:active {
     background-color: #c9c9c9b3 !important;
     transition: background-color 0.5s;
   }
   &:focus {
     background-color: #c9c9c9b3 !important;
     transition: background-color 0.5s;
   }
 }
 .overflow-scroll {
   overflow-y: auto !important;
   overflow-x: hidden !important;
   &::-webkit-scrollbar {
-    width: .75em;
+    width: 0.75em;
   }
   &::-webkit-scrollbar-track {
     border-radius: 10px;
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
     background-color: $white;
   }
   &::-webkit-scrollbar-thumb {
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
     outline: 1px solid slategrey;
     border-radius: 10px;
     height: 12px;
     &:active {
       box-shadow: inset 0 0 8px $primary;
       -webkit-box-shadow: inset 0 0 8px $primary;
     }
   }
   &::-webkit-scrollbar-corner {
     border-radius: 10px;
   }
 }
 .bg-gray {
   background-color: #e6e6e6;
 }
 .bg-primary-gradient {
-  background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba(40, 112, 175, 1) 0%,
+    rgba(0, 32, 66, 1) 100%
+  );
 }
 .bg-primary-gradient-horizontal {
-  background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(40, 112, 175, 1) 0%,
+    rgba(0, 32, 66, 1) 100%
+  );
 }
 .icon-dim {
   height: 40px !important;
   width: auto !important;
   background-color: white !important;
 }
 .text-purple {
   color: $purple;
 }
 .vh-70 {
   min-height: auto !important;
   max-height: 70vh !important;
 }
 .vh-60 {
   min-height: auto !important;
   max-height: 60vh !important;
 }
 .vh-50 {
   min-height: auto !important;
   max-height: 50vh !important;
 }
 .spinner-lg {
   width: 3rem !important;
   height: 3rem !important;
 }
 .sidebar {
   right: 0;
 }
 .background-image {
   background-repeat: no-repeat;
   background-size: cover;
   position: fixed;
 }
 .rounded-bottom-right {
   border-bottom-right-radius: 10rem;
   &:before {
     border-radius: 0 40px 40px 0;
     background-color: #fff;
   }
 }
 .rounded-top-left {
   border-top-left-radius: 10rem;
 }
 .bg-gray {
   background-color: #cccccc;
 }
 .cdk-overlay-container {
   position: absolute;
   top: 65%;
   width: 100%;
 }
 .min-h-40 {
   min-height: 40px;
 }
 .min-h-55 {
   min-height: 55px;
 }
 .pagination {
   justify-content: center !important;
   display: flex !important;
 }
+.z-index-0 {
+  z-index: 0;
+}
+.w-15 {
+  width: 15% !important;
+}