Rework : Menu formsemestre

This commit is contained in:
Iziram 2024-08-13 16:01:31 +02:00
parent 5b68adaf87
commit ae84ed26c3
3 changed files with 482 additions and 13 deletions

View File

@ -101,7 +101,7 @@ def formsemestre_custommenu_html(formsemestre_id):
"args": {"formsemestre_id": formsemestre_id},
}
)
return htmlutils.make_menu("Liens", menu)
return menu
def formsemestre_custommenu_edit(formsemestre_id):

View File

@ -473,18 +473,18 @@ def formsemestre_status_menubar(formsemestre: FormSemestre | None) -> str:
]
menu_stats = _build_menu_stats(formsemestre)
H = [
'<ul id="sco_menu">',
htmlutils.make_menu("Semestre", menu_semestre),
htmlutils.make_menu("Inscriptions", menu_inscriptions),
htmlutils.make_menu("Groupes", menu_groupes),
htmlutils.make_menu("Notes", menu_notes),
htmlutils.make_menu("Jury", menu_jury),
htmlutils.make_menu("Statistiques", menu_stats),
formsemestre_custommenu_html(formsemestre_id),
"</ul>",
]
return "\n".join(H)
menus = {
"Semestre": menu_semestre,
"Inscriptions": menu_inscriptions,
"Groupes": menu_groupes,
"Notes": menu_notes,
"Jury": menu_jury,
"Statistiques": menu_stats,
"Liens": formsemestre_custommenu_html(formsemestre_id),
}
return render_template("formsemestre/menu.j2", menu=menus)
# Element HTML decrivant un semestre (barre de menu et infos)

View File

