fixed id naming convention

This commit is contained in:
ericb 2024-12-10 10:09:06 +01:00
parent e44c65cbce
commit 21f50f5ccd
11 changed files with 142 additions and 142 deletions

View file

@ -19,12 +19,12 @@
<a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a>
<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="menuToggle" 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="custom-toggler navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false">
<div class="offcanvas-body">
<div id="side-lang" class="ms-auto">
<div id="sideLang" class="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">

View file

@ -19,12 +19,12 @@
<a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a>
<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="menuToggle" 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="custom-toggler navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false">
<div class="offcanvas-body">
<div id="side-lang" class="ms-auto">
<div id="sideLang" class="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">
@ -49,20 +49,20 @@
<form class="form-sign mb-3">
<h1 class="mb-4">M'identifier</h1>
<div class="form-floating mb-4">
<input type="email" id="userId" class="form-control">
<input type="email" id="userId" class="form-control" placeholder="nom@domaine.ch">
<label class="form-label" for="userId">Adresse électronique</label>
</div>
<div class="form-floating mb-3">
<input type="password" id="userPass" class="form-control">
<input type="password" id="userPass" class="form-control" placeholder="••••••••••">
<label class="form-label" for="userPass">Mot de passe</label>
</div>
<div class="mb-4">
<a href="#!">J'ai oublié mon mot de passe</a>
<a href="#!" class="text-link">J'ai oublié mon mot de passe</a>
</div>
<button class="btn btn-cta rounded w-100 py-3" type="submit">S'identifier</button>
</form>
<span>Je n'ai pas de compte?</span>
<a href="create-account.html">Créer un compte</a>
<a href="create-account.html" class="text-link">Créer un compte</a>
</div>
</div>

View file

@ -20,12 +20,12 @@
<a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a>
<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="menuToggle" 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="custom-toggler navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false">
<div class="offcanvas-body">
<div id="side-lang" class="ms-auto">
<div id="sideLang" class="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">
@ -50,16 +50,16 @@
<form class="form-sign mb-3">
<h1 class="mb-4">Créer un compte</h1>
<div class="form-floating mb-3">
<input type="email" id="userId" class="form-control">
<input type="email" id="userId" class="form-control" placeholder="nom@domaine.ch">
<label class="form-label" for="userId">Adresse électronique</label>
</div>
<div class="mb-3">
<button id="readTerms" type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#cgv-modal">Lire les termes et conditions d'utilisation</button>
<button id="readTerms" type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#cgvModal">Lire les termes et conditions d'utilisation</button>
</div>
<button id="btnCreateAccount" class="btn btn-cta rounded w-100 py-3" type="submit" disabled>Créer un compte</button>
</form>
<span>J'ai déjà un compte?</span>
<a href="connect.html">M'identifier</a>
<a href="connect.html" class="text-link">M'identifier</a>
</div>
</div>
</main>
@ -87,7 +87,7 @@
</footer>
<!-- Modal -->
<div class="modal fade" id="cgv-modal" tabindex="-1" aria-label="Conditions générales" aria-hidden="true">
<div class="modal fade" id="cgvModal" tabindex="-1" aria-label="Conditions générales" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
@ -99,8 +99,8 @@
<p>Le Forum du bilinguisme se réserve le droit de supprimer en tout temps le profil de personnes dont les intentions diffèrent de lobjectif premier de cette plateforme : mettre en contact des personnes de langues différentes dans le but de former et pratiquer un TANDEM linguistique*. Le Forum du bilinguisme rappelle aux personnes inscrites que cette e-plateforme est ouverte au public et que les données personnelles publiées sont de la responsabilité de lutilisateur. Vous pouvez en tout temps désactiver, par conséquent réactiver votre profil.</p>
<p><sup class="emphasis"><strong>*</strong></sup>Le Forum du bilinguisme ne peut être tenu responsable de la véracité des données publiées, ni du bien-fondé de la démarche des personnes inscrites sur la plateforme. Vous pouvez à tout moment nous signaler un profil ne respectant pas le but de cette plateforme.</p>
<div class="form-check py-3">
<input class="form-check-input" type="checkbox" value="" id="cgv-check">
<label class="form-check-label" for="cgv-check">
<input class="form-check-input" type="checkbox" value="" id="cgvCheck">
<label class="form-check-label" for="cgvCheck">
<strong>J'accepte ces termes et conditions</strong>
</label>
</div>

