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

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-duration: 1s;
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 {
@ -255,6 +262,13 @@ body {
}
}
/**
* A spacer below an element. Somewhat cleaner than putting <br/> everywhere.
*/
.margin-bottom {
margin-bottom: 1.5rem;
}
/*--------------------------------CONTENT------------------------------*/
#quick_notif {
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
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,
clicking on the pagination buttons could submit the picture management form
and reload the page #}

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

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