Améliorer page commande (bar-fixed, photos)

frontend/views/commande/_form.php

@@ -37,12 +37,16 @@ use yii\widgets\ActiveForm;
     <?= $form->field($model, 'id_production')->label('')->hiddenInput(); ?>
 
     <?php if (isset($model->id)): ?>
-        <h2><?php echo date('d/m/Y', strtotime($production->date)); ?></h2>
+    <div class="date-commande"><span><?php echo date('d/m/Y', strtotime($production->date)); ?></span></div>
     <?php endif; ?>
 
     <div id="datepicker-production" <?php if (isset($model->id)): ?>style="display:none"<?php endif; ?>>
     </div>
-    <br />
+    
+    <?php if (!isset($model->id)): ?>    
+        <br />
+    <?php endif; ?>
+        
     <div id="dates" style="display:none;">
         <?php
         foreach ($jours_production as $id_production => $j) {
@@ -119,6 +123,7 @@ use yii\widgets\ActiveForm;
             <table class="table table-bordered" id="table-produits">
                 <thead>
                     <tr>
+                        <th class="th-photo">Photo</th>
                         <th class="produit">Produit</th>
                         <th class="prix-unit">Prix unitaire</th>
                         <th class="colonne-quantite">Quantité</th>
@@ -128,8 +133,10 @@ use yii\widgets\ActiveForm;
                 <tbody>
                     <?php foreach ($produits as $p): ?>
                         <tr class="produit-<?php echo $p->id; ?>" <?php if (count($produits_dispos) && !$produits_dispos[$p->id]['actif']): ?>style="display:none;"<?php endif; ?>>
+                            <td class="td-photo">
+                                <?php if (strlen($p->photo) && file_exists(dirname(__FILE__).'/../../web/uploads/' . $p->photo)): ?><a href="<?= Yii::$app->urlManager->getBaseUrl() . '/uploads/' . $p->photo ?>" data-lightbox="produit-<?php echo $p->id; ?>"><img class="photo img-rounded" src="<?= Yii::$app->urlManager->getBaseUrl() . '/uploads/' . $p->photo ?>" alt="Photo <?= Html::encode($p->nom); ?>" /></a><?php endif; ?>
+                            </td>
                             <td class="produit">
-    <?php if (strlen($p->photo) && file_exists(dirname(__FILE__).'/../../web/uploads/' . $p->photo)): ?><br /><a href="<?= Yii::$app->urlManager->getBaseUrl() . '/uploads/' . $p->photo ?>" data-lightbox="produit-<?php echo $p->id; ?>"><img class="photo img-rounded img-thumbnail" src="<?= Yii::$app->urlManager->getBaseUrl() . '/uploads/' . $p->photo ?>" alt="Photo <?= Html::encode($p->nom); ?>" /></a><?php endif; ?>
                                 <span class="nom"><?= Html::encode($p->nom); ?></span> - <span class="description"><?= Html::encode($p->getDescription()); ?></span><br />
                                 <span class="recette"><?= Html::encode($p->recette); ?></span>
                             </td>

frontend/web/css/screen.css

@@ -659,46 +659,61 @@ h2 {
   border-color: #cdc3b7;
 }
 /* line 232, ../sass/_systeme_commandes.scss */
+.commande-form .date-commande {
+  margin-bottom: 53px;
+}
+/* line 234, ../sass/_systeme_commandes.scss */
+.commande-form .date-commande span {
+  background-color: #BB8757;
+  color: white;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  padding: 10px;
+  font-family: "myriadpro-regular";
+  font-size: 20px;
+}
+/* line 244, ../sass/_systeme_commandes.scss */
 .commande-form #has-commande-en-cours {
   margin-top: 15px;
 }
-/* line 235, ../sass/_systeme_commandes.scss */
+/* line 247, ../sass/_systeme_commandes.scss */
 .commande-form #has-commande-en-cours a {
   color: #a94442;
   text-decoration: none;
   font-weight: bold;
 }
