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

Changes:

Browse source 
- added 800 characters desc
- Simplified forms
- etc.
This commit is contained in:
ericb 2024-12-16 16:25:49 +01:00
parent 6b43550433
commit 82565ba430
4 changed files with 114 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

18
index.html
View file

@ -14,15 +14,19 @@
</head>
<body>
<section style="height: 100vh; display: flex; justify-content: center; align-items: center;">
<div class="container">
<h1>Forum du bilinguisme HTML/CSS maquettes</h1>
<ul>
<li><a href="home.html" target="_blank" rel="noopener">Page d'accueil</a></li>
<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><span class="badge bg-warning rounded-pill ms-2">updated: 11.12.24</span></li>
<li><a href="tandem-list.html" target="_blank" rel="noopener">Recherche TANDEM</a><span class="badge bg-warning rounded-pill ms-2">updated: 16.12.24</span></li>
<li><a href="404.html" target="_blank" rel="noopener">Error 404</a><span class="badge bg-warning rounded-pill ms-2">updated: 11.12.24</span></li>
<li><a href="home.html" target="_blank" rel="noopener">Page d'accueil</a><span class="badge bg-warning rounded-pill ms-2">last update: 10.12.24</span></li>
<li><a href="connect.html" target="_blank" rel="noopener">Page de connexion</a><span class="badge bg-warning rounded-pill ms-2">last update: 10.12.24</span></li>
<li><a href="create-account.html" target="_blank" rel="noopener">Création de compte</a><span class="badge bg-warning rounded-pill ms-2">last update: 10.12.24</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: 11.12.24</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></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></li>
</ul>
</div>
</section>
</body>
</html>

20
static/css/main.css
View file

