Added responsive side menu
Made filters div with collapse
This commit is contained in:
parent
1cbde50ab8
commit
9ca385c99a
6 changed files with 227 additions and 168 deletions
292
tandem-list.html
292
tandem-list.html
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue