From 9ca385c99a1a876e8f9d417eafe4b8011dd297c1 Mon Sep 17 00:00:00 2001 From: ericb Date: Tue, 26 Nov 2024 16:15:04 +0100 Subject: [PATCH] Added responsive side menu Made filters div with collapse --- home.html | 2 +- profile.html | 15 +- static/css/main.css | 49 +++++- static/img/icons/filters.svg | 19 +++ static/js/menu.js | 18 +++ tandem-list.html | 292 +++++++++++++++++------------------ 6 files changed, 227 insertions(+), 168 deletions(-) create mode 100644 static/img/icons/filters.svg create mode 100644 static/js/menu.js diff --git a/home.html b/home.html index 115539e..f2f8f03 100644 --- a/home.html +++ b/home.html @@ -39,7 +39,7 @@
- + @@ -57,7 +52,7 @@
-
+
@@ -153,6 +148,7 @@

Langue(s) proposée(s)

+

Pour le bon fonctionnement de votre TANDEM, veuillez n’indiquer que les langues pour lesquelles vous avez un niveau oral garantissant une communication fluide (niveau C1 du Cadre Européen Commun de Références pour les Langues).

@@ -406,6 +402,9 @@
+
+ +
diff --git a/static/css/main.css b/static/css/main.css index 2b5abd5..1d3b422 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -52,6 +52,12 @@ body { #mainNav, .offcanvas-backdrop{ top: var(--top-bar); } +.offcanvas-header, .offcanvas-body{ + padding: 1.625rem; +} +.offcanvas.offcanvas-end{ + border-left: none; +} .wrapper { display: flex; align-items: center; @@ -64,21 +70,33 @@ body { [data-screen="404"] .container{ justify-content: center; } +[data-screen="search"] .container-fluid > .row{ + justify-content: center; +} /* side menu */ -.side-menu{ - -} -.side-menu li{ - background: white; +.side-menu .nav-item{ + position: relative; } .side-menu .nav-link{ color: black; padding: 0.725rem 1rem; + border-radius: 0.25rem; + background: white; + border-left: 0px solid #f28705; + transition: all ease-in 0.25s; } .side-menu .nav-link:active, .side-menu .nav-link.active{ background-color: #f28705; font-weight: 700; + pointer-events: none; + cursor: default; +} +.side-menu .nav-link:not(.active):hover{ + color: black; + background: #fdc314; + border-left: 6px solid #f28705; + transition: all ease-in 0.25s; } .side-menu .nav-link:focus{ color: black; @@ -88,6 +106,13 @@ body { .side-menu li:not(:first-child){ margin-top: 0.35rem; } +.menu-separator{ + margin-top: 1.5rem; + border-bottom: 2px solid #f28705; + font-weight: 700; + margin-bottom: 0.5rem; + padding-bottom: 0.5rem; +} /* heros */ .hero{ @@ -228,6 +253,9 @@ article li:not(:first-of-type){ #search-filters{ border: 1px solid white; background-color: var(--accent-light); + margin-top: 0.5rem; +} +#search-filters form{ padding: calc(var(--div-padding) / 3); } @@ -332,6 +360,17 @@ footer a img{ max-height: 3em; min-height: 2.5em; } +.ui-btn{ + padding: 1rem; + background-color: white; + width: fit-content; + border-radius: 0.5rem; +} +.icon-ui{ + width: 1.5em; + height: 1.5em; + margin-right: 0.75rem; +} /* media queries */ @media (width <= 576px) { body{ diff --git a/static/img/icons/filters.svg b/static/img/icons/filters.svg new file mode 100644 index 0000000..768a792 --- /dev/null +++ b/static/img/icons/filters.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/static/js/menu.js b/static/js/menu.js new file mode 100644 index 0000000..98b7acc --- /dev/null +++ b/static/js/menu.js @@ -0,0 +1,18 @@ +document.addEventListener("DOMContentLoaded", function() { + const offmenu = document.getElementById("offSideMenu"); + const sidemenu = document.getElementById("secondary-nav"); + + function toggleMenus(mediaQuery) { + if (!mediaQuery.matches) { + offmenu.style.display = "none"; + sidemenu.style.display = "block"; + } else { + offmenu.style.display = "block"; + sidemenu.style.display = "none"; + } + } + + const mediaQuery = window.matchMedia("(max-width: 992px)"); + toggleMenus(mediaQuery); // Initial check + mediaQuery.addEventListener('change', (e) => toggleMenus(e)); +}); diff --git a/tandem-list.html b/tandem-list.html index 924f857..d614503 100644 --- a/tandem-list.html +++ b/tandem-list.html @@ -9,6 +9,7 @@ + @@ -22,16 +23,41 @@ -