klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-06-08 20:25:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove jquery-ui accordions

Browse Source
This commit is contained in:
Antoine Bartuccio 2025-06-02 19:32:03 +02:00
parent ad91c8ed4f
commit c10b488080
Signed by: klmp200
GPG Key ID: E7245548C53F904B
8 changed files with 269 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
core/static/core/accordion.scss Normal file
View File

@ -0,0 +1,39 @@
details.accordion summary {
margin: 2px 0 0 0;
padding: .5em .5em .5em .7em;
cursor: pointer;
user-select: none;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
details[open].accordion summary {
border: 1px solid #003eff;
background: #007fff;
color: #ffffff;
}
details:not([open]).accordion summary {
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border: 1px solid #c5c5c5;
background: #f6f6f6;
color: #454545;
}
// ::details-content isn't available on firefox yet
// we use .accordion-content as a workaround
details.accordion>.accordion-content {
background: #ffffff;
color: #333333;
padding: 1em 2.2em;
overflow: auto;
border: 1px solid #dddddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}

1
core/templates/core/base.jinja
View File

@ -12,6 +12,7 @@
<link rel="stylesheet" href="{{ static('core/header.scss') }}"> <link rel="stylesheet" href="{{ static('core/header.scss') }}">
<link rel="stylesheet" href="{{ static('core/navbar.scss') }}"> <link rel="stylesheet" href="{{ static('core/navbar.scss') }}">
<link rel="stylesheet" href="{{ static('core/pagination.scss') }}"> <link rel="stylesheet" href="{{ static('core/pagination.scss') }}">
<link rel="stylesheet" href="{{ static('core/accordion.scss') }}">
{% block jquery_css %} {% block jquery_css %}
{# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #} {# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #}

51
core/templates/core/user_account.jinja
View File

@ -1,7 +1,7 @@
{% extends "core/base.jinja" %} {% extends "core/base.jinja" %}
{% macro monthly(objects) %} {% macro monthly(objects) %}
<div> <div class="accordion-content">
<table> <table>
<thead> <thead>
<tr> <tr>
@ -37,22 +37,28 @@
{% if customer %} {% if customer %}
<h3>{% trans %}User account{% endtrans %}</h3> <h3>{% trans %}User account{% endtrans %}</h3>
<p>{% trans %}Amount: {% endtrans %}{{ customer.amount }} €</p> <p>{% trans %}Amount: {% endtrans %}{{ customer.amount }} €</p>
<div id="drop"> {% if buyings_month %}
{% if buyings_month %} <details class="accordion" name="account" open>
<h5>{% trans %}Account purchases{% endtrans %}</h5> <summary>{% trans %}Account purchases{% endtrans %}</summary>
{{ monthly(buyings_month) }} {{ monthly(buyings_month) }}
{% endif %} </details>
{% if refilling_month %} {% endif %}
<h5>{% trans %}Reloads{% endtrans %}</h5> {% if refilling_month %}
<details class="accordion" name="account">
<summary>{% trans %}Reloads{% endtrans %}</summary>
{{ monthly(refilling_month) }} {{ monthly(refilling_month) }}
{% endif %} </details>
{% if invoices_month %} {% endif %}
<h5>{% trans %}Eboutic invoices{% endtrans %}</h5> {% if invoices_month %}
<details class="accordion" name="account">
<summary>{% trans %}Eboutic invoices{% endtrans %}</summary>
{{ monthly(invoices_month) }} {{ monthly(invoices_month) }}
{% endif %} </details>
{% if etickets %} {% endif %}
<h4>{% trans %}Etickets{% endtrans %}</h4> {% if etickets %}
<div> <details class="accordion" name="account">
<summary>{% trans %}Etickets{% endtrans %}</summary>
<div class="accordion-content">
<ul> <ul>
{% for s in etickets %} {% for s in etickets %}
<li> <li>
@ -63,22 +69,9 @@
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
{% endif %} </details>
</div> {% endif %}
{% else %} {% else %}
<p>{% trans %}User has no account{% endtrans %}</p> <p>{% trans %}User has no account{% endtrans %}</p>
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block script %}
{{ super() }}
<script>
$(function(){
$("#drop").accordion({
heightStyle: "content"
});
});
</script>
{% endblock %}

8
core/templates/core/user_detail.jinja
View File

@ -254,13 +254,5 @@
keys.shift(); keys.shift();
} }
}); });
$(function () {
$("#drop_gifts").accordion({
heightStyle: "content",
collapsible: true,
active: false
});
});
</script> </script>
{% endblock %} {% endblock %}