View file

@ -6212,7 +6212,7 @@
<td>Tandem</td>
<td class="">HomepageDescription</td>
<td>
Die TANDEM-Methode eröffnet Ihnen einen neuen Lernhorizont. Im Gegensatz zu traditionellen Sprachkursen liegt der Schwerpunkt auf der mündlichen Kommunikation.
Die tandemMethode eröffnet Ihnen einen neuen Lernhorizont. Im Gegensatz zu traditionellen Sprachkursen liegt der Schwerpunkt auf der mündlichen Kommunikation.
</td>
<td>
La méthode TANDEM vous ouvre un nouvel horizon dapprentissage. A linverse des cours de langues traditionnels, laccent est mis sur la communication orale.
@ -6252,7 +6252,7 @@
<td>Tandem</td>
<td class="">homeText1Banner</td>
<td>
Die TANDEM-Methode eröffnet Ihnen einen neuen Lernhorizont. Im Gegensatz zu traditionellen Sprachkursen liegt der Schwerpunkt auf der mündlichen Kommunikation.
Die tandemMethode eröffnet Ihnen einen neuen Lernhorizont. Im Gegensatz zu traditionellen Sprachkursen liegt der Schwerpunkt auf der mündlichen Kommunikation.
</td>
<td>
La méthode TANDEM vous ouvre un nouvel horizon dapprentissage. A linverse des cours de langues traditionnels, laccent est mis sur la communication orale.

View file

@ -19,7 +19,7 @@
<a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a>
<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="menuToggle" 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="custom-toggler navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu">
@ -30,7 +30,7 @@
<ul class="navbar-nav">
</ul>
<div id="side-lang" class="ms-auto">
<div id="sideLang" class="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">
@ -71,7 +71,7 @@
</div>
</div>
</div>
<section id="tandem-explanations">
<section id="tandemExplanations">
<header class="container mb-5">
<h1 class="display-4 fw-semibold mb-5 mb-lg-3">Le TANDEM linguistique</h1>
<p class="fs-4 fw-light lh-sm">Parle-moi dans ta langue et je t'enseignerai la mienne</p>
@ -104,7 +104,7 @@
<a class="btn btn-cta rounded mt-2" href="https://www.bilinguisme.ch/TANDEMs-linguistiques/Activites-et-entrainement/Sites-Web-applications-et-livres" target="_blank" rel="noopener">Pour davantage d'idées</a>
</article>
<article id="tandem-method">
<article id="tandemMethod">
<div class="row">
<div class="col order-2 order-lg-1 bottom-anchored">
<img class="img-fluid" src="static/img/gfx2.png">

View file

@ -19,7 +19,7 @@
<li><a href="connect.html" target="_blank" rel="noopener">Page de connexion</a></li>
<li><a href="create-account.html" target="_blank" rel="noopener">Création de compte</a></li>
<li><a href="profile.html" target="_blank" rel="noopener">Profil utilisateur</a></li>
<li><a href="tandem-list.html" target="_blank" rel="noopener">Recherche TANDEM</a></li>
<li><a href="tandemList.html" target="_blank" rel="noopener">Recherche TANDEM</a></li>
<li><a href="404.html" target="_blank" rel="noopener">Error 404</a></li>
</ul>
</body>

View file

