make basket responsive
This commit is contained in:
Gitea
parent
092b840f2d
commit
85f3d10088
|
|
@ -0,0 +1,86 @@
|
|||
.theme-basket {
|
||||
&--item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: $cell-entry-border;
|
||||
|
||||
@media(max-width: $very-small-limit) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
&--item-details {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&--item-activity {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&--item-name,
|
||||
&--item-unit,
|
||||
&--item-location,
|
||||
&--item-date {
|
||||
font-size: 90%;
|
||||
margin-left: 10px;
|
||||
|
||||
@media(max-width: $very-small-limit) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
margin-right: 0.2rem;
|
||||
font-family: FontAwesome;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&--item-name::before { content: "\f007"; }
|
||||
&--item-location::before { content: "\f041"; }
|
||||
&--item-date::before { content: "\f133"; }
|
||||
|
||||
&--item-summary {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&--item-price {
|
||||
flex-grow: 1;
|
||||
font-weight: bold;
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
&--delete-button {
|
||||
&::before {
|
||||
font-family: FontAwesome;
|
||||
content: "\f1f8"; // trash
|
||||
}
|
||||
|
||||
margin-right: 0 !important;
|
||||
padding-right: 30px !important;
|
||||
}
|
||||
|
||||
&--footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&--empty-button,
|
||||
&--validate-button {
|
||||
margin: 5px 5px !important;
|
||||
}
|
||||
|
||||
&--empty-button {
|
||||
@extend .cancel-button;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,3 +4,4 @@
|
|||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'custom';
|
||||
@import 'json_cells';
|
||||
|
|
|
|||
|
|
@ -1,86 +1,34 @@
|
|||
<h2>Pannier</h2>
|
||||
<div class="toulouse-maelis-basket--data pk-table-wrapper">
|
||||
<table class="toulouse-maelis-basket--data-table pk-data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="toulouse-maelis-basket-line-person">Personne</th>
|
||||
<th class="toulouse-maelis-basket-line-activity">Activité</th>
|
||||
<th class="toulouse-maelis-basket-line-unit">Unité</th>
|
||||
<th class="toulouse-maelis-basket-line-place">Lieu</th>
|
||||
<th class="toulouse-maelis-basket-line-start-date">Début</th>
|
||||
<th class="toulouse-maelis-basket-line-end-date">Fin</th>
|
||||
<th class="toulouse-maelis-basket-line-unit-price">Prix unitaire</th>
|
||||
<th class="toulouse-maelis-basket-line-quantity">Quantité</th>
|
||||
<th class="toulouse-maelis-basket-line-amount">Total</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in json.data.lignes %}
|
||||
<tr class="toulouse-maelis-basket-lines">
|
||||
<td class="toulouse-maelis-basket-line-person">{{ item.personneInfo.firstname }}</td>
|
||||
<td class="toulouse-maelis-basket-line-activity">{{ item.inscription.libAct }}</td>
|
||||
<td class="toulouse-maelis-basket-line-unit">{{ item.inscription.libUnit }}</td>
|
||||
<td class="toulouse-maelis-basket-line-place">{{ item.inscription.libLieu }}</td>
|
||||
<td class="toulouse-maelis-basket-line-start-date">{{ item.inscription.dateDeb|date:'d/m/Y' }}</td>
|
||||
<td class="toulouse-maelis-basket-line-end-date">{{ item.inscription.dateFin|date:'d/m/Y' }}</td>
|
||||
<td class="toulouse-maelis-basket-line-unit-price">{{ item.prixUnit|default:'---' }}</td>
|
||||
<td class="toulouse-maelis-basket-line-quantity">{{ item.qte|default:'---' }}</td>
|
||||
<td class="toulouse-maelis-basket-line-amount">{{ item.montant|default:'---' }}</td>
|
||||
<td class="toulouse-maelis-basket-line-end">
|
||||
<form id="delete-basket-line" method="POST" action="{{ site_base }}{% url 'combo-public-ajax-page-cell' page_pk=cell.page.id cell_reference=cell.get_reference %}">
|
||||
<h2 class="cell--title">Panier</h2>
|
||||
<div>
|
||||
{% for item in json.data.lignes %}
|
||||
<div class="theme-basket--item">
|
||||
<div class="theme-basket--item-details">
|
||||
<div class="theme-basket--item-activity">{{ item.inscription.libAct }}</div>
|
||||
<div class="theme-basket--item-unit">{{ item.inscription.libUnit }}</div>
|
||||
<div class="theme-basket--item-name">{{ item.personneInfo.firstname }}</div>
|
||||
<div class="theme-basket--item-location">{{ item.inscription.libLieu }}</div>
|
||||
<div class="theme-basket--item-date">Du {{ item.inscription.dateDeb|date:'d/m/Y' }} au {{ item.inscription.dateFin|date:'d/m/Y' }}</div>
|
||||
</div>
|
||||
<div class="theme-basket--item-summary">
|
||||
<div class="theme-basket--item-price">{{ item.montant|default:'---' }}</div>
|
||||
<div class="theme-basket--item-actions">
|
||||
<form method="POST" action="{{ site_base }}{% url 'combo-public-ajax-page-cell' page_pk=cell.page.id cell_reference=cell.get_reference %}">
|
||||
<input type="hidden" name="action" value="delete-line">
|
||||
<input type="hidden" name="line_id" value="{{ item.id }}">
|
||||
<button class="icon-trash"></button>
|
||||
<button class="theme-basket--delete-button" aria-label="Supprimer la ligne" title="Supprimer la ligne"></button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="toulouse-maelis-basket--footer">
|
||||
<form id="delete-basket" method="POST" action="{{ site_base }}{% url 'combo-public-ajax-page-cell' page_pk=cell.page.id cell_reference=cell.get_reference %}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="theme-basket--footer">
|
||||
<form method="POST" action="{{ site_base }}{% url 'combo-public-ajax-page-cell' page_pk=cell.page.id cell_reference=cell.get_reference %}">
|
||||
<input type="hidden" name="action" value="delete">
|
||||
<button class="icon-trash">Vider</button>
|
||||
<button class="theme-basket--empty-button">Vider le Panier</button>
|
||||
</form>
|
||||
<form id="validate-basket" method="POST" action="{{ site_base }}{% url 'combo-public-ajax-page-cell' page_pk=cell.page.id cell_reference=cell.get_reference %}">
|
||||
<form method="POST" action="{{ site_base }}{% url 'combo-public-ajax-page-cell' page_pk=cell.page.id cell_reference=cell.get_reference %}">
|
||||
<input type="hidden" name="action" value="validate">
|
||||
<button class="icon-check">Valider</button>
|
||||
<button class="theme-basket--validate-button">Valider</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.toulouse-maelis-basket--data-table {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.toulouse-maelis-basket--data-table th.toulouse-maelis-basket-activity, th.toulouse-maelis-basket-unit, th.toulouse-maelis-basket-place {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.toulouse-maelis-basket--data-table td.amount {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.toulouse-maelis-basket--data-table td:last-child {
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
button.icon-trash:before {
|
||||
font-family: FontAwesome;
|
||||
content: "\f1f8\00a0"; // trash
|
||||
}
|
||||
|
||||
button.icon-check:before {
|
||||
font-family: FontAwesome;
|
||||
content: "\f00c\00a0"; // check
|
||||
}
|
||||
|
||||
.toulouse-maelis-basket--footer {
|
||||
padding-top: 1em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue