Cacher l'appli pendant son chargement

producer/views/order/order.php

@@ -42,7 +42,7 @@ $this->setTitle('Commander') ;
 
 ?>
 
-<div id="app-order-order">
+<div id="app-order-order" :class="{'loaded': !loading}">
     <div v-if="orderSuccess" class="alert alert-success" id="order-success">
         <span class="glyphicon glyphicon-ok"></span> Votre commande a bien été prise en compte.
     </div>

producer/web/css/screen.css

@@ -1170,22 +1170,30 @@ termes.
   display: none;
 }
 
-/* line 4, ../sass/order/_order.scss */
+/* line 3, ../sass/order/_order.scss */
+.order-order #app-order-order {
+  display: none;
+}
+/* line 7, ../sass/order/_order.scss */
+.order-order #app-order-order.loaded {
+  display: block;
+}
+/* line 11, ../sass/order/_order.scss */
 .order-order #app-order-order #steps {
   margin-bottom: 20px;
 }
-/* line 6, ../sass/order/_order.scss */
+/* line 13, ../sass/order/_order.scss */
 .order-order #app-order-order #steps ul {
   margin-top: 30px;
 }
-/* line 8, ../sass/order/_order.scss */
+/* line 15, ../sass/order/_order.scss */
 .order-order #app-order-order #steps ul li {
   text-align: center;
   padding-right: 8px;
   padding-left: 8px;
   position: relative;
 }
-/* line 14, ../sass/order/_order.scss */
+/* line 21, ../sass/order/_order.scss */
 .order-order #app-order-order #steps ul li .info-step {
   position: absolute;
   top: -30px;
@@ -1193,26 +1201,26 @@ termes.
   width: 100%;
   text-transform: normal;
 }
-/* line 22, ../sass/order/_order.scss */
+/* line 29, ../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: gray;
   position: relative;
   top: 10px;
 }
-/* line 30, ../sass/order/_order.scss */
+/* line 37, ../sass/order/_order.scss */
 .order-order #app-order-order #steps ul li#step-date {
   padding-left: 0px;
 }
-/* line 34, ../sass/order/_order.scss */
+/* line 41, ../sass/order/_order.scss */
 .order-order #app-order-order #steps ul li#step-payment {
   padding-right: 0px;
 }
-/* line 38, ../sass/order/_order.scss */
+/* line 45, ../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 */
+/* line 50, ../sass/order/_order.scss */
 .order-order #app-order-order #steps ul li .btn {
   color: #333;
   text-transform: uppercase;
@@ -1226,142 +1234,142 @@ termes.
   border: 0px none;
   text-transform: uppercase;
 }
-/* line 54, ../sass/order/_order.scss */
+/* line 61, ../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 */
+/* line 66, ../sass/order/_order.scss */
 .order-order #app-order-order #steps ul li .btn.btn-primary {
   background-color: #BB8757;
 }
-/* line 63, ../sass/order/_order.scss */
+/* line 70, ../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 */
+/* line 76, ../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 */
+/* line 83, ../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 */
+/* line 90, ../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 */
+/* line 104, ../sass/order/_order.scss */
 .order-order #app-order-order #steps ul li .btn-primary {
   color: white;
 }
-/* line 105, ../sass/order/_order.scss */
+/* line 112, ../sass/order/_order.scss */
 .order-order #app-order-order #legend #order-date-color,
 .order-order #app-order-order #legend #distribution-date-color {
   width: 13px;
   height: 13px;
   display: inline-block;
 }
-/* line 112, ../sass/order/_order.scss */
+/* line 119, ../sass/order/_order.scss */
 .order-order #app-order-order #legend #order-date-color {
   margin-left: 15px;
   background-color: #018548;
 }
-/* line 116, ../sass/order/_order.scss */
+/* line 123, ../sass/order/_order.scss */
 .order-order #app-order-order #legend #distribution-date-color {
   background-color: #00A65A;
 }
