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

[backend] Responsive : adaptations colonnes et boutons de la page distribution

dev
Guillaume 4 years ago
parent
2c1789ba7d
commit
dc0dabb491
3 changed files with 150 additions and 34 deletions
Unified View Show Diff Stats
  1. +19
    -19
      backend/views/distribution/index.php
  2. +57
    -8
      backend/web/css/screen.css
  3. +74
    -7
      backend/web/sass/_responsive.scss

+ 19
- 19
backend/views/distribution/index.php View File

<table class="table table-condensed table-bordered table-hover" v-if="countOrdersByPointSale[idActivePointSale] > 0 || (idActivePointSale == 0 && orders.length > 0)"> <table class="table table-condensed table-bordered table-hover" v-if="countOrdersByPointSale[idActivePointSale] > 0 || (idActivePointSale == 0 && orders.length > 0)">
<thead> <thead>
<tr> <tr>
<th v-if="idActivePointSale > 0">
<th class="column-checkbox" v-if="idActivePointSale > 0">
<input type="checkbox" v-model="checkboxSelectAllOrders" @change="selectAllOrdersEvent" /> <input type="checkbox" v-model="checkboxSelectAllOrders" @change="selectAllOrdersEvent" />
</th> </th>
<th>Origine</th>
<th>État</th>
<th>Utilisateur</th>
<th v-if="idActivePointSale == 0">Point de vente</th>
<th>Montant</th>
<th>Paiement</th>
<th></th>
<th v-if="producer.tiller">Tiller</th>
<th></th>
<th></th>
<th class="column-origin">Origine</th>
<th class="column-state">État</th>
<th class="column-user">Utilisateur</th>
<th class="column-point-sale" v-if="idActivePointSale == 0">Point de vente</th>
<th class="column-amount">Montant</th>
<th class="column-state-payment">Paiement</th>
<th class="column-payment"></th>
<th class="column-tiller" v-if="producer.tiller">Tiller</th>
<th class="column-actions"></th>
<th class="column-delivery-note"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<template v-for="(order, key, index) in orders" v-if="idActivePointSale == 0 || idActivePointSale == order.id_point_sale"> <template v-for="(order, key, index) in orders" v-if="idActivePointSale == 0 || idActivePointSale == order.id_point_sale">
<tr> <tr>
<td v-if="idActivePointSale > 0">
<td class="column-checkbox" v-if="idActivePointSale > 0">
<input type="checkbox" v-model="order.selected" /> <input type="checkbox" v-model="order.selected" />
</td> </td>
<td>
<td class="column-origin">
<label class="label label-success" v-if="order.origin == 'user'">client</label> <label class="label label-success" v-if="order.origin == 'user'">client</label>
<label class="label label-default" v-else-if="order.origin == 'auto'">auto</label> <label class="label label-default" v-else-if="order.origin == 'auto'">auto</label>
<label class="label label-warning" v-else>admin</label> <label class="label label-warning" v-else>admin</label>
</td> </td>
<td>
<td class="column-state">
<span class="label label-danger" v-if="order.date_delete"><span class="glyphicon glyphicon-trash"></span></span> <span class="label label-danger" v-if="order.date_delete"><span class="glyphicon glyphicon-trash"></span></span>
<span class="label label-warning" v-if="order.date_update"><span class="glyphicon glyphicon-pencil"></span></span> <span class="label label-warning" v-if="order.date_update"><span class="glyphicon glyphicon-pencil"></span></span>
<span class="label label-success" v-if="!order.date_update && !order.date_delete"><span class="glyphicon glyphicon-check"></span></span> <span class="label label-success" v-if="!order.date_update && !order.date_delete"><span class="glyphicon glyphicon-check"></span></span>
</td> </td>
<td>
<td class="column-user">
<span v-if="order.user">{{ order.user.lastname+' '+order.user.name }}</span> <span v-if="order.user">{{ order.user.lastname+' '+order.user.name }}</span>
<span v-else>{{ order.username }}</span> <span v-else>{{ order.username }}</span>
<span v-if="order.comment && order.comment.length > 0" class="glyphicon glyphicon-comment"></span> <span v-if="order.comment && order.comment.length > 0" class="glyphicon glyphicon-comment"></span>
</td> </td>
<td v-if="idActivePointSale == 0">
<td class="column-point-sale" v-if="idActivePointSale == 0">
{{ order.pointSale.name }} {{ order.pointSale.name }}
</td> </td>
<td>{{ order.amount.toFixed(2).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")+'&nbsp;€' }}</td>
<td class="column-amount">{{ order.amount.toFixed(2).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")+'&nbsp;€' }}</td>
<td class="column-state-payment"> <td class="column-state-payment">
<div class="input-group"> <div class="input-group">
<span class="label label-success input-group-addon" v-if="order.amount_paid == order.amount">payé</span> <span class="label label-success input-group-addon" v-if="order.amount_paid == order.amount">payé</span>
</ul> </ul>
</div> </div>
</td> </td>
<td v-if="producer.tiller" class="tiller">
<td v-if="producer.tiller" class="tiller column-tiller">
<input v-if="order.tiller_synchronization == true" type="checkbox" checked="checked" :id="'checkbox-tiller-synchronization-'+order.id" :data-id-order="order.id" @change="changeSynchroTiller" /> <input v-if="order.tiller_synchronization == true" type="checkbox" checked="checked" :id="'checkbox-tiller-synchronization-'+order.id" :data-id-order="order.id" @change="changeSynchroTiller" />
<input v-else type="checkbox" :id="'checkbox-tiller-synchronization-'+order.id" :data-id-order="order.id" @change="changeSynchroTiller" /> <input v-else type="checkbox" :id="'checkbox-tiller-synchronization-'+order.id" :data-id-order="order.id" @change="changeSynchroTiller" />
<label :for="'checkbox-tiller-synchronization-'+order.id">Tiller</label> <label :for="'checkbox-tiller-synchronization-'+order.id">Tiller</label>
</modal> </modal>


</td> </td>
<td>
<td class="column-delivery-note">
<a v-if="order.id_delivery_note" class="btn btn-default btn-xs" :href="UrlManager.getBaseUrl()+'delivery-note/update?id='+order.id_delivery_note"> <a v-if="order.id_delivery_note" class="btn btn-default btn-xs" :href="UrlManager.getBaseUrl()+'delivery-note/update?id='+order.id_delivery_note">
<span class="glyphicon glyphicon-file"></span> BL <span class="glyphicon glyphicon-file"></span> BL
</a> </a>

+ 57
- 8
backend/web/css/screen.css View File

termes. termes.
*/ */
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
/* line 42, ../sass/_responsive.scss */
.distribution-index #buttons-top-orders .right .btn {
padding: 8px 15px;
margin: 10px;
/* line 41, ../sass/_responsive.scss */
.main-header .navbar {
border-top: solid 1px #e0e0e0;
border-bottom: solid 1px #e0e0e0;
} }
/* line 50, ../sass/_responsive.scss */

/* line 49, ../sass/_responsive.scss */
.navbar-custom-menu .producer-menu span {
display: none;
}

/* line 58, ../sass/_responsive.scss */
.distribution-index .modal-form-order .modal-container { .distribution-index .modal-form-order .modal-container {
width: 100%; width: 100%;
} }
/* line 53, ../sass/_responsive.scss */
/* line 61, ../sass/_responsive.scss */
.distribution-index .modal-form-order .modal-container .modal-body table { .distribution-index .modal-form-order .modal-container .modal-body table {
margin-bottom: 100px; margin-bottom: 100px;
} }
/* line 58, ../sass/_responsive.scss */
/* line 66, ../sass/_responsive.scss */
.distribution-index .modal-form-order .modal-container .modal-footer { .distribution-index .modal-form-order .modal-container .modal-footer {
border-top-color: #f4f4f4; border-top-color: #f4f4f4;
position: fixed; position: fixed;
text-align: center; text-align: center;
border-top: solid 1px #e0e0e0; border-top: solid 1px #e0e0e0;
} }
/* line 70, ../sass/_responsive.scss */
/* line 78, ../sass/_responsive.scss */
.distribution-index .modal-form-order .modal-container .modal-footer .actions-form button { .distribution-index .modal-form-order .modal-container .modal-footer .actions-form button {
float: none; float: none;
} }
/* line 89, ../sass/_responsive.scss */
.distribution-index #orders #buttons-top-orders .left {
width: 100%;
float: none;
}
/* line 93, ../sass/_responsive.scss */
.distribution-index #orders #buttons-top-orders .right {
width: 100%;
float: none;
}
/* line 98, ../sass/_responsive.scss */
.distribution-index #orders #buttons-top-orders .btn {
padding: 8px 15px;
margin: 10px;
display: block;
width: 100%;
}
/* line 108, ../sass/_responsive.scss */
.distribution-index #orders #wrapper-nav-points-sale ul#nav-points-sale li {
float: none;
width: 100%;
}
/* line 111, ../sass/_responsive.scss */
.distribution-index #orders #wrapper-nav-points-sale ul#nav-points-sale li a {
display: block;
}
/* line 120, ../sass/_responsive.scss */
.distribution-index #orders table ul.dropdown-menu a {
padding: 15px;
}
/* line 124, ../sass/_responsive.scss */
.distribution-index #orders table button {
padding: 15px;
}
/* line 129, ../sass/_responsive.scss */
.distribution-index #orders table .column-origin,
.distribution-index #orders table .column-point-sale,
.distribution-index #orders table .column-state-payment,
.distribution-index #orders table .column-payment,
.distribution-index #orders table .column-tiller,
.distribution-index #orders table .column-delivery-note {
display: none;
}
} }

