Laclic
/
Souke
Watch 5
Star 0
Fork 1
Code Issues 1 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

[producer] Affichage des infos relatives aux étapes de la commande en-dessous du système de flèches

refactoring
Guillaume Bourgeois 5 years ago
parent
61065f9336
commit
e66ffa11bd
3 changed files with 61 additions and 52 deletions
Split View Show Diff Stats
  1. +9
    -9
      producer/views/order/order.php
  2. +45
    -41
      producer/web/css/screen.css
  3. +7
    -2
      producer/web/sass/order/_order.scss

+ 9
- 9
producer/views/order/order.php View File

@@ -54,28 +54,28 @@ $this->setTitle('Commander') ;
<div id="steps">
<ul>
<li id="step-date" :class="'col-md-3 '+((step == 'date') ? 'active' : '')">
<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>
<div class="info-step" v-if="dateFormat">
{{ dateFormat }}
</div>
</li>
<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>
<div class="info-step" v-if="pointSaleActive">
{{ pointSaleActive.name }}
</div>
</li>
<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>
<div class="info-step" v-if="oneProductOrdered()">
{{ countProductOrdered() }} produit{{ (countProductOrdered() > 1) ? 's' : '' }}
</div>
</li>
<li id="step-payment" :class="'col-md-3 '+((step == 'payment') ? 'active' : '')">
<button @click="changeStep('payment')" :class="'btn '+ (step == 'payment' ? 'btn-primary' : 'btn-default')" :disabled="step == 'date' || step == 'point-sale' || step == 'products'">

+ 45
- 41
producer/web/css/screen.css View File

