Backend : nouvel affichage global

Passage du global en haut de la page avec une nouvelle mise en page 
(rotation du header).

backend/views/commande/_total_commandes.php

@@ -13,44 +13,48 @@ use yii\helpers\Html ;
     </div>
     <div class="panel-body">
         <div class="alert alert-warning">
-        <strong>Potentiel :</strong> <?= number_format($ca_potentiel,2); ?> € (<?= $poids_total ?> kg)<br />
+        <strong>Potentiel :</strong> <?= number_format($ca_potentiel,2); ?> € (<?= $poids_total ?> kg) &bull;
         <strong>Commandé :</strong> <?= number_format($recettes_pain,2); ?> € (<?= $poids_pain ?> kg)
     </div>
 
-    <table class="table table-bordered table-condensed tab-content table-produits">
+    <table class="table table-bordered tab-content table-produits  table-header-rotated">
     <tbody>
-        <?php
-        foreach ($produits as $p) {
-            if (isset($produits_selec[$p->id]['actif']) && $produits_selec[$p->id]['actif']) {
-                echo '<tr>' ;
-
-                $quantite = Commande::getQuantiteProduit($p->id, $commandes);
-                $str_quantite = '';
-                if ($quantite)
-                    $str_quantite = $quantite;
-
-                $classe = 'center total';
-                if ($str_quantite > $produits_selec[$p->id]['quantite_max'] && !$produits_selec[$p->id]['vrac']) {
-                    $classe .= ' depasse';
+        <tr>
+            <?php
+            foreach ($produits as $p) {
+                if (isset($produits_selec[$p->id]['actif']) && $produits_selec[$p->id]['actif']) 
+                {
+                    echo '<th class="rotate-45"><div><span>'.Html::encode($p->getLibelleAdmin()).'</span></div></th>' ;
                 }
-
-                if ($p->vrac) {
-                    $classe .= ' vrac';
+            }
+            ?>
+        </tr>
+        <tr>
+            <?php
+            foreach ($produits as $p) {
+                if (isset($produits_selec[$p->id]['actif']) && $produits_selec[$p->id]['actif']) 
+                {
+
+                    $quantite = Commande::getQuantiteProduit($p->id, $commandes);
+                    $str_quantite = '';
+                    if ($quantite)
+                        $str_quantite = $quantite;
+
+                    $classe = 'total';
+                    if ($str_quantite > $produits_selec[$p->id]['quantite_max'] && !$produits_selec[$p->id]['vrac']) 
+                    {
+                        $classe .= ' depasse';
+                    }
+                    echo '<td class="' . $classe . '"><strong>' . $str_quantite . '</strong> ';
+
+                    if ($produits_selec[$p->id]['quantite_max'] && $str_quantite)
+                        echo '<br /><span>' . $produits_selec[$p->id]['quantite_max'] . '</span>';
+                    
+                    echo '</td>' ;
+                    
                 }
-
-                echo '<td class="' . $classe . '"><strong>' . $str_quantite . ' <span>';
-
-                if ($produits_selec[$p->id]['quantite_max'] && $str_quantite)
-                    echo '/ ' . $produits_selec[$p->id]['quantite_max'] . '</span></strong></td>';
-
-                echo '<td>'.Html::encode($p->getLibelleAdmin()).'</td></tr>' ;
             }
-        }
-        ?>
-
-        <tr class="tr-total">
-            <td class="td-total"></td>
-            <td></td>
+            ?>
         </tr>
     </tbody>
     </table>

backend/views/commande/index.php

@@ -116,6 +116,18 @@ foreach ($produits as $p) {
         </ul>
         <?php if ($date != ''): ?>
             
+            <div id="bloc-totaux">
+                <?= $this->render('_total_commandes.php',[
+                        'produits' => $produits, 
+                        'commandes' => $commandes,
+                        'produits_selec' => $produits_selec,
+                        'recettes_pain' => $recettes_pain,
+                        'poids_pain' => $poids_pain,
+                        'ca_potentiel' => $ca_potentiel,
+                        'poids_total' => $poids_total,
+                    ]); ?>
+            </div>
+        
 
             <?php
             $num_jour_semaine = date('w', strtotime($date));
@@ -188,7 +200,6 @@ foreach ($produits as $p) {
                                         <?php endforeach; ?>
                                         </ul>
                                         <?= Html::a('<span class="glyphicon glyphicon-plus"></span> Créer une commande', 'javascript:void(0);', ['class' => 'btn btn-default creer-commande', 'data-pv-id' => $pv->id]) ?>
-                                        <?= Html::a('<span class="glyphicon glyphicon-repeat"></span> Commandes automatiques', ['commandeauto/index'], ['class' => 'btn btn-default commandes-auto', 'data-pv-id' => $pv->id]) ?>
                                     </div>
                                     
                                     <div class="col-md-8">
@@ -237,20 +248,6 @@ foreach ($produits as $p) {
                     
                 </div>
             </div>
-            
-            <div class="clr"></div>
-            
-            <div id="bloc-totaux">
-                <?= $this->render('_total_commandes.php',[
-                        'produits' => $produits, 
-                        'commandes' => $commandes,
-                        'produits_selec' => $produits_selec,
-                        'recettes_pain' => $recettes_pain,
-                        'poids_pain' => $poids_pain,
-                        'ca_potentiel' => $ca_potentiel,
-                        'poids_total' => $poids_total,
-                    ]); ?>
-            </div>
 <?php endif; ?>		
     </div>
 </div>

backend/web/css/screen.css

@@ -658,30 +658,48 @@ a:hover, a:focus, a:active {
 #page-commande .form-commandes-point-vente td.client .date-commande {
   color: gray;
 }
-/* line 657, ../sass/screen.scss */
+/* line 653, ../sass/screen.scss */
+#page-commande .table-header-rotated {
+  border-top: 0px;
+  border-left: 0px;
+  border-right: 0px;
+  width: 100%;
+  width: auto;
+}
+/* line 660, ../sass/screen.scss */
+#page-commande .table-header-rotated .total strong {
+  border-bottom: solid 1px gray;
+}
+/* line 665, ../sass/screen.scss */
+#page-commande .table-header-rotated th.row-header {
+  width: auto;
+}
+/* line 669, ../sass/screen.scss */
 #page-commande .table-header-rotated td {
-  width: 20px;
-  padding: 0px;
+  width: 40px;
   border-top: 1px solid #dddddd;
   border-left: 1px solid #dddddd;
   border-right: 1px solid #dddddd;
   vertical-align: middle;
   text-align: center;
 }
-/* line 667, ../sass/screen.scss */
+/* line 678, ../sass/screen.scss */
 #page-commande .table-header-rotated th.rotate-45 {
+  font-weight: normal;
   height: 80px;
-  width: 20px;
-  min-width: 20px;
-  max-width: 20px;
+  width: 40px;
+  min-width: 40px;
+  max-width: 40px;
   position: relative;
   vertical-align: bottom;
   padding: 0;
-  font-size: 12px;
-  line-height: 0.8;
+  font-size: 14px;
+  line-height: 1;
+  border: 0px none;
 }
-/* line 679, ../sass/screen.scss */
+/* line 692, ../sass/screen.scss */
 #page-commande .table-header-rotated th.rotate-45 > div {
+  background-color: #F5F5F5;
   position: relative;
   top: 0px;
   left: 40px;
@@ -697,7 +715,7 @@ a:hover, a:focus, a:active {
   border-right: 1px solid #dddddd;
   border-top: 1px solid #dddddd;
 }
-/* line 695, ../sass/screen.scss */
+/* line 709, ../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);
@@ -707,64 +725,59 @@ a:hover, a:focus, a:active {
   position: absolute;
   bottom: 30px;
   /* 40 cos(45) = 28 with an additional 2px margin*/
-  bottom: 16px;
   left: -25px;
   /*Because it looked good, but there is probably a mathematical link here as well*/
-  left: 0px;
   display: inline-block;
   width: 85px;
   /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
-  width: 43px;
   text-align: left;
-  white-space: nowrap;
-  /*whether to display in one line or not*/
 }
 
