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">
<label for="lang">Choisir la langue</label>
<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>Italiano</option>
<option>Rumantsch</option>

15
profile.html
View file

@ -28,18 +28,13 @@
</div>
<div class="offcanvas-body">
<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>
<div class="d-flex align-items-center gap-2 ms-auto">
<div class="col">
<label for="lang">Choisir la langue</label>
<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>Italiano</option>
<option>Rumantsch</option>
@ -57,7 +52,7 @@
</div>
</header>
<main>
<main data-screen="profile">
<div class="hero hero-secondary container-fluid">
<div class="d-flex">
<div class="container">
@ -153,6 +148,7 @@
</section>
<section class="panel mb-3">
<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 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-6">
@ -406,6 +402,9 @@
</main>
<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>
</body>
</html>

49
static/css/main.css
View file

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

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

292
tandem-list.html
View file

@ -9,6 +9,7 @@
<link href="static/css/main.css" rel="stylesheet">
<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/menu.js"></script>
</head>
<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">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu">
<div class="offcanvas-header">
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false">
<!-- <div class="offcanvas-header">
<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">
<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="col">
<label for="lang">Choisir la langue</label>
<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>Italiano</option>
<option>Rumantsch</option>
@ -46,7 +72,7 @@
</div>
</header>
<main>
<main data-screen="search">
<div class="hero hero-secondary container-fluid">
<div class="d-flex">
<div class="container">
@ -58,169 +84,124 @@
</div>
<section class="container-fluid">
<div class="row">
<div id="secondary-nav" class="col-md-3 my-5">
<div class="row my-5">
<div id="secondary-nav" class="col-lg-3">
<nav class="side-menu">
<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>
<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 class="nav-item">
<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 class="nav-item">
<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 class="nav-item">
<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 class="nav-item">
<a href="#" role="menuitem" class="nav-link">Demandes envoyées</a>
</li>
<li>
<a href="#" role="menuitem" class="nav-link">
Statistiques
</a>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Statistiques</a>
</li>
<li>
<a href="#" role="menuitem" class="nav-link">
Espace documentaire
</a>
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Espace documentaire</a>
</li>
</ul>
</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>
</ul>
</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>
<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>
<div class="col-md-auto">
<div class="align-items-center">
<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">
<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>
<form id="search-filters">
<!-- Ajax form submit -->
<div class="row">
<div class="col-md-auto">
<div class="align-items-center mb-3">
<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>
<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">
<!-- profile test -->
@ -359,6 +340,9 @@
</main>
<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>
</body>
</html>