From fb6b63bf0bf1357ce5cf2f9a5ec110304a73062f Mon Sep 17 00:00:00 2001 From: Iziram Date: Wed, 14 Aug 2024 14:44:19 +0200 Subject: [PATCH] MobileNav --- app/scodoc/sco_formsemestre_status.py | 4 +- app/static/css/scodoc97.css | 70 ++++++++++++++++++++++++-- app/static/icons/logo.png | Bin 0 -> 1091 bytes app/templates/formsemestre/menu.j2 | 17 ++++--- app/templates/sco_page.j2 | 39 +++++--------- app/templates/sidebar.j2 | 21 +++++++- 6 files changed, 112 insertions(+), 39 deletions(-) create mode 100644 app/static/icons/logo.png diff --git a/app/scodoc/sco_formsemestre_status.py b/app/scodoc/sco_formsemestre_status.py index e3c7fe03..fb0be872 100755 --- a/app/scodoc/sco_formsemestre_status.py +++ b/app/scodoc/sco_formsemestre_status.py @@ -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) diff --git a/app/static/css/scodoc97.css b/app/static/css/scodoc97.css index c97b98db..a32528d9 100644 --- a/app/static/css/scodoc97.css +++ b/app/static/css/scodoc97.css @@ -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 */ @@ -204,4 +237,35 @@ print { height: 100%; 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; } \ No newline at end of file diff --git a/app/static/icons/logo.png b/app/static/icons/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..46e39ffcc8a1922874bb40a3715c10810e7c72df GIT binary patch literal 1091 zcmV-J1ibr+P);_V44KAdGUXC-6O5}|B(5c%!`sel9(x7<3-J$re?HIid%oY__xpRE_kDzz z7|}$tohTC%LPe2TJb@4d+D1l5u1Y6f$f^_f3jzn90PZLVQ6yUU?xxuKq$+=ufk6o& zyIvG0qWTAzlLRIecsdnOba!A?e*;WR=yTREJk4(04vI_x#hp%;9SB8zDVM={E|?DV zp=xfRc|#DThdyK2X4?NwT>4goW$aG3;pvKP#dh}p0%xUjiD&V@4rIX`UgX^=F+%1n0{xCY!6uvERPDoDLa+A zH{YdF8_TfG^v720l<_(4iP7BHy^kUF9Ndy(=yP4nZ^=JMIdgx?WLeA}s&_>&;ONTC zD;Jrcol42!G@1go826PC5cGOnzf44v@-Zg5do%>?pzf_O1{_^vM5bRa#&?T1d07SA zS-Mi1b4fdjvbBk_$ipbQ+VS^smcW|*f{eLtNguKxHGy+^^^&EA81o)59qh*`D;1Zt zV<=m1(YPs?Ytc!P4TkUx-^SFQE(*TR9aABv%;R{(?%`C~0HT?hagCy@gV#LmDLt4% z{TsUp;x1(-*D3#&&|ACAaEdDeGx1+J-R1TsySIUwM4dtob#+kxa?#{4h z_09lPO%3FpF9$&mU`SNwoyB`+02h8Np=Zg8hZb}jEKqYf$Lg!b2a{ilw`P^yx;MscE?`IBjP2()-@H_U%p6f@LmMHjG%BoW6=^dcQYhO*s3)X*>>TG3)JN@L5L`JzY%g`;(gB zaDERvfH=j}Sk3&*<1CH;fGNXw(OD=NQJ7Ph^evrUKGGWVjy62s+m7L`==ShJ)zZja zTRV!6r1O`0j&YySr$7|3uCKzPy@h)!D|$80jk4rHw&~yiww0w)H9hXnGcr{%swXTP zYEZS@VraGl{Z0!<%|D%=<1t%%oCYTqm{efmpJo&OIGyO{`9H}U*^pv)3=RMQ002ov JPDHLkV1l-13u^!X literal 0 HcmV?d00001 diff --git a/app/templates/formsemestre/menu.j2 b/app/templates/formsemestre/menu.j2 index 792957ad..cc60c22a 100644 --- a/app/templates/formsemestre/menu.j2 +++ b/app/templates/formsemestre/menu.j2 @@ -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 @@