-/* line 720, ../sass/screen.scss */
+/* line 730, ../sass/screen.scss */
 #email-masse-form #ids-users {
   line-height: 30px;
 }
-/* line 722, ../sass/screen.scss */
+/* line 732, ../sass/screen.scss */
 #email-masse-form #ids-users .label {
   text-transform: capitalize;
 }
 
-/* line 730, ../sass/screen.scss */
+/* line 740, ../sass/screen.scss */
 .produit-create #jours-production .form-group, .produit-update #jours-production .form-group {
   float: left;
   margin-right: 15px;
 }
-/* line 734, ../sass/screen.scss */
+/* line 744, ../sass/screen.scss */
 .produit-create #jours-production .form-group label, .produit-update #jours-production .form-group label {
   font-weight: normal;
 }
-/* line 739, ../sass/screen.scss */
+/* line 749, ../sass/screen.scss */
 .produit-create .field-produit-id_etablissement, .produit-update .field-produit-id_etablissement {
   display: none;
 }
 
-/* line 744, ../sass/screen.scss */
+/* line 754, ../sass/screen.scss */
 .table-striped > tbody > tr:nth-of-type(2n) {
   background-color: white;
 }
 
-/* line 749, ../sass/screen.scss */
+/* line 759, ../sass/screen.scss */
 .wrap .produit-index .td-photo {
   max-width: 100px;
   width: 100px;
 }
