eric/e-tandem_UI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added responsive side menu

Browse source 
Made filters div with collapse
This commit is contained in:
ericb 2024-11-26 16:15:04 +01:00
parent 1cbde50ab8
commit 9ca385c99a
6 changed files with 227 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

2
home.html
View file

@ -39,7 +39,7 @@
<div class="col"> <div class="col">
<label for="lang">Choisir la langue</label> <label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language"> <select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">
<option>Français</option> <option selected>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
<option>Italiano</option> <option>Italiano</option>
<option>Rumantsch</option> <option>Rumantsch</option>

13
profile.html
View file

@ -28,18 +28,13 @@
</div> </div>
<div class="offcanvas-body"> <div class="offcanvas-body">
<ul class="navbar-nav"> <ul class="navbar-nav">
<!-- <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Accueil</a>
</li>
<li class="nav-item">
</li> -->
</ul> </ul>
<div class="d-flex align-items-center gap-2 ms-auto"> <div class="d-flex align-items-center gap-2 ms-auto">
<div class="col"> <div class="col">
<label for="lang">Choisir la langue</label> <label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language"> <select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">
<option>Français</option> <option selected>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
<option>Italiano</option> <option>Italiano</option>
<option>Rumantsch</option> <option>Rumantsch</option>
@ -57,7 +52,7 @@
</div> </div>
</header> </header>
<main> <main data-screen="profile">
<div class="hero hero-secondary container-fluid"> <div class="hero hero-secondary container-fluid">
<div class="d-flex"> <div class="d-flex">
<div class="container"> <div class="container">
@ -153,6 +148,7 @@
</section> </section>
<section class="panel mb-3"> <section class="panel mb-3">
<h1 class="fs-2 mb-4">Langue(s) proposée(s)</h1> <h1 class="fs-2 mb-4">Langue(s) proposée(s)</h1>
<p>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).</p>
<!-- lang 1 --> <!-- lang 1 -->
<div class="row gx-md-5 align-items-center mb-3"> <div class="row gx-md-5 align-items-center mb-3">
<div class="col-6"> <div class="col-6">
@ -406,6 +402,9 @@
</main> </main>
<footer> <footer>
<div class="container">
<a href="https://www.bilinguisme.ch/" target="_blank" rel="noopener"><img class="img-fluid" src="static/img/logo/forum-bilinguisme.svg"></a>
</div>
</footer> </footer>
</body> </body>
</html> </html>

49
static/css/main.css
View file

@ -52,6 +52,12 @@ body {
#mainNav, .offcanvas-backdrop{ #mainNav, .offcanvas-backdrop{
top: var(--top-bar); top: var(--top-bar);
} }
.offcanvas-header, .offcanvas-body{
padding: 1.625rem;
}
.offcanvas.offcanvas-end{
border-left: none;
}
.wrapper { .wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
@ -64,21 +70,33 @@ body {
[data-screen="404"] .container{ [data-screen="404"] .container{
justify-content: center; justify-content: center;
} }
[data-screen="search"] .container-fluid > .row{
justify-content: center;
}
/* side menu */ /* side menu */
.side-menu{ .side-menu .nav-item{
position: relative;
}
.side-menu li{
background: white;
} }
.side-menu .nav-link{ .side-menu .nav-link{
color: black; color: black;
padding: 0.725rem 1rem; 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{ .side-menu .nav-link:active, .side-menu .nav-link.active{
background-color: #f28705; background-color: #f28705;
font-weight: 700; 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{ .side-menu .nav-link:focus{
color: black; color: black;
@ -88,6 +106,13 @@ body {
.side-menu li:not(:first-child){ .side-menu li:not(:first-child){
margin-top: 0.35rem; 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 */ /* heros */
.hero{ .hero{
@ -228,6 +253,9 @@ article li:not(:first-of-type){
#search-filters{ #search-filters{
border: 1px solid white; border: 1px solid white;
background-color: var(--accent-light); background-color: var(--accent-light);
margin-top: 0.5rem;
}
#search-filters form{
padding: calc(var(--div-padding) / 3); padding: calc(var(--div-padding) / 3);
} }
@ -332,6 +360,17 @@ footer a img{
max-height: 3em; max-height: 3em;
min-height: 2.5em; 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 queries */
@media (width <= 576px) { @media (width <= 576px) {
body{ body{

19
static/img/icons/filters.svg Normal file
View file

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-linecap: round;
stroke-miterlimit: 133.3;
stroke-width: 50px;
}
</style>
</defs>
<g>
<g id="Calque_1">
<path class="cls-1" d="M78.2,100.4h133.3M211.6,100.4c0,24.5,19.9,44.4,44.4,44.4s44.4-19.9,44.4-44.4M211.6,100.4c0-24.5,19.9-44.4,44.4-44.4s44.4,19.9,44.4,44.4M300.4,100.4h133.3M78.2,256h266.7M344.9,256c0,24.5,19.9,44.4,44.4,44.4s44.4-19.9,44.4-44.4-19.9-44.4-44.4-44.4-44.4,19.9-44.4,44.4ZM167.1,411.6h266.7M167.1,411.6c0-24.5-19.9-44.4-44.4-44.4s-44.4,19.9-44.4,44.4,19.9,44.4,44.4,44.4,44.4-19.9,44.4-44.4Z"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 786 B

18
static/js/menu.js Normal file
View file

@ -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));
});

284
tandem-list.html
View file

@ -9,6 +9,7 @@
<link href="static/css/main.css" rel="stylesheet"> <link href="static/css/main.css" rel="stylesheet">
<link rel="icon" type="image/png" sizes="16x16" href="static/favicon.png"> <link rel="icon" type="image/png" sizes="16x16" href="static/favicon.png">
<script src="static/js/vendor/bootstrap.bundle.min.js"></script> <script src="static/js/vendor/bootstrap.bundle.min.js"></script>
<script src="static/js/menu.js"></script>
</head> </head>
<body> <body>
@ -22,16 +23,41 @@
<button type="button" id="menu-toggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNav" aria-controls="mainNav" aria-label="Toggle main menu"> <button type="button" id="menu-toggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNav" aria-controls="mainNav" aria-label="Toggle main menu">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu"> <div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false">
<div class="offcanvas-header"> <!-- <div class="offcanvas-header">
<button type="button" type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close main menu"></button> <button type="button" type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close main menu"></button>
</div> </div> -->
<div class="offcanvas-body"> <div class="offcanvas-body">
<nav class="side-menu" id="offSideMenu">
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link active" aria-current="page">Rechercher des TANDEMs</a>
</li>
<li>
<a href="#" role="menuitem" class="nav-link">Mes TANDEMs</a>
</li>
<li>
<a href="profile.html" role="menuitem" class="nav-link">Modifier mon profil</a>
</li>
<li>
<a href="#" role="menuitem" class="nav-link">Demandes reçues <span class="badge text-bg-secondary rounded-pill">101</span></a>
</li>
<li>
<a href="#" role="menuitem" class="nav-link">Demandes envoyées</a>
</li>
<li>
<a href="#" role="menuitem" class="nav-link">Statistiques</a>
</li>
<li>
<a href="#" role="menuitem" class="nav-link">Espace documentaire</a>
</li>
</ul>
</nav>
<div class="d-flex align-items-center gap-2 ms-auto"> <div class="d-flex align-items-center gap-2 ms-auto">
<div class="col"> <div class="col">
<label for="lang">Choisir la langue</label> <label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language"> <select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">
<option>Français</option> <option selected>Français</option>
<option>Deutsch</option> <option>Deutsch</option>
<option>Italiano</option> <option>Italiano</option>
<option>Rumantsch</option> <option>Rumantsch</option>
@ -46,7 +72,7 @@
</div> </div>
</header> </header>
<main> <main data-screen="search">
<div class="hero hero-secondary container-fluid"> <div class="hero hero-secondary container-fluid">
<div class="d-flex"> <div class="d-flex">
<div class="container"> <div class="container">
@ -58,169 +84,124 @@
</div> </div>
<section class="container-fluid"> <section class="container-fluid">
<div class="row"> <div class="row my-5">
<div id="secondary-nav" class="col-md-3 my-5"> <div id="secondary-nav" class="col-lg-3">
<nav class="side-menu"> <nav class="side-menu">
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link active" aria-current="page"> <a href="#" role="menuitem" class="nav-link active" aria-current="page">Rechercher des TANDEMs</a>
Rechercher des TANDEMs
</a>
</li> </li>
<li> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link"> <a href="#" role="menuitem" class="nav-link">Mes TANDEMs</a>
Mes TANDEMs
</a>
</li> </li>
<li> <li class="nav-item">
<a href="profile.html" role="menuitem" class="nav-link"> <a href="profile.html" role="menuitem" class="nav-link">Modifier mon profil</a>
Modifier mon profil
</a>
</li> </li>
<li> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link"> <a href="#" role="menuitem" class="nav-link">Demandes reçues <span class="badge text-bg-secondary rounded-pill">101</span></a>
Demandes reçues <span class="badge text-bg-secondary rounded-pill">101</span>
</a>
</li> </li>
<li> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link"> <a href="#" role="menuitem" class="nav-link">Demandes envoyées</a>
Demandes envoyées
</a>
</li> </li>
<li> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link"> <a href="#" role="menuitem" class="nav-link">Statistiques</a>
Statistiques
</a>
</li> </li>
<li> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link"> <a href="#" role="menuitem" class="nav-link">Espace documentaire</a>
Espace documentaire </li>
</a> </ul>
<div class="menu-separator">Admin</div>
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Comptes</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Signalements</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Langues</a>
</li>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Dictionnaire</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<!-- <nav>
<li class="group">
<a href="#">
Admin
</a>
</li>
<li class="sub tandemaccount-index" style="display: none;">
<a href="/TandemAccount">
Comptes
</a>
</li>
<li class="sub signalement-index" style="display: none;">
<a href="/Signalement">
Signalements
</a>
</li>
<li role="separator" class="divider sub" style="display: none;"></li>
<li class="sub tandemlanguage-index" style="display: none;">
<a href="/TandemLanguage">
Langues
</a>
</li>
<li class="sub tandemlanguagelevel-index" style="display: none;">
<a href="/TandemLanguageLevel">
Niveaux
</a>
</li>
<li class="sub news-index" style="display: none;">
<a href="/News">
Actualités
</a>
</li>
<li class="sub commune-index" style="display: none;">
<a href="/Commune">
Lieu
</a>
</li>
<li class="sub dictionary" style="display: none;">
<a href="/Dictionary">
Dictionnaire
</a>
</li>
<li class="sub tandem-email" style="display: none;">
<a href="/Tandem/Email">
Emails
</a>
</li>
</ul>
</nav> -->
</div> </div>
<section id="tandem-list" class="col-md-8 my-5"> <section id="tandem-list" class="col-lg-8">
<div class="ui-btn">
<a data-bs-toggle="collapse" href="#search-filters" role="button" aria-expanded="false" aria-controls="search-filters"><span><img class="icon-ui" src="static/img/icons/filters.svg" alt=""></span>Afficher les filtres</a>
</div>
<div id="search-filters" class="collapse">
<form>
<!-- Ajax form submit -->
<div class="row">
<div class="col-md-auto">
<div class="align-items-center">
<label class="col-form-label">Langue(s) proposée(s):</label>
<select class="form-select" id="user-given-langs">
<option>--------</option>
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
</div>
<form id="search-filters"> <div class="col-md-auto">
<!-- Ajax form submit --> <div class="align-items-center">
<div class="row"> <label class="col-form-label">Langue(s) recherchée(s):</label>
<div class="col-md-auto"> <select class="form-select" id="user-searched-langs">
<div class="align-items-center mb-3"> <option>--------</option>
<label class="col-form-label">Langue(s) proposée(s):</label> <option>Français</option>
<select class="form-select" id="user-given-langs"> <option>Deutsch</option>
<option>--------</option> <option>Italiano</option>
<option>Français</option> <option>Rumantsch</option>
<option>Deutsch</option> <option>English</option>
<option>Italiano</option> </select>
<option>Rumantsch</option> </div>
<option>English</option>
</select>
</div> </div>
</div> </div>
<div class="row">
<div class="col-md-auto">
<div class="align-items-center">
<label class="col-form-label">Lieu de rencontre:</label>
<select class="form-select" id="user-searched-location-type">
<option>Indifférent</option>
</select>
</div>
</div>
<div class="col-md-auto">
<div class="align-items-center">
<label class="col-form-label">Canton:</label>
<select class="form-select" id="user-searched-location">
<option>Indifférent</option>
</select>
</div>
</div>
<div class="col-md-auto">
<div class="align-items-center">
<label class="col-form-label">Distance:</label>
<input type="num" class="form-control" id="user-searched-distance" placeholder="Distance (km)">
</div>
</div>
<div class="col-md-auto">
<div class="align-items-center">
<label class="col-form-label">Genre:</label>
<select class="form-select" id="user-searched-gender">
<option>Indifférent</option>
<option>Feminin</option>
<option>Masculin</option>
<option>Non-binaire</option>
</select>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-auto">
<div class="align-items-center mb-3">
<label class="col-form-label">Langue(s) recherchée(s):</label>
<select class="form-select" id="user-searched-langs">
<option>--------</option>
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-auto">
<div class="align-items-center mb-3">
<label class="col-form-label">Lieu de rencontre:</label>
<select class="form-select" id="user-searched-location-type">
<option>Indifférent</option>
</select>
</div>
</div>
<div class="col-md-auto">
<div class="align-items-center mb-3">
<label class="col-form-label">Canton:</label>
<select class="form-select" id="user-searched-location">
<option>Indifférent</option>
</select>
</div>
</div>
<div class="col-md-auto">
<div class="align-items-center mb-3">
<label class="col-form-label">Distance:</label>
<input type="num" class="form-control" id="user-searched-distance" placeholder="Distance (km)">
</div>
</div>
<div class="col-md-auto">
<div class="align-items-center mb-3">
<label class="col-form-label">Genre:</label>
<select class="form-select" id="user-searched-gender">
<option>Indifférent</option>
<option>Feminin</option>
<option>Masculin</option>
<option>Non-binaire</option>
</select>
</div>
</div>
</div>
</form>
<div id="tandem-search-results"> <div id="tandem-search-results">
<!-- profile test --> <!-- profile test -->
@ -359,6 +340,9 @@
</main> </main>
<footer> <footer>
<div class="container">
<a href="https://www.bilinguisme.ch/" target="_blank" rel="noopener"><img class="img-fluid" src="static/img/logo/forum-bilinguisme.svg"></a>
</div>
</footer> </footer>
</body> </body>
</html> </html>