[backend] Responsive : adaptations colonnes et boutons de la page distribution

backend/views/distribution/index.php

@@ -278,46 +278,46 @@ $this->setPageTitle('Distributions') ;
                 <table class="table table-condensed table-bordered table-hover" v-if="countOrdersByPointSale[idActivePointSale] > 0 || (idActivePointSale == 0 && orders.length > 0)">
                         <thead>
                                 <tr>
-                                        <th v-if="idActivePointSale > 0">
+                                        <th class="column-checkbox" v-if="idActivePointSale > 0">
                                                 <input type="checkbox" v-model="checkboxSelectAllOrders" @change="selectAllOrdersEvent" />
                                         </th>
-                                        <th>Origine</th>
-                                        <th>État</th>
-                                        <th>Utilisateur</th>
-                                        <th v-if="idActivePointSale == 0">Point de vente</th>
-                                        <th>Montant</th>
-                                        <th>Paiement</th>
-                                        <th></th>
-                                        <th v-if="producer.tiller">Tiller</th>
-                                        <th></th>
-                                        <th></th>
+                                        <th class="column-origin">Origine</th>
+                                        <th class="column-state">État</th>
+                                        <th class="column-user">Utilisateur</th>
+                                        <th class="column-point-sale" v-if="idActivePointSale == 0">Point de vente</th>
+                                        <th class="column-amount">Montant</th>
+                                        <th class="column-state-payment">Paiement</th>
+                                        <th class="column-payment"></th>
+                                        <th class="column-tiller" v-if="producer.tiller">Tiller</th>
+                                        <th class="column-actions"></th>
+                                        <th class="column-delivery-note"></th>
                                 </tr>
                         </thead>
                     <tbody>
                         <template v-for="(order, key, index) in orders" v-if="idActivePointSale == 0 || idActivePointSale == order.id_point_sale">
                             <tr>
-                                <td v-if="idActivePointSale > 0">
+                                <td class="column-checkbox" v-if="idActivePointSale > 0">
                                         <input type="checkbox" v-model="order.selected" />
                                 </td>
-                                <td>
+                                <td class="column-origin">
                                     <label class="label label-success" v-if="order.origin == 'user'">client</label>
                                     <label class="label label-default" v-else-if="order.origin == 'auto'">auto</label>
                                     <label class="label label-warning" v-else>admin</label>
                                 </td>
-                                <td>
+                                <td class="column-state">
                                     <span class="label label-danger" v-if="order.date_delete"><span class="glyphicon glyphicon-trash"></span></span>
                                     <span class="label label-warning" v-if="order.date_update"><span class="glyphicon glyphicon-pencil"></span></span>
                                     <span class="label label-success" v-if="!order.date_update && !order.date_delete"><span class="glyphicon glyphicon-check"></span></span>
                                 </td>
-                                <td>
+                                <td class="column-user">
                                     <span v-if="order.user">{{ order.user.lastname+' '+order.user.name }}</span>
                                     <span v-else>{{ order.username }}</span>
                                     <span v-if="order.comment && order.comment.length > 0" class="glyphicon glyphicon-comment"></span>
                                 </td>
-                                <td v-if="idActivePointSale == 0">
+                                <td class="column-point-sale" v-if="idActivePointSale == 0">
                                     {{ order.pointSale.name }}
                                 </td>
-                                <td>{{ order.amount.toFixed(2).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")+'&nbsp;€' }}</td>
+                                <td class="column-amount">{{ order.amount.toFixed(2).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")+'&nbsp;€' }}</td>
                                 <td class="column-state-payment">
                                     <div class="input-group">
                                         <span class="label label-success input-group-addon" v-if="order.amount_paid == order.amount">payé</span>
@@ -352,7 +352,7 @@ $this->setPageTitle('Distributions') ;
                                         </ul>
                                     </div>
                                 </td>
-                                <td v-if="producer.tiller" class="tiller">
+                                <td v-if="producer.tiller" class="tiller column-tiller">
                                     <input v-if="order.tiller_synchronization == true" type="checkbox" checked="checked" :id="'checkbox-tiller-synchronization-'+order.id" :data-id-order="order.id" @change="changeSynchroTiller" />
                                     <input v-else type="checkbox" :id="'checkbox-tiller-synchronization-'+order.id" :data-id-order="order.id" @change="changeSynchroTiller" />
                                     <label :for="'checkbox-tiller-synchronization-'+order.id">Tiller</label>
@@ -481,7 +481,7 @@ $this->setPageTitle('Distributions') ;
                                     </modal>
 
                                 </td>
-                                <td>
+                                <td class="column-delivery-note">
                                         <a v-if="order.id_delivery_note" class="btn btn-default btn-xs" :href="UrlManager.getBaseUrl()+'delivery-note/update?id='+order.id_delivery_note">
                                                 <span class="glyphicon glyphicon-file"></span> BL
                                         </a>

backend/web/css/screen.css

@@ -2395,20 +2395,26 @@ pris connaissance de la licence CeCILL, et que vous en avez accepté les
 termes.
 */
 @media screen and (max-width: 768px) {
-  /* line 42, ../sass/_responsive.scss */
-  .distribution-index #buttons-top-orders .right .btn {
-    padding: 8px 15px;
-    margin: 10px;
+  /* line 41, ../sass/_responsive.scss */
+  .main-header .navbar {
+    border-top: solid 1px #e0e0e0;
+    border-bottom: solid 1px #e0e0e0;
   }
-  /* line 50, ../sass/_responsive.scss */
+
+  /* line 49, ../sass/_responsive.scss */
+  .navbar-custom-menu .producer-menu span {
+    display: none;
+  }
+
+  /* line 58, ../sass/_responsive.scss */
   .distribution-index .modal-form-order .modal-container {
     width: 100%;
   }
-  /* line 53, ../sass/_responsive.scss */
+  /* line 61, ../sass/_responsive.scss */
   .distribution-index .modal-form-order .modal-container .modal-body table {
     margin-bottom: 100px;
   }
-  /* line 58, ../sass/_responsive.scss */
+  /* line 66, ../sass/_responsive.scss */
   .distribution-index .modal-form-order .modal-container .modal-footer {
     border-top-color: #f4f4f4;
     position: fixed;
@@ -2420,8 +2426,51 @@ termes.
     text-align: center;
     border-top: solid 1px #e0e0e0;
   }
-  /* line 70, ../sass/_responsive.scss */
+  /* line 78, ../sass/_responsive.scss */
   .distribution-index .modal-form-order .modal-container .modal-footer .actions-form button {
     float: none;
   }
+  /* line 89, ../sass/_responsive.scss */
+  .distribution-index #orders #buttons-top-orders .left {
+    width: 100%;
+    float: none;
+  }
+  /* line 93, ../sass/_responsive.scss */
+  .distribution-index #orders #buttons-top-orders .right {
+    width: 100%;
+    float: none;
+  }
+  /* line 98, ../sass/_responsive.scss */
+  .distribution-index #orders #buttons-top-orders .btn {
+    padding: 8px 15px;
+    margin: 10px;
+    display: block;
+    width: 100%;
+  }
+  /* line 108, ../sass/_responsive.scss */
+  .distribution-index #orders #wrapper-nav-points-sale ul#nav-points-sale li {
+    float: none;
+    width: 100%;
+  }
+  /* line 111, ../sass/_responsive.scss */
+  .distribution-index #orders #wrapper-nav-points-sale ul#nav-points-sale li a {
+    display: block;
+  }
+  /* line 120, ../sass/_responsive.scss */
+  .distribution-index #orders table ul.dropdown-menu a {
+    padding: 15px;
+  }
+  /* line 124, ../sass/_responsive.scss */
+  .distribution-index #orders table button {
+    padding: 15px;
+  }
+  /* line 129, ../sass/_responsive.scss */
+  .distribution-index #orders table .column-origin,
+  .distribution-index #orders table .column-point-sale,
+  .distribution-index #orders table .column-state-payment,
+  .distribution-index #orders table .column-payment,
+  .distribution-index #orders table .column-tiller,
+  .distribution-index #orders table .column-delivery-note {
+    display: none;
+  }
 }

backend/web/sass/_responsive.scss

@@ -36,15 +36,23 @@ termes.
 
 
 @media screen and (max-width: 768px) {
-        .distribution-index {
-                #buttons-top-orders {
-                        .right {
-                                .btn {
-                                        padding: 8px 15px ;
-                                        margin: 10px ;
-                                }
+
+        .main-header {
+                .navbar {
+                        border-top: solid 1px #e0e0e0 ;
+                        border-bottom: solid 1px #e0e0e0 ;
+                }
+        }
+
+        .navbar-custom-menu {
+                .producer-menu {
+                        span {
+                                display: none ;
                         }
                 }
+        }
+
+        .distribution-index {
 
                 .modal-form-order {
                         .modal-container {
@@ -74,5 +82,64 @@ termes.
                                 }
                         }
                 }
+
+                #orders {
+
+                        #buttons-top-orders {
+                                .left {
+                                        width: 100%;
+                                        float: none;
+                                }
+                                .right {
+                                        width: 100% ;
+                                        float: none ;
+                                }
+
+                                .btn {
+                                        padding: 8px 15px ;
+                                        margin: 10px ;
+                                        display: block ;
+                                        width: 100% ;
+                                }
+                        }
+
+                        #wrapper-nav-points-sale {
+                                ul#nav-points-sale {
+                                        li {
+                                                float: none ;
+                                                width: 100% ;
+                                                a {
+                                                        display: block ;
+                                                }
+                                        }
+                                }
+                        }
+
+                        table {
+                                ul.dropdown-menu {
+                                        a {
+                                                padding: 15px ;
+                                        }
+                                }
+                                button {
+                                        padding: 15px ;
+                                }
+
+                                //.column-checkbox,
+                                .column-origin,
+                                //.column-state,
+                                //.column-user,
+                                .column-point-sale,
+                                //.column-amount,
+                                .column-state-payment,
+                                .column-payment,
+                                .column-tiller,
+                                //.column-actions,
+                                .column-delivery-note {
+                                        display: none ;
+                                }
+
+                        }
+                }
         }
 }