8
counter/static/bundled/counter/counter-click-index.ts
View File

@ -103,7 +103,7 @@ document.addEventListener("alpine:init", () => {
this.customerBalance += Number.parseFloat( this.customerBalance += Number.parseFloat(
(event.detail.target.querySelector("#id_amount") as HTMLInputElement).value, (event.detail.target.querySelector("#id_amount") as HTMLInputElement).value,
); );
document.getElementById("selling-accordion").click(); document.getElementById("selling-accordion").setAttribute("open", "");
this.codeField.widget.focus(); this.codeField.widget.focus();
}, },
@ -139,12 +139,6 @@ document.addEventListener("alpine:init", () => {
}); });
$(() => { $(() => {
/* Accordion UI between basket and refills */
// biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
($("#click-form") as any).accordion({
heightStyle: "content",
activate: () => $(".focus").focus(),
});
// biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery // biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
($("#products") as any).tabs(); ($("#products") as any).tabs();
}); });

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

@ -51,185 +51,192 @@
</div> </div>
<div id="click-form"> <div id="click-form">
<h5 id="selling-accordion">{% trans %}Selling{% endtrans %}</h5> <details class="accordion" id="selling-accordion" name="selling" open>
<div> <summary>{% trans %}Selling{% endtrans %}</summary>
{% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %} <div class="accordion-content">
{% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %}
<form method="post" action="" <form method="post" action=""
class="code_form" @submit.prevent="handleCode"> class="code_form" @submit.prevent="handleCode">
<counter-product-select name="code" x-ref="codeField" autofocus required placeholder="{% trans %}Select a product...{% endtrans %}"> <counter-product-select name="code" x-ref="codeField" autofocus required placeholder="{% trans %}Select a product...{% endtrans %}">
<option value=""></option> <option value=""></option>
<optgroup label="{% trans %}Operations{% endtrans %}"> <optgroup label="{% trans %}Operations{% endtrans %}">
<option value="FIN">{% trans %}Confirm (FIN){% endtrans %}</option> <option value="FIN">{% trans %}Confirm (FIN){% endtrans %}</option>
<option value="ANN">{% trans %}Cancel (ANN){% endtrans %}</option> <option value="ANN">{% trans %}Cancel (ANN){% endtrans %}</option>
</optgroup>
{% for category in categories.keys() %}
<optgroup label="{{ category }}">
{% for product in categories[category] %}
<option value="{{ product.id }}">{{ product }}</option>
{% endfor %}
</optgroup> </optgroup>
{% endfor %} {% for category in categories.keys() %}
</counter-product-select> <optgroup label="{{ category }}">
{% for product in categories[category] %}
<option value="{{ product.id }}">{{ product }}</option>
{% endfor %}
</optgroup>
{% endfor %}
</counter-product-select>
<input type="submit" value="{% trans %}Go{% endtrans %}"/> <input type="submit" value="{% trans %}Go{% endtrans %}"/>
</form> </form>
{% for error in form.non_form_errors() %} {% for error in form.non_form_errors() %}
<div class="alert alert-red"> <div class="alert alert-red">
{{ error }} {{ error }}
</div> </div>
{% endfor %} {% endfor %}
<p>{% trans %}Basket: {% endtrans %}</p> <p>{% trans %}Basket: {% endtrans %}</p>
<form x-cloak method="post" action="" x-ref="basketForm"> <form x-cloak method="post" action="" x-ref="basketForm">
<div class="basket-error-container"> <div class="basket-error-container">
<div
x-cloak
class="alert alert-red basket-error"
x-show="alertMessage.show"
x-transition.duration.500ms
x-text="alertMessage.content"
></div>
</div>
{% csrf_token %}
<div x-ref="basketManagementForm">
{{ form.management_form }}
</div>
<ul>
<li x-show="getBasketSize() === 0">{% trans %}This basket is empty{% endtrans %}</li>
<template x-for="(item, index) in Object.values(basket)">
<li>
<template x-for="error in item.errors">
<div class="alert alert-red" x-text="error">
</div>
</template>
<button @click.prevent="addToBasketWithMessage(item.product.id, -1)">-</button>
<span class="quantity" x-text="item.quantity"></span>
<button @click.prevent="addToBasketWithMessage(item.product.id, 1)">+</button>
<span x-text="item.product.name"></span> :
<span x-text="item.sum().toLocaleString(undefined, { minimumFractionDigits: 2 })">€</span>
<span x-show="item.getBonusQuantity() > 0" x-text="`${item.getBonusQuantity()} x P`"></span>
<button
class="remove-item"
@click.prevent="removeFromBasket(item.product.id)"
><i class="fa fa-trash-can delete-action"></i></button>
<input
type="hidden"
:value="item.quantity"
:id="`id_form-${index}-quantity`"
:name="`form-${index}-quantity`"
required
readonly
>
<input
type="hidden"
:value="item.product.id"
:id="`id_form-${index}-id`"
:name="`form-${index}-id`"
required
readonly
>
</li>
</template>
</ul>
<p class="margin-bottom">
<strong>Total: </strong>
<strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong>
<strong> €</strong>
</p>
<div class="row">
<input
class="btn btn-blue"
type="submit"
@click.prevent="finish"
:disabled="getBasketSize() === 0"
value="{% trans %}Finish{% endtrans %}"
/>
<input
class="btn btn-grey"
type="submit" @click.prevent="cancel"
value="{% trans %}Cancel{% endtrans %}"
/>
</div>
</form>
</div>
</details>
<details class="accordion" name="selling">
<summary>{% trans %}Refilling{% endtrans %}</summary>
{% if object.type == "BAR" %}
{% if refilling_fragment %}
<div <div
x-cloak class="accordion-content"
class="alert alert-red basket-error" @htmx:after-request="onRefillingSuccess"
x-show="alertMessage.show" >
x-transition.duration.500ms {{ refilling_fragment }}
x-text="alertMessage.content" </div>
></div> {% else %}
</div> <div class="accordion-content">
<p class="alert alert-yellow">
{% trans trimmed %}
As a barman, you are not able to refill any account on your own.
An admin should be connected on this counter for that.
The customer can refill by using the eboutic.
{% endtrans %}
</p>
</div>
{% endif %}
</details>
{% if student_card_fragment %}
<details class="accordion" name="selling">
<summary>{% trans %}Student card{% endtrans %}</summary>
<div class="accordion-content">
{{ student_card_fragment }}
</div>
</details>
{% endif %}
{% csrf_token %} {% endif %}
<div x-ref="basketManagementForm">
{{ form.management_form }}
</div>
<ul>
<li x-show="getBasketSize() === 0">{% trans %}This basket is empty{% endtrans %}</li>
<template x-for="(item, index) in Object.values(basket)">
<li>
<template x-for="error in item.errors">
<div class="alert alert-red" x-text="error">
</div>
</template>
<button @click.prevent="addToBasketWithMessage(item.product.id, -1)">-</button>
<span class="quantity" x-text="item.quantity"></span>
<button @click.prevent="addToBasketWithMessage(item.product.id, 1)">+</button>
<span x-text="item.product.name"></span> :
<span x-text="item.sum().toLocaleString(undefined, { minimumFractionDigits: 2 })">€</span>
<span x-show="item.getBonusQuantity() > 0" x-text="`${item.getBonusQuantity()} x P`"></span>
<button
class="remove-item"
@click.prevent="removeFromBasket(item.product.id)"
><i class="fa fa-trash-can delete-action"></i></button>
<input
type="hidden"
:value="item.quantity"
:id="`id_form-${index}-quantity`"
:name="`form-${index}-quantity`"
required
readonly
>
<input
type="hidden"
:value="item.product.id"
:id="`id_form-${index}-id`"
:name="`form-${index}-id`"
required
readonly
>
</li>
</template>
</ul>
<p class="margin-bottom">
<strong>Total: </strong>
<strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong>
<strong> €</strong>
</p>
<div class="row">
<input
class="btn btn-blue"
type="submit"
@click.prevent="finish"
:disabled="getBasketSize() === 0"
value="{% trans %}Finish{% endtrans %}"
/>
<input
class="btn btn-grey"
type="submit" @click.prevent="cancel"
value="{% trans %}Cancel{% endtrans %}"
/>
</div>
</form>
</div> </div>
{% if object.type == "BAR" %}
<h5>{% trans %}Refilling{% endtrans %}</h5> <div id="products">
{% if refilling_fragment %} {% if not products %}
<div <div class="alert alert-red">
@htmx:after-request="onRefillingSuccess" {% trans %}No products available on this counter for this user{% endtrans %}
>
{{ refilling_fragment }}
</div> </div>
{% else %} {% else %}
<div> <ul>
<p class="alert alert-yellow"> {% for category in categories.keys() -%}
{% trans trimmed %} <li><a href="#cat_{{ category|slugify }}">{{ category }}</a></li>
As a barman, you are not able to refill any account on your own. {%- endfor %}
An admin should be connected on this counter for that. </ul>
The customer can refill by using the eboutic.
{% endtrans %}
</p>
</div>
{% endif %}
{% if student_card_fragment %}
<h5>{% trans %}Student card{% endtrans %}</h3>
<div>
{{ student_card_fragment }}
</div>
{% endif %}
{% endif %}
</div>
<div id="products">
{% if not products %}
<div class="alert alert-red">
{% trans %}No products available on this counter for this user{% endtrans %}
</div>
{% else %}
<ul>
{% for category in categories.keys() -%} {% for category in categories.keys() -%}
<li><a href="#cat_{{ category|slugify }}">{{ category }}</a></li> <div id="cat_{{ category|slugify }}">
{%- endfor %} <h5 class="margin-bottom">{{ category }}</h5>
</ul> <div class="row gap-2x">
{% for category in categories.keys() -%} {% for product in categories[category] -%}
<div id="cat_{{ category|slugify }}"> <button class="card shadow" @click="addToBasketWithMessage('{{ product.id }}', 1)">
<h5 class="margin-bottom">{{ category }}</h5> <img
<div class="row gap-2x"> class="card-image"
{% for product in categories[category] -%} alt="image de {{ product.name }}"
<button class="card shadow" @click="addToBasketWithMessage('{{ product.id }}', 1)"> {% if product.icon %}
<img src="{{ product.icon.url }}"
class="card-image" {% else %}
alt="image de {{ product.name }}" src="{{ static('core/img/na.gif') }}"
{% if product.icon %} {% endif %}
src="{{ product.icon.url }}" />
{% else %} <span class="card-content">
src="{{ static('core/img/na.gif') }}" <strong class="card-title">{{ product.name }}</strong>
{% endif %} <p>{{ product.price }} €<br>{{ product.code }}</p>
/> </span>
<span class="card-content"> </button>
<strong class="card-title">{{ product.name }}</strong> {%- endfor %}
<p>{{ product.price }} €<br>{{ product.code }}</p> </div>
</span>
</button>
{%- endfor %}
</div> </div>
</div> {%- endfor %}
{%- endfor %} {% endif %}
{% endif %} </div>
</div> </div>
</div>
{% endblock content %} {% endblock content %}
{% block script %} {% block script %}