-/* line 242, ../sass/_systeme_commandes.scss */
+/* line 254, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_production {
   display: none;
 }
-/* line 246, ../sass/_systeme_commandes.scss */
+/* line 258, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_point_vente {
   margin-top: 30px;
 }
-/* line 250, ../sass/_systeme_commandes.scss */
+/* line 262, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_production {
   margin-bottom: 0px;
 }
-/* line 252, ../sass/_systeme_commandes.scss */
+/* line 264, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_production label {
   margin-bottom: 0px;
 }
-/* line 256, ../sass/_systeme_commandes.scss */
+/* line 268, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_production .help-block {
   margin-bottom: 0px;
 }
-/* line 261, ../sass/_systeme_commandes.scss */
+/* line 273, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_point_vente {
   display: none;
 }
-/* line 265, ../sass/_systeme_commandes.scss */
+/* line 277, ../sass/_systeme_commandes.scss */
 .commande-form .blocs {
   list-style-type: none;
   margin: 0px;
   padding: 0px;
 }
-/* line 270, ../sass/_systeme_commandes.scss */
+/* line 282, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc {
   text-decoration: none;
   width: 268px;
@@ -713,104 +728,107 @@ h2 {
   background-color: white;
   border: 1px solid #d8d8d8;
 }
-/* line 285, ../sass/_systeme_commandes.scss */
+/* line 297, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc .nom {
   font-family: "comfortaalight";
   font-size: 20px;
 }
-/* line 291, ../sass/_systeme_commandes.scss */
+/* line 303, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc .adresse {
   color: gray;
   font-size: 13px;
   line-height: 16px;
 }
-/* line 297, ../sass/_systeme_commandes.scss */
+/* line 309, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc .horaires {
   margin-top: 7px;
 }
-/* line 299, ../sass/_systeme_commandes.scss */
+/* line 311, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc .horaires .jour {
   font-weight: bold;
   display: none;
 }
-/* line 305, ../sass/_systeme_commandes.scss */
+/* line 317, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc.selected {
   border-left: solid 5px #BB8757;
 }
-/* line 309, ../sass/_systeme_commandes.scss */
+/* line 321, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc.selected .contenu {
   position: relative;
   left: -4px;
 }
-/* line 315, ../sass/_systeme_commandes.scss */
+/* line 327, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc:hover {
   -moz-box-shadow: 0px 0px 5px #d8d8d8;
   -webkit-box-shadow: 0px 0px 5px #d8d8d8;
   box-shadow: 0px 0px 5px #d8d8d8;
 }
-/* line 320, ../sass/_systeme_commandes.scss */
+/* line 332, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc.disabled {
   display: none;
 }
-/* line 327, ../sass/_systeme_commandes.scss */
+/* line 339, ../sass/_systeme_commandes.scss */
 .commande-form #produits {
   margin-top: 15px;
 }
-/* line 330, ../sass/_systeme_commandes.scss */
+/* line 342, ../sass/_systeme_commandes.scss */
 .commande-form #produits #label-produits {
   display: block;
   margin-bottom: 5px;
 }
-/* line 335, ../sass/_systeme_commandes.scss */
+/* line 347, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table {
   margin-top: 7px;
 }
-/* line 338, ../sass/_systeme_commandes.scss */
+/* line 350, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .illu {
   float: left;
   height: auto;
   width: 70px;
   margin-right: 15px;
 }
-/* line 345, ../sass/_systeme_commandes.scss */
+/* line 357, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .photo {
-  float: right;
-  margin-left: 10px;
-  width: 200px;
+  padding: 0px;
+  width: 120px;
+}
+/* line 362, ../sass/_systeme_commandes.scss */
+.commande-form #produits .table .th-photo, .commande-form #produits .table .td-photo {
+  width: 120px;
 }
