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

Updated many thing + new 404 page and profile search

Browse source
This commit is contained in:
ericb 2024-11-25 16:32:25 +01:00
parent afefdb8882
commit e7cf7b063e
8 changed files with 520 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

58
404.html Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>e-TANDEM - The page you're looking for doesn't exist!</title>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<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>
</head>
<body data-platform="public">
<header class="top-bar" data-image="">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container" data-screen="404">
<div class="wrapper container">
<div class="text-center">
<h1 class="display-1 fw-bold">404</h1>
<p class="fs-3"> <span class="text-warning">Oops!</span> Page not found.</p>
<p class="lead">
The page you’re looking for doesn’t exist.
</p>
<a href="index.html" class="btn btn-cta">Go Home</a>
</div>
</div>
</main>
<footer>
<div class="container-fluid">
<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>

2
index.html
View file

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

3
profile.html
View file

@ -76,7 +76,7 @@
<div class="row g-3 align-items-center justify-content-between mb-3">
<div class="col-auto">
<div class="user-avatar">
<img src="static/img/avatar-dans-rond-gris.svg" class="img-fluid">
<img src="static/img/avatars/default-avatar.svg" class="img-fluid">
</div>
<button class="btn btn-cta">Télécharger une image</button>
</div>
@ -94,7 +94,6 @@
<div class="col-auto">
<input class="form-control" type="text" id="user-pseudo" placeholder="Hot's Design" disabled readonly>
</div>
</div>
<div class="row align-items-center mb-3">
<div class="col-auto">

104
static/css/main.css
View file

