Améliorer l'ergonomie de la page des commandes du backend

backend/views/commande/index.php

                     <h3 class="panel-title">Production du <strong><?php echo date('d/m/Y', strtotime($date)); ?></strong></h3>
                 </div>
                 <div class="panel-body">
-                    <strong>Production</strong>
+                    <strong>Production</strong><br />
                     <div class="btn-group" role="group">
                         <a class="btn btn-default<?php if ($production->actif): ?> btn-success<?php endif; ?>" href="<?php echo Yii::$app->urlManager->createUrl(['commande/change-state', 'date' => $date, 'actif' => 1]); ?>">Activé</a>
                         <a class="btn btn-default<?php if (!$production->actif): ?> btn-danger<?php endif; ?>" href="<?php echo Yii::$app->urlManager->createUrl(['commande/change-state', 'date' => $date, 'actif' => 0]); ?>">Désactivé</a>
                     </div>
                     <br />
                     <br />
-                    <strong>Livraison</strong> 
+                    <strong>Livraison</strong> <br />
                     <div class="btn-group" role="group">
                         <a class="btn btn-default<?php if ($production->livraison): ?> btn-success<?php endif; ?>" href="<?php echo Yii::$app->urlManager->createUrl(['commande/change-livraison', 'date' => $date, 'livraison' => 1]); ?>">Activé</a>
                         <a class="btn btn-default<?php if (!$production->livraison): ?> btn-danger<?php endif; ?>" href="<?php echo Yii::$app->urlManager->createUrl(['commande/change-livraison', 'date' => $date, 'livraison' => 0]); ?>">Désactivé</a>
                     <?php if (!count($commandes)): ?>
                         <div class="alert alert-info">Aucune commande passée pour cette date</div>
                     <?php else: ?>
+                        <strong><?= count($commandes) ?> commande<?php if(count($commandes)> 1): ?>s<?php endif; ?></strong><br />
                         <a class="btn btn-primary" href="<?php echo Yii::$app->urlManager->createUrl(['commande/download', 'date' => $date, 'id_point_vente' => 0, 'global' => 1]); ?>"><span class="glyphicon glyphicon-download-alt"></span> Récapitulatif global</a>
                         <br />
                         <br />
                 <div class="panel-body">
                     <!-- produits sélectionnés -->
                     <form id="produits-production" action="<?php echo Yii::$app->urlManager->createUrl(['commande/index', 'date' => $date]); ?>" method="post">
-                        <table class="table table-bordered">
-                            <tbody>
-                                <?php foreach ($produits as $p): ?>
-                                    <tr<?php if ($p->vrac): ?> style="display:none;"<?php endif; ?>>
-                                        <td><label for="produit-<?php echo $p->id; ?>"><?php if (strlen($p->description)): echo Html::encode($p->description);
-                                        else: echo Html::encode($p->nom);
-                                        endif; ?></label></td>
-                                        <td><input id="produit-<?php echo $p->id; ?>" name="Produit[<?php echo $p->id; ?>][actif]" type="checkbox" <?php if (isset($produits_selec[$p->id]['actif']) && $produits_selec[$p->id]['actif']): ?>checked="checked"<?php endif; ?> /></td>
-                                        <td><input class="quantite-max" name="Produit[<?php echo $p->id; ?>][quantite_max]" type="text" value="<?php if (isset($produits_selec[$p->id])) echo $produits_selec[$p->id]['quantite_max']; ?>" /></td>
+                        <div class="overflow">
+                            <table class="table table-hover table-condensed">
+                                <thead>
+                                    <tr>
+                                        <th>Produit</th>
+                                        <th>Actif</th>
+                                        <th>Max.</th>
                                     </tr>
