[Administration] Responsive > listes : accès aux boutons d'action #756

backend/views/product/index.php

         'columns' => [
             [
                 'attribute' => 'order',
-                'headerOptions' => ['class' => 'order'],
+                'headerOptions' => ['class' => 'order column-hide-on-mobile'],
+                'filterOptions' => ['class' => 'column-hide-on-mobile'],
+                'contentOptions' => ['class' => 'column-hide-on-mobile'],
                 'format' => 'raw',
                 'filter' => '',
                 'value' => function ($model) {
             [
                 'attribute' => 'photo',
                 'format' => 'raw',
-                'headerOptions' => ['class' => 'td-photo'],
+                'headerOptions' => ['class' => 'td-photo column-hide-on-mobile'],
+                'filterOptions' => ['class' => 'column-hide-on-mobile'],
+                'contentOptions' => ['class' => 'column-hide-on-mobile'],
                 'filter' => '',
                 'value' => function ($model) {
                     if (strlen($model->photo)) {
                 }
             ],
             'name',
-            'description',
+            [
+                'attribute' => 'description',
+                'headerOptions' => ['class' => 'column-hide-on-mobile'],
+                'filterOptions' => ['class' => 'column-hide-on-mobile'],
+                'contentOptions' => ['class' => 'column-hide-on-mobile'],
+            ],
             [
                 'attribute' => 'id_product_category',
                 'format' => 'raw',
-                'headerOptions' => ['class' => 'td-product-category'],
+                'headerOptions' => ['class' => 'td-product-category column-hide-on-mobile'],
+                'filterOptions' => ['class' => 'column-hide-on-mobile'],
+                'contentOptions' => ['class' => 'column-hide-on-mobile'],
                 'filter' => '',
                 'value' => function ($model) {
                     if ($model->productCategory) {
             ],
             [
                 'attribute' => 'id_tax_rate',
+                'headerOptions' => ['class' => 'column-hide-on-mobile'],
+                'filterOptions' => ['class' => 'column-hide-on-mobile'],
+                'contentOptions' => ['class' => 'column-hide-on-mobile'],
                 'value' => function ($model) {
                     if ($model->id_tax_rate == 0 || $model->id_tax_rate == null) {
 
             ],
             [
                 'attribute' => 'active',
-                'headerOptions' => ['class' => 'active'],
-                'contentOptions' => ['class' => 'center'],
+                'headerOptions' => ['class' => 'active column-hide-on-mobile'],
+                'filterOptions' => ['class' => 'column-hide-on-mobile'],
+                'contentOptions' => ['class' => 'center column-hide-on-mobile'],
                 'format' => 'raw',
                 'filter' => [0 => 'Non', 1 => 'Oui'],
                 'value' => function ($model) {

backend/web/css/screen.css

   height: 75px;
   background-color: white;
 }
+@media screen and (max-width: 768px) {
+  /* line 17, ../sass/product/_index.scss */
+  .product-index .td-photo {
+    display: none;
+  }
+}
 
 /* line 6, ../sass/product/_form.scss */
 .product-create #product-active label,
     display: none;
   }
 
-  /* line 62, ../sass/_responsive.scss */
+  /* line 56, ../sass/_responsive.scss */
+  .table .column-hide-on-mobile {
+    display: none;
+  }
+
+  /* line 67, ../sass/_responsive.scss */
   .distribution-index .modal-form-order .modal-container .modal-body table.table-products td.quantity .form-control {
     width: 50px;
     height: 52px;
   }
-  /* line 68, ../sass/_responsive.scss */
+  /* line 73, ../sass/_responsive.scss */
   .distribution-index .modal-form-order .modal-container .modal-body table.table-products td.price {
     display: none;
   }
-  /* line 76, ../sass/_responsive.scss */
+  /* line 81, ../sass/_responsive.scss */
   .distribution-index .modal-form-order .modal-container .modal-footer .actions-form div.right {
     display: none;
   }
-  /* line 87, ../sass/_responsive.scss */
+  /* line 92, ../sass/_responsive.scss */
   .distribution-index #orders #buttons-top-orders .left {
     width: 100%;
     float: none;
   }
-  /* line 92, ../sass/_responsive.scss */
+  /* line 97, ../sass/_responsive.scss */
   .distribution-index #orders #buttons-top-orders .right {
     width: 100%;
     float: none;
   }
-  /* line 97, ../sass/_responsive.scss */
+  /* line 102, ../sass/_responsive.scss */
   .distribution-index #orders #buttons-top-orders .btn {
     padding: 8px 15px;
     margin: 10px;
     display: block;
     width: 100%;
   }
-  /* line 107, ../sass/_responsive.scss */
+  /* line 112, ../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 116, ../sass/_responsive.scss */
   .distribution-index #orders #wrapper-nav-points-sale ul#nav-points-sale li a {
     display: block;
   }
-  /* line 120, ../sass/_responsive.scss */
+  /* line 125, ../sass/_responsive.scss */
   .distribution-index #orders table .state-payment-mobile {
     display: block;
   }
-  /* line 123, ../sass/_responsive.scss */
+  /* line 128, ../sass/_responsive.scss */
   .distribution-index #orders table .state-payment-mobile .glyphicon-time {
     display: none;
   }
-  /* line 129, ../sass/_responsive.scss */
+  /* line 134, ../sass/_responsive.scss */
   .distribution-index #orders table ul.dropdown-menu a {
     padding: 15px;
   }
-  /* line 134, ../sass/_responsive.scss */
+  /* line 139, ../sass/_responsive.scss */
   .distribution-index #orders table button.dropdown-toggle,
   .distribution-index #orders table button.btn-moins,
   .distribution-index #orders table button.btn-plus {
     padding: 15px;
   }
-  /* line 141, ../sass/_responsive.scss */
+  /* line 146, ../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/sass/_responsive.scss

     }
   }
 
-  .distribution-index {
+  .table {
+    .column-hide-on-mobile {
+      display: none;
+    }
+  }
 
+  .distribution-index {
     .modal-form-order {
       .modal-container {
         .modal-body {

backend/web/sass/product/_index.scss

     .ui-state-highlight { 
         height: 75px; 
         background-color: $color2 ;
-    }  
+    }
+
+    @media screen and (max-width: 768px) {
+        .td-photo {
+            display: none;
+        }
+    }
 }