50
pedagogy/static/pedagogy/css/pedagogy.scss
View File

@ -17,6 +17,7 @@ $large-devices: 992px;
margin-bottom: 0; margin-bottom: 0;
margin-top: 0; margin-top: 0;
} }
&.star-checked { &.star-checked {
color: $pedagogy-orange; color: $pedagogy-orange;
margin-bottom: 0; margin-bottom: 0;
@ -32,6 +33,7 @@ $large-devices: 992px;
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
} }
&.star-checked { &.star-checked {
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
@ -42,6 +44,7 @@ $large-devices: 992px;
&.grade-without-star { &.grade-without-star {
display: block; display: block;
} }
&.grade-with-star { &.grade-with-star {
display: none; display: none;
} }
@ -51,10 +54,12 @@ $large-devices: 992px;
font-size: 1.1em; font-size: 1.1em;
overflow-wrap: break-word; overflow-wrap: break-word;
.closed td.title { .closed td.title {
color: lighten($black-color, 10%); color: lighten($black-color, 10%);
font-style: italic; font-style: italic;
} }
td { td {
text-align: center; text-align: center;
border: none; border: none;
@ -131,10 +136,12 @@ $large-devices: 992px;
input[type="checkbox"] { input[type="checkbox"] {
display: none; display: none;
} }
.radio-guide { .radio-guide {
margin-top: 10px; margin-top: 10px;
color: white; color: white;
} }
.radio-guide label { .radio-guide label {
display: inline-block; display: inline-block;
background-color: $pedagogy-blue; background-color: $pedagogy-blue;
@ -143,12 +150,15 @@ $large-devices: 992px;
font-size: 16px; font-size: 16px;
border-radius: 4px; border-radius: 4px;
} }
.radio-guide input[type="radio"]:checked + label {
.radio-guide input[type="radio"]:checked+label {
background-color: $pedagogy-orange; background-color: $pedagogy-orange;
} }
.radio-guide input[type="checkbox"]:checked + label {
.radio-guide input[type="checkbox"]:checked+label {
background-color: $pedagogy-orange; background-color: $pedagogy-orange;
} }
.radio-guide label:hover { .radio-guide label:hover {
background-color: $pedagogy-hover-blue; background-color: $pedagogy-hover-blue;
} }
@ -219,12 +229,7 @@ $large-devices: 992px;
"stars" "stars"
"comment"; "comment";
} }
}
.ui-accordion-content {
background-color: $white-color;
border-color: $pedagogy-orange;
border-right: none;
} }
.form-stars { .form-stars {
@ -235,16 +240,6 @@ $large-devices: 992px;
grid-area: comment; grid-area: comment;
} }
.ui-accordion-header {
background-color: $pedagogy-orange;
color: $pedagogy-white-text;
clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
@media screen and (max-width: $large-devices) {
clip-path: none;
}
}
.ui-accordion-header-icon { .ui-accordion-header-icon {
color: $pedagogy-white-text; color: $pedagogy-white-text;
margin-right: 10px; margin-right: 10px;
@ -282,7 +277,7 @@ $large-devices: 992px;
background-color: $pedagogy-blue; background-color: $pedagogy-blue;
padding-right: 10px; padding-right: 10px;
> p { >p {
text-align: right; text-align: right;
font-weight: bold; font-weight: bold;
} }
@ -356,7 +351,7 @@ $large-devices: 992px;
.grade-type { .grade-type {
grid-area: grade-type; grid-area: grade-type;
> p { >p {
color: $pedagogy-white-text; color: $pedagogy-white-text;
font-weight: bold; font-weight: bold;
text-align: right; text-align: right;
@ -512,3 +507,20 @@ $large-devices: 992px;
} }
} }
} }
details.accordion summary {
background: $pedagogy-orange !important;
color: $pedagogy-white-text !important;
clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
@media screen and (max-width: $large-devices) {
clip-path: none;
}
}
details.accordion>.accordion-content {
background-color: $white-color;
border-color: $pedagogy-orange;
border-right: none;
}