+ 74
- 7
backend/web/sass/_responsive.scss View File





@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.distribution-index {
#buttons-top-orders {
.right {
.btn {
padding: 8px 15px ;
margin: 10px ;
}

.main-header {
.navbar {
border-top: solid 1px #e0e0e0 ;
border-bottom: solid 1px #e0e0e0 ;
}
}

.navbar-custom-menu {
.producer-menu {
span {
display: none ;
} }
} }
}

.distribution-index {


.modal-form-order { .modal-form-order {
.modal-container { .modal-container {
} }
} }
} }

#orders {

#buttons-top-orders {
.left {
width: 100%;
float: none;
}
.right {
width: 100% ;
float: none ;
}

.btn {
padding: 8px 15px ;
margin: 10px ;
display: block ;
width: 100% ;
}
}

#wrapper-nav-points-sale {
ul#nav-points-sale {
li {
float: none ;
width: 100% ;
a {
display: block ;
}
}
}
}

table {
ul.dropdown-menu {
a {
padding: 15px ;
}
}
button {
padding: 15px ;
}

//.column-checkbox,
.column-origin,
//.column-state,
//.column-user,
.column-point-sale,
//.column-amount,
.column-state-payment,
.column-payment,
.column-tiller,
//.column-actions,
.column-delivery-note {
display: none ;
}

}
}
} }
} }

Write Preview
Loading…
Cancel
Save