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 { a.btn {
display: inline-block; display: inline-block;
} }
.btn { .btn {
font-size: 15px; font-size: 15px;
font-weight: normal; font-weight: normal;
@ -431,12 +432,17 @@ body {
flex-wrap: wrap; flex-wrap: wrap;
$col-gap: 1rem; $col-gap: 1rem;
$row-gap: 0.5rem;
&.gap { &.gap {
column-gap: var($col-gap); column-gap: var($col-gap);
row-gap: var($row-gap);
} }
@for $i from 2 through 5 { @for $i from 2 through 5 {
&.gap-#{$i}x { &.gap-#{$i}x {
column-gap: $i * $col-gap; 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 %} {% 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('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" type="text/css" href="{{ static('core/components/ajax-select.scss') }}" defer></link>
<link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
{% endblock %} {% endblock %}
{% block additional_js %} {% block additional_js %}
@ -104,7 +105,7 @@
</ul> </ul>
</template> </template>
<p> <p class="margin-bottom">
<strong>Total: </strong> <strong>Total: </strong>
<strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong> <strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong>
<strong> €</strong> <strong> €</strong>
@ -153,19 +154,25 @@
</ul> </ul>
{% for category in categories.keys() -%} {% for category in categories.keys() -%}
<div id="cat_{{ category|slugify }}"> <div id="cat_{{ category|slugify }}">
<h5>{{ category }}</h5> <h5 class="margin-bottom">{{ category }}</h5>
<div class="row gap-2x">
{% for product in categories[category] -%} {% for product in categories[category] -%}
<button @click="addToBasket('{{ product.id }}', 1)"> <button class="card shadow" @click="addToBasket('{{ product.id }}', 1)">
<strong>{{ product.name }}</strong> <strong class="card-title">{{ product.name }}</strong>
<img
class="card-image"
alt="image de {{ product.name }}"
{% if product.icon %} {% if product.icon %}
<img src="{{ product.icon.url }}" alt="image de {{ product.name }}"/> src="{{ product.icon.url }}"
{% else %} {% else %}
<img src="{{ static('core/img/na.gif') }}" alt="image de {{ product.name }}"/> src="{{ static('core/img/na.gif') }}"
{% endif %} {% endif %}
<span>{{ product.price }} €<br>{{ product.code }}</span> />
<span class="card-content">{{ product.price }} €<br>{{ product.code }}</span>
</button> </button>
{%- endfor %} {%- endfor %}
</div> </div>
</div>
{%- endfor %} {%- endfor %}
</div> </div>
</div> </div>