klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-12-22 15:51:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Display nice product cards on counter click interface

Browse Source
This commit is contained in:
Antoine Bartuccio 2024-12-21 20:38:09 +01:00
parent e68d944640
commit aa0a4c06cb
2 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
core/static/core/style.scss
View File

@ -208,6 +208,7 @@ body {
a.btn {
display: inline-block;
}
.btn {
font-size: 15px;
font-weight: normal;
@ -431,12 +432,17 @@ body {
flex-wrap: wrap;
$col-gap: 1rem;
$row-gap: 0.5rem;
&.gap {
column-gap: var($col-gap);
row-gap: var($row-gap);
}
@for $i from 2 through 5 {
&.gap-#{$i}x {
column-gap: $i * $col-gap;
row-gap: $i * $row-gap;
}
}
}

21
counter/templates/counter/counter_click.jinja
View File

@ -8,6 +8,7 @@
{% block additional_css %}
<link rel="stylesheet" type="text/css" href="{{ static('bundled/core/components/ajax-select-index.css') }}" defer></link>
<link rel="stylesheet" type="text/css" href="{{ static('core/components/ajax-select.scss') }}" defer></link>
<link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
{% endblock %}
{% block additional_js %}
@ -104,7 +105,7 @@
</ul>
</template>
<p>
<p class="margin-bottom">
<strong>Total: </strong>
<strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong>
<strong> €</strong>
@ -153,19 +154,25 @@
</ul>
{% for category in categories.keys() -%}
<div id="cat_{{ category|slugify }}">
<h5>{{ category }}</h5>
<h5 class="margin-bottom">{{ category }}</h5>
<div class="row gap-2x">
{% for product in categories[category] -%}
<button @click="addToBasket('{{ product.id }}', 1)">
<strong>{{ product.name }}</strong>
<button class="card shadow" @click="addToBasket('{{ product.id }}', 1)">
<strong class="card-title">{{ product.name }}</strong>
<img
class="card-image"
alt="image de {{ product.name }}"
{% if product.icon %}
<img src="{{ product.icon.url }}" alt="image de {{ product.name }}"/>
src="{{ product.icon.url }}"
{% else %}
<img src="{{ static('core/img/na.gif') }}" alt="image de {{ product.name }}"/>
src="{{ static('core/img/na.gif') }}"
{% endif %}
<span>{{ product.price }} €<br>{{ product.code }}</span>
/>
<span class="card-content">{{ product.price }} €<br>{{ product.code }}</span>
</button>
{%- endfor %}
</div>
</div>
{%- endfor %}
</div>
</div>