Mauricio Cattafi / autoservicio

Browse Code »

Commit 55145dded61ad22ec7c46ce1bac0bb6874422082

Authored by Marcelo Puebla 2019-09-10 12:36:51 -0300

1 parent 3c06662917

Exists in master and in 1 other branch

Arreglo en vista.

Showing 2 changed files with 16 additions and 30 deletions Show diff stats

src/app/components/comanda/comanda.component.html

Diff comments View file @ 55145dd

-<div class="container-fluid h-100 fade-in p-0 pr-2">
+<div class="container-fluid d-flex flex-column h-100 fade-in pb-4 pr-2">
-    <div class="row z-index-0 fixed-top m-0 w-100">
+  <div class="row z-index-0 fixed-top m-0 w-100">
-      <div class="col-12 p-3">
+    <div class="col-12 p-3">
-        <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
+      <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
-      </div>
     </div>
+  </div>
   <div class="row pt-5 m-3">
     <div class="col-12">
       <p class="m-0 h2 text-center">Pedidos a elaborar</p>
     </div>
   </div>
-  <div class="row h-85 m-0 overflow-scroll">
+  <div class="row flex-fill m-0 overflow-scroll">
     <div class="col-12 px-2">
       <div class="card-columns h-100 m-1 fade-in disable-user-select">
-        <div
+        <div *ngFor="let comanda of comandas" class="card fade-in rounded-xs shadow-sm" [ngClass]="{
-          *ngFor="let comanda of comandas"
-          class="card fade-in rounded-xs shadow-sm"
-          [ngClass]="{
             'bg-light': comanda.estado === 1,
             'bg-danger': comanda.estado === 2,
             'bg-success swing-out-top-bck': comanda.estado === 3
           }">
           <div class="card-body p-2">
-            <p class="h1 card-title text-center mb-1">{{comanda.id.toString().slice(comanda.id.toString().length - 2)}}</p>
+            <p class="h1 card-title text-center mb-1">{{comanda.id.toString().slice(comanda.id.toString().length - 2)}}
+            </p>
             <!-- TODO: Implementar moment -->
-            <p class="card-title text-center mb-1">{{comanda.fechafinelaboracion | date: 'dd-MM-yyyy HH:mm' : '+0000'}}</p>
+            <p class="card-title text-center mb-1">{{comanda.fechafinelaboracion | date: 'dd-MM-yyyy HH:mm' : '+0000'}}
-            <p
+            </p>
-              *ngFor="let detalle of comanda.detalles"
+            <p *ngFor="let detalle of comanda.detalles" [ngClass]="
-              [ngClass]="
               {
                 'border-secondary': comanda.estado === 1,
                 'border-light': comanda.estado != 1
-              }"
+              }" class="card-text border-top pt-2 mb-2">
-              class="card-text border-top pt-2 mb-2">
               <small>
                 {{detalle.articulo.DET_LAR}}
               </small><br>
               <small>
                 CANT. {{detalle.cantidad}}
               </small>
             </p>
-            <button
+            <button *ngIf="comanda.estado === 1" class="btn btn-block btn-danger shadow-sm"
-              *ngIf="comanda.estado === 1"
-              class="btn btn-block btn-danger shadow-sm"
               (click)="updateComanda(comanda, 2, 'En elaboracion')">
               Elaborar
             </button>
-            <button
+            <button *ngIf="comanda.estado === 2" class="btn btn-block btn-success shadow-sm"
-              *ngIf="comanda.estado === 2"
-              class="btn btn-block btn-success shadow-sm"
               (click)="updateComanda(comanda, 3, 'Terminado')">
               Terminar
             </button>
-            <button
+            <button *ngIf="comanda.estado === 2" class="btn btn-block btn-light btn-sm shadow-sm p-0"
-              *ngIf="comanda.estado === 2"
-              class="btn btn-block btn-light btn-sm shadow-sm p-0"
               (click)="updateComanda(comanda, 1, 'Pagado')">
               <span class="pr-2 h6"><small>Deshacer</small></span>
               <i class="fa fa-undo text-warning" aria-hidden="true"></i>
             </button>
           </div>
         </div>
       </div>
     </div>
   </div>

src/app/components/comanda/comanda.component.scss

Diff comments View file @ 55145dd

 @media (min-width: 1200px) {
   .col-1-5 {
     flex: 0 0 12.5%;
     max-width: 12.5%;
     position: relative;
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
   }
 }
-.h-85{
-  height: 85% !important;
-}
 @media (min-width: 1200px) {
   .card-columns {
     column-count: 7 !important;
     column-gap: 0.5rem !important;
   }
 }
 @media (max-width: 1200px) {
   .card-columns {
     column-count: 6 !important;
     column-gap: 0.5rem !important;
   }
 }
 @media (max-width: 768px) {
   .card-columns {
     column-count: 3 !important;
     column-gap: 0.5rem !important;
   }
 }
 .bg-danger {
   background-color: #8c000e !important;
   p {
     color: #fff;
   }
 }
 .bg-success {
   background-color: #00751b !important;
   p {
     color: #fff;
   }
 }
 .bg-light {
   background-color: white !important;
   p {
     color: #212529;
   }
 }
 .rounded-xs {
   border-radius: 0.5rem;
 }
 .card-comanda {
   min-height: 250px;
 }
 .swing-out-top-bck {
   -webkit-animation: swing-out-top-bck 0.45s
     cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s both;
   animation: swing-out-top-bck 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s
     both;
 }
 @-webkit-keyframes swing-out-top-bck {
   0% {
     -webkit-transform: rotateX(0deg);
     transform: rotateX(0deg);
     -webkit-transform-origin: top;
     transform-origin: top;
     opacity: 1;
   }
   75% {
     -webkit-transform: rotateX(-100deg);
     transform: rotateX(-100deg);
     -webkit-transform-origin: top;
     transform-origin: top;
   }
   100% {
     -webkit-transform: rotateX(-100deg);
     transform: rotateX(-100deg);
     -webkit-transform-origin: top;
     transform-origin: top;
     opacity: 0;
     display: none;
     position: absolute;
   }
 }
 @keyframes swing-out-top-bck {
   0% {
     -webkit-transform: rotateX(0deg);
     transform: rotateX(0deg);
     -webkit-transform-origin: top;
     transform-origin: top;
     opacity: 1;
   }
   75% {
     -webkit-transform: rotateX(-100deg);
     transform: rotateX(-100deg);
     -webkit-transform-origin: top;
     transform-origin: top;
   }
   100% {
     -webkit-transform: rotateX(-100deg);
     transform: rotateX(-100deg);
     -webkit-transform-origin: top;
     transform-origin: top;
     opacity: 0;
     display: none;
     position: absolute;
   }
 }