@ -30,6 +30,7 @@ body {
--accent-light: hsl(var(--accent), 75%);
--bs-btn-active-color: var(--grau);
--bs-btn-active-border-color: var(--grau);
--bs-link-color: #f28705;
--top-bar: 98px;
--bottom-bar: 5em;
--div-padding: 3rem;
@ -59,6 +60,34 @@ body {
[data-platform="public"] > [data-screen="connect"]{
/* background-color: var(--accent-normal); */
}
[data-screen="404"] .container{
justify-content: center;
}
/* side menu */
.side-menu{
}
.side-menu li{
background: white;
}
.side-menu .nav-link{
color: black;
}
.side-menu .nav-link:active, .side-menu .nav-link.active{
color: white;
background-color: #f28705;
font-weight: 700;
}
.side-menu .nav-link:focus{
color: black;
background-color: #fdc314;
font-weight: 600;
}
.side-menu li:not(:first-child){
margin-top: 0.35rem;
}
/* heros */
.hero{
background-image: linear-gradient(to right bottom, #f28705, #f69602, #f9a502, #fbb409, #fdc314);
@ -127,13 +156,6 @@ body {
#tandem-meet .col label{
font-weight: initial;
}
.user-avatar{
width: 7em;
height: 7em;
background-color: var(--background);
border: 1px solid var(--accent-normal);
border-radius: 50%;
}
#tandem-explanations{
box-shadow: 0 20px 10px -20px rgba(0,0,0,0.45) inset;
padding-top: 5rem;
@ -170,11 +192,51 @@ article li:not(:first-of-type){
background-color: white;
min-height: 5vh;
}
/* user profile */
.profile{
background: white;
padding: calc(var(--div-padding) / 2);
border-radius: 0.25rem;
margin-top: 1rem
}
/* .profile:nth-child(even){
margin-top: 1rem
} */
.user-avatar img{
width: 9em;
height: 9em;
object-fit: cover;
object-position: top;
border: 2px solid #f28705;
border-radius: 50%;
}
.profile .label{
font-weight: 600;
}
.user-description{
margin-top: 1.5em;
}
.profile-options{
margin-top: 2em;
justify-content: end;
display: flex;
}
/* search filters */
#search-filters{
border: 1px solid white;
background-color: var(--accent-light);
padding: calc(var(--div-padding) / 3);
}
/* btn */
.btn{
font-weight: 600;
}
.btn-primary{
background-color: #f28705;
border-color: #f28705;
}
.btn-hero-primary{
background-color: white;
color: var(--primary);
@ -214,6 +276,9 @@ label[for="lang"]{
font-size: 0.9em;
margin-bottom: 0.25rem;
}
#search-filters label{
font-weight: 600;
}
/* overrides */
ul, ol{
padding-left: 1rem;
@ -274,9 +339,7 @@ footer a img{
--div-padding: 2em;
--bottom-bar: 40px;
}
h1{
text-align: center;
}
.navbar-toggler-icon {
width: 1em;
}
@ -296,6 +359,27 @@ footer a img{
.partners-logo-grid{
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
}
.profile .user-avatar, .profile .user-pseudo{
margin: 0 auto;
text-align: center
}
.profile .user-pseudo{
margin: .5em auto;
}
}
@media (width <= 992px) {
h1, h2, h3, h4{
text-align: center;
}
.profile .user-avatar{
text-align: center;
}
.profile-options{
display:grid;
gap: 0 1rem;
width: fit-content;
margin: calc(var(--div-padding) / 2) auto 0;
}
}
@media (576px <= width <= 992px) {
.btn-stack{

1
static/img/avatar-dans-rond-gris.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><path fill-rule="evenodd" clip-rule="evenodd" fill="#DADADA" d="M60 0c33.137 0 60 26.863 60 60s-26.863 60-60 60S0 93.137 0 60 26.863 0 60 0z"/><path fill="#FAC307" d="M74.5 81.474c0 7.745-6.716 14.026-15 14.026-8.284 0-15-6.281-15-14.026V37.525c0-7.746 6.716-14.025 15-14.025 8.284 0 15 6.28 15 14.025v43.949z"/><ellipse fill="#FFF" cx="55.402" cy="34.265" rx="2.293" ry="2.145"/><ellipse fill="#FFF" cx="63.208" cy="34.265" rx="2.294" ry="2.145"/><path fill="none" stroke="#FFF" stroke-width="1.428" stroke-linecap="round" stroke-miterlimit="10" d="M65.887 43.062c-1.497 1.492-3.626 2.425-5.991 2.425-2.372 0-4.509-.941-6.008-2.445"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 706 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

1
static/img/avatars/default-avatar.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" viewbox="0 120 0 120"><path fill-rule="evenodd" clip-rule="evenodd" fill="#DADADA" d="M60 0c33.137 0 60 26.863 60 60s-26.863 60-60 60S0 93.137 0 60 26.863 0 60 0z"/><path fill="#FAC307" d="M74.5 81.474c0 7.745-6.716 14.026-15 14.026-8.284 0-15-6.281-15-14.026V37.525c0-7.746 6.716-14.025 15-14.025 8.284 0 15 6.28 15 14.025v43.949z"/><ellipse fill="#FFF" cx="55.402" cy="34.265" rx="2.293" ry="2.145"/><ellipse fill="#FFF" cx="63.208" cy="34.265" rx="2.294" ry="2.145"/><path fill="none" stroke="#FFF" stroke-width="1.428" stroke-linecap="round" stroke-miterlimit="10" d="M65.887 43.062c-1.497 1.492-3.626 2.425-5.991 2.425-2.372 0-4.509-.941-6.008-2.445"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 732 B

364
tandem-list.html Normal file
View file

@ -0,0 +1,364 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>e-TANDEM - Recherche de TANDEMs</title>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<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>
</head>
<body>
<header class="top-bar fixed-top">
<div class="d-grid gap-3 align-items-center">
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
<div class="container">
<a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a>
<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">
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close main menu"></button>
</div>
<div class="offcanvas-body">
<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>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>
<main>
<div class="hero hero-secondary container-fluid">
<div class="d-flex">
<div class="container">
<div class="col-lg-8">
<h1 class="display-5 fw-bold lh-1 mb-3 mb-lg-5">Rechercher des TANDEMs</h1>
</div>
</div>
</div>
</div>
<section class="container-fluid">
<div class="row">
<div id="secondary-nav" class="col-md-3 my-5">
<nav class="side-menu">
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
Rechercher des TANDEMs
</a>
</li>
<li>
<a href="#" class="nav-link">
Mes TANDEMs
</a>
</li>
<li>
<a href="profile.html" class="nav-link">
Modifier mon profil
</a>
</li>
<li>
<a href="#" class="nav-link">
Demandes reçues <span class="badge text-bg-secondary rounded-pill">101</span>
</a>
</li>
<li>
<a href="#" class="nav-link">
Demandes envoyées
</a>
</li>
<li>
<a href="#" class="nav-link">
Statistiques
</a>
</li>
<li>
<a href="#" class="nav-link">
Espace documentaire
</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-9 my-5">
<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 -->
<div id="search-total-results" class="alert alert-warning mt-3">
XX profils correspondent à vos critères de recherche
</div>
<div class="profile">
<div class="row">
<div class="col-lg-2">
<div class="user-avatar">
<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>
<div class="row">
<div class="col-lg-6">
<div class="user-gender">
<span class="label">Genre:</span>
<span>Féminin</span>
</div>
<div class="user-meet">
<span class="label">Mode de rencontre:</span>
<span>sur place et virtuel</span>
</div>
<div class="user-meet-location">
<span class="label">Lieu de rencontre:</span>
<span>Bern</span>
</div>
<div class="user-last-connexion">
<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">
<span class="label">Langue(s) proposée(s):</span>
<span>Allemand, Suisse-allemand, Anglais</span>
</div>
<div class="user-searched-languages">
<span class="label">Langue(s) que je recherche:</span>
<span>Français</span>
</div>
<div class="user-main-language1">
<span class="label">Langue maternelle 1:</span>
<span>Allemand</span>
</div>
<div class="user-main-language2">
<span class="label">Langue maternelle 2:</span>
<span>Suisse-allemand</span>
</div>
</div>
</div>
<div class="user-description">
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.
</div>
</div>
<div class="profile-options">
<button class="btn btn-cta rounded">Demander un TANDEM</button>
<button class="btn btn-link">Signaler ce profil inapproprié</button>
</div>
</div>
</div>
<!-- profile test -->
<div class="profile">
<div class="row">
<div class="col-lg-2">
<div class="user-avatar">
<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>
<div class="row">
<div class="col-lg-6">
<div class="user-gender">
<span class="label">Genre:</span>
<span>Féminin</span>
</div>
<div class="user-meet">
<span class="label">Mode de rencontre:</span>
<span>sur place, en face à face</span>
</div>
<div class="user-meet-location">
<span class="label">Lieu de rencontre:</span>
<span>Bern</span>
</div>
<div class="user-last-connexion">
<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">
<span class="label">Langue(s) proposée(s):</span>
<span>Allemand, Croate</span>
</div>
<div class="user-searched-languages">
<span class="label">Langue(s) que je recherche:</span>
<span>Français</span>
</div>
<div class="user-main-language1">
<span class="label">Langue maternelle 1:</span>
<span>Allemand</span>
</div>
<div class="user-main-language2">
<span class="label">Langue maternelle 2:</span>
<span>Croate</span>
</div>
</div>
</div>
<div class="user-description">
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.
</div>
</div>
<div class="profile-options">
<button class="btn btn-cta rounded">Demander un TANDEM</button>
<button class="btn btn-link">Signaler ce profil inapproprié</button>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
</main>
<footer>
</footer>
</body>
</html>