-                                <?php endforeach; ?>
-                            </tbody>
-                        </table>
+                                </thead>
+                                <tbody>
+                                    <?php foreach ($produits as $p): ?>
+                                        <tr<?php if ($p->vrac): ?> style="display:none;"<?php endif; ?>>
+                                            <td><label for="produit-<?php echo $p->id; ?>"><?php if (strlen($p->description)): echo Html::encode($p->description);
+                                            else: echo Html::encode($p->nom);
+                                            endif; ?></label></td>
+                                            <td><input id="produit-<?php echo $p->id; ?>" name="Produit[<?php echo $p->id; ?>][actif]" type="checkbox" <?php if (isset($produits_selec[$p->id]['actif']) && $produits_selec[$p->id]['actif']): ?>checked="checked"<?php endif; ?> /></td>
+                                            <td><input class="quantite-max" name="Produit[<?php echo $p->id; ?>][quantite_max]" type="text" value="<?php if (isset($produits_selec[$p->id])) echo $produits_selec[$p->id]['quantite_max']; ?>" /></td>
+                                        </tr>
+                                    <?php endforeach; ?>
+                                </tbody>
+                            </table>
+                        </div>
                         <input type="submit" name="valider_produit_selec" class="btn btn-default" value="Valider" />
                     </form>
                 </div>
             $arr_jour_semaine = [0 => 'dimanche', 1 => 'lundi', 2 => 'mardi', 3 => 'mercredi', 4 => 'jeudi', 5 => 'vendredi', 6 => 'samedi'];
             $champs_horaires_point_vente = 'horaires_' . $arr_jour_semaine[$num_jour_semaine];
             ?>
-            <form class="form-commandes-point-vente" action="<?php echo Yii::$app->urlManager->createUrl(['commande/index', 'date' => $date]); ?>" method="post">
+        
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                  <h3 class="panel-title">Commandes</h3>
+                </div>
+                <div class="panel-body">
+                    <form class="form-commandes-point-vente" action="<?php echo Yii::$app->urlManager->createUrl(['commande/index', 'date' => $date]); ?>" method="post">
 
-                <table class="table table-striped table-header-rotated">
+                <table class="table table-hover table-header-rotated">
                     <thead>
                         <tr>
                             <td class="title-point-vente" colspan="<?php echo count($produits) + 3; ?>"><strong>Global</strong></td>
                         </tr>
                         <tr>
-                            <th></th>
+                            <th class="border-left"></th>
                             <?php foreach ($produits as $p): ?>
                                 <?php if (isset($produits_selec[$p->id]['actif']) && $produits_selec[$p->id]['actif']): ?>
                                     <th class="center rotate-45">
                                     </th>
                                 <?php endif; ?>
                             <?php endforeach; ?>
-                            <th class="title-totaux"><strong>Potentiel</strong></td>
-                            <th class="title-totaux"><strong>Commandé</strong></td>
+                            <th class="title-totaux"><strong>Potentiel</strong></th>
+                            <th class="title-totaux border-right"><strong>Commandé</strong></th>
                         </tr>
                         <tr>
-                            <td><strong>Pain</strong></td>
+                            <td><strong>Total</strong></td>
                             <?php
                             foreach ($produits as $p) {
                                 if (isset($produits_selec[$p->id]['actif']) && $produits_selec[$p->id]['actif']) {
                                     <td class="title-point-vente" colspan="<?php echo count($produits) + 3; ?>"><?php echo Html::encode($pv->nom); ?></td>
                                 </tr>
                                 <tr>
-                                    <th></th>
+                                    <th class="border-left"></th>
                                     <?php foreach ($produits as $p): ?>
                                         <?php if (isset($produits_selec[$p->id]['actif']) && $produits_selec[$p->id]['actif']): ?>
                                             <th class="center rotate-45">
                                         <?php endif; ?>
                                     <?php endforeach; ?>
                                     <th></th>
-                                    <th></th>
+                                    <th class="border-right"></th>
                                 </tr>
 
                                 <?php foreach ($pv->commandes as $c): ?>
                                     <tr>
-                                        <td>
+                                        <td class="client">
                                             <?php if (isset($c->user)): ?>
                                                 <?php echo Html::encode($c->user->prenom . ' ' . $c->user->nom); ?>
                                             <?php else: ?>
                                 <?php endforeach; ?>
 
                                 <tr>
-                                        <td><!-- <select class="select-user" name="user_pv_<?php echo $pv->id; ?>">
+                                        <td class="client"><!-- <select class="select-user" name="user_pv_<?php echo $pv->id; ?>">
                                         <?php
                                         foreach ($users as $id_user => $libelle_user) {
                                             echo '<option value="' . $id_user . '">' . $libelle_user . '</option>';
                                 }
                                 ?>
 
-        <?php endif; ?>
-    <?php endforeach; ?>
+                            <?php endif; ?>
+                        <?php endforeach; ?>
                     </tbody>
-                </table>
-                <input type="submit" class="btn btn-primary submit-pv" value="Enregistrer" name="submit_pv" />
-            </form>
+                    </table>
+                    <input type="submit" class="btn btn-primary submit-pv" value="Enregistrer" name="submit_pv" />
+                </form>
+                </div>
+            </div>
+        
+            
             <div class="clr"></div>
 
 

backend/web/css/screen.css

   text-align: center;
 }
 
-/* line 62, ../sass/screen.scss */
-#page-commande #bloc-produits {
-  max-height: 400px;
-  overflow-y: scroll;
-}
-/* line 72, ../sass/screen.scss */
+/* line 68, ../sass/screen.scss */
 #page-commande h1 .btn-group {
   float: right;
 }