-/* line 351, ../sass/_systeme_commandes.scss */
+/* line 366, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .nom {
   font-family: "comfortaalight";
   font-weight: bold;
   text-transform: uppercase;
   font-size: 18px;
 }
-/* line 358, ../sass/_systeme_commandes.scss */
+/* line 373, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .description {
   font-style: italic;
 }
-/* line 362, ../sass/_systeme_commandes.scss */
+/* line 377, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .recette {
   font-size: 12px;
 }
-/* line 366, ../sass/_systeme_commandes.scss */
+/* line 381, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .input-group {
   width: 133px;
 }
-/* line 368, ../sass/_systeme_commandes.scss */
+/* line 383, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .input-group .quantity {
   text-align: center;
 }
-/* line 373, ../sass/_systeme_commandes.scss */
+/* line 388, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .colonne-quantite, .commande-form #produits .table .prix-unit, .commande-form #produits .table .total {
   width: 150px;
   text-align: center;
 }
-/* line 378, ../sass/_systeme_commandes.scss */
+/* line 393, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table td#total-commande, .commande-form #produits .table td#total-commande-vrac, .commande-form #produits .table td.total {
   text-align: center;
 }
-/* line 382, ../sass/_systeme_commandes.scss */
+/* line 397, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .epuise {
   display: none;
   text-transform: uppercase;
@@ -819,49 +837,63 @@ h2 {
   font-size: 16px;
   text-align: center;
 }
-/* line 391, ../sass/_systeme_commandes.scss */
+/* line 406, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .quantite-restante {
   font-size: 12px;
   margin-top: 8px;
 }
-/* line 395, ../sass/_systeme_commandes.scss */
+/* line 410, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .quantite-restante .nb {
   font-weight: bold;
 }
-/* line 400, ../sass/_systeme_commandes.scss */
+/* line 415, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table td.produit, .commande-form #produits .table th.produit {
   width: 70%;
 }
-/* line 404, ../sass/_systeme_commandes.scss */
+/* line 419, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table td.prix-unit, .commande-form #produits .table th.prix-unit {
   width: 10%;
 }
-/* line 408, ../sass/_systeme_commandes.scss */
+/* line 423, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table td.colonne-quantite, .commande-form #produits .table th.colonne-quantite {
   width: 10%;
 }
-/* line 412, ../sass/_systeme_commandes.scss */
+/* line 427, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table td.total, .commande-form #produits .table th.total {
   width: 10%;
 }
-/* line 418, ../sass/_systeme_commandes.scss */
+/* line 433, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed {
   position: fixed;
   bottom: 0px;
-  left: 0px;
   z-index: 100;
-  width: 100%;
   background-color: white;
   padding: 15px;
   margin-bottom: 0px;
-  -moz-box-shadow: 0 0 5px #e0e0e0;
-  -webkit-box-shadow: 0 0 5px #e0e0e0;
-  box-shadow: 0 0 5px #e0e0e0;
+  -moz-box-shadow: 0 0 5px gray;
+  -webkit-box-shadow: 0 0 5px gray;
+  box-shadow: 0 0 5px gray;
+  -moz-border-radius: 10px 10px 0px 0px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px 10px 0px 0px;
   border-top: solid 1px #e0e0e0;
   background-color: #F9F9F9;
+  background-color: #F8F1DD;
   text-align: center;
 }
-/* line 432, ../sass/_systeme_commandes.scss */
+/* line 449, ../sass/_systeme_commandes.scss */
+.commande-form #bar-fixed.not-fixed {
+  position: relative;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px;
+  border: solid 1px #e0e0e0;
+  padding-right: 20px;
+}
+/* line 457, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed #total-commande-bottom {
   background-color: white;
   -moz-border-radius: 20px;
@@ -870,37 +902,37 @@ h2 {
   padding: 5px 25px;
   border: solid 1px #e0e0e0;
 }
-/* line 439, ../sass/_systeme_commandes.scss */
+/* line 464, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed .valider-commande, .commande-form #bar-fixed .btn-commentaire {
   float: right;
 }
-/* line 443, ../sass/_systeme_commandes.scss */
+/* line 468, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed .btn-commentaire {
   margin-right: 10px;
 }
-/* line 447, ../sass/_systeme_commandes.scss */
+/* line 472, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed .btn-retour, .commande-form #bar-fixed .annuler-commande {
   float: left;
   margin-right: 5px;
 }
-/* line 452, ../sass/_systeme_commandes.scss */
+/* line 477, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed .annuler-commande {
   color: #b92c28;
   background-color: white;
 }
-/* line 457, ../sass/_systeme_commandes.scss */
+/* line 482, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed #total-commande-bottom {
   display: none;
   font-weight: bold;
   font-family: "comfortaalight";
   font-size: 24px;
 }
-/* line 464, ../sass/_systeme_commandes.scss */
+/* line 489, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed .field-commande-commentaire {
   display: none;
 }
 
-/* line 472, ../sass/_systeme_commandes.scss */
+/* line 497, ../sass/_systeme_commandes.scss */
 .ui-datepicker .ui-widget-header {
   background: none;
   background-color: gray;
@@ -908,7 +940,7 @@ h2 {
   color: black;
   font-weight: normal;
 }
-/* line 480, ../sass/_systeme_commandes.scss */
+/* line 505, ../sass/_systeme_commandes.scss */
 .ui-datepicker .ui-datepicker-current-day a,
 .ui-datepicker a.ui-state-hover {
   background: none;

frontend/web/js/lechatdesnoisettes.js

@@ -299,7 +299,21 @@ function chat_systeme_commande() {
             return false ;
         }) ;
         
-	
+        // bar fixed
+        if($('#bar-fixed').size()) {
+            $(window).scroll(function (event) {
+                var scroll = $(window).scrollTop() + $(window).height();
+                var pos_bottom_produits = $('#table-produits').offset().top + $('#table-produits').height() + 100 ;
+                if(scroll > pos_bottom_produits) {
+                    if(!$('#bar-fixed').hasClass('not-fixed')) {
+                        $('#bar-fixed').addClass('not-fixed') ;
+                    }
+                }
+                else {
+                    $('#bar-fixed').removeClass('not-fixed') ;
+                }
+            });
+        }
 }
 
 function chat_systeme_commande_produits_dispos(str_date, date) {

frontend/web/sass/_systeme_commandes.scss

@@ -228,6 +228,18 @@ h2 {
                     }
                 }
 	}