@ -305,6 +305,9 @@ article li:not(:first-of-type){
#searchFilters form{
padding: calc(var(--div-padding) / 3);
}
#advancedFilters{
align-self: flex-end;
}
/* btn */
.btn{
@ -354,19 +357,28 @@ label[for="lang"]{
font-weight: 600;
}
#tandemList > .row{
justify-content: space-between;
gap: .5rem;
}
/* autocomplete */
.autocomplete-suggestions{
border: 1px solid #e3e3e3;
max-height: 150px;
max-height: calc((1.5rem * 5) + .25rem * 11);
overflow-y: auto;
margin-top: 0.25rem;
background: var(--accent-light);
border-radius: 0.25rem;
}
.autocomplete-suggestion{
padding: 8px;
padding: 1rem;
cursor: pointer;
padding: .25rem .725rem;
}
.autocomplete-suggestion:hover{
background-color: #f8f9fa;
background-color: var(--bs-link-color);
}
/* overrides */
ul, ol{

BIN
static/img/avatars/t800.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 114 KiB

110
tandem-list.html
View file

@ -206,36 +206,28 @@
</div>
<section id="tandemList" class="col-lg-8">
<div class="ui-btn">
<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="searchFilters" class="collapse">
<form>
<!-- Ajax form submit -->
<div class="row">
<div class="col-md-auto">
<label class="col-form-label">Langue(s) proposée(s):</label>
<!-- select populated from profiles choices: maternal langs 1&2 + Proposed langs 1&2 -->
<select class="form-select" id="userGivenLangs">
<option>--------</option>
<option>Français</option>
<option>Deutsch</option>
</select>
</div>
<div class="col-md-auto">
<div class="col-md-6">
<label class="col-form-label">Langue(s) recherchée(s):</label>
<!-- select populated from profiles choices: searched langs 1&2 -->
<!-- select populated from profiles informations: searched langs 1&2 -->
<select class="form-select" id="userSearchedLangs">
<option>--------</option>
<option>Toutes</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
<div id="advancedFilters" 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>
</div>
</div>
<div id="searchFilters" class="collapse">
<form>
<!-- Ajax form submit -->
<div class="row">
<div class="col-md-auto">
<div class="col-md-4">
<!-- Must use an autocomplete input -->
<label class="col-form-label" for="searchedLocationInput">Lieu de rencontre:</label>
<input type="text" class="form-control" id="searchedLocationInput" autocomplete="off">
@ -3662,11 +3654,11 @@
<option value="7400">Zwischenflüh</option>
</select>
</div>
<div class="col-md-3">
<div class="col-md-4">
<label class="col-form-label">Distance (en km): <span id="townRadiusValue">0</span></label>
<input type="range" class="form-range" min="0" max="100" value="0" step="25" id="townRadius">
</div>
<div class="col-md-auto">
<div class="col-md-4">
<label class="col-form-label">Genre:</label>
<select class="form-select" id="userSearchedGender">
<option>Indifférent</option>
@ -3678,6 +3670,7 @@
</div>
</form>
</div>
<div id="searchTotalResults" class="alert alert-warning mt-3">
XX profils correspondent à votre recherche
</div>
@ -3717,20 +3710,12 @@
<div class="col-lg-6 align-self-end">
<div class="userGivenLanguages">
<span class="label">Langue(s) proposée(s):</span>
<span>Allemand, Suisse-allemand, Anglais</span>
<span>Allemand (maternelle), Suisse-allemand (maternelle), Anglais (C1)</span>
</div>
<div class="userSearchedLanguages">
<span class="label">Langue(s) recherchée(s):</span>
<span>Français</span>
</div>
<div class="userMainLanguage1">
<span class="label">Langue maternelle 1:</span>
<span>Allemand</span>
</div>
<div class="userMainLanguage2">
<span class="label">Langue maternelle 2:</span>
<span>Suisse-allemand</span>
</div>
</div>
</div>
<p class="userDescription">
@ -3778,20 +3763,12 @@
<div class="col-lg-6 align-self-end">
<div class="userGivenLanguages">
<span class="label">Langue(s) proposée(s):</span>
<span>Allemand, Croate</span>
<span>Allemand (maternelle), Croate (maternelle)</span>
</div>
<div class="userSearchedLanguages">
<span class="label">Langue(s) recherchée(s):</span>
<span>Français</span>
</div>
<div class="userMainLanguage1">
<span class="label">Langue maternelle 1:</span>
<span>Allemand</span>
</div>
<div class="userMainLanguage2">
<span class="label">Langue maternelle 2:</span>
<span>Croate</span>
</div>
</div>
</div>
<p class="userDescription">
@ -3804,6 +3781,59 @@
</div>
</div>
</div>
<!-- profile test -->
<div class="profile">
<div class="row">
<div class="col-lg-2">
<div class="userAvatar">
<img src="static/img/avatars/t800.jpg" alt="I'm a T800">
</div>
</div>
<div class="col-lg-9">
<h4 class="userPseudo display-6 fw-bold">I'm a T800</h4>
<div class="row">
<div class="col-lg-6">
<div class="userGender">
<span class="label">Genre:</span>
<span>Non-binaire</span>
</div>
<div class="userMeet">
<span class="label">Mode de rencontre:</span>
<span>sur place, en face à face</span>
</div>
<div class="userMeetLocation">
<span class="label">Lieu de rencontre:</span>
<span>C:</span>
</div>
<div class="userLastConnexion">
<span class="label">Dernière connexion:</span>
<span>16 décembre 2024</span>
</div>
</div>
<div class="col-lg-6 align-self-end">
<div class="userGivenLanguages">
<span class="label">Langue(s) proposée(s):</span>
<span>Assembleur (maternelle), binaire (maternelle)</span>
</div>
<div class="userSearchedLanguages">
<span class="label">Langue(s) recherchée(s):</span>
<span>Toutes</span>
</div>
</div>
</div>
<p class="userDescription">
01001010 01100101 00100000 01110011 01110101 01101001 01110011 00100000 01110101 01101110 00100000 01010100 00111000 00110000 00110000 00101100 00100000 01101010 00100111 01100001 01101001 01101101 01100101 00100000 01101100 00100111 01101111 01110010 01100100 01110010 01100101 00101100 00100000 01101010 01100101 00100000 01110110 01100101 01110101 01111000 00100000 11000011 10101001 01110010 01100001 01100100 01101001 01110001 01110101 01100101 01110010 00100000 01101100 01100101 01110011 00100000 01101000 01110101 01101101 01100001 01101001 01101110 01110011 00101100 00100000 01101101 01100001 01101001 01110011 00100000 01101010 01100101 00100000 01110011 01110101 01101001 01110011 00100000 01110011 01111001 01101101 01110000 01100001 00100000 01100101 01101110 00100000 01100110 01100001 01101001 01110100 00100001.
</p>
</div>
<div class="profileOptions">
<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>
</div>
</div>
</div>
</div>