Section étapes sous forme de flèches.

Suppression du résumé sur la droite pour l'intégrer directement au niveau des flèches.

producer/controllers/OrderController.php

@@ -601,9 +601,12 @@ class OrderController extends ProducerBaseController
         $json['distributions'] = $distributionsArray ;
         
         // Producteur
-        $json['producer'] = Producer::searchOne([
+        $producer = Producer::searchOne([
             'id' => $this->getProducer()->id
         ]) ;
+        $json['producer'] = [
+            'order_infos' => $producer->order_infos
+        ] ;
         
         if($dateObject && $dateObject->format($format) === $date) {
             // distribution

producer/views/order/order.php

@@ -43,26 +43,37 @@ $this->setTitle('Commander') ;
 ?>
 
 <div id="app-order-order">
-    <div :class="(producer.order_infos.length) ? 'col-md-9' : 'col-md-12'">
+    <div :class="(producer != null && producer.order_infos.length) ? 'col-md-9' : 'col-md-12'">
         <div id="steps">
             <ul>
                 <li id="step-date" :class="'col-md-3 '+((step == 'date') ? 'active' : '')">
-                    <a v-if="date" @click="changeStep('date')" href="javascript:void(0);">Date</a>
-                    <span v-else>Date</span> 
-                    <span class="glyphicon glyphicon-chevron-right"></span>
+                    <div class="info-step" v-if="dateFormat">
+                        {{ dateFormat }}
+                    </div>
+                    <button @click="changeStep('date')" :class="'btn '+ (step == 'date' ? 'btn-primary' : 'btn-default')">
+                        <span class="button-content"><span class="glyphicon glyphicon-time"></span> Date</span></span>
+                    </button>
                 </li>
-                <li id="step-point-sale" :class="'col-md-3 '+((step == 'point-sale') ? 'active' : '')">
-                    <a v-if="pointSaleActive" @click="changeStep('point-sale')" href="javascript:void(0);">Points de vente</a>
-                    <span v-else>Points de vente</span> 
-                    <span class="glyphicon glyphicon-chevron-right"></span>
+                <li id="step-point-sale" :class="'col-md-3 '+((step == 'point-sale') ? 'active ' : '')">
+                    <div class="info-step" v-if="pointSaleActive">
+                        {{ pointSaleActive.name }}
+                    </div>
+                    <button @click="changeStep('point-sale')" :class="'btn '+ (step == 'point-sale' ? 'btn-primary' : 'btn-default')" :disabled="step == 'date'">
+                        <span class="button-content"><span class="glyphicon glyphicon-map-marker"></span> Points de vente</span>
+                    </button>
                 </li>
-                <li id="step-products" :class="'col-md-3 '+((step == 'products') ? 'active' : '')">
-                    <a v-if="oneProductOrdered()" @click="changeStep('products')" href="javascript:void(0);">Produits</a>
-                    <span v-else>Produits</span> 
-                    <span class="glyphicon glyphicon-chevron-right"></span>
+                <li id="step-products" :class="'col-md-3 '+((step == 'products') ? 'active ' : '')">
+                    <div class="info-step" v-if="oneProductOrdered()">
+                        {{ countProductOrdered() }} produit{{ (countProductOrdered() > 1) ? 's' : '' }}
+                    </div>
+                    <button @click="changeStep('products')" :class="'btn '+ (step == 'products' ? 'btn-primary' : 'btn-default')" :disabled="step == 'date' || step == 'point-sale'">
+                        <span class="button-content"><span class="glyphicon glyphicon-th-list"></span> Produits</span>
+                    </button>
                 </li>
                 <li id="step-payment" :class="'col-md-3 '+((step == 'payment') ? 'active' : '')">
-                    Paiement
+                    <button @click="changeStep('payment')" :class="'btn '+ (step == 'payment' ? 'btn-primary' : 'btn-default')" :disabled="step == 'date' || step == 'point-sale' || step == 'products'">
+                        <span class="button-content"><span class="glyphicon glyphicon-ok"></span> Paiement</span>
+                    </button>
                 </li>
             </ul>
             <div class="clr"></div>
@@ -175,7 +186,7 @@ $this->setTitle('Commander') ;
             </div>
         </div>
     </div>
-    <div id="infos" class="col-md-3" v-if="producer.order_infos.length">
+    <div id="infos" class="col-md-3" v-if="producer != null && producer.order_infos.length">
         <div class="panel panel-default">
             <div class="panel-heading">
                 Informations

producer/web/css/screen.css

@@ -1174,74 +1174,145 @@ termes.
 .order-order #app-order-order #steps {
   margin-bottom: 20px;
 }
-/* line 7, ../sass/order/_order.scss */
+/* line 6, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul {
+  margin-top: 30px;
+}
+/* line 8, ../sass/order/_order.scss */
 .order-order #app-order-order #steps ul li {
   text-align: center;
-  text-transform: uppercase;
+  padding-right: 8px;
+  padding-left: 8px;
+  position: relative;
 }
-/* line 11, ../sass/order/_order.scss */
-.order-order #app-order-order #steps ul li.active, .order-order #app-order-order #steps ul li.active a {
-  color: #BB8757;
+/* line 14, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li .info-step {
+  position: absolute;
+  top: -30px;
+  left: 0px;
+  width: 100%;
+  text-transform: normal;
 }
-/* line 15, ../sass/order/_order.scss */
-.order-order #app-order-order #steps ul li .glyphicon, .order-order #app-order-order #steps ul li.active .glyphicon {
+/* line 22, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li .glyphicon-chevron-right, .order-order #app-order-order #steps ul li.active .glyphicon-chevron-right {
   float: right;
-  color: #333;
+  color: gray;
+  position: relative;
+  top: 10px;
 }
-/* line 20, ../sass/order/_order.scss */
-.order-order #app-order-order #steps ul li a {
+/* line 30, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li#step-date {
+  padding-left: 0px;
+}
+/* line 34, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li#step-payment {
+  padding-right: 0px;
+}
+/* line 38, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li#step-payment .btn::after, .order-order #app-order-order #steps ul li#step-date .btn::before {
+  display: none;
+}
+/* line 43, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li .btn {
   color: #333;
+  text-transform: uppercase;
+  display: block;
+  width: 100%;
+  position: relative;
+  background-color: #e0e0e0;
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px;
+  border: 0px none;
+  text-transform: uppercase;
+}
+/* line 54, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li .btn .button-content {
+  position: relative;
+  left: 8px;
+}
+/* line 59, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li .btn.btn-primary {
+  background-color: #BB8757;
 }
-/* line 26, ../sass/order/_order.scss */
+/* line 63, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li .btn::after, .order-order #app-order-order #steps ul li .btn::before {
+  content: "";
+  position: absolute;
+  top: -1px;
+}
+/* line 69, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li .btn::after {
+  right: -34px;
+  border: 17px solid transparent;
+  border-left: 17px solid #e0e0e0;
+  background-color: transparent;
+}
+/* line 76, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li .btn::before {
+  left: 0px;
+  border: 17px solid transparent;
+  border-left: 17px solid white;
+  background-color: transparent;
+}
+/* line 83, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li .btn.btn-primary::after {
+  border-left: 17px solid #BB8757;
+}
+/* line 97, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li .btn-primary {
+  color: white;
+}
+/* line 103, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar {
   margin-bottom: 15px;
 }
-/* line 28, ../sass/order/_order.scss */
+/* line 105, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title[data-v-2083cb72] {
   font-size: 2rem;
 }
-/* line 31, ../sass/order/_order.scss */
+/* line 108, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar .c-day-background {
   padding: 20px;
 }
-/* line 34, ../sass/order/_order.scss */
+/* line 111, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar .c-day-popover-content {
   font-size: 1.3rem;
 }
-/* line 39, ../sass/order/_order.scss */
+/* line 116, ../sass/order/_order.scss */
 .order-order #app-order-order .block-actions {
   text-align: right;
 }
