[backend] Responsive : adaptation form order modal dans distributions

backend/views/distribution/index.php

@@ -259,7 +259,7 @@ $this->setPageTitle('Distributions') ;
                                             <button v-if="tillerIsSynchro" id="btn-tiller"  class="btn btn-success btn-xs" disabled><span class="glyphicon glyphicon-refresh"></span> Synchronisé avec Tiller</button>
                                             <button v-else id="btn-tiller" class="btn btn-xs btn-default" @click="synchroTiller"><span class="glyphicon glyphicon-refresh"></span> Synchroniser avec Tiller</button>
                                     </template>
-                                    <button id="btn-add-order" @click="showModalFormOrderCreate = true" class="btn btn-xs btn-primary"><span class="glyphicon glyphicon-plus"></span> Ajouter une commande</button>
+                                    <button id="btn-add-order" @click="openModalFormOrderCreate" class="btn btn-xs btn-primary"><span class="glyphicon glyphicon-plus"></span> Ajouter une commande</button>
                             </div>
                             <div class="left">
                                     <a v-if="deliveryNoteExist(idActivePointSale)" :href="UrlManager.getBaseUrl()+'delivery-note/update?id='+deliveryNotes[idActivePointSale].id" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-file"></span> Bon de livraison</a>

backend/web/css/screen.css

@@ -2409,12 +2409,22 @@ termes.
   /* line 58, ../sass/_responsive.scss */
   .distribution-index .modal-form-order .modal-container {
     width: 100%;
+    padding: 0px;
   }
-  /* line 61, ../sass/_responsive.scss */
+  /* line 62, ../sass/_responsive.scss */
+  .distribution-index .modal-form-order .modal-container .modal-body {
+    padding-right: 15px;
+  }
+  /* line 64, ../sass/_responsive.scss */
   .distribution-index .modal-form-order .modal-container .modal-body table {
     margin-bottom: 100px;
   }
-  /* line 66, ../sass/_responsive.scss */
+  /* line 70, ../sass/_responsive.scss */
+  .distribution-index .modal-form-order .modal-container .modal-body table.table-products td.quantity .form-control {
+    width: 50px;
+    height: 52px;
+  }
+  /* line 78, ../sass/_responsive.scss */
   .distribution-index .modal-form-order .modal-container .modal-footer {
     border-top-color: #f4f4f4;
     position: fixed;
@@ -2426,45 +2436,45 @@ termes.
     text-align: center;
     border-top: solid 1px #e0e0e0;
   }
-  /* line 78, ../sass/_responsive.scss */
+  /* line 90, ../sass/_responsive.scss */
   .distribution-index .modal-form-order .modal-container .modal-footer .actions-form button {
     float: none;
   }
-  /* line 89, ../sass/_responsive.scss */
+  /* line 101, ../sass/_responsive.scss */
   .distribution-index #orders #buttons-top-orders .left {
     width: 100%;
     float: none;
   }
-  /* line 93, ../sass/_responsive.scss */
+  /* line 105, ../sass/_responsive.scss */
   .distribution-index #orders #buttons-top-orders .right {
     width: 100%;
     float: none;
   }
-  /* line 98, ../sass/_responsive.scss */
+  /* line 110, ../sass/_responsive.scss */
   .distribution-index #orders #buttons-top-orders .btn {
     padding: 8px 15px;
     margin: 10px;
     display: block;
     width: 100%;
   }
-  /* line 108, ../sass/_responsive.scss */
+  /* line 120, ../sass/_responsive.scss */
   .distribution-index #orders #wrapper-nav-points-sale ul#nav-points-sale li {
     float: none;
     width: 100%;
   }
-  /* line 111, ../sass/_responsive.scss */
+  /* line 123, ../sass/_responsive.scss */
   .distribution-index #orders #wrapper-nav-points-sale ul#nav-points-sale li a {
     display: block;
   }
-  /* line 120, ../sass/_responsive.scss */
+  /* line 132, ../sass/_responsive.scss */
   .distribution-index #orders table ul.dropdown-menu a {
     padding: 15px;
   }
-  /* line 124, ../sass/_responsive.scss */
+  /* line 136, ../sass/_responsive.scss */
   .distribution-index #orders table button {
     padding: 15px;
   }
-  /* line 129, ../sass/_responsive.scss */
+  /* line 141, ../sass/_responsive.scss */
   .distribution-index #orders table .column-origin,
   .distribution-index #orders table .column-point-sale,
   .distribution-index #orders table .column-state-payment,

backend/web/js/vuejs/distribution-index.js

@@ -362,6 +362,19 @@ var app = new Vue({
             var idOrder = event.currentTarget.getAttribute('data-id-order') ;
             this.idOrderUpdate = idOrder ;
             this.showModalFormOrderUpdate = true ;
+            this.initModalFormOrder() ;
+        },
+        openModalFormOrderCreate: function() {
+            this.showModalFormOrderCreate = true ;
+            this.initModalFormOrder() ;
+        },
+        initModalFormOrder: function() {
+            if($(window).height() < 768) {
+                setTimeout(function() {
+                    $('.modal-body').css('height',$(window).height()) ;
+                    $('.modal-body').css('maxHeight','unset') ;
+                },500);
+            }
         },
         orderPaymentModalClick: function(event) {
             var idOrder = event.currentTarget.getAttribute('data-id-order') ;

backend/web/sass/_responsive.scss

@@ -57,11 +57,23 @@ termes.
                 .modal-form-order {
                         .modal-container {
                                 width: 100% ;
+                                padding: 0px ;
+
                                 .modal-body {
+                                        padding-right: 15px ;
                                         table {
                                                 margin-bottom: 100px ;
                                         }
 
+                                        table.table-products {
+                                                td.quantity {
+                                                        .form-control {
+                                                                width: 50px ;
+                                                                height: 52px ;
+                                                        }
+                                                }
+                                        }
+
                                 }
                                 .modal-footer {
                                         border-top-color: #f4f4f4;