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 @@ -