-/* line 77, ../sass/screen.scss */
+/* line 73, ../sass/screen.scss */
 #page-commande #jours-production {
   display: none;
 }
-/* line 82, ../sass/screen.scss */
+/* line 79, ../sass/screen.scss */
+#page-commande #calendar h2 {
+  font-size: 20px;
+  position: relative;
+  top: 3px;
+}
+/* line 85, ../sass/screen.scss */
 #page-commande #calendar .fc-header-title {
   margin-left: 10px;
 }
-/* line 88, ../sass/screen.scss */
+/* line 91, ../sass/screen.scss */
 #page-commande #calendar .dayWithEvent {
   background-color: #fee48d;
   cursor: pointer;
 }
-/* line 92, ../sass/screen.scss */
+/* line 95, ../sass/screen.scss */
 #page-commande #calendar .fc-event-container {
   display: none;
 }
-/* line 93, ../sass/screen.scss */
+/* line 96, ../sass/screen.scss */
 #page-commande #calendar .fc-today {
   border-bottom: solid 1px #C9302C;
   background-color: white;
 }
-/* line 97, ../sass/screen.scss */
+/* line 100, ../sass/screen.scss */
 #page-commande #calendar .fc-today.dayWithEvent {
   background-color: #fee48d;
 }
-/* line 102, ../sass/screen.scss */
+/* line 105, ../sass/screen.scss */
 #page-commande #calendar .fc-day {
   cursor: pointer;
   text-align: center;
 }
-/* line 105, ../sass/screen.scss */
+/* line 108, ../sass/screen.scss */
 #page-commande #calendar .fc-day:hover {
   -moz-box-shadow: 0px 0px 2px black inset;
   -webkit-box-shadow: 0px 0px 2px black inset;
   box-shadow: 0px 0px 2px black inset;
 }
-/* line 110, ../sass/screen.scss */
+/* line 113, ../sass/screen.scss */
 #page-commande #calendar .current-date {
   -moz-box-shadow: 0px 0px 2px black inset;
   -webkit-box-shadow: 0px 0px 2px black inset;
   box-shadow: 0px 0px 2px black inset;
 }
-/* line 114, ../sass/screen.scss */
+/* line 117, ../sass/screen.scss */
 #page-commande #calendar .fc-day-number {
   float: none;
   padding-top: 2px;
 }
-/* line 121, ../sass/screen.scss */
+/* line 129, ../sass/screen.scss */
+#page-commande #produits-production .overflow table {
+  width: 100%;
+}
+/* line 133, ../sass/screen.scss */
+#page-commande #produits-production .overflow thead, #page-commande #produits-production .overflow tbody, #page-commande #produits-production .overflow tr, #page-commande #produits-production .overflow td, #page-commande #produits-production .overflow th {
+  display: block;
+}
+/* line 135, ../sass/screen.scss */
+#page-commande #produits-production .overflow tr:after {
+  content: ' ';
+  display: block;
+  visibility: hidden;
+  clear: both;
+}
+/* line 142, ../sass/screen.scss */
+#page-commande #produits-production .overflow thead th {
+  height: 30px;
+  /*text-align: left;*/
+}
+/* line 148, ../sass/screen.scss */
+#page-commande #produits-production .overflow tbody {
+  height: 200px;
+  overflow-y: auto;
+}
+/* line 153, ../sass/screen.scss */
+#page-commande #produits-production .overflow thead {
+  /* fallback */
+}
+/* line 157, ../sass/screen.scss */
+#page-commande #produits-production .overflow thead th {
+  width: 32%;
+  float: left;
+}
+/* line 162, ../sass/screen.scss */
+#page-commande #produits-production .overflow tbody td {
+  width: 33%;
+  float: left;
+}
+/* line 168, ../sass/screen.scss */
 #page-commande #produits-production input.quantite-max {
   background-color: white;
   border: 1px solid #e0e0e0;
   text-align: center;
   width: 50px;
 }
-/* line 129, ../sass/screen.scss */
+/* line 176, ../sass/screen.scss */
+#page-commande #produits-production td label {
+  font-weight: normal;
+}
+/* line 182, ../sass/screen.scss */
 #page-commande .form-commandes-point-vente {
   margin-top: 20px;
 }
-/* line 133, ../sass/screen.scss */
+/* line 186, ../sass/screen.scss */
+#page-commande .form-commandes-point-vente table {
+  border-bottom: solid 1px #e0e0e0;
+}
+/* line 190, ../sass/screen.scss */
 #page-commande .form-commandes-point-vente .title-point-vente {
   background-color: #fff8e2;
   border-left: solid 3px #fdd44b;
   text-align: left;
   padding: 10px;
 }
-/* line 141, ../sass/screen.scss */
+/* line 198, ../sass/screen.scss */
 #page-commande .form-commandes-point-vente .title-totaux {
   text-align: center;
 }
-/* line 145, ../sass/screen.scss */
+/* line 202, ../sass/screen.scss */
+#page-commande .form-commandes-point-vente .border-left {
+  border-left: solid 1px #e0e0e0;
+}
+/* line 206, ../sass/screen.scss */
+#page-commande .form-commandes-point-vente .border-right {
+  border-right: solid 1px #e0e0e0;
+}
+/* line 210, ../sass/screen.scss */
 #page-commande .form-commandes-point-vente input.quantite {
   width: 30px;
   background-color: white;
   border: solid 1px #e0e0e0;
   text-align: center;
 }
-/* line 153, ../sass/screen.scss */
+/* line 218, ../sass/screen.scss */
 #page-commande .form-commandes-point-vente .td-produit {
   text-align: center;
 }
-/* line 157, ../sass/screen.scss */
+/* line 222, ../sass/screen.scss */
 #page-commande .form-commandes-point-vente .submit-pv {
   float: right;
 }
-/* line 161, ../sass/screen.scss */
+/* line 226, ../sass/screen.scss */
 #page-commande .form-commandes-point-vente .select-user {
   background-color: #F9F9F9;
   border: solid 1px #e0e0e0;
 }
-/* line 166, ../sass/screen.scss */
+/* line 231, ../sass/screen.scss */
 #page-commande .form-commandes-point-vente .date-commande {
   font-size: 12px;
 }
-/* line 170, ../sass/screen.scss */
+/* line 235, ../sass/screen.scss */
 #page-commande .form-commandes-point-vente .datepicker, #page-commande .form-commandes-point-vente .text {
   background-color: white;
   border: solid 1px #e0e0e0;
   margin-top: 3px;
   width: 100px;
 }
-/* line 178, ../sass/screen.scss */
+/* line 243, ../sass/screen.scss */
 #page-commande .form-commandes-point-vente td.center {
   text-align: center;
 }
-/* line 184, ../sass/screen.scss */
+/* line 249, ../sass/screen.scss */
 #page-commande .form-commandes-point-vente .depasse {
   color: #b32815;
 }
-/* line 188, ../sass/screen.scss */
+/* line 253, ../sass/screen.scss */
 #page-commande .form-commandes-point-vente .total strong span {
   font-weight: normal;
   font-size: 13px;
 }
-/* line 193, ../sass/screen.scss */
+/* line 258, ../sass/screen.scss */
 #page-commande .form-commandes-point-vente .vrac {
   display: none;
 }