-/* line 753, ../sass/screen.scss */
+/* line 763, ../sass/screen.scss */
 .wrap .produit-index .photo-produit {
   max-width: 100px;
 }
-/* line 757, ../sass/screen.scss */
+/* line 767, ../sass/screen.scss */
 .wrap .produit-index .ui-state-highlight {
   height: 75px;
   background-color: #F8F1DD;
 }
 
 /* communiquer */
-/* line 765, ../sass/screen.scss */
+/* line 775, ../sass/screen.scss */
 .communiquer-mode-emploi {
   border: solid 1px #e0e0e0;
   padding: 10px;
@@ -774,18 +787,18 @@ a:hover, a:focus, a:active {
   margin-bottom: 30px;
   font-family: "myriadpro-regular";
 }
-/* line 773, ../sass/screen.scss */
+/* line 783, ../sass/screen.scss */
 .communiquer-mode-emploi .header .logo {
   float: left;
   width: 75px;
   padding-right: 20px;
   padding-top: 10px;
 }
-/* line 779, ../sass/screen.scss */
+/* line 789, ../sass/screen.scss */
 .communiquer-mode-emploi .header .logo img {
   width: 75px;
 }
-/* line 785, ../sass/screen.scss */
+/* line 795, ../sass/screen.scss */
 .communiquer-mode-emploi .header h1 {
   font-family: "comfortaaregular";
   font-size: 40px;
@@ -793,7 +806,7 @@ a:hover, a:focus, a:active {
   margin-bottom: 0px;
   font-weight: normal;
 }
-/* line 793, ../sass/screen.scss */
+/* line 803, ../sass/screen.scss */
 .communiquer-mode-emploi .header h2 {
   margin-top: 0px;
   font-family: "myriadpro-regular";
@@ -803,7 +816,7 @@ a:hover, a:focus, a:active {
   left: 2px;
   font-weight: normal;
 }
-/* line 804, ../sass/screen.scss */
+/* line 814, ../sass/screen.scss */
 .communiquer-mode-emploi h3 {
   font-family: "comfortaalight";
   font-family: "myriadpro-regular";
@@ -813,45 +826,45 @@ a:hover, a:focus, a:active {
   margin-bottom: 0px;
 }
 
-/* line 814, ../sass/screen.scss */
+/* line 824, ../sass/screen.scss */
 .communiquer-mode-emploi-encart {
   width: 420px;
   margin-top: 20px;
 }
-/* line 818, ../sass/screen.scss */
+/* line 828, ../sass/screen.scss */
 .communiquer-mode-emploi-encart .header .logo {
   width: 60px;
   margin-right: 20px;
   padding-top: 5px;
 }
-/* line 823, ../sass/screen.scss */
+/* line 833, ../sass/screen.scss */
 .communiquer-mode-emploi-encart .header .logo img {
   width: 60px;
 }
-/* line 829, ../sass/screen.scss */
+/* line 839, ../sass/screen.scss */
 .communiquer-mode-emploi-encart .header h1 {
   margin-bottom: 3px;
 }
-/* line 838, ../sass/screen.scss */
+/* line 848, ../sass/screen.scss */
 .communiquer-mode-emploi-encart h3 {
   margin-top: 15px;
   margin-bottom: 15px;
 }
 
-/* line 844, ../sass/screen.scss */
+/* line 854, ../sass/screen.scss */
 .bloc-mode-emploi-pdf {
   width: 49.9%;
   float: left;
   border-bottom: dotted 1px gray;
 }
 
-/* line 850, ../sass/screen.scss */
+/* line 860, ../sass/screen.scss */
 .bloc-mode-emploi-border {
   border-right: dotted 1px gray;
   border-bottom: dotted 1px gray;
 }
 
-/* line 855, ../sass/screen.scss */
+/* line 865, ../sass/screen.scss */
 .communiquer-mode-emploi-pdf {
   border: 0px none;
   -moz-border-radius: 0px;
@@ -860,88 +873,88 @@ a:hover, a:focus, a:active {
   margin-bottom: 0px;
   padding: 20px 0px 20px 30px;
 }
-/* line 863, ../sass/screen.scss */
+/* line 873, ../sass/screen.scss */
 .communiquer-mode-emploi-pdf .header .logo {
   float: left;
   width: 55px;
   padding-right: 15px;
   padding-top: 10px;
 }
-/* line 869, ../sass/screen.scss */
+/* line 879, ../sass/screen.scss */
 .communiquer-mode-emploi-pdf .header .logo img {
   width: 55px;
 }
-/* line 873, ../sass/screen.scss */
+/* line 883, ../sass/screen.scss */
 .communiquer-mode-emploi-pdf .header h1 {
   font-size: 32px;
 }
-/* line 876, ../sass/screen.scss */
+/* line 886, ../sass/screen.scss */
 .communiquer-mode-emploi-pdf .header h2 {
   font-size: 16px;
 }
-/* line 881, ../sass/screen.scss */
+/* line 891, ../sass/screen.scss */
 .communiquer-mode-emploi-pdf h3 {
   font-weight: normal;
 }
 
-/* line 886, ../sass/screen.scss */
+/* line 896, ../sass/screen.scss */
 .bloc-mode-emploi-bottom {
   border-bottom: 0px none;
   border-bottom: solid 1px white;
 }
 
 /* commandes auto */
-/* line 896, ../sass/screen.scss */
+/* line 906, ../sass/screen.scss */
 .commandeauto-form #bloc-select-user {
   padding-left: 0px;
 }
-/* line 900, ../sass/screen.scss */
+/* line 910, ../sass/screen.scss */
 .commandeauto-form #or-user {
   font-size: 20px;
   text-align: center;
 }
-/* line 903, ../sass/screen.scss */
+/* line 913, ../sass/screen.scss */
 .commandeauto-form #or-user span {
   position: relative;
   top: 24px;
 }
-/* line 909, ../sass/screen.scss */
+/* line 919, ../sass/screen.scss */
 .commandeauto-form .field-commandeautoform-id_etablissement {
   display: none;
 }
-/* line 913, ../sass/screen.scss */
+/* line 923, ../sass/screen.scss */
 .commandeauto-form .jours .form-group {
   float: left;
   margin-right: 20px;
 }
-/* line 920, ../sass/screen.scss */
+/* line 930, ../sass/screen.scss */
 .commandeauto-form .produits .table {
   width: 500px;
 }
-/* line 923, ../sass/screen.scss */
+/* line 933, ../sass/screen.scss */
 .commandeauto-form .produits .quantite {
   text-align: center;
 }
 
 /* points de vente */
-/* line 932, ../sass/screen.scss */
+/* line 942, ../sass/screen.scss */
 .point-vente-form #pointvente-users {
   display: none;
   height: 500px;
   overflow-y: scroll;
 }
-/* line 936, ../sass/screen.scss */
+/* line 946, ../sass/screen.scss */
 .point-vente-form #pointvente-users label {
   font-weight: normal;
   display: block;
 }
 
 /* utilisateurs */
