Compatibilité mobiles

producer/views/order/order.php

                 <transition name="slide">
                     <div id="content-step-date" v-if="step == 'date'">
                             <div id="legend">
-                                <span id="distribution-date-color"></span> Prochains jours de distribution
-                                <span id="order-date-color"></span> Vos commandes déjà enregistrées
+                                <div><span id="distribution-date-color"></span> Prochains jours de distribution</div>
+                                <div><span id="order-date-color"></span> Vos commandes déjà enregistrées</div>
                             </div>
                             <div id="calendar">
                                 <v-calendar

producer/web/css/screen.css

 }
 /* line 132, ../sass/order/_order.scss */
 .order-order #app-order-order #legend #order-date-color {
-  margin-left: 15px;
   background-color: #018548;
 }
-/* line 136, ../sass/order/_order.scss */
+/* line 135, ../sass/order/_order.scss */
 .order-order #app-order-order #legend #distribution-date-color {
   background-color: #00A65A;
 }
-/* line 141, ../sass/order/_order.scss */
+/* line 140, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar {
   margin-bottom: 15px;
 }
-/* line 143, ../sass/order/_order.scss */
+/* line 142, ../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 146, ../sass/order/_order.scss */
+/* line 145, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar .c-day-background {
   padding: 20px;
 }
-/* line 151, ../sass/order/_order.scss */
+/* line 150, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar .c-day:hover .c-day-background {
   background-color: #F39C12 !important;
 }
-/* line 156, ../sass/order/_order.scss */
+/* line 155, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar .c-day-popover-content {
   font-size: 1.3rem;
 }
-/* line 161, ../sass/order/_order.scss */
+/* line 160, ../sass/order/_order.scss */
 .order-order #app-order-order .block-actions {
   text-align: right;
   margin-top: 20px;
 }
-/* line 168, ../sass/order/_order.scss */
+/* line 167, ../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 176, ../sass/order/_order.scss */
+/* line 175, ../sass/order/_order.scss */
 .order-order #app-order-order table#points-sale td.actions {
   width: 150px;
 }
-/* line 178, ../sass/order/_order.scss */
+/* line 177, ../sass/order/_order.scss */
 .order-order #app-order-order table#points-sale td.actions button {
   width: 100%;
 }
-/* line 184, ../sass/order/_order.scss */
+/* line 183, ../sass/order/_order.scss */
 .order-order #app-order-order table#points-sale tr.selected td {
   background-color: #F8F1DD;
 }
-/* line 192, ../sass/order/_order.scss */
+/* line 191, ../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 198, ../sass/order/_order.scss */
+/* line 197, ../sass/order/_order.scss */
 .order-order #app-order-order table#products td.name .other {
   font-size: 14px;
   color: #333;
 }
-/* line 202, ../sass/order/_order.scss */
+/* line 201, ../sass/order/_order.scss */
 .order-order #app-order-order table#products td.name .recipe {
   color: gray;
 }
-/* line 206, ../sass/order/_order.scss */
+/* line 205, ../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 210, ../sass/order/_order.scss */
+/* line 209, ../sass/order/_order.scss */
 .order-order #app-order-order table#products .td-quantity {
   width: 150px;
 }
-/* line 212, ../sass/order/_order.scss */
+/* line 211, ../sass/order/_order.scss */
 .order-order #app-order-order table#products .td-quantity input.quantity {
   text-align: center;
 }
-/* line 218, ../sass/order/_order.scss */
+/* line 217, ../sass/order/_order.scss */
 .order-order #app-order-order table#products tr.total .price-total {
   font-size: 23px;
 }
-/* line 225, ../sass/order/_order.scss */
+/* line 224, ../sass/order/_order.scss */
 .order-order #app-order-order #content-step-payment .credit {
   margin-top: 20px;
 }
-/* line 228, ../sass/order/_order.scss */
+/* line 227, ../sass/order/_order.scss */
 .order-order #app-order-order #content-step-payment .credit .info {
   margin-left: 20px;
   color: gray;
 }
-/* line 235, ../sass/order/_order.scss */
+/* line 234, ../sass/order/_order.scss */
 .order-order #app-order-order #infos {
   margin-top: 30px;
 }
-/* line 237, ../sass/order/_order.scss */
+/* line 236, ../sass/order/_order.scss */
 .order-order #app-order-order #infos .panel-body {
   padding-top: 0px;
   white-space: pre-line;
 }
-/* line 245, ../sass/order/_order.scss */
+/* line 244, ../sass/order/_order.scss */
 .order-order #app-order-order #order-success .alert.alert-success .glyphicon-big {
   background-color: #00A65A;
 }
