BenoitCier
/
Opendistrib
forked from Laclic/Souke
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Section étapes sous forme de flèches. 

Suppression du résumé sur la droite pour l'intégrer directement au niveau des flèches.
dev
Guillaume Bourgeois 5 years ago
parent
d976e84205
commit
9918b6156c
5 changed files with 214 additions and 43 deletions
Split View Show Diff Stats
  1. +4
    -1
      producer/controllers/OrderController.php
  2. +25
    -14
      producer/views/order/order.php
  3. +93
    -22
      producer/web/css/screen.css
  4. +9
    -0
      producer/web/js/vuejs/order-order.js
  5. +83
    -6
      producer/web/sass/order/_order.scss

+ 4
- 1
producer/controllers/OrderController.php View File

@@ -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

+ 25
- 14
producer/views/order/order.php View File

@@ -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

+ 93
- 22
producer/web/css/screen.css View File

@@ -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;

+ 9
- 0
producer/web/js/vuejs/order-order.js View File

@@ -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) {

+ 83
- 6
producer/web/sass/order/_order.scss View File

@@ -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 ;
}
}
}

Write Preview
Loading…
Cancel
Save