@@ -1269,43 +1269,47 @@ termes.
}
/* line 29, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul {
margin-top: 30px;
height: 70px;
}
/* line 31, ../sass/order/_order.scss */
/* line 32, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li {
text-align: center;
padding-right: 8px;
padding-left: 8px;
position: relative;
}
/* line 37, ../sass/order/_order.scss */
/* line 38, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .info-step {
position: absolute;
top: -30px;
top: 45px;
left: 0px;
width: 100%;
text-transform: normal;
color: #FF7F00;
font-family: "capsuularegular";
font-size: 17px;
font-weight: bold;
}
/* line 45, ../sass/order/_order.scss */
/* line 50, ../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 53, ../sass/order/_order.scss */
/* line 58, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li#step-date {
padding-left: 0px;
}
/* line 57, ../sass/order/_order.scss */
/* line 62, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li#step-payment {
padding-right: 0px;
}
/* line 61, ../sass/order/_order.scss */
/* line 66, ../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 66, ../sass/order/_order.scss */
/* line 71, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .btn {
color: #333;
text-transform: uppercase;
@@ -1319,154 +1323,154 @@ termes.
border: 0px none;
text-transform: uppercase;
}
/* line 77, ../sass/order/_order.scss */
/* line 82, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .btn .button-content {
position: relative;
left: 8px;
}
/* line 82, ../sass/order/_order.scss */
/* line 87, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .btn.btn-primary {
background-color: #FF7F00;
}
/* line 86, ../sass/order/_order.scss */
/* line 91, ../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 92, ../sass/order/_order.scss */
/* line 97, ../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 99, ../sass/order/_order.scss */
/* line 104, ../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 106, ../sass/order/_order.scss */
/* line 111, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .btn.btn-primary::after {
border-left: 17px solid #FF7F00;
}
/* line 120, ../sass/order/_order.scss */
/* line 125, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .btn-primary {
color: white;
}
/* line 128, ../sass/order/_order.scss */
/* line 133, ../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 135, ../sass/order/_order.scss */
/* line 140, ../sass/order/_order.scss */
.order-order #app-order-order #legend #order-date-color {
background-color: #FF7F00;
}
/* line 138, ../sass/order/_order.scss */
/* line 143, ../sass/order/_order.scss */
.order-order #app-order-order #legend #distribution-date-color {
background-color: #5cb85c;
}
/* line 143, ../sass/order/_order.scss */
/* line 148, ../sass/order/_order.scss */
.order-order #app-order-order #calendar {
margin-bottom: 15px;
}
/* line 145, ../sass/order/_order.scss */
/* line 150, ../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 148, ../sass/order/_order.scss */
/* line 153, ../sass/order/_order.scss */
.order-order #app-order-order #calendar .c-day-background {
padding: 20px;
}
/* line 153, ../sass/order/_order.scss */
/* line 158, ../sass/order/_order.scss */
.order-order #app-order-order #calendar .c-day:hover .c-day-background {
background-color: #FF7F00 !important;
color: white !important;
}
/* line 159, ../sass/order/_order.scss */
/* line 164, ../sass/order/_order.scss */
.order-order #app-order-order #calendar .c-day-popover-content {
font-size: 1.3rem;
}
/* line 164, ../sass/order/_order.scss */
/* line 169, ../sass/order/_order.scss */
.order-order #app-order-order .block-actions {
text-align: right;
margin-top: 20px;
}
/* line 171, ../sass/order/_order.scss */
/* line 176, ../sass/order/_order.scss */
.order-order #app-order-order table#points-sale td.name .the-name {
font-family: "capsuularegular";
color: black;
font-size: 20px;
line-height: 25px;
}
/* line 179, ../sass/order/_order.scss */
/* line 184, ../sass/order/_order.scss */
.order-order #app-order-order table#points-sale td.actions {
width: 150px;
}
/* line 181, ../sass/order/_order.scss */
/* line 186, ../sass/order/_order.scss */
.order-order #app-order-order table#points-sale td.actions button {
width: 100%;
}
/* line 187, ../sass/order/_order.scss */
/* line 192, ../sass/order/_order.scss */
.order-order #app-order-order table#points-sale tr.selected td {
background-color: white;
}
/* line 195, ../sass/order/_order.scss */
/* line 200, ../sass/order/_order.scss */
.order-order #app-order-order table#products td.photo img {
width: 100px;
}
/* line 201, ../sass/order/_order.scss */
/* line 206, ../sass/order/_order.scss */
.order-order #app-order-order table#products td.name .name {
font-family: "capsuularegular";
color: black;
font-size: 20px;
line-height: 25px;
}
/* line 207, ../sass/order/_order.scss */
/* line 212, ../sass/order/_order.scss */
.order-order #app-order-order table#products td.name .other {
font-size: 14px;
color: #333;
}
/* line 211, ../sass/order/_order.scss */
/* line 216, ../sass/order/_order.scss */
.order-order #app-order-order table#products td.name .recipe {
color: gray;
}
/* line 215, ../sass/order/_order.scss */
/* line 220, ../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 219, ../sass/order/_order.scss */
/* line 224, ../sass/order/_order.scss */
.order-order #app-order-order table#products .td-quantity {
width: 150px;
}
/* line 221, ../sass/order/_order.scss */
/* line 226, ../sass/order/_order.scss */
.order-order #app-order-order table#products .td-quantity input.quantity {
text-align: center;
}
/* line 227, ../sass/order/_order.scss */
/* line 232, ../sass/order/_order.scss */
.order-order #app-order-order table#products tr.total .price-total {
font-size: 23px;
}
/* line 234, ../sass/order/_order.scss */
/* line 239, ../sass/order/_order.scss */
.order-order #app-order-order #content-step-payment .credit {
margin-top: 20px;
}
/* line 237, ../sass/order/_order.scss */
/* line 242, ../sass/order/_order.scss */
.order-order #app-order-order #content-step-payment .credit .info {
margin-left: 20px;
color: gray;
}
/* line 244, ../sass/order/_order.scss */
/* line 249, ../sass/order/_order.scss */
.order-order #app-order-order #infos {
margin-top: 30px;
}
/* line 246, ../sass/order/_order.scss */
/* line 251, ../sass/order/_order.scss */
.order-order #app-order-order #infos .panel-body {
padding-top: 0px;
white-space: pre-line;

+ 7
- 2
producer/web/sass/order/_order.scss View File

@@ -27,7 +27,8 @@
#steps {
margin-bottom: 20px ;
ul {
margin-top: 30px ;
height: 70px ;
li {
text-align: center ;
padding-right: 8px ;
@@ -36,10 +37,14 @@
.info-step {
position: absolute ;
top: -30px ;
top: 45px ;
left: 0px ;
width: 100% ;
text-transform: normal ;
color: $color1 ;
font-family: 'capsuularegular' ;
font-size: 17px ;
font-weight: bold ;
}
.glyphicon-chevron-right,

Write Preview
Loading…
Cancel
Save