dubacq/ScoDoc
1
0
Fork 0
forked from ScoDoc/ScoDoc
Code Pull Requests Activity

MobileNav

Browse Source
This commit is contained in:
Iziram 2024-08-14 14:44:19 +02:00
parent 0eb407f5e3
commit fb6b63bf0b
6 changed files with 112 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/scodoc/sco_formsemestre_status.py
View File

@ -484,7 +484,9 @@ def formsemestre_status_menubar(formsemestre: FormSemestre | None) -> str:
"Liens": formsemestre_custommenu_html(formsemestre_id),
}
return render_template("formsemestre/menu.j2", menu=menus)
return render_template(
"formsemestre/menu.j2", menu=menus, formsemestre=formsemestre
)
# Element HTML decrivant un semestre (barre de menu et infos)

70
app/static/css/scodoc97.css
View File

@ -80,10 +80,13 @@
.app-corner .scodoc-index,
.app-corner .scodoc-index a {
font-size: 14pt;
display: inline;
display: flex;
color: rgb(4, 16, 159);
justify-content: center;
width: 100%;
}
.hamburger-menu {
display: none;
flex-direction: column;
@ -157,8 +160,7 @@
@media screen and (max-width: 768px),
print {
#sidebar,
div.toggle-sidebar {
.toggle-sidebar {
display: none;
}
@ -166,6 +168,37 @@ print {
grid-column-start: 1;
grid-column-end: 3;
}
div#sidebar {
position: fixed;
width: 100vw;
height: 100vh;
background: whitesmoke;
z-index: 900;
display: flex !important;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
left: -100%;
transition: left 400ms ease;
padding-top: 15vh;
}
div#sidebar[aria-expanded="true"] {
left: 0;
}
[ordi="true"] {
display: none !important;
}
}
@media screen and (min-width: 769px) {
[mobile="true"] {
display: none !important;
}
}
/* Sidebar */
@ -205,3 +238,34 @@ print {
margin-left: 10px;
margin-bottom: 10px;
}
/*Mobile Navbar*/
#logo-scodoc {
--size: 48px;
width: var(--size);
height: var(--size);
margin: 4px;
cursor: pointer;
}
#mobileNav {
position: sticky;
top: 0;
z-index: 1000;
display: flex;
justify-content: space-evenly;
align-items: center;
/* From https://css.glass */
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
body {
position: relative;
}

BIN
app/static/icons/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

17
app/templates/formsemestre/menu.j2
View File

@ -201,13 +201,9 @@
/* Menu toggle button styles for mobile */
.sco-formsemestre-menu-toggle {
display: block;
background-color: var(--sco-formsemestre-color-accent);
background-color: var(--sco-formsemestre-color-primary);
padding: 10px;
border-radius: 5px;
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
}
.sco-formsemestre-menu-toggle-icon {
@ -225,7 +221,7 @@
height: 100vh;
background-color: var(--sco-formsemestre-color-primary);
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
padding: 2rem 1rem;
padding: 4rem 1rem;
transition: right 0.3s ease-in-out;
z-index: 999;
overflow-y: scroll;
@ -371,6 +367,8 @@
const navbarMenu = document.querySelector(".sco-formsemestre-menu-menu");
const dropdownItems = document.querySelectorAll(".dropdown");
document.getElementById('mobileNav').append(document.getElementById('titre-court-sem'));
document.getElementById('mobileNav').append(navbarToggle);
// Affichage du menu mobile au clic
navbarToggle.addEventListener("click", () => {
@ -453,7 +451,12 @@
<div class="menu-wrapper">
<nav class="sco-formsemestre-menu">
<div class="sco-formsemestre-menu-container">
{# Icône menu hamburger #}
{# Titre semestre court sera déplacé dans #mobileNav #}
<h2 id="titre-court-sem">
<a class="stdlink" title="{{formsemestre.session_id()}}" href="{{url_for('notes.formsemestre_status',
scodoc_dept=g.scodoc_dept, formsemestre_id=formsemestre.id)}}">{{formsemestre.formation.acronyme}}</a>
</h2>
{# Icône menu hamburger sera déplacé dans #mobileNav #}
<button class="sco-formsemestre-menu-toggle" aria-label="Toggle menu">
<span class="sco-formsemestre-menu-toggle-icon"></span>
</button>

39
app/templates/sco_page.j2
View File

@ -23,16 +23,17 @@
{% block content %}
<!-- sco_page revamp -->
<div class="overlay" id="overlay" onclick="closeMobileMenu()"></div>
<div class="hamburger-menu" id="hamburgerMenu">
{% block hamburger_menu %}
{% include "hamburger_menu.j2" %}
{% endblock %}
<div id="mobileNav" mobile="true">
<!-- Logo ScoDoc -->
<img src="{{url_for('static', filename='icons/logo.png')}}" alt="Logo ScoDoc" id="logo-scodoc">
{% block mobileSemestre %}
<!-- Titre Semestre -->
<!-- Icone Menu Semestre -->
{% endblock mobileSemestre %}
</div>
<div class="scodoc-container">
<div class="app-corner">
<div class="hamburger">
<div class="hamburger-icon" onclick="toggleMobileMenu()">☰</div>
<div class="hamburger" ordi="true">
<div class="scodoc-index"><a class="sco-title" href="{{
url_for('scodoc.index', scodoc_dept=g.scodoc_dept) }}"
>ScoDoc</a>
@ -81,6 +82,10 @@
if (document.getElementById('sidebar')) {
enableTooltips("sidebar");
}
document.getElementById("logo-scodoc").addEventListener("click", function () {
toggleSidebarOffCanvas();
});
};
const SCO_URL = "{{ url_for('scolar.index_html', scodoc_dept=g.scodoc_dept) }}";
function toggleSidebar() {
@ -89,26 +94,6 @@
document.getElementById('toggle-sidebar-img').classList.toggle('collapsed');
}
function toggleMobileMenu() {
const menu = document.getElementById('hamburgerMenu');
const overlay = document.getElementById('overlay');
if (menu.style.display === 'none' || menu.style.display === '') {
menu.style.display = 'flex';
overlay.style.display = 'block';
} else {
menu.style.display = 'none';
overlay.style.display = 'none';
}
}
function closeMobileMenu() {
document.getElementById('hamburgerMenu').style.display = 'none';
document.getElementById('overlay').style.display = 'none';
}
// Ensure the hamburger menu and overlay are hidden initially
document.getElementById('hamburgerMenu').style.display = 'none';
document.getElementById('overlay').style.display = 'none';
</script>
{% endblock %}

19
app/templates/sidebar.j2
View File

@ -2,6 +2,10 @@
{# -*- mode: jinja-html -*- #}
<!-- sidebar -->
{# sidebar_common #}
<h1 mobile="true">
<a href="{{url_for('scolar.index_html', scodoc_dept=g.scodoc_dept)}}">ScoDoc</a>
</h1>
<div id="authuser"><a id="authuserlink" href="{{
url_for('users.user_info_page', scodoc_dept=g.scodoc_dept, user_name=current_user.user_name)
}}">{{current_user.user_name}}</a>
@ -108,3 +112,18 @@
{% endif %}
</div>
<!-- end of sidebar -->
<script>
// Mobile Sidebar Toggle
function toggleSidebarOffCanvas() {
// vérification de la taille de l'écran, si faux ne fait rien
if (window.innerWidth > 768) {
return;
}
const sidebar = document.querySelector('#sidebar');
const expanded = sidebar.getAttribute('aria-expanded') === 'true';
sidebar.setAttribute('aria-expanded', !expanded);
}
</script>