-/* line 203, ../sass/screen.scss */
+/* line 262, ../sass/screen.scss */
+#page-commande .form-commandes-point-vente td.client {
+  text-align: left;
+  padding: 3px;
+}
+/* line 265, ../sass/screen.scss */
+#page-commande .form-commandes-point-vente td.client .date-commande {
+  color: gray;
+}
+/* line 276, ../sass/screen.scss */
 #page-commande .table-header-rotated td {
   width: 20px;
   padding: 0px;
   vertical-align: middle;
   text-align: center;
 }
-/* line 213, ../sass/screen.scss */
+/* line 286, ../sass/screen.scss */
 #page-commande .table-header-rotated th.rotate-45 {
   height: 80px;
   width: 20px;
   font-size: 12px;
   line-height: 0.8;
 }
-/* line 225, ../sass/screen.scss */
+/* line 298, ../sass/screen.scss */
 #page-commande .table-header-rotated th.rotate-45 > div {
   position: relative;
   top: 0px;
   border-right: 1px solid #dddddd;
   border-top: 1px solid #dddddd;
 }
-/* line 241, ../sass/screen.scss */
+/* line 314, ../sass/screen.scss */
 #page-commande .table-header-rotated th.rotate-45 span {
   -ms-transform: skew(45deg, 0deg) rotate(315deg);
   -moz-transform: skew(45deg, 0deg) rotate(315deg);
   /*whether to display in one line or not*/
 }
 
-/* line 266, ../sass/screen.scss */
+/* line 339, ../sass/screen.scss */
 #email-masse-form #ids-users {
   line-height: 30px;
 }
-/* line 268, ../sass/screen.scss */
+/* line 341, ../sass/screen.scss */
 #email-masse-form #ids-users .label {
   text-transform: capitalize;
 }

backend/web/sass/screen.scss

 }
 
 #page-commande {
-        #bloc-produits {
-            max-height: 400px ;
-            overflow-y: scroll ;
-        }
-        
+
         #row2 {
             
         }
 	}
 	
 	#calendar {
+            
+                h2 {
+                    font-size: 20px ;
+                    position: relative ;
+                    top: 3px ;
+                }
+            
 		.fc-header-title {
 			margin-left: 10px ;
 		}
 	}
 	
 	#produits-production {
-		input.quantite-max {
-			background-color: white;
-		    border: 1px solid #e0e0e0;
-		    text-align: center;
-		    width: 50px;
-		}
+            
+            .overflow {
+                //max-height: 400px ;
+                //overflow-y: scroll ;
+                
+                table {
+                    width: 100%;
+                }
+
+                thead, tbody, tr, td, th { display: block; }
+
+                tr:after {
+                    content: ' ';
+                    display: block;
+                    visibility: hidden;
+                    clear: both;
+                }
+
+                thead th {
+                    height: 30px;
+
+                    /*text-align: left;*/
+                }
+
+                tbody {
+                    height: 200px;
+                    overflow-y: auto;
+                }
+
+                thead {
+                    /* fallback */
+                }
+
+                thead th {
+                    width: 32%;
+                    float: left;
+                }
+                
+                tbody td{
+                    width: 33%;
+                    float: left;
+                }
+            }
+            
+            input.quantite-max {
+                background-color: white;
+                border: 1px solid #e0e0e0;
+                text-align: center;
+                width: 50px;
+            }
+
+            td {
+                label {
+                    font-weight: normal ;
+                }
+            }
 	}
 	
 	.form-commandes-point-vente {
 	
 		margin-top: 20px ;
-	
+                
+                table {
+                    border-bottom: solid 1px #e0e0e0 ;
+                }
+                
 		.title-point-vente {
 			background-color: lighten(#fdd44b, 30) ;
 			border-left: solid 3px #fdd44b ;
                 .title-totaux {
                     text-align: center ;
                 }
+                
+                .border-left {
+                    border-left: solid 1px #e0e0e0 ;
+                }
+                
+                .border-right {
+                    border-right: solid 1px #e0e0e0 ;
+                }
 	
 		input.quantite {
 			//width: 50px ;
 		.vrac {
 			display: none ;
 		}
+                
+                td.client {
+                    text-align: left ;
+                    padding: 3px ;
+                    .date-commande {
+                        color: gray ;
+                    }
+                }
 	
 	}