+        
+        .date-commande {
+            margin-bottom: 53px ;
+            span {
+                background-color: $color1 ;
+                color: white ;
+                @include border-radius(10px) ;
+                padding: 10px ;
+                font-family: "myriadpro-regular"; 
+                font-size: 20px ;
+            }
+        }
 	
 	#has-commande-en-cours {
 		margin-top: 15px ;
@@ -343,10 +355,13 @@ h2 {
 			}
 			
 			.photo {
-				float: right ;
-				margin-left: 10px ;
-				width: 200px ;
+                                padding: 0px ;
+                                width: 120px ;
 			}
+                        
+                        .th-photo, .td-photo {
+                            width: 120px ;
+                        }
 			
 			.nom  {
 				font-family: "comfortaalight" ;
@@ -418,17 +433,27 @@ h2 {
 	#bar-fixed {
                 position: fixed ;
                 bottom: 0px ;
-                left: 0px ;
+                //left: 0px ;
                 z-index: 100 ;
-                width: 100% ;
+                //width: 100% ;
                 background-color: white ;
                 padding: 15px ;
                 margin-bottom: 0px ;
-                @include box-shadow(0 0 5px #e0e0e0) ;
+                @include box-shadow(0 0 5px gray) ;
+                @include border-radius(10px 10px 0px 0px) ;
                 border-top: solid 1px #e0e0e0 ;
                 background-color: #F9F9F9 ;
+                background-color: $color2 ;
                 text-align: center ;
                 
+                &.not-fixed {
+                    position: relative ;
+                    @include box-shadow(none) ;
+                    @include border-radius(0px) ;
+                    border: solid 1px #e0e0e0 ;
+                    padding-right: 20px ;
+                }
+                
                 #total-commande-bottom {
                     background-color: white ;
                     @include border-radius(20px) ;