-/* line 946, ../sass/screen.scss */
+/* line 956, ../sass/screen.scss */
 .user-index .input-group {
   width: 180px;
 }
-/* line 949, ../sass/screen.scss */
+/* line 959, ../sass/screen.scss */
 .user-index .input-group .input-credit {
   text-align: center;
 }

backend/web/sass/screen.scss

@@ -650,13 +650,24 @@ a {
 	
 	}
         
+        .table-header-rotated {
+            border-top: 0px ;
+            border-left: 0px ;
+            border-right: 0px ;
+            width: 100% ;
+            width: auto ;
+            
+            .total strong {
+                border-bottom: solid 1px gray ;
+            }
+        }
+        
         .table-header-rotated th.row-header{
-            //width: auto;
+            width: auto;
           }
 
           .table-header-rotated td{
-            width: 20px;
-            padding: 0px ;
+            width: 40px;
             border-top: 1px solid #dddddd;
             border-left: 1px solid #dddddd;
             border-right: 1px solid #dddddd;
@@ -665,18 +676,21 @@ a {
           }
 
           .table-header-rotated th.rotate-45{
+           font-weight: normal ;
             height: 80px;
-            width: 20px;
-            min-width: 20px;
-            max-width: 20px;
+            width: 40px;
+            min-width: 40px;
+            max-width: 40px;
             position: relative;
             vertical-align: bottom;
             padding: 0;
-            font-size: 12px;
-            line-height: 0.8;
+            font-size: 14px;
+            line-height: 1;
+            border: 0px none;
           }
 
           .table-header-rotated th.rotate-45 > div{
+              background-color: #F5F5F5 ;
             position: relative;
             top: 0px;
             left: 40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
@@ -700,19 +714,15 @@ a {
             transform:skew(45deg,0deg) rotate(315deg);
             position: absolute;
             bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
-            bottom: 16px; // pour width 20px
             left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
-            left: 0px ;
             display: inline-block;
             // width: 100%;
             width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
-            width: 43px ;
             text-align: left;
-             white-space: nowrap; /*whether to display in one line or not*/
+            // white-space: nowrap; /*whether to display in one line or not*/
           }
 	
 	
-	
 }