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

slightly improve style

Browse Source
This commit is contained in:
imperosol 2024-12-14 00:36:12 +01:00
parent 1a9556f811
commit aab093200b
3 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,6 +19,13 @@ body {
--loading-stroke: 5px; --loading-stroke: 5px;
--loading-duration: 1s; --loading-duration: 1s;
position: relative; position: relative;
&.aria-busy-grow {
// Make sure the element take enough place to hold the loading wheel
min-height: calc((var(--loading-size)) * 1.5);
min-width: calc((var(--loading-size)) * 1.5);
overflow: hidden;
}
} }
[aria-busy]:after { [aria-busy]:after {
@ -255,6 +262,13 @@ body {
} }
} }
/**
* A spacer below an element. Somewhat cleaner than putting <br/> everywhere.
*/
.margin-bottom {
margin-bottom: 1.5rem;
}
/*--------------------------------CONTENT------------------------------*/ /*--------------------------------CONTENT------------------------------*/
#quick_notif { #quick_notif {
width: 100%; width: 100%;

2
core/templates/core/macros.jinja
View File

@ -140,7 +140,7 @@
nb_page (str): call to a javascript function or variable returning nb_page (str): call to a javascript function or variable returning
the maximum number of pages to paginate the maximum number of pages to paginate
#} #}
<nav class="pagination" x-show="{{ nb_pages }} > 1"> <nav class="pagination" x-show="{{ nb_pages }} > 1" x-cloak>
{# Adding the prevent here is important, because otherwise, {# Adding the prevent here is important, because otherwise,
clicking on the pagination buttons could submit the picture management form clicking on the pagination buttons could submit the picture management form
and reload the page #} and reload the page #}

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

@ -11,8 +11,8 @@
{% block content %} {% block content %}
<main x-data="productList"> <main x-data="productList">
<form id="search-form"> <form id="search-form" class="margin-bottom">
<h4>{% trans %}Filter products{% endtrans %}</h4> <h4 class="margin-bottom">{% trans %}Filter products{% endtrans %}</h4>
<fieldset> <fieldset>
<label for="search-input">{% trans %}Product name{% endtrans %}</label> <label for="search-input">{% trans %}Product name{% endtrans %}</label>
<input <input
@ -37,9 +37,11 @@
</div> </div>
</fieldset> </fieldset>
</form> </form>
<h3 @click="console.log(totalCount, nbPages())">{% trans %}Product list{% endtrans %}</h3> <h3 @click="console.log(totalCount, nbPages())" class="margin-bottom">
{% trans %}Product list{% endtrans %}
</h3>
<div class="row"> <div class="row margin-bottom">
<a href="{{ url('counter:new_product') }}" class="btn btn-blue"> <a href="{{ url('counter:new_product') }}" class="btn btn-blue">
{% trans %}New product{% endtrans %} <i class="fa fa-plus"></i> {% trans %}New product{% endtrans %} <i class="fa fa-plus"></i>
</a> </a>
@ -52,20 +54,19 @@
{% trans %}Download as cvs{% endtrans %} <i class="fa fa-file-arrow-down"></i> {% trans %}Download as cvs{% endtrans %} <i class="fa fa-file-arrow-down"></i>
</button> </button>
</div> </div>
<template x-if="loading">
<section :aria-busy="loading"></section>
</template>
<template x-for="[category, cat_products] of Object.entries(products)" :key="category"> <div class="aria-busy-grow" :aria-busy="loading">
<section> <template x-for="[category, cat_products] of Object.entries(products)" :key="category">
<h4 x-text="category"></h4> <section>
<ul> <h4 x-text="category"></h4>
<template x-for="p in cat_products" :key="p.id"> <ul>
<li><a :href="p.url" x-text="`${p.name} (${p.code})`"></a></li> <template x-for="p in cat_products" :key="p.id">
</template> <li><a :href="p.url" x-text="`${p.name} (${p.code})`"></a></li>
</ul> </template>
</section> </ul>
</template> </section>
</template>
{{ paginate_alpine("page", "nbPages") }} {{ paginate_alpine("page", "nbPages") }}
</div>
</main> </main>
{% endblock %} {% endblock %}