[Producer] Commande : responsive table products #181

producer/views/order/order.php

@@ -266,11 +266,11 @@ $producer = GlobalParam::getCurrentProducer() ;
                                 <table id="products" class="table table-bordered" >
                                     <thead>
                                         <tr>
-                                            <th>Photo</th>
-                                            <th>Nom</th>
-                                            <th>Prix unitaire</th>
-                                            <th>Quantité</th>
-                                            <th>Total</th>
+                                            <th class="photo">Photo</th>
+                                            <th class="name">Nom</th>
+                                            <th class="price">Prix unitaire</th>
+                                            <th class="quantity">Quantité</th>
+                                            <th class="total">Total</th>
                                         </tr>
                                     </thead>
                                     <tbody>

producer/web/css/screen.css

@@ -2010,7 +2010,7 @@ termes.
     padding: 3px;
   }
   /* line 121, ../sass/_responsive.scss */
-  #main #products .td-photo, #main #products .th-photo {
+  #main #products td.photo, #main #products th.photo {
     display: none;
   }
   /* line 125, ../sass/_responsive.scss */
@@ -2021,11 +2021,32 @@ termes.
   #main #products .product .nom {
     font-size: 15px;
   }
-  /* line 134, ../sass/_responsive.scss */
-  #main #bar-fixed {
+  /* line 133, ../sass/_responsive.scss */
+  #main #products .td-quantity .input-group {
     position: relative;
   }
   /* line 136, ../sass/_responsive.scss */
+  #main #products .td-quantity .input-group .input-group-btn {
+    display: block;
+    width: 100%;
+  }
+  /* line 140, ../sass/_responsive.scss */
+  #main #products .td-quantity .input-group .form-control.quantity {
+    text-align: left !important;
+  }
+  /* line 143, ../sass/_responsive.scss */
+  #main #products .td-quantity .input-group .input-group-addon {
+    position: absolute;
+    top: 37px;
+    right: 15px;
+    z-index: 10;
+    border: 0px none;
+  }
+  /* line 154, ../sass/_responsive.scss */
+  #main #bar-fixed {
+    position: relative;
+  }
+  /* line 156, ../sass/_responsive.scss */
   #main #bar-fixed .btn-comment {
     float: none;
     display: block;
@@ -2034,80 +2055,80 @@ termes.
     margin-top: 15px;
   }
 
-  /* line 146, ../sass/_responsive.scss */
+  /* line 166, ../sass/_responsive.scss */
   .order-create #main #content .order-form #products .table .input-group,
   .order-update #main #content .order-form #products .table .input-group {
     width: 60px;
   }
-  /* line 150, ../sass/_responsive.scss */
+  /* line 170, ../sass/_responsive.scss */
   .order-create #main #content .order-form #products .table .input-group .form-control,
   .order-update #main #content .order-form #products .table .input-group .form-control {
     width: 20px;
     padding: 3px;
   }
 
-  /* line 156, ../sass/_responsive.scss */
+  /* line 176, ../sass/_responsive.scss */
   .order-create #main #content .order-form #bar-fixed #checkbox-credit,
   .order-update #main #content .order-form #bar-fixed #checkbox-credit {
     width: 100%;
     margin: 0px;
     padding: 5px 0px;
   }
-  /* line 162, ../sass/_responsive.scss */
+  /* line 182, ../sass/_responsive.scss */
   .order-create #main #content .order-form #bar-fixed #checkbox-credit .the-credit,
   .order-update #main #content .order-form #bar-fixed #checkbox-credit .the-credit {
     word-break: break-all;
   }
 
-  /* line 167, ../sass/_responsive.scss */
+  /* line 187, ../sass/_responsive.scss */
   .order-create #main #content .order-form #bar-fixed #block-confirm-order button,
   .order-update #main #content .order-form #bar-fixed #block-confirm-order button {
     width: 100%;
   }
 
-  /* line 175, ../sass/_responsive.scss */
+  /* line 195, ../sass/_responsive.scss */
   .order-order #app-order-order h3 {
     line-height: 28px;
   }
-  /* line 181, ../sass/_responsive.scss */
+  /* line 201, ../sass/_responsive.scss */
   .order-order #app-order-order #distributions-list .panel .btn-primary {
     display: block;
     float: none !important;
     margin-bottom: 10px;
   }
-  /* line 190, ../sass/_responsive.scss */
+  /* line 210, ../sass/_responsive.scss */
   .order-order #app-order-order #steps ul {
     height: auto !important;
   }
-  /* line 192, ../sass/_responsive.scss */
+  /* line 212, ../sass/_responsive.scss */
   .order-order #app-order-order #steps ul li {
     padding-left: 0px !important;
     padding-right: 0px !important;
   }
-  /* line 196, ../sass/_responsive.scss */
+  /* line 216, ../sass/_responsive.scss */
   .order-order #app-order-order #steps ul li .info-step {
     display: none;
   }
-  /* line 200, ../sass/_responsive.scss */
+  /* line 220, ../sass/_responsive.scss */
   .order-order #app-order-order #steps ul li .btn::after,
   .order-order #app-order-order #steps ul li .btn::before {
     display: none;
   }
-  /* line 211, ../sass/_responsive.scss */
+  /* line 231, ../sass/_responsive.scss */
   .order-order #app-order-order table#products td.name .recipe {
     display: none;
   }
-  /* line 217, ../sass/_responsive.scss */
+  /* line 237, ../sass/_responsive.scss */
   .order-order #app-order-order table#products td.td-quantity .input-group-btn {
     width: 100%;
     display: block;
   }
-  /* line 221, ../sass/_responsive.scss */
+  /* line 241, ../sass/_responsive.scss */
   .order-order #app-order-order table#products td.td-quantity .input-group-btn button {
     width: 100%;
     display: block;
   }
-  /* line 231, ../sass/_responsive.scss */
+  /* line 251, ../sass/_responsive.scss */
   .order-order #app-order-order #order-success .alert .glyphicon-big {
     font-size: 90px;
     color: white;
@@ -2117,13 +2138,13 @@ termes.
     text-align: center;
     margin-bottom: 20px;
   }
-  /* line 240, ../sass/_responsive.scss */
+  /* line 260, ../sass/_responsive.scss */
   .order-order #app-order-order #order-success .alert div.content {
     margin-left: 0px;
     text-align: center;
   }
 
-  /* line 251, ../sass/_responsive.scss */
+  /* line 271, ../sass/_responsive.scss */
   #footer .content {
     text-align: center;
   }

producer/web/js/vuejs/order-order.js

@@ -276,16 +276,38 @@ var app = new Vue({
                     }
 
                     app.loading = false ;
-                });  
+
+                    setTimeout(function() {
+                        app.responsive();
+                    }, 500);
+
+                });
         },
 
-        isChangeState: function(entryPoint, oldStep, newStep) {
+        responsive: function() {
+            var app = this;
+            app.responsiveApply();
+            $(window).resize(function() {
+                app.responsiveApply();
+            });
+        },
+
+        responsiveApply: function() {
+            var width_window = parseInt($(window).width());
+            var $td_summary = $('#products tr.total td.summary');
+            if(width_window <= 768) {
+                $td_summary.attr('colspan', 3);
+            }
+            else {
+                $td_summary.attr('colspan', 4);
+            }
+        },
 
+        isChangeState: function(entryPoint, oldStep, newStep) {
             return this.producer
                 &&  entryPoint == this.producer.option_order_entry_point
                 && oldStep == this.oldStep
                 && newStep == this.step ;
-
         },
 
         nextStep: function() {

producer/web/sass/_responsive.scss

@@ -118,7 +118,7 @@ termes.
                 padding: 3px ;
             }
             
-            .td-photo, .th-photo {
+            td.photo, th.photo {
                 display: none ;
             }
             
@@ -127,7 +127,27 @@ termes.
                 .nom {
                     font-size: 15px ;
                 }
-                
+            }
+
+            .td-quantity {
+                .input-group {
+                    position: relative;
+
+                    .input-group-btn {
+                        display: block;
+                        width: 100%;
+                    }
+                    .form-control.quantity {
+                        text-align: left !important;
+                    }
+                    .input-group-addon {
+                        position: absolute;
+                        top: 37px;
+                        right: 15px;
+                        z-index: 10;
+                        border: 0px none;
+                    }
+                }
             }
         }