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

Fixed ids to kebab-case

Browse source
This commit is contained in:
ericb 2025-01-07 14:08:22 +01:00
parent 3b0f86e337
commit 898f6c28f7
12 changed files with 108 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

8
404.html
View file

@ -20,12 +20,12 @@
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
<div class="container"> <div class="container">
<a class="navbar-brand" href="home.html"> <a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg"> <img src="static/img/logo/logo_e-tandem_fr.svg">
</a> </a>
<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"> <button type="button" id="menuToggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#main-nav" aria-controls="main-nav" aria-label="Toggle main menu">
<span class="custom-toggler navbar-toggler-icon"></span> <span class="custom-toggler navbar-toggler-icon"></span>
</button> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false"> <div class="offcanvas offcanvas-end" tabindex="-1" id="main-nav" aria-label="Main menu" data-bs-scroll="false">
<div class="offcanvas-body"> <div class="offcanvas-body">
<div id="sideLang" class="ms-auto"> <div id="sideLang" class="ms-auto">
<div class="col"> <div class="col">
@ -60,7 +60,7 @@
<p class="lead"> <p class="lead">
The page you’re looking for doesn’t exist. The page you’re looking for doesn’t exist.
</p> </p>
<a href="index.html" class="btn btn-cta">Go Home</a> <a href="index.html" class="btn btn-cta">Go to Homepage</a>
</div> </div>
</div> </div>

6
connect.html
View file

@ -20,12 +20,12 @@
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
<div class="container"> <div class="container">
<a class="navbar-brand" href="home.html"> <a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg"> <img src="static/img/logo/logo_e-tandem_fr.svg">
</a> </a>
<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"> <button type="button" id="menuToggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#main-nav" aria-controls="main-nav" aria-label="Toggle main menu">
<span class="custom-toggler navbar-toggler-icon"></span> <span class="custom-toggler navbar-toggler-icon"></span>
</button> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false"> <div class="offcanvas offcanvas-end" tabindex="-1" id="main-nav" aria-label="Main menu" data-bs-scroll="false">
<div class="offcanvas-body"> <div class="offcanvas-body">
<div id="sideLang" class="ms-auto"> <div id="sideLang" class="ms-auto">
<div class="col"> <div class="col">

6
create-account.html
View file

@ -21,12 +21,12 @@
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
<div class="container"> <div class="container">
<a class="navbar-brand" href="home.html"> <a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg"> <img src="static/img/logo/logo_e-tandem_fr.svg">
</a> </a>
<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"> <button type="button" id="menuToggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#main-nav" aria-controls="main-nav" aria-label="Toggle main menu">
<span class="custom-toggler navbar-toggler-icon"></span> <span class="custom-toggler navbar-toggler-icon"></span>
</button> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false"> <div class="offcanvas offcanvas-end" tabindex="-1" id="main-nav" aria-label="Main menu" data-bs-scroll="false">
<div class="offcanvas-body"> <div class="offcanvas-body">
<div id="sideLang" class="ms-auto"> <div id="sideLang" class="ms-auto">
<div class="col"> <div class="col">

4
dictionnary.html
View file

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

100
documents.html
View file