@ -0,0 +1,469 @@
{# Styles du menu #}
<style>
/**
* Menu Formsemestre
*
* @author Matthias HARTMANN (Iziram)
* @license MIT
* Approche Mobile-first
*/
/* CSS défaut */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
--sco-formsemestre-color-primary: rgb(214, 233, 248);
--sco-formsemestre-color-accent: rgb(103, 167, 227);
}
body {
font-family: Arial, sans-serif;
color: #333;
background-color: #f4f4f4;
}
html{
scroll-behavior: smooth;
overflow: hidden;
}
.no-scroll {
overflow: hidden !important;
margin: 0 !important;
height: 100vh !important;
}
/* CSS menu */
.sco-formsemestre-menu {
background-color: var(--sco-formsemestre-color-primary);
border-top: var(--sco-formsemestre-color-accent) solid 3px;
padding: 0 1rem;
border-radius: 4px;
margin: 0 4px;
}
.sco-formsemestre-menu-container {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.sco-formsemestre-menu-toggle {
display: block;
background: none;
border: none;
cursor: pointer;
z-index: 1000;
}
.sco-formsemestre-menu-toggle-icon {
display: block;
width: 25px;
height: 3px;
background-color: #333;
position: relative;
transition: background-color 0.3s ease;
margin: 10px 5px;
}
.sco-formsemestre-menu-toggle-icon::before,
.sco-formsemestre-menu-toggle-icon::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #333;
transition: all 0.3s ease;
left: 0;
}
.sco-formsemestre-menu-toggle-icon::before {
top: -8px;
}
.sco-formsemestre-menu-toggle-icon::after {
bottom: -8px;
}
.sco-formsemestre-menu-menu {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background-color: #fff;
box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
transition: right 0.3s ease;
z-index: 999;
overflow-y: auto;
padding-top: 5vh;
margin: 0;
transition: all 0.3s ease;
}
.sco-formsemestre-menu-menu.active {
right: 0;
}
.sco-formsemestre-menu-item {
list-style: none;
width: 100%;
user-select: none;
display: flex;
justify-content: center;
border: none;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
}
.sco-formsemestre-menu-link {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.sco-formsemestre-menu-link:hover {
color: #007bff;
}
.sco-formsemestre-menu-link[disabled] {
pointer-events: none;
color: #b7b7b7;
}
/* Animation */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Styles spécifiques PC */
@media screen and (min-width: 768px) {
.sco-formsemestre-menu-toggle {
display: none;
}
.sco-formsemestre-menu-menu {
position: static;
display: flex;
width: auto;
height: auto;
background-color: transparent;
box-shadow: none;
overflow-y: visible;
flex-direction: row;
justify-content: center;
padding: 0;
}
.sco-formsemestre-menu-item {
width: auto;
}
.sco-formsemestre-menu-link {
text-wrap: nowrap;
}
.sco-formsemestre-menu .dropdown {
position: relative;
}
.sco-formsemestre-menu .dropdown[open] .dropdown-content {
position: absolute;
top: 100%;
left: 0;
z-index: 1;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.sco-formsemestre-menu{
margin-top: 4px;
}
}
/* Styles spécifiques mobile */
@media screen and (max-width: 767px) {
/* Menu toggle button styles for mobile */
.sco-formsemestre-menu-toggle {
display: block;
background-color: var(--sco-formsemestre-color-accent);
padding: 10px;
border-radius: 5px;
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
}
.sco-formsemestre-menu-toggle-icon {
width: 30px;
height: 4px;
background-color: #fff;
}
/* Mobile menu styles */
.sco-formsemestre-menu-menu {
position: fixed;
top: 0;
right: -100%;
width: 100vw;
height: 100vh;
background-color: var(--sco-formsemestre-color-primary);
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
padding: 2rem 1rem;
transition: right 0.3s ease-in-out;
z-index: 999;
overflow-y: scroll;
}
.sco-formsemestre-menu-menu.active {
right: 0;
}
/* Menu item styles */
.sco-formsemestre-menu-item {
width: 100%;
padding: 10px;
margin-bottom: 5px;
border-bottom: 1px solid var(--sco-formsemestre-color-accent);
font-size: small;
}
.sco-formsemestre-menu-menu>.dropdown>.sco-formsemestre-menu-item {
font-size: 16px;
}
.sco-formsemestre-menu-link {
color: #333;
font-size: 16px;
text-decoration: none;
display: block;
width: 100%;
transition: color 0.3s ease;
font-size: small !important;
text-wrap: wrap;
}
.sco-formsemestre-menu-link:hover {
color: var(--sco-formsemestre-color-accent);
}
/* Dropdown styles */
.sco-formsemestre-menu .dropdown>summary {
padding: 10px;
border-bottom: 1px solid var(--sco-formsemestre-color-accent);
cursor: pointer;
}
.sco-formsemestre-menu .dropdown-content {
display: none;
padding-left: 10px;
background-color: var(--sco-formsemestre-color-primary);
}
.sco-formsemestre-menu .dropdown[open]>.dropdown-content {
display: block;
}
.sco-formsemestre-menu .dropdown-content>.sco-formsemestre-menu-item {
padding: 8px;
margin-bottom: 5px;
}
.sco-formsemestre-menu .dropdown>summary::after {
border-top: 4px solid #333;
}
/* Toggling the dropdown arrow */
.sco-formsemestre-menu .dropdown[open]>summary::after {
transform: rotate(180deg);
}
.sco-formsemestre-menu{
border: none;
}
}
.sco-formsemestre-menu-toggle.active .sco-formsemestre-menu-toggle-icon {
background-color: transparent;
}
.sco-formsemestre-menu-toggle.active .sco-formsemestre-menu-toggle-icon::before {
transform: translateY(8px) rotate(45deg);
}
.sco-formsemestre-menu-toggle.active .sco-formsemestre-menu-toggle-icon::after {
transform: translateY(-8px) rotate(-45deg);
}
/*<== DROPDOWNS ==>*/
.sco-formsemestre-menu .dropdown>summary {
list-style: none;
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.sco-formsemestre-menu .dropdown>summary::marker {
display: none;
}
.sco-formsemestre-menu .dropdown>summary::after {
content: "";
display: inline-block;
width: 0;
height: 0;
margin-left: 4px;
vertical-align: middle;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.sco-formsemestre-menu .dropdown>summary:hover {
background-color: #92cbf6;
cursor: pointer;
}
.sco-formsemestre-menu .dropdown-content {
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
border-top: none;
}
.sco-formsemestre-menu .dropdown-content .sco-formsemestre-menu-item {
padding: 0.25rem 0.5rem;
list-style: none;
width: 100%;
display: block;
text-align: left;
transition: all 0.3s ease;
border-radius: 5px;
}
.sco-formsemestre-menu .dropdown-content .sco-formsemestre-menu-item:hover {
background-color: #f0f0f0;
}
</style>
{# Scripts #}
<script>
document.addEventListener("DOMContentLoaded", () => {
const navbarToggle = document.querySelector(".sco-formsemestre-menu-toggle");
const navbarMenu = document.querySelector(".sco-formsemestre-menu-menu");
const dropdownItems = document.querySelectorAll(".dropdown");
// Affichage du menu mobile au clic
navbarToggle.addEventListener("click", () => {
document.body.classList.toggle("no-scroll");
navbarMenu.classList.toggle("active");
navbarToggle.classList.toggle("active");
// Animation de l'icône
navbarToggle.setAttribute(
"aria-expanded",
navbarToggle.getAttribute("aria-expanded") === "false" ? "true" : "false"
);
// Fermeture des dropdowns
dropdownItems.forEach((item) => item.removeAttribute("open"));
});
// Fermeture du menu mobile au clic en dehors du menu
document.addEventListener("click", (e) => {
if (!navbarMenu.contains(e.target) && !navbarToggle.contains(e.target)) {
navbarMenu.classList.remove("active");
navbarToggle.classList.remove("active");
navbarToggle.setAttribute("aria-expanded", "false");
}
});
// Gestion du menu au redimensionnement de la fenêtre
window.addEventListener("resize", () => {
if (window.innerWidth >= 768) {
navbarMenu.classList.remove("active");
navbarToggle.classList.remove("active");
navbarToggle.setAttribute("aria-expanded", "false");
dropdownItems.forEach((item) => item.classList.remove("active"));
}
});
// Gestion des dropdowns
dropdownItems.forEach((item) => {
item.addEventListener("mouseover", () => {
if (window.innerWidth >= 768) {
item.setAttribute("open", "");
}
});
item.addEventListener("mouseout", () => {
if (window.innerWidth >= 768) {
item.removeAttribute("open");
}
});
});
});
</script>
{# Macro génération dropdown #}
{% macro dropdown(category, items) %}
<details class="dropdown">
<summary class="sco-formsemestre-menu-item">{{category}}</summary>
<div class="dropdown-content">
{% for item in items %}
{% if item.submenu is defined %}
{{dropdown(item.title, item.submenu)}}
{% else %}
{% set args = item.args or dict() %}
<a href="{{url_for(item.endpoint, scodoc_dept=g.scodoc_dept,**args)}}"
{{'disabled aria-disabled="true"' if item.enabled is defined and not item.enabled}}
class="sco-formsemestre-menu-item sco-formsemestre-menu-link"
>
{{item.title}}
</a>
{% endif %}
{% endfor %}
</div>
</details>
{% endmacro %}
{# Menu HTML #}
<nav class="sco-formsemestre-menu">
<div class="sco-formsemestre-menu-container">
{# Icône menu hamburger #}
<button class="sco-formsemestre-menu-toggle" aria-label="Toggle menu">
<span class="sco-formsemestre-menu-toggle-icon"></span>
</button>
{# Menu #}
<ul class="sco-formsemestre-menu-menu">
{% for category, items in menu.items() %}
{{dropdown(category, items)}}
{% endfor %}
</ul>
</div>
</nav>