ソースを参照

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

refactoring
Guillaume 4年前
コミット
dc0dabb491
3個のファイルの変更150行の追加34行の削除
  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 ファイルの表示

@@ -278,46 +278,46 @@ $this->setPageTitle('Distributions') ;
<table class="table table-condensed table-bordered table-hover" v-if="countOrdersByPointSale[idActivePointSale] > 0 || (idActivePointSale == 0 && orders.length > 0)">
<thead>
<tr>
<th v-if="idActivePointSale > 0">
<th class="column-checkbox" v-if="idActivePointSale > 0">
<input type="checkbox" v-model="checkboxSelectAllOrders" @change="selectAllOrdersEvent" />
</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>
</thead>
<tbody>
<template v-for="(order, key, index) in orders" v-if="idActivePointSale == 0 || idActivePointSale == order.id_point_sale">
<tr>
<td v-if="idActivePointSale > 0">
<td class="column-checkbox" v-if="idActivePointSale > 0">
<input type="checkbox" v-model="order.selected" />
</td>
<td>
<td class="column-origin">
<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-warning" v-else>admin</label>
</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-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>
</td>
<td>
<td class="column-user">
<span v-if="order.user">{{ order.user.lastname+' '+order.user.name }}</span>
<span v-else>{{ order.username }}</span>
<span v-if="order.comment && order.comment.length > 0" class="glyphicon glyphicon-comment"></span>
</td>
<td v-if="idActivePointSale == 0">
<td class="column-point-sale" v-if="idActivePointSale == 0">
{{ order.pointSale.name }}
</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">
<div class="input-group">
<span class="label label-success input-group-addon" v-if="order.amount_paid == order.amount">payé</span>
@@ -352,7 +352,7 @@ $this->setPageTitle('Distributions') ;
</ul>
</div>
</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-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>
@@ -481,7 +481,7 @@ $this->setPageTitle('Distributions') ;
</modal>

</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">
<span class="glyphicon glyphicon-file"></span> BL
</a>

+ 57
- 8
backend/web/css/screen.css ファイルの表示

@@ -2395,20 +2395,26 @@ pris connaissance de la licence CeCILL, et que vous en avez accepté les
termes.
*/
@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 {
width: 100%;
}
/* line 53, ../sass/_responsive.scss */
/* line 61, ../sass/_responsive.scss */
.distribution-index .modal-form-order .modal-container .modal-body table {
margin-bottom: 100px;
}
/* line 58, ../sass/_responsive.scss */
/* line 66, ../sass/_responsive.scss */
.distribution-index .modal-form-order .modal-container .modal-footer {
border-top-color: #f4f4f4;
position: fixed;
@@ -2420,8 +2426,51 @@ termes.
text-align: center;
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 {
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 ファイルの表示

@@ -36,15 +36,23 @@ termes.


@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-container {
@@ -74,5 +82,64 @@ termes.
}
}
}

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

}
}
}
}

読み込み中…
キャンセル
保存