@ -21,12 +21,12 @@
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
<div class="container"> <div class="container">
<a class="navbar-brand" href="home.html"> <a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg"> <img src="static/img/logo/logo_e-tandem_fr.svg">
</a> </a>
<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"> <button type="button" id="menuToggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#main-nav" aria-controls="main-nav" aria-label="Toggle main menu">
<span class="custom-toggler navbar-toggler-icon"></span> <span class="custom-toggler navbar-toggler-icon"></span>
</button> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false"> <div class="offcanvas offcanvas-end" tabindex="-1" id="main-nav" 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> -->
@ -199,10 +199,10 @@
<section> <section>
<h1 class="fs-2 mb-4">Espace documentaire</h1> <h1 class="fs-2 mb-4">Espace documentaire</h1>
<p>Vous trouverez ci-dessous les documents utiles à un TANDEM linguistique.</p> <p>Vous trouverez ci-dessous les documents utiles à un TANDEM linguistique.</p>
<p>Si vous souhaitez nous&nbsp;proposer un document que vous avez trouvé utile lors de vos échanges, vous pouvez nous l'envoyer&nbsp;<a href="#" class="text-link" role="button" data-bs-toggle="modal" data-bs-target="#docModal">via le formulaire&nbsp;dédié</a>.</p> <p>Si vous souhaitez nous&nbsp;proposer un document que vous avez trouvé utile lors de vos échanges, vous pouvez nous l'envoyer&nbsp;<a href="#" class="text-link" role="button" data-bs-toggle="modal" data-bs-target="#doc-modal">via le formulaire&nbsp;dédié</a>.</p>
</section> </section>
<div id="documentsResults"> <div id="documents-results">
<section class="panel mt-4"> <section class="panel mt-4">
<h1 class="fs-2">Documents du Forum du Bilinguisme</h1> <h1 class="fs-2">Documents du Forum du Bilinguisme</h1>
<ul id="forumDocuments" class="mt-4"> <ul id="forumDocuments" class="mt-4">
@ -258,79 +258,37 @@
</footer> </footer>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="docModal" tabindex="-1" aria-label="Déposer un document" aria-hidden="true"> <div class="modal fade" id="doc-modal" tabindex="-1" aria-label="Déposer un document" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Déposer un document</h5> <h5 class="modal-title">Déposer un document</h5>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form> <form action="" method="post" class="gap-y-3">
<p>Vous allez annuler votre demande de TANDEM avec {&nbsp;userPseudo&nbsp;}, veuillez confirmer votre action.</p> <div>
<p>En cliquant sur Retirer, {&nbsp;userPseudo&nbsp;} sera notifié de cette annulation.</p> <label class="form-label" for="document-title">Titre du document <span class="emphasis">*</span></label>
<input id="document-title" type="text" name="document-title" data-name="Titre du document" placeholder="" class="form-control input-md" required>
</div>
<form action="" method="post"> <div class="mt-2">
<div class="component" data-type="text" data-name="Titre du document" data-required="true"> <label class="form-label" for="document-author">Auteur</label>
<!--Text input--> <input id="document-author" type="text" name="field6" data-name="Auteur" placeholder="" class="form-control input-md">
<div class="form-group"> </div>
<label class="col-md-4 control-label" for="docTitle">Titre du document<span class="emphasis">*</span></label> <div class="mt-2">
<div class="col-md-8"> <label class="form-label" for="document-usage">Cadre d'utilisation</label>
<input id="docTitle" type="text" name="docTitle" data-name="Titre du document" placeholder="" class="form-control input-md" required> <input id="document-usage" type="text" name="field7" data-name="Cadre d'utilisation" placeholder="" class="form-control input-md">
<span class="help-block"></span> </div>
<span class="text-error"></span> <div class="mt-2">
</div> <label class="form-label" for="document-notes">Commentaires</label>
</div> <textarea class="form-control" id="document-notes" name="field8" placeholder=""></textarea>
</div> </div>
<div class="component" data-type="text" data-name="Auteur" data-required="false"> <div class="mt-2">
<!--Text input--> <label for="document-file" class="form-label">Télécharger le document <span class="emphasis">*</span></label>
<div class="form-group"> <input class="form-control" type="file" id="document-file" required accept=".xls, .xlsx, .docx, .csv, .ppt, .pptx, .pdf, .png, .zip, .jpg, .svg, .gif">
<label class="col-md-4 control-label" for="docAuthor">Auteur</label> <p class="form-text">Formats acceptés: .xls, .xlsx, .docx, .csv, .ppt, .pptx, .pdf, .zip, .jpg, .gif, .png, .svg</p>
<div class="col-md-8"> </div>
<input id="docAuthor" type="text" name="field6" data-name="Auteur" placeholder="" class="form-control input-md">
<span class="help-block"></span>
<span class="text-error"></span>
</div>
</div>
</div>
<div class="component" data-type="text" data-name="Cadre d'utilisation" data-required="false">
<!--Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="docUsage">Cadre d'utilisation</label>
<div class="col-md-8">
<input id="docUsage" type="text" name="field7" data-name="Cadre d'utilisation" placeholder="" class="form-control input-md">
<span class="help-block"></span>
<span class="text-error"></span>
</div>
</div>
</div>
<div class="component" data-type="textarea" data-name="Commentaires" data-required="false">
<!--Textarea-->
<div class="form-group">
<label class="col-md-4 control-label" for="docNotes">Commentaires</label>
<div class="col-md-8">
<textarea class="form-control" id="docNotes" name="field8" placeholder=""></textarea>
<span class="help-block"></span>
<span class="text-error"></span>
</div>
</div>
</div>
<div class="component" data-type="file" data-name="Télécharger le fichier" data-required="true">
<div class="form-group">
<label class="col-md-4 control-label" for="n82678d02-2f7c-4222-aa4e-7e66c364aa47">Télécharger le fichier<span class="emphasis">*</span></label>
<div class="col-md-8">
<input id="n82678d02-2f7c-4222-aa4e-7e66c364aa47" name="field9" data-name="Télécharger le fichier" type="file" class="form-control input-md" required accept=".xls, .xlsx, .docx, .csv, .ppt, .pptx, .pdf, .png , .jpeg, .zip, .tar, .jpg, .svg, .gif">
<span class="help-block"></span>
<span class="text-error"></span>
</div>
</div>
</div>
<div class="text-right">
<input type="submit" class="btn btn-default" value="Envoyer">
</div>
</form>
</form> </form>
</div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="submit" class="btn btn-primary">Déposer</button> <button type="submit" class="btn btn-primary">Déposer</button>