-/* line 121, ../sass/order/_order.scss */
+/* line 128, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar {
   margin-bottom: 15px;
 }
-/* line 123, ../sass/order/_order.scss */
+/* line 130, ../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 126, ../sass/order/_order.scss */
+/* line 133, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar .c-day-background {
   padding: 20px;
 }
-/* line 131, ../sass/order/_order.scss */
+/* line 138, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar .c-day:hover .c-day-background {
   background-color: #F39C12 !important;
 }
-/* line 136, ../sass/order/_order.scss */
+/* line 143, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar .c-day-popover-content {
   font-size: 1.3rem;
 }
-/* line 141, ../sass/order/_order.scss */
+/* line 148, ../sass/order/_order.scss */
 .order-order #app-order-order .block-actions {
   text-align: right;
   margin-top: 20px;
 }
-/* line 148, ../sass/order/_order.scss */
+/* line 155, ../sass/order/_order.scss */
 .order-order #app-order-order table#points-sale td.name .the-name {
   text-transform: uppercase;
   font-family: "myriadpro-regular";
   color: black;
   font-size: 16px;
 }
-/* line 156, ../sass/order/_order.scss */
+/* line 163, ../sass/order/_order.scss */
 .order-order #app-order-order table#points-sale td.actions {
   width: 150px;
 }
-/* line 158, ../sass/order/_order.scss */
+/* line 165, ../sass/order/_order.scss */
 .order-order #app-order-order table#points-sale td.actions button {
   width: 100%;
 }
-/* line 166, ../sass/order/_order.scss */
+/* line 173, ../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 172, ../sass/order/_order.scss */
+/* line 179, ../sass/order/_order.scss */
 .order-order #app-order-order table#products td.name .other {
   font-size: 14px;
   color: #333;
 }
-/* line 176, ../sass/order/_order.scss */
+/* line 183, ../sass/order/_order.scss */
 .order-order #app-order-order table#products td.name .recipe {
   color: gray;
 }
-/* line 180, ../sass/order/_order.scss */
+/* line 187, ../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 184, ../sass/order/_order.scss */
+/* line 191, ../sass/order/_order.scss */
 .order-order #app-order-order table#products .td-quantity {
   width: 150px;
 }
-/* line 186, ../sass/order/_order.scss */
+/* line 193, ../sass/order/_order.scss */
 .order-order #app-order-order table#products .td-quantity input.quantity {
   text-align: center;
 }
-/* line 193, ../sass/order/_order.scss */
+/* line 200, ../sass/order/_order.scss */
 .order-order #app-order-order #content-step-payment .credit {
   margin-top: 20px;
 }
-/* line 196, ../sass/order/_order.scss */
+/* line 203, ../sass/order/_order.scss */
 .order-order #app-order-order #content-step-payment .credit .info {
   margin-left: 20px;
   color: gray;
 }
-/* line 203, ../sass/order/_order.scss */
+/* line 210, ../sass/order/_order.scss */
 .order-order #app-order-order #infos {
   margin-top: 30px;
 }
-/* line 205, ../sass/order/_order.scss */
+/* line 212, ../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

@@ -2,6 +2,7 @@
 var app = new Vue({
     el: '#app-order-order',
     data: {
+        loading: true,
         step: 'date',
         producer: null,
         date: null,
@@ -54,6 +55,8 @@ var app = new Vue({
         },
     },
     mounted: function() {
+        this.loading = false ;
+        
         if($('#distribution-date').size()) {
             this.date = new Date($('#distribution-date').html()) ;
             this.dateFormat = ('0' + this.date.getDate()).slice(-2)+ '/'

producer/web/sass/order/_order.scss

@@ -1,6 +1,13 @@
 
 .order-order {
     #app-order-order {
+        
+        display: none ;
+        
+        &.loaded {
+            display: block ;
+        }
+        
         #steps {
             margin-bottom: 20px ;
             ul {