almet/la-chariotte
1
0
Fork 0
mirror of https://framagit.org/la-chariotte/la-chariotte.git synced 2025-05-01 11:22:24 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

card for order page on mobile

Browse source
This commit is contained in:
Laetitia Getti 2023-06-07 10:36:06 +02:00
parent 165ec58d3a
commit 4bb7854e89
8 changed files with 71 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
la_chariotte/order/templates/order/grouped_order_detail.html
View file

@ -23,10 +23,10 @@
<p><i class="fa fa-map-pin mr-3" aria-label="Lieu" title="Lieu" aria-hidden="true"></i>{{ grouped_order.place }}</p>
{% endif %}
<p><i class="fa fa-clock-o mr-3" aria-label="Date limite de commande" title="Date limite de commande" aria-hidden="true"></i>
{{ grouped_order.deadline }}
Commandes avant le {{ grouped_order.deadline }}
</p>
<p><i class="fa fa-calendar-check-o mr-3" aria-label="Date de livraison" title="Date de livraison" aria-hidden="true"></i>
{{ grouped_order.delivery_date }}
Livraison le {{ grouped_order.delivery_date }}
</p>
{% if user == grouped_order.orga %}
@ -56,7 +56,9 @@
{% else %}
<p class="title">Commander</p>
<form method="post" action="{% url 'order:order' grouped_order.id %}">
<table class="table">
<!-- Tableau de commandes - sur ordi -->
<table class="table is-hidden-mobile">
<thead>
<tr>
<th>Produit</th>
@ -81,6 +83,28 @@
{% endfor %}
</tbody>
</table>
<!-- Tableau de commandes - sur mobile et tablette -->
<div class="is-hidden-desktop">
{% for item in grouped_order.item_set.all %}
<div class="card mb-4 is-info">
<div class="card-header has-background-info">
<p class="card-header-title">{{ item.name }}</p>
</div>
<div class="card-footer">
<div class="card-footer-item">
<p class="mini-title">Prix unitaire</p>
<p>{{ item.price }} €</p>
</div>
<div class="card-footer-item">
<input name="quantity_{{ item.id }}" size="2" type="number" value="0" min="0"></input>
{% if item.get_remaining_nb %}<span class="is-italic mini-title"> {{ item.get_remaining_nb }} disponibles</span>{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
{% if error_message %}<p class="has-text-danger">{{ error_message }}</p>{% endif %}
<br>
<p class="subtitle">Vos informations</p>

4
la_chariotte/order/templates/order/grouped_order_overview.html
View file

@ -25,10 +25,10 @@
<p><i class="fa fa-map-pin mr-3" aria-label="Lieu" title="Lieu" aria-hidden="true"></i>{{ grouped_order.place }}</p>
{% endif %}
<p><i class="fa fa-clock-o mr-3" aria-label="Date limite de commande" title="Date limite de commande" aria-hidden="true"></i>
{{ grouped_order.deadline }}
Commandes avant le {{ grouped_order.deadline }}
</p>
<p><i class="fa fa-calendar-check-o mr-3" aria-label="Date de livraison" title="Date de livraison" aria-hidden="true"></i>
{{ grouped_order.delivery_date }}
Livraison le {{ grouped_order.delivery_date }}
</p>
<div class="buttons">
<a class="button is-light" href={% url 'order:grouped_order_detail' grouped_order.id %}>

33
la_chariotte/static/css/app.css
View file

@ -10290,18 +10290,7 @@ a {
color: #A52951;
}
p.title {
font-weight: 300;
color: #A52951;
}
p.mobile-content-title {
font-weight: 600;
text-align: center;
font-size: 1.5rem;
}
.box.is-info {
.box.is-info, .card.is-info {
border-bottom: 2px solid #e9b049;
border-right: 1px solid #e9b049;
}
@ -10400,3 +10389,23 @@ a.navbar-item:hover {
white-space: nowrap;
}
}
.card-footer-item {
display: grid;
}
p.title {
font-weight: 300;
color: #A52951;
}
p.mobile-content-title {
font-weight: 600;
text-align: center;
font-size: 1.5rem;
}
.mini-title {
color: #7a7a7a;
font-size: 0.8rem;
margin-bottom: 0px !important;
}

11
la_chariotte/static/sass/base/_global.sass
View file

@ -5,16 +5,7 @@ body
a
color: $betterave
p.title
font-weight: 300
color: $primary
p.mobile-content-title
font-weight: 600
text-align: center
font-size: 1.5rem
.box.is-info
.box.is-info, .card.is-info
border-bottom: 2px solid $beige
border-right: 1px solid $beige

6
la_chariotte/static/sass/base/_table.sass
View file

@ -3,4 +3,8 @@
table
display: block
overflow-x: auto
white-space: nowrap
white-space: nowrap
// Table with cards
.card-footer-item
display: grid

13
la_chariotte/static/sass/base/_titles.sass Normal file
View file

@ -0,0 +1,13 @@
p.title
font-weight: 300
color: $primary
p.mobile-content-title
font-weight: 600
text-align: center
font-size: 1.5rem
.mini-title
color: $grey-text
font-size: 0.8rem
margin-bottom: 0px !important

1
la_chariotte/static/sass/base/_variables.sass
View file

@ -2,6 +2,7 @@
$betterave: #A52951
$beige: #e9b049
$bright-black: #280a13
$grey-text: #7a7a7a
$primary: $betterave
$info: $beige

1
la_chariotte/static/sass/style.sass
View file

@ -14,3 +14,4 @@
@import "./base/content"
@import "./base/form"
@import "./base/table"
@import "./base/titles"