12
home.html
View file

@ -20,12 +20,12 @@
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
<div class="container"> <div class="container">
<a class="navbar-brand" href="home.html"> <a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg"> <img src="static/img/logo/logo_e-tandem_fr.svg">
</a> </a>
<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"> <button type="button" id="menuToggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#main-nav" aria-controls="main-nav" aria-label="Toggle main menu">
<span class="custom-toggler navbar-toggler-icon"></span> <span class="custom-toggler 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="main-nav" aria-label="Main menu">
<!-- <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> -->
@ -74,7 +74,7 @@
</div> </div>
</div> </div>
</div> </div>
<section id="tandemExplanations"> <section id="tandem-explanations">
<header class="container mb-5"> <header class="container mb-5">
<h1 class="display-4 fw-semibold mb-5 mb-lg-3">Le TANDEM linguistique</h1> <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'apprendrai la mienne</p> <p class="fs-4 fw-light lh-sm">Parle-moi dans ta langue et je t'apprendrai la mienne</p>
@ -107,7 +107,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> <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>
<article id="tandemMethod"> <article id="tandem-method">
<div class="row"> <div class="row">
<div class="col order-2 order-lg-1 bottom-anchored"> <div class="col order-2 order-lg-1 bottom-anchored">
<img class="img-fluid" src="static/img/gfx2.png"> <img class="img-fluid" src="static/img/gfx2.png">
@ -156,7 +156,7 @@
<img src="static/img/logo_partners/stadt-bern_logo.svg"> <img src="static/img/logo_partners/stadt-bern_logo.svg">
</div> </div>
<div class="partner-logo"> <div class="partner-logo">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg"> <img src="static/img/logo/logo_e-tandem_fr.svg">
</div> </div>
<div class="partner-logo"> <div class="partner-logo">
<img src="static/img/logo_partners/wohlen_logo.svg"> <img src="static/img/logo_partners/wohlen_logo.svg">

1
index.html
View file

@ -24,6 +24,7 @@
<li><a href="profile.html" target="_blank" rel="noopener">Profil utilisateur</a><span class="badge bg-warning rounded-pill ms-2">last update: 16.12.24</span><span class="badge bg-secondary rounded-pill ms-2">Go Dev</span></li> <li><a href="profile.html" target="_blank" rel="noopener">Profil utilisateur</a><span class="badge bg-warning rounded-pill ms-2">last update: 16.12.24</span><span class="badge bg-secondary rounded-pill ms-2">Go Dev</span></li>
<li><a href="tandem-list.html" target="_blank" rel="noopener">Recherche TANDEM</a><span class="badge bg-warning rounded-pill ms-2">last update: 16.12.24</span><span class="badge bg-secondary rounded-pill ms-2">Go Dev</span></li> <li><a href="tandem-list.html" target="_blank" rel="noopener">Recherche TANDEM</a><span class="badge bg-warning rounded-pill ms-2">last update: 16.12.24</span><span class="badge bg-secondary rounded-pill ms-2">Go Dev</span></li>
<li><a href="invitations.html" target="_blank" rel="noopener">Demandes</a><span class="badge bg-success rounded-pill ms-2">new: 17.12.24</span></li> <li><a href="invitations.html" target="_blank" rel="noopener">Demandes</a><span class="badge bg-success rounded-pill ms-2">new: 17.12.24</span></li>
<li><a href="documents.html" target="_blank" rel="noopener">Espace documentaire</a><span class="badge bg-success rounded-pill ms-2">new: 05.01.25</span></li>
<li><a href="404.html" target="_blank" rel="noopener">Error 404</a><span class="badge bg-warning rounded-pill ms-2">last update: 11.12.24</span><span class="badge bg-secondary rounded-pill ms-2">Go Dev</span></li> <li><a href="404.html" target="_blank" rel="noopener">Error 404</a><span class="badge bg-warning rounded-pill ms-2">last update: 11.12.24</span><span class="badge bg-secondary rounded-pill ms-2">Go Dev</span></li>
</ul> </ul>
</div> </div>