24
pedagogy/templates/pedagogy/uv_detail.jinja
View File

@ -90,9 +90,9 @@
<p>{% trans %}You already posted a comment on this UV. If you want to comment again, please modify or delete your previous comment.{% endtrans %}</p> <p>{% trans %}You already posted a comment on this UV. If you want to comment again, please modify or delete your previous comment.{% endtrans %}</p>
</div> </div>
{% elif user.has_perm("pedagogy.add_uvcomment") %} {% elif user.has_perm("pedagogy.add_uvcomment") %}
<div id="leave_comment"> <details class="accordion" id="leave_comment">
<h2>{% trans %}Leave comment{% endtrans %}</h2> <summary>{% trans %}Leave comment{% endtrans %}</summary>
<div> <div class="accordion-content">
<form action="{{ url('pedagogy:uv_detail', uv_id=object.id) }}" method="post" enctype="multipart/form-data"> <form action="{{ url('pedagogy:uv_detail', uv_id=object.id) }}" method="post" enctype="multipart/form-data">
{% csrf_token %} {% csrf_token %}
<div class="leave-comment-grid-container"> <div class="leave-comment-grid-container">
@ -142,7 +142,7 @@
<p><input type="submit" value="{% trans %}Comment{% endtrans %}" /></p> <p><input type="submit" value="{% trans %}Comment{% endtrans %}" /></p>
</form> </form>
</div> </div>
</div> </details>
{% endif %} {% endif %}
<br> <br>
@ -221,21 +221,5 @@
<script type="text/javascript"> <script type="text/javascript">
$("#return_noscript").hide(); $("#return_noscript").hide();
$("#return_js").show(); $("#return_js").show();
const icons = {
header: "fa fa-toggle-right",
activeHeader: "fa fa-toggle-down"
};
$(function(){
$("#leave_comment").accordion({
icons: icons,
heightStyle: "content",
active: false,
collapsible: true
});
});
// Remove jquery-ui icons to make fontawesome work
$(document).ready(function(){
$(".ui-accordion-header-icon").first().removeClass("ui-icon");
});
</script> </script>
{% endblock %} {% endblock %}