@ -20,7 +20,7 @@
<a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a>
<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="menuToggle" 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="custom-toggler navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false">
@ -29,9 +29,9 @@
</div> -->
<div class="offcanvas-body">
<nav class="side-menu" id="offSideMenu">
<div class="user-avatar">
<div class="userAvatar">
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
<p class="user-pseudo">Forum du Bilinguisme</p>
<p class="userPseudo">Forum du Bilinguisme</p>
</div>
<ul class="nav">
<li class="nav-item">
@ -123,7 +123,7 @@
</div>
</nav>
<div id="side-lang" class="ms-auto">
<div id="sideLang" class="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">
@ -159,7 +159,7 @@
<section class="container-fluid">
<div class="row my-3">
<div id="secondary-nav" class="col-lg-3">
<div id="secondNav" class="col-lg-3">
<nav class="side-menu">
<ul class="nav flex-column mb-auto">
<li class="nav-item">
@ -208,15 +208,15 @@
<form>
<div class="row g-3 align-items-center justify-content-between mb-3">
<div class="col-auto">
<div class="user-avatar">
<div class="userAvatar">
<img src="static/img/avatars/default-avatar.svg" class="img-fluid">
</div>
<button type="button" class="btn btn-cta">Télécharger une image</button>
</div>
<div id="user-profile-activation" class="col-auto rounded">
<div id="userProfileActivation" class="col-auto rounded">
<div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="checkbox" role="switch" id="activate-user-profile">
<label class="form-check-label" for="activate-user-profile">Rendre mon profil public</label>
<input class="form-check-input" type="checkbox" role="switch" id="activateUserProfile">
<label class="form-check-label" for="activateUserProfile">Rendre mon profil public</label>
</div>
</div>
</div>
@ -225,7 +225,7 @@
<label class="col-form-label">Pseudo</label>
</div>
<div class="col-auto">
<input class="form-control" type="text" id="user-pseudo" placeholder="Forum du Bilinguisme" disabled readonly>
<input class="form-control" type="text" id="userPseudo" placeholder="Forum du Bilinguisme" disabled readonly>
</div>
</div>
<div class="row align-items-center mb-3">
@ -233,7 +233,7 @@
<label class="col-form-label">Email</label>
</div>
<div class="col-md-5">
<input class="form-control" type="email" id="user-mail" placeholder="forum@zweisprachigkeit.ch" disabled readonly>
<input class="form-control" type="email" id="userMail" placeholder="forum@zweisprachigkeit.ch" disabled readonly>
</div>
</div>
<div class="row align-items-center mb-3">
@ -241,7 +241,7 @@
<label class="col-form-label">Genre</label>
</div>
<div class="col-md-5">
<select class="form-select" id="user-gender">
<select class="form-select" id="userGender">
<option>Homme</option>
<option>Femme</option>
<option>Non-binaire</option>
@ -253,7 +253,7 @@
<label class="col-form-label">Langue</label>
</div>
<div class="col-md-5">
<select class="form-select" id="user-lang1">
<select class="form-select" id="userLang1">
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
@ -267,7 +267,7 @@
<label class="col-form-label">Langue</label>
</div>
<div class="col-md-5">
<select class="form-select" id="user-lang2">
<select class="form-select" id="userLang2">
<option>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
@ -281,8 +281,8 @@
<section class="panel mb-3">
<h1 class="fs-2 mb-4">Présentation</h1>
<p>Vous avez la possibilité de publier un texte permettant à toute personne intéressée den savoir un peu plus à votre sujet motivation, intérêts personnels, âge, objectif du TANDEM linguistique (professionnel ou privé), horaires, etc.</p>
<label class="form-label" for="user-description">Présentation (500 caractères max.)</label>
<textarea name="user-description" id="user-description" class="form-control" placeholder="Entrez votre présentation" rows="4" maxlength="500"></textarea>
<label class="form-label" for="userDescription">Présentation (500 caractères max.)</label>
<textarea name="userDescription" id="userDescription" class="form-control" placeholder="Entrez votre présentation" rows="4" maxlength="500"></textarea>
</section>
<section class="panel mb-3">
<h1 class="fs-2 mb-4">Langue(s) proposée(s)</h1>
@ -290,8 +290,8 @@
<!-- lang 1 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-6">
<label class="col-form-label" for="user-front-lang1">Langue</label>
<select class="form-select" id="user-front-lang1">
<label class="col-form-label" for="userFrontLang1">Langue</label>
<select class="form-select" id="userFrontLang1">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
@ -301,8 +301,8 @@
</select>
</div>
<div class="col-6">
<label class="col-form-label" for="user-front-level1">Niveau</label>
<select class="form-select" id="user-front-level1">
<label class="col-form-label" for="userFrontLevel1">Niveau</label>
<select class="form-select" id="userFrontLevel1">
<option>Sélectionner un niveau</option>
<option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option>
@ -314,8 +314,8 @@
<!-- lang 2 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-lang2">Langue 2</label>
<select class="form-select" id="user-front-lang2">
<label class="col-form-label visually-hidden" for="userFrontLang2">Langue 2</label>
<select class="form-select" id="userFrontLang2">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
@ -325,8 +325,8 @@
</select>
</div>
<div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-level2">Niveau 2</label>
<select class="form-select" id="user-front-level2">
<label class="col-form-label visually-hidden" for="userFrontLevel2">Niveau 2</label>
<select class="form-select" id="userFrontLevel2">
<option>Sélectionner un niveau</option>
<option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option>
@ -339,8 +339,8 @@
<!-- lang 3 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-lang3">Langue 3</label>
<select class="form-select" id="user-front-lang3">
<label class="col-form-label visually-hidden" for="userFrontLang3">Langue 3</label>
<select class="form-select" id="userFrontLang3">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
@ -350,8 +350,8 @@
</select>
</div>
<div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-level3">Niveau 3</label>
<select class="form-select" id="user-front-level3">
<label class="col-form-label visually-hidden" for="userFrontLevel3">Niveau 3</label>
<select class="form-select" id="userFrontLevel3">
<option>Sélectionner un niveau</option>
<option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option>
@ -364,8 +364,8 @@
<!-- lang 4 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-lang4">Langue 4</label>
<select class="form-select" id="user-front-lang4">
<label class="col-form-label visually-hidden" for="userFrontLang4">Langue 4</label>
<select class="form-select" id="userFrontLang4">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
@ -375,8 +375,8 @@
</select>
</div>
<div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-level4">Niveau 4</label>
<select class="form-select" id="user-front-level4">
<label class="col-form-label visually-hidden" for="userFrontLevel4">Niveau 4</label>
<select class="form-select" id="userFrontLevel4">
<option>Sélectionner un niveau</option>
<option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option>
@ -389,8 +389,8 @@
<!-- lang 5 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-lang5">Langue 5</label>
<select class="form-select" id="user-front-lang5">
<label class="col-form-label visually-hidden" for="userFrontLang5">Langue 5</label>
<select class="form-select" id="userFrontLang5">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
@ -400,8 +400,8 @@
</select>
</div>
<div class="col-6">
<label class="col-form-label visually-hidden" for="user-front-level5">Niveau 5</label>
<select class="form-select" id="user-front-level5">
<label class="col-form-label visually-hidden" for="userFrontLevel5">Niveau 5</label>
<select class="form-select" id="userFrontLevel5">
<option>Sélectionner un niveau</option>
<option>Elémentaire (A1 - A2)</option>
<option>Moyen (B1)</option>
@ -416,8 +416,8 @@
<!-- lang 1 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-md-6">
<label class="col-form-label visually-hidden" for="user-requested-lang1">Langue</label>
<select class="form-select" id="user-requested-lang1">
<label class="col-form-label visually-hidden" for="userRequestedLang1">Langue</label>
<select class="form-select" id="userRequestedLang1">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
@ -430,8 +430,8 @@
<!-- lang 2 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-md-6">
<label class="col-form-label visually-hidden" for="user-requested-lang2">Langue 2</label>
<select class="form-select" id="user-requested-lang2">
<label class="col-form-label visually-hidden" for="userRequestedLang2">Langue 2</label>
<select class="form-select" id="userRequestedLang2">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
@ -444,8 +444,8 @@
<!-- lang 3 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-md-6">
<label class="col-form-label visually-hidden" for="user-requested-lang3">Langue 3</label>
<select class="form-select" id="user-requested-lang3">
<label class="col-form-label visually-hidden" for="userRequestedLang3">Langue 3</label>
<select class="form-select" id="userRequestedLang3">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
@ -458,8 +458,8 @@
<!-- lang 4 -->
<div class="row gx-md-5 align-items-center mb-3">
<div class="col-md-6">
<label class="col-form-label visually-hidden" for="user-requested-lang4">Langue 4</label>
<select class="form-select" id="user-requested-lang4">
<label class="col-form-label visually-hidden" for="userRequestedLang4">Langue 4</label>
<select class="form-select" id="userRequestedLang4">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
@ -472,8 +472,8 @@
<!-- lang 5 -->
<div class="row gx-md-5 align-items-center">
<div class="col-md-6">
<label class="col-form-label visually-hidden" for="user-requested-lang5">Langue 5</label>
<select class="form-select" id="user-requested-lang5">
<label class="col-form-label visually-hidden" for="userRequestedLang5">Langue 5</label>
<select class="form-select" id="userRequestedLang5">
<option>Sélectionner une langue</option>
<option>Français</option>
<option>Deutsch</option>
@ -519,10 +519,10 @@
<div class="col-lg-6">
<div class="row gx-md-5 align-items-center">
<div class="col-auto">
<label class="col-form-label" for="user-tandem-meet-town">Lieu de rencontre souhaité</label>
<label class="col-form-label" for="userTandemMeetTown">Lieu de rencontre souhaité</label>
</div>
<div class="col-md-auto">
<select class="form-select" id="user-tandem-meet-town">
<select class="form-select" id="userTandemMeetTown">
<option>Sélectionner une commune</option>
<option>Biel/Bienne</option>
<option>Genève</option>