8
invitations.html
View file

@ -21,12 +21,12 @@
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
<div class="container"> <div class="container">
<a class="navbar-brand" href="home.html"> <a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg"> <img src="static/img/logo/logo_e-tandem_fr.svg">
</a> </a>
<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"> <button type="button" id="menuToggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#main-nav" aria-controls="main-nav" aria-label="Toggle main menu">
<span class="custom-toggler navbar-toggler-icon"></span> <span class="custom-toggler navbar-toggler-icon"></span>
</button> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false"> <div class="offcanvas offcanvas-end" tabindex="-1" id="main-nav" 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> -->
@ -196,7 +196,7 @@
<section id="invitationsList" class="col-lg-8"> <section id="invitationsList" class="col-lg-8">
<div id="invitationsResults"> <div id="invitations-results">
<!-- <div class="invitation"> <!-- <div class="invitation">
<div class="row"> <div class="row">
<div class="col-auto"> <div class="col-auto">

28
profile.html
View file

@ -21,12 +21,12 @@
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
<div class="container"> <div class="container">
<a class="navbar-brand" href="home.html"> <a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg"> <img src="static/img/logo/logo_e-tandem_fr.svg">
</a> </a>
<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"> <button type="button" id="menuToggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#main-nav" aria-controls="main-nav" aria-label="Toggle main menu">
<span class="custom-toggler navbar-toggler-icon"></span> <span class="custom-toggler navbar-toggler-icon"></span>
</button> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false"> <div class="offcanvas offcanvas-end" tabindex="-1" id="main-nav" 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> -->
@ -209,7 +209,7 @@
<form> <form>
<div class="row gap-3 align-items-center"> <div class="row gap-3 align-items-center">
<div class="col-md-6"> <div class="col-md-6">
<div id="avatarContainer" class="row"> <div id="avatar-container" class="row">
<div class="col-md-auto"> <div class="col-md-auto">
<div class="user-avatar"> <div class="user-avatar">
<img src="static/img/avatars/default-avatar.svg" class="img-fluid"> <img src="static/img/avatars/default-avatar.svg" class="img-fluid">
@ -221,8 +221,8 @@
</div> </div>
</div> </div>
<div id="userVisibility" class="col-md-5"> <div id="user-visibility" class="col-md-5">
<div id="userProfileActivation" class="rounded"> <div id="user-profile-activation" class="rounded">
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="activateUserProfile"> <input class="form-check-input" type="checkbox" role="switch" id="activateUserProfile">
<label class="form-check-label" for="activateUserProfile">Activer mon profil</label> <label class="form-check-label" for="activateUserProfile">Activer mon profil</label>
@ -235,10 +235,10 @@
</div> </div>
<!-- if user confederation or post--> <!-- if user confederation or post-->
<div id="userVisibilityExtend" class="rounded mt-2"> <div id="user-visibility-extend" class="rounded mt-2">
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="activateUserVisibility"> <input class="form-check-input" type="checkbox" role="switch" id="activateuser-visibility">
<label class="form-check-label" for="activateUserVisibility">Etre visible à l'externe</label> <label class="form-check-label" for="activateuser-visibility">Etre visible à l'externe</label>
</div> </div>
<a class="text-link" data-bs-toggle="tooltip" data-bs-trigger="hover click" data-bs-title="En activant cette option vous serez visible dans les résultats de recherches effectuées par les personnes hors de votre organisation"> <a class="text-link" data-bs-toggle="tooltip" data-bs-trigger="hover click" data-bs-title="En activant cette option vous serez visible dans les résultats de recherches effectuées par les personnes hors de votre organisation">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui-md"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui-md">
@ -251,7 +251,7 @@
</div> </div>
</div> </div>
<div id="userProfileInfos"> <div id="user-profile-infos">
<div class="row align-items-center mt-3"> <div class="row align-items-center mt-3">
<div class="col-auto"> <div class="col-auto">
<label class="col-form-label">Pseudo</label> <label class="col-form-label">Pseudo</label>
@ -496,7 +496,7 @@
</div> </div>
</div> </div>
</section> </section>
<section id="tandemMeet" class="panel mt-3"> <section id="tandem-meet" class="panel mt-3">
<h1 class="fs-2 mb-4">Mode de rencontre souhaité</h1> <h1 class="fs-2 mb-4">Mode de rencontre souhaité</h1>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
@ -527,13 +527,13 @@
</div> </div>
</div> </div>
</div> </div>
<div id="userTandemMeetLocation" class="col-lg-6 mt-3"> <div id="usertandem-meetLocation" class="col-lg-6 mt-3">
<div class="row gx-md-5 align-items-center"> <div class="row gx-md-5 align-items-center">
<div class="col-auto"> <div class="col-auto">
<label class="col-form-label" for="userTandemMeetTown">Lieu de rencontre souhaité</label> <label class="col-form-label" for="usertandem-meetTown">Lieu de rencontre souhaité</label>
</div> </div>
<div class="col-md-auto"> <div class="col-md-auto">
<select class="form-select" id="userTandemMeetTown"> <select class="form-select" id="usertandem-meetTown">
<option>Sélectionner une commune</option> <option>Sélectionner une commune</option>
<option>Biel/Bienne</option> <option>Biel/Bienne</option>
<option>Genève</option> <option>Genève</option>

57
static/css/main.css
View file

@ -55,7 +55,7 @@ h1, h2, h3, h4, h5{
.navbar-brand img{ .navbar-brand img{
height: calc(var(--top-bar) - 1.5em); height: calc(var(--top-bar) - 1.5em);
} }
#mainNav, .offcanvas-backdrop{ #main-nav, .offcanvas-backdrop{
top: var(--top-bar); top: var(--top-bar);
} }
.offcanvas-header, .offcanvas-body{ .offcanvas-header, .offcanvas-body{
@ -155,18 +155,18 @@ h1, h2, h3, h4, h5{
#profile label{ #profile label{
font-weight: 700; font-weight: 700;
} }
#userVisibility{ #user-visibility{
margin-left: auto; margin-left: auto;
} }
#userProfileActivation, #userVisibilityExtend{ #user-profile-activation, #user-visibility-extend{
display: flex; display: flex;
align-items: center; align-items: center;
} }
#userProfileActivation{ #user-profile-activation{
/* padding: 1.5em; /* padding: 1.5em;
background-color: var(--accent-light); */ background-color: var(--accent-light); */
} }
#userProfileInfos label{ #user-profile-infos label{
min-width: 6em; min-width: 6em;
} }
.form-check.form-switch{ .form-check.form-switch{
@ -185,32 +185,32 @@ h1, h2, h3, h4, h5{
.form-switch + a[data-bs-toggle="tooltip"]{ .form-switch + a[data-bs-toggle="tooltip"]{
margin-left: 0.25rem; margin-left: 0.25rem;
} }
#tandemMeet .col{ #tandem-meet .col{
text-align: center; text-align: center;
padding: 1.5rem; padding: 1.5rem;
transition: all ease-out 0.3s; transition: all ease-out 0.3s;
} }
#tandemMeet .col img{ #tandem-meet .col img{
margin-bottom: 1rem; margin-bottom: 1rem;
} }
#tandemMeet .col label{ #tandem-meet .col label{
font-weight: initial; font-weight: initial;
} }
#tandemExplanations{ #tandem-explanations{
padding-top: 5rem; padding-top: 5rem;
padding-bottom: 5rem; padding-bottom: 5rem;
background-color: var(--background-wrapper); background-color: var(--background-wrapper);
} }
#tandemExplanations header{ #tandem-explanations header{
display: grid; display: grid;
justify-items: center; justify-items: center;
text-align: center; text-align: center;
padding: 0 3rem; padding: 0 3rem;
} }
#tandemExplanations header p{ #tandem-explanations header p{
color: rgb(100,100,100); color: rgb(100,100,100);
} }
#tandemExplanations article{ #tandem-explanations article{
display: grid; display: grid;
justify-items: center; justify-items: center;
margin-top: 2rem; margin-top: 2rem;
@ -218,7 +218,7 @@ h1, h2, h3, h4, h5{
background-color: var(--accent-light); background-color: var(--accent-light);
padding: var(--div-padding); padding: var(--div-padding);
} }
#tandemMethod{ #tandem-method{
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)); 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{ .bottom-anchored{
@ -267,7 +267,7 @@ article li:not(:first-of-type){
border: 2px solid white; border: 2px solid white;
border-radius: 50%; border-radius: 50%;
} }
.profile .label, #signalModal label{ .profile .label, #signal-modal label{
font-weight: 700; font-weight: 700;
} }
.user-description{ .user-description{
@ -279,12 +279,12 @@ article li:not(:first-of-type){
display: flex; display: flex;
gap: 1rem; gap: 1rem;
} }
#avatarContainer{ #avatar-container{
align-items: center; align-items: center;
} }
/* invitations */ /* invitations */
#invitationsResults ul{ #invitations-results ul{
padding-left: 0; padding-left: 0;
margin-bottom: 0 margin-bottom: 0
} }
@ -318,24 +318,24 @@ article li:not(:first-of-type){
} }
/* documents */ /* documents */
#documentsResults ul{ #documents-results ul{
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
} }
#documentsResults ul li{ #documents-results ul li{
list-style-type: none; list-style-type: none;
} }
/* search filters */ /* search filters */
#searchFilters{ #search-filters{
border: 1px solid white; border: 1px solid white;
background-color: rgba(255,255,255,.5); background-color: rgba(255,255,255,.5);
margin-top: 0.5rem; margin-top: 0.5rem;
} }
#searchFilters form{ #search-filters form{
padding: calc(var(--div-padding) / 3); padding: calc(var(--div-padding) / 3);
} }
#advancedFilters{ #advanced-filters{
align-self: flex-end; align-self: flex-end;
} }
@ -405,10 +405,10 @@ label[for="lang"]{
font-size: 0.9em; font-size: 0.9em;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
#searchFilters label{ #search-filters label{
font-weight: 600; font-weight: 600;
} }
#tandemList > .row{ #tandem-list > .row{
justify-content: space-between; justify-content: space-between;
gap: .5rem; gap: .5rem;
} }
@ -472,6 +472,9 @@ sup.emphasis{
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.modal-body, .modal-footer{
padding: 1em calc(var(--div-padding) / 2);
}
/* footer */ /* footer */
footer{ footer{
@ -575,7 +578,7 @@ nav .icon-ui{
h1, h2, h3, h4{ h1, h2, h3, h4{
text-align: center; text-align: center;
} }
#avatarContainer{ #avatar-container{
text-align: center; text-align: center;
} }
.profile-options, .invitation-options{ .profile-options, .invitation-options{
@ -664,7 +667,7 @@ nav .icon-ui{
.partners-logo-grid{ .partners-logo-grid{
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
} }
div:not(#userLanguage) h1, div:not(#userLanguage) h2, div:not(#userLanguage) h3, div:not(#userLanguage) h4{ div:not(#user-language) h1, div:not(#user-language) h2, div:not(#user-language) h3, div:not(#user-language) h4{
text-align: left; text-align: left;
} }
} }
@ -689,12 +692,12 @@ nav .icon-ui{
color: var(--bs-link-color); color: var(--bs-link-color);
background-color: transparent; background-color: transparent;
} }
#tandemMeet .col:hover{ #tandem-meet .col:hover{
background-color: var(--accent-light); background-color: var(--accent-light);
border-radius: 0.5rem; border-radius: 0.5rem;
transition: all ease-out 0.3s; transition: all ease-out 0.3s;
} }
#tandemMeet .col:hover .form-check-input{ #tandem-meet .col:hover .form-check-input{
--bs-border-color: var(--primary); --bs-border-color: var(--primary);
} }
.side-menu .nav-link:not(.active):hover{ .side-menu .nav-link:not(.active):hover{

2
static/js/js.js
View file

@ -14,7 +14,7 @@ const updateMeet = () => {
const meetOption1 = document.getElementById('userMeetOptionReal'), const meetOption1 = document.getElementById('userMeetOptionReal'),
meetOption2 = document.getElementById('userMeetOptionVirtual'), meetOption2 = document.getElementById('userMeetOptionVirtual'),
meetOption3 = document.getElementById('userMeetOptionHybrid'), meetOption3 = document.getElementById('userMeetOptionHybrid'),
meetLocation = document.getElementById('userTandemMeetLocation'); meetLocation = document.getElementById('usertandem-meetLocation');
if (meetLocation) { if (meetLocation) {
meetLocation.style.display = (meetOption1?.checked || meetOption3?.checked) ? 'block' : 'none'; meetLocation.style.display = (meetOption1?.checked || meetOption3?.checked) ? 'block' : 'none';
[meetOption1, meetOption2, meetOption3].forEach(option => { [meetOption1, meetOption2, meetOption3].forEach(option => {

22
tandem-list.html
View file

@ -22,12 +22,12 @@
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation"> <nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
<div class="container"> <div class="container">
<a class="navbar-brand" href="home.html"> <a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg"> <img src="static/img/logo/logo_e-tandem_fr.svg">
</a> </a>
<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"> <button type="button" id="menuToggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#main-nav" aria-controls="main-nav" aria-label="Toggle main menu">
<span class="custom-toggler navbar-toggler-icon"></span> <span class="custom-toggler navbar-toggler-icon"></span>
</button> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false"> <div class="offcanvas offcanvas-end" tabindex="-1" id="main-nav" 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> -->
@ -196,7 +196,7 @@
</nav> </nav>
</div> </div>
<section id="tandemList" class="col-lg-8"> <section id="tandem-list" class="col-lg-8">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<label class="col-form-label">Langue(s) recherchée(s):</label> <label class="col-form-label">Langue(s) recherchée(s):</label>
@ -208,12 +208,12 @@
<option>English</option> <option>English</option>
</select> </select>
</div> </div>
<div id="advancedFilters" class="col-md-auto"> <div id="advanced-filters" class="col-md-auto">
<a class="btn-link ui-btn" 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>Filtres avancés</a> <a class="btn-link ui-btn" 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>Filtres avancés</a>
</div> </div>
</div> </div>
<div id="searchFilters" class="collapse"> <div id="search-filters" class="collapse">
<form> <form>
<!-- Ajax form submit --> <!-- Ajax form submit -->
@ -3715,7 +3715,7 @@
</div> </div>
<div class="profile-options"> <div class="profile-options">
<button type="button" class="btn btn-cta rounded" data-bs-toggle="modal" data-bs-target="#alertModal">Proposer un TANDEM</button> <button type="button" class="btn btn-cta rounded" data-bs-toggle="modal" data-bs-target="#alertModal">Proposer un TANDEM</button>
<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signalModal">Signaler ce profil inapproprié</button> <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signal-modal">Signaler ce profil inapproprié</button>
</div> </div>
</div> </div>
</div> </div>
@ -3768,7 +3768,7 @@
</div> </div>
<div class="profile-options"> <div class="profile-options">
<button type="button" class="btn btn-cta rounded" data-bs-toggle="modal" data-bs-target="#alertModal">Proposer un TANDEM</button> <button type="button" class="btn btn-cta rounded" data-bs-toggle="modal" data-bs-target="#alertModal">Proposer un TANDEM</button>
<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signalModal">Signaler ce profil inapproprié</button> <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signal-modal">Signaler ce profil inapproprié</button>
</div> </div>
</div> </div>
</div> </div>
@ -3821,7 +3821,7 @@
</div> </div>
<div class="profile-options"> <div class="profile-options">
<button type="button" class="btn btn-cta rounded" data-bs-toggle="modal" data-bs-target="#alertModal">Proposer un TANDEM</button> <button type="button" class="btn btn-cta rounded" data-bs-toggle="modal" data-bs-target="#alertModal">Proposer un TANDEM</button>
<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signalModal">Signaler ce profil inapproprié</button> <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signal-modal">Signaler ce profil inapproprié</button>
</div> </div>
</div> </div>
</div> </div>
@ -3857,7 +3857,7 @@
</footer> </footer>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="signalModal" tabindex="-1" aria-label="Signaler un utilisateur" aria-hidden="true"> <div class="modal fade" id="signal-modal" 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-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">