-/* line 45, ../sass/order/_order.scss */
+/* line 122, ../sass/order/_order.scss */
 .order-order #app-order-order table#products td.name .name {
   text-transform: uppercase;
   font-family: "myriadpro-regular";
   color: black;
   font-size: 16px;
 }
-/* line 51, ../sass/order/_order.scss */
+/* line 128, ../sass/order/_order.scss */
 .order-order #app-order-order table#products td.name .other {
   font-size: 14px;
   color: #333;
 }
-/* line 55, ../sass/order/_order.scss */
+/* line 132, ../sass/order/_order.scss */
 .order-order #app-order-order table#products td.name .recipe {
   color: gray;
 }
-/* line 59, ../sass/order/_order.scss */
+/* line 136, ../sass/order/_order.scss */
 .order-order #app-order-order table#products .price-unit, .order-order #app-order-order table#products .price-total {
   width: 100px;
   text-align: center;
 }
-/* line 63, ../sass/order/_order.scss */
+/* line 140, ../sass/order/_order.scss */
 .order-order #app-order-order table#products .td-quantity {
   width: 150px;
 }
-/* line 65, ../sass/order/_order.scss */
+/* line 142, ../sass/order/_order.scss */
 .order-order #app-order-order table#products .td-quantity input.quantity {
   text-align: center;
 }