-/* line 251, ../sass/order/_order.scss */
+/* line 250, ../sass/order/_order.scss */
 .order-order #app-order-order #order-success .alert.alert-info .glyphicon-big {
   background-color: #0097BC;
-  padding: 50px 30px;
+  padding: 55px 30px;
 }
-/* line 257, ../sass/order/_order.scss */
+/* line 256, ../sass/order/_order.scss */
 .order-order #app-order-order #order-success .alert {
   padding: 0px;
 }
-/* line 259, ../sass/order/_order.scss */
+/* line 258, ../sass/order/_order.scss */
 .order-order #app-order-order #order-success .alert .glyphicon-big {
   font-size: 90px;
   color: white;
   padding: 30px;
   float: left;
 }
-/* line 266, ../sass/order/_order.scss */
+/* line 265, ../sass/order/_order.scss */
 .order-order #app-order-order #order-success .alert div.content {
   color: #333;
   padding: 20px;
   margin-left: 151px;
 }
-/* line 271, ../sass/order/_order.scss */
+/* line 270, ../sass/order/_order.scss */
 .order-order #app-order-order #order-success .alert div.content h3 {
   font-family: "myriadpro-light";
   text-transform: uppercase;
   margin-left: 0px;
   text-align: left;
   padding-left: 0px;
+  line-height: 35px;
 }
 /* line 283, ../sass/order/_order.scss */
 .order-order #app-order-order #order-success .alert div.content .locality {
     width: 100%;
   }
 
-  /* line 145, ../sass/_responsive.scss */
+  /* line 148, ../sass/_responsive.scss */
+  .order-order #app-order-order #steps ul li {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+  /* line 152, ../sass/_responsive.scss */
+  .order-order #app-order-order #steps ul li .info-step {
+    display: none;
+  }
+  /* line 156, ../sass/_responsive.scss */
+  .order-order #app-order-order #steps ul li .btn::after,
+  .order-order #app-order-order #steps ul li .btn::before {
+    display: none;
+  }
+  /* line 167, ../sass/_responsive.scss */
+  .order-order #app-order-order table#products td.name .recipe {
+    display: none;
+  }
+  /* line 173, ../sass/_responsive.scss */
+  .order-order #app-order-order table#products td.td-quantity .input-group-btn {
+    width: 100%;
+    display: block;
+  }
+  /* line 177, ../sass/_responsive.scss */
+  .order-order #app-order-order table#products td.td-quantity .input-group-btn button {
+    width: 100%;
+    display: block;
+  }
+  /* line 187, ../sass/_responsive.scss */
+  .order-order #app-order-order #order-success .alert .glyphicon-big {
+    font-size: 90px;
+    color: white;
+    padding: 30px;
+    display: block;
+    width: 100%;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  /* line 196, ../sass/_responsive.scss */
+  .order-order #app-order-order #order-success .alert div.content {
+    margin-left: 0px;
+    text-align: center;
+  }
+
+  /* line 207, ../sass/_responsive.scss */
   #footer .content {
     text-align: center;
   }

producer/web/sass/_responsive.scss

         width: 100% ;
     }
     
+    .order-order {
+        #app-order-order {
+            #steps {
+                ul {
+                    li {
+                        padding-left: 0px ;
+                        padding-right: 0px ;
+                        
+                        .info-step {
+                            display: none ;
+                        }
+                        
+                        .btn::after,
+                        .btn::before {
+                            display: none ;
+                        }
+                    }
+                }
+            }
+            
+            table#products {
+                
+                td.name {
+                    .recipe {
+                        display: none ;
+                    }
+                }
+                
+                td.td-quantity {
+                    .input-group-btn {
+                        width: 100% ;
+                        display: block ;
+                        
+                        button {
+                            width: 100% ;
+                            display: block ;
+                        }
+                    }
+                }
+            }
+            
+            #order-success {
+                .alert {
+                    .glyphicon-big {
+                        font-size: 90px ;
+                        color: white ;
+                        padding: 30px ;
+                        display: block ;
+                        width: 100% ;
+                        text-align: center ;
+                        margin-bottom: 20px ;
+                    }
+                    div.content {
+                        margin-left: 0px ;
+                        text-align: center ;
+                    }
+                }
+            }
+        }
+        
+    }
+    
     #footer {
         .content {
             text-align: center ;

producer/web/sass/order/_order.scss

             }
             
             #order-date-color {
-                margin-left: 15px ;
                 background-color: #018548 ;
             }
             #distribution-date-color {
             .alert.alert-info {
                 .glyphicon-big {
                     background-color: #0097BC ;
-                    padding: 50px 30px ;
+                    padding: 55px 30px ;
                 }
             }
             
                         margin-left: 0px ;
                         text-align: left ;
                         padding-left: 0px ;
+                        line-height: 35px ;
                     }
                     
                     .locality {