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

display products as cards

Browse Source
This commit is contained in:
imperosol 2024-12-14 02:45:11 +01:00
parent 7af745087e
commit 8f8eef4107
2 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
counter/static/counter/css/admin.scss Normal file
View File

@ -0,0 +1,11 @@
.product-group {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 30px;
@media screen and (min-width: 768px) {
max-width: 50%;
}
}

25
counter/templates/counter/product_list.jinja
View File

@ -9,6 +9,11 @@
<script type="module" src="{{ static("bundled/counter/product-list-index.ts") }}"></script> <script type="module" src="{{ static("bundled/counter/product-list-index.ts") }}"></script>
{% endblock %} {% endblock %}
{% block additional_css %}
<link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
<link rel="stylesheet" href="{{ static("counter/css/admin.scss") }}">
{% endblock %}
{% block content %} {% block content %}
<main x-data="productList"> <main x-data="productList">
<form id="search-form" class="margin-bottom"> <form id="search-form" class="margin-bottom">
@ -58,12 +63,24 @@
<div class="aria-busy-grow" :aria-busy="loading"> <div class="aria-busy-grow" :aria-busy="loading">
<template x-for="[category, cat_products] of Object.entries(products)" :key="category"> <template x-for="[category, cat_products] of Object.entries(products)" :key="category">
<section> <section>
<h4 x-text="category"></h4> <h4 x-text="category" class="margin-bottom"></h4>
<ul> <div class="product-group">
<template x-for="p in cat_products" :key="p.id"> <template x-for="p in cat_products" :key="p.id">
<li><a :href="p.url" x-text="`${p.name} (${p.code})`"></a></li> <a class="card card-row shadow clickable" :href="p.url">
<template x-if="p.icon">
<img class="card-image" :src="p.icon" :alt="`icon ${p.name}`">
</template>
<template x-if="!p.icon">
<i class="fa-regular fa-image fa-2x card-image"></i>
</template>
<span class="card-content">
<strong class="card-title" x-text="`${p.name} (${p.code})`"></strong>
<p x-text="`${p.selling_price} €`"></p>
</span>
</a>
</template> </template>
</ul> </div>
</section> </section>
</template> </template>
{{ paginate_alpine("page", "nbPages") }} {{ paginate_alpine("page", "nbPages") }}