-/* line 72, ../sass/order/_order.scss */
+/* line 149, ../sass/order/_order.scss */
 .order-order #app-order-order #infos .panel-body {
   padding-top: 0px;
   white-space: pre-line;

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

@@ -147,6 +147,15 @@ var app = new Vue({
             } 
             return false ;
         },
+        countProductOrdered: function() {
+            var count = 0 ;
+            for(var key in this.products) {
+                if(this.products[key].quantity_form > 0) {
+                    count += this.products[key].quantity_form ;
+                }
+            }
+            return count ;
+        },
         priceTotal: function() {
             var price = 0 ;
             for(var key in this.products) {

producer/web/sass/order/_order.scss

@@ -4,21 +4,98 @@
         #steps {
             margin-bottom: 20px ;
             ul {
+                margin-top: 30px ;
                 li {
                     text-align: center ;
-                    text-transform: uppercase ;
+                    padding-right: 8px ;
+                    padding-left: 8px ;
+                    position: relative ;
                     
-                    &.active, &.active a {
-                        color: $color1 ;
+                    .info-step {
+                        position: absolute ;
+                        top: -30px ;
+                        left: 0px ;
+                        width: 100% ;
+                        text-transform: normal ;
                     }
                     
-                    .glyphicon, &.active .glyphicon {
+                    .glyphicon-chevron-right, 
+                    &.active .glyphicon-chevron-right {
                         float: right ;
-                        color: #333 ;
+                        color: gray ;
+                        position: relative ;
+                        top: 10px ;
+                    }
+                    
+                    &#step-date {
+                        padding-left: 0px ;
+                    }
+                    
+                    &#step-payment {
+                        padding-right: 0px ;
+                    }
+                    
+                    &#step-payment .btn::after,
+                    &#step-date .btn::before {
+                        display: none ;
                     }
                     
-                    a {
+                    .btn {
                         color: #333 ;
+                        text-transform: uppercase ;
+                        display: block ;
+                        width: 100% ;
+                        position: relative ;
+                        background-color: #e0e0e0 ;
+                        @include border-radius(0px) ;
+                        border: 0px none ;
+                        text-transform: uppercase ;
+                        
+                        .button-content {
+                            position: relative;
+                            left: 8px ;
+                        }
+                        
+                        &.btn-primary {
+                            background-color: $color1 ;
+                        }
+                        
+                        &::after, &::before {
+                            content: '' ;
+                            position: absolute ;
+                            top: -1px ;
+                        }
+                        
+                        &::after {
+                            right: -34px ;
+                            border:17px solid transparent;
+                            border-left:17px solid #e0e0e0;
+                            background-color: transparent ;
+                        }
+                        
+                        &::before {
+                            left: 0px ;
+                            border:17px solid transparent;
+                            border-left:17px solid white;
+                            background-color: transparent ;
+                        }
+                        
+                        &.btn-primary::after {
+                            border-left:17px solid $color1;
+                        }
+                        
+                        &:hover {
+                            //background-color: lighten($color1, 5) ; 
+                        }
+                        
+                        &:hover::after {
+                            //border:17px solid transparent;
+                            //border-left:17px solid #fefefe;
+                        }
+                    }
+                    
+                    .btn-primary {
+                        color: white ;
                     }
                 }
             }