View file

@ -182,11 +182,11 @@ h1, h2, h3, h4, h5{
/* #profile label{
font-weight: 700;
} */
#user-profile-activation{
#userProfileActivation{
padding: 1.5em;
background-color: var(--accent-light);
}
#activate-user-profile{
#activateUserProfile{
margin-left: 1em;
margin-top: 0;
width: 3em;
@ -204,21 +204,21 @@ h1, h2, h3, h4, h5{
#tandem-meet .col label{
font-weight: initial;
}
#tandem-explanations{
#tandemExplanations{
padding-top: 5rem;
padding-bottom: 5rem;
background-color: var(--background-wrapper);
}
#tandem-explanations header{
#tandemExplanations header{
display: grid;
justify-items: center;
text-align: center;
padding: 0 3rem;
}
#tandem-explanations header p{
#tandemExplanations header p{
color: rgb(100,100,100);
}
#tandem-explanations article{
#tandemExplanations article{
display: grid;
justify-items: center;
margin-top: 2rem;
@ -226,7 +226,7 @@ h1, h2, h3, h4, h5{
background-color: var(--accent-light);
padding: var(--div-padding);
}
#tandem-method{
#tandemMethod{
background-image: linear-gradient(to right bottom, rgb(242,135,5), rgb(246,150,2), rgb(249,165,2), rgb(251,180,9), rgb(253,155,20));
}
.bottom-anchored{
@ -264,10 +264,10 @@ article li:not(:first-of-type){
color: darkgray;
letter-spacing: .25em;
}
.profile .user-avatar{
.profile .userAvatar{
text-align: center;
}
.user-avatar img{
.userAvatar img{
width: 9rem;
height: 9rem;
object-fit: cover;
@ -275,13 +275,13 @@ article li:not(:first-of-type){
border: 2px solid white;
border-radius: 50%;
}
.profile .label, #signal-modal label{
.profile .label, #signalModal label{
font-weight: 700;
}
.user-description{
.userDescription{
margin-top: 1.5em;
}
.profile-options{
.profileOptions{
margin-top: 2em;
justify-content: end;
display: flex;
@ -289,12 +289,12 @@ article li:not(:first-of-type){
}
/* search filters */
#search-filters{
#searchFilters{
border: 1px solid white;
background-color: rgba(255,255,255,.5);
margin-top: 0.5rem;
}
#search-filters form{
#searchFilters form{
padding: calc(var(--div-padding) / 3);
}
@ -342,7 +342,7 @@ label[for="lang"]{
font-size: 0.9em;
margin-bottom: 0.25rem;
}
#search-filters label{
#searchFilters label{
font-weight: 600;
}
/* overrides */
@ -454,11 +454,11 @@ nav .icon-ui{
.partners-logo-grid{
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
}
.profile .user-avatar, .profile .user-pseudo, .offcanvas .user-avatar{
.profile .userAvatar, .profile .userPseudo, .offcanvas .userAvatar{
margin: 0 auto;
text-align: center
}
.profile .user-pseudo{
.profile .userPseudo{
margin: .5em auto;
}
}
@ -469,17 +469,17 @@ nav .icon-ui{
h1, h2, h3, h4{
text-align: center;
}
.profile-options{
.profileOptions{
display: grid;
gap: 0 .5rem;
width: fit-content;
margin: calc(var(--div-padding) / 3) auto 0;
}
.offcanvas .user-avatar{
.offcanvas .userAvatar{
margin: 0 auto;
text-align: center
}
.offcanvas .user-avatar img{
.offcanvas .userAvatar img{
width: 5rem;
height: 5rem;
}
@ -520,11 +520,11 @@ nav .icon-ui{
.offcanvas li:not(:first-child){
margin-top: initial;
}
.offcanvas .user-pseudo{
.offcanvas .userPseudo{
font-weight: 700;
margin-top: .5em;
}
#side-lang{
#sideLang{
display: flex;
align-items: center;
gap: 1rem;

View file

@ -1,5 +1,5 @@
document.addEventListener("DOMContentLoaded", function() {
const checkTerms = document.querySelector('#cgv-check');
const checkTerms = document.querySelector('#cgvCheck');
const createAccountButton = document.querySelector('#btnCreateAccount');
const readTerms = document.querySelector('#readTerms');
console.log(checkTerms, createAccountButton);

View file

@ -4,14 +4,14 @@ function initTooltips(section) {
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
}
function checkTermsandConditions(){
const checkTerms = document.querySelector('#cgv-check');
const checkTerms = document.querySelector('#cgvCheck');
const createAccountButton = document.querySelector('#btnCreateAccount');
createAccountButton.disabled = !checkTerms.checked;
}
document.addEventListener("DOMContentLoaded", function() {
const offmenu = document.getElementById("offSideMenu");
const sidemenu = document.getElementById("secondary-nav");
const sidemenu = document.getElementById("secondNav");
function toggleMenus(mediaQuery) {
if (!mediaQuery.matches) {

View file

@ -20,7 +20,7 @@
<a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a>
<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="menuToggle" 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="custom-toggler navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false">
@ -29,9 +29,9 @@
</div> -->
<div class="offcanvas-body">
<nav class="side-menu" id="offSideMenu">
<div class="user-avatar">
<div class="userAvatar">
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
<p class="user-pseudo">Forum du Bilinguisme</p>
<p class="userPseudo">Forum du Bilinguisme</p>
</div>
<ul class="nav">
<li class="nav-item">
@ -123,7 +123,7 @@
</div>
</nav>
<div id="side-lang" class="ms-auto">
<div id="sideLang" class="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">
@ -158,7 +158,7 @@
<section class="container-fluid">
<div class="row my-3">
<div id="secondary-nav" class="col-lg-3">
<div id="secondNav" class="col-lg-3">
<nav class="side-menu">
<ul class="nav flex-column mb-auto">
<li class="nav-item">
@ -201,18 +201,18 @@
</nav>
</div>
<section id="tandem-list" class="col-lg-8">
<section id="tandemList" class="col-lg-8">
<div class="ui-btn">
<a class="btn-link" 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>Filtrer</a>
<a class="btn-link" data-bs-toggle="collapse" href="#searchFilters" role="button" aria-expanded="false" aria-controls="searchFilters"><span><img class="icon-ui" src="static/img/icons/filters.svg" alt=""></span>Filtrer</a>
</div>
<div id="search-filters" class="collapse">
<div id="searchFilters" 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">
<select class="form-select" id="userGivenLangs">
<option>--------</option>
<option>Français</option>
<option>Deutsch</option>
@ -226,7 +226,7 @@
<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">
<select class="form-select" id="userSearchedLangs">
<option>--------</option>
<option>Français</option>
<option>Deutsch</option>
@ -241,7 +241,7 @@
<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">
<select class="form-select" id="userSearchedLocation">
<option selected value="">Indifférent</option>
<!-- Note: doesn't know what's the value for each town as it doesn't match the real NPA.
eg: Delémont is 2800. Maybe it's the database index -->
@ -3666,13 +3666,13 @@
<div class="col-md-3">
<div class="align-items-center">
<label class="col-form-label">Distance:</label>
<input type="number" class="form-control" id="user-searched-distance" placeholder="Distance (km)" step="1">
<input type="number" class="form-control" id="userSearchedRadius" placeholder="Distance (km)" step="1">
</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">
<select class="form-select" id="userSearchedLocation">
<option value="" selected>Tous les cantons</option>
<option value="AG">AG</option>
<option value="AI">AI</option>
@ -3707,7 +3707,7 @@
<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">
<select class="form-select" id="userSearchedGender">
<option>Indifférent</option>
<option>Feminin</option>
<option>Masculin</option>
@ -3718,68 +3718,68 @@
</div>
</form>
</div>
<div id="search-total-results" class="alert alert-warning mt-3">
<div id="searchTotalResults" class="alert alert-warning mt-3">
XX profils correspondent à votre recherche
</div>
<div id="tandem-search-results">
<div id="tandemSearchResults">
<!-- profile test -->
<div class="profile">
<div class="row">
<div class="col-lg-2">
<div class="user-avatar">
<div class="userAvatar">
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
</div>
</div>
<div class="col-lg-9">
<h4 class="user-pseudo display-6 fw-bold">Priscilla</h4>
<h4 class="userPseudo display-6 fw-bold">Priscilla</h4>
<div class="row">
<div class="col-lg-6">
<div class="user-gender">
<div class="userGender">
<span class="label">Genre:</span>
<span>Féminin</span>
</div>
<div class="user-meet">
<div class="userMeet">
<span class="label">Mode de rencontre:</span>
<span>sur place et virtuel</span>
</div>
<div class="user-meet-location">
<div class="userMeetLocation">
<span class="label">Lieu de rencontre:</span>
<span>Bern</span>
</div>
<div class="user-last-connexion">
<div class="userLastConnexion">
<span class="label">Dernière connexion:</span>
<span>21 novembre 2024</span>
</div>
</div>
<div class="col-lg-6 align-self-end">
<div class="user-given-languages">
<div class="userGivenLanguages">
<span class="label">Langue(s) proposée(s):</span>
<span>Allemand, Suisse-allemand, Anglais</span>
</div>
<div class="user-searched-languages">
<div class="userSearchedLanguages">
<span class="label">Langue(s) recherchée(s):</span>
<span>Français</span>
</div>
<div class="user-main-language1">
<div class="userMainLanguage1">
<span class="label">Langue maternelle 1:</span>
<span>Allemand</span>
</div>
<div class="user-main-language2">
<div class="userMainLanguage2">
<span class="label">Langue maternelle 2:</span>
<span>Suisse-allemand</span>
</div>
</div>
</div>
<p class="user-description">
<p class="userDescription">
Ich möchte gerne meine Französischkenntnisse verbessern. In meiner Freizeit male bzw. illustriere ich, lese, mache Yoga oder verbringe Zeit in der Natur. Ich komme aus Thun, arbeite aber in Bern. Gerne unterstütze ich dich dabei, deine Deutschkenntnisse zu verbessern.
</p>
</div>
<div class="profile-options">
<div class="profileOptions">
<button type="button" class="btn btn-cta rounded">Proposer un TANDEM</button>
<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signal-modal">Signaler ce profil inapproprié</button>
<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signalModal">Signaler ce profil inapproprié</button>
</div>
</div>
</div>
@ -3788,59 +3788,59 @@
<div class="profile">
<div class="row">
<div class="col-lg-2">
<div class="user-avatar">
<div class="userAvatar">
<img src="static/img/avatars/55238.jpg" alt="Petra Horvat-Puzak">
</div>
</div>
<div class="col-lg-9">
<h4 class="user-pseudo display-6 fw-bold">Petra Horvat-Puzak</h4>
<h4 class="userPseudo display-6 fw-bold">Petra Horvat-Puzak</h4>
<div class="row">
<div class="col-lg-6">
<div class="user-gender">
<div class="userGender">
<span class="label">Genre:</span>
<span>Féminin</span>
</div>
<div class="user-meet">
<div class="userMeet">
<span class="label">Mode de rencontre:</span>
<span>sur place, en face à face</span>
</div>
<div class="user-meet-location">
<div class="userMeetLocation">
<span class="label">Lieu de rencontre:</span>
<span>Bern</span>
</div>
<div class="user-last-connexion">
<div class="userLastConnexion">
<span class="label">Dernière connexion:</span>
<span>25 novembre 2024</span>
</div>
</div>
<div class="col-lg-6 align-self-end">
<div class="user-given-languages">
<div class="userGivenLanguages">
<span class="label">Langue(s) proposée(s):</span>
<span>Allemand, Croate</span>
</div>
<div class="user-searched-languages">
<div class="userSearchedLanguages">
<span class="label">Langue(s) recherchée(s):</span>
<span>Français</span>
</div>
<div class="user-main-language1">
<div class="userMainLanguage1">
<span class="label">Langue maternelle 1:</span>
<span>Allemand</span>
</div>
<div class="user-main-language2">
<div class="userMainLanguage2">
<span class="label">Langue maternelle 2:</span>
<span>Croate</span>
</div>
</div>
</div>
<p class="user-description">
<p class="userDescription">
Ich möchte meine Französischkenntnisse v.A. mündlich verbessern um im Berufsalltag ungehemmter und einfacher kommunizieren zu können. Ist eingerostet, da ich es sehr wenig brauchte. Bin 39jährig, mag die Natur und Musik, habe 2 Töchter. Am liebsten möchte ich mich in Persona treffen, aber wir können auch mit online abwechseln. Kann zu Bürozeiten oder Do/Fr nach Feierabend.
</p>
</div>
<div class="profile-options">
<div class="profileOptions">
<button type="button" class="btn btn-cta rounded" >Proposer un TANDEM</button>
<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signal-modal">Signaler ce profil inapproprié</button>
<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signalModal">Signaler ce profil inapproprié</button>
</div>
</div>
</div>
@ -3876,11 +3876,11 @@
</footer>
<!-- Modal -->
<div class="modal fade" id="signal-modal" tabindex="-1" aria-label="Signaler un utilisateur" aria-hidden="true">
<div class="modal fade" id="signalModal" tabindex="-1" aria-label="Signaler un utilisateur" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Signaler le profil de<br>{user-pseudo}</h5>
<h5 class="modal-title">Signaler le profil de<br>{ userPseudo }</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body">
@ -3898,7 +3898,7 @@
</div>
<div class="mt-3">
<label class="form-label">Précisions</label>
<textarea name="signal-description" id="signal-description" class="form-control" placeholder="Précisez le motif de signalement" rows="4" maxlength="250"></textarea>
<textarea name="signalDescription" id="signalDescription" class="form-control" placeholder="Précisez le motif de signalement" rows="4" maxlength="250"></textarea>
</div>
<input type="hidden" id="userId" name="userId" value="12345" />
</form>
@ -3906,7 +3906,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary">Envoyer</button>
<button type="button" class="btn btn-primary">Signaler</button>
</div>
</div>
</div>