Fixed css class naming
This commit is contained in:
parent
75b44e28eb
commit
8986c4b762
4 changed files with 118 additions and 84 deletions
|
|
@ -32,9 +32,9 @@
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="offcanvas-body">
|
<div class="offcanvas-body">
|
||||||
<nav class="side-menu" id="offSideMenu">
|
<nav class="side-menu" id="offSideMenu">
|
||||||
<div class="userAvatar">
|
<div class="user-avatar">
|
||||||
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
|
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
|
||||||
<p class="userPseudo">Forum du Bilinguisme</p>
|
<p class="user-pseudo">Forum du Bilinguisme</p>
|
||||||
</div>
|
</div>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
|
|
@ -200,12 +200,12 @@
|
||||||
<!-- <div class="invitation">
|
<!-- <div class="invitation">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<div class="userAvatar">
|
<div class="user-avatar">
|
||||||
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
|
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto col-md-6">
|
<div class="col-auto col-md-6">
|
||||||
<h5 class="userPseudo fw-bold">Priscilla</h5>
|
<h5 class="user-pseudo fw-bold">Priscilla</h5>
|
||||||
<p>Demande envoyée le 12.12.2024</p>
|
<p>Demande envoyée le 12.12.2024</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="invitation-options col-md-auto">
|
<div class="invitation-options col-md-auto">
|
||||||
|
|
@ -218,65 +218,75 @@
|
||||||
<h2 class="fs-4 mt-4">Demandes envoyées</h2>
|
<h2 class="fs-4 mt-4">Demandes envoyées</h2>
|
||||||
<ul id="sentInvitations">
|
<ul id="sentInvitations">
|
||||||
<li class="invitation">
|
<li class="invitation">
|
||||||
<div class="userAvatar"><img src="static/img/avatars/55238.jpg" alt="Priscilla"></div>
|
<div class="user-avatar"><img src="static/img/avatars/55238.jpg" alt="Priscilla"></div>
|
||||||
<div>
|
<div>
|
||||||
<h2 class="h6 userPseudo">Priscilla</h2>
|
<h2 class="h6 user-pseudo">Priscilla</h2>
|
||||||
<p class="date">Envoyée le 12.12.2024</p>
|
<p class="date">Envoyée le 12.12.2024</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="invitation-options ms-auto">
|
<div class="invitation-options ms-auto">
|
||||||
<button type="button" class="btn btn-link ms-auto" data-bs-toggle="modal" data-bs-target="#cancelModal">Retirer</button>
|
<button type="button" class="btn btn-icon ms-auto" data-bs-toggle="modal" data-bs-target="#cancelModal">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||||
|
</svg>
|
||||||
|
<span>Retirer</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="invitation">
|
<li class="invitation">
|
||||||
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Eric B."></div>
|
<div class="user-avatar"><img src="static/img/avatars/default-avatar.svg" alt="Eric B."></div>
|
||||||
<div>
|
<div>
|
||||||
<h2 class="h6 userPseudo">Eric B.</h2>
|
<h2 class="h6 user-pseudo">Eric B.</h2>
|
||||||
<p class="date">Envoyée le 16.12.2024</p>
|
<p class="date">Envoyée le 16.12.2024</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="invitation-options ms-auto">
|
<div class="invitation-options ms-auto">
|
||||||
<button type="button" class="btn btn-link ms-auto" data-bs-toggle="modal" data-bs-target="#cancelModal">Retirer</button>
|
<button type="button" class="btn btn-icon ms-auto" data-bs-toggle="modal" data-bs-target="#cancelModal">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||||
|
</svg>
|
||||||
|
<span>Retirer</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h2 class="fs-4 mt-4">Demandes reçues</h2>
|
<h2 class="fs-4 mt-4">Demandes reçues</h2>
|
||||||
<ul id="receivedInvitations">
|
<ul id="receivedInvitations">
|
||||||
<li class="invitation">
|
<li class="invitation">
|
||||||
<div class="userAvatar"><img src="static/img/avatars/t800.jpg" alt="T800"></div>
|
<div class="user-avatar"><img src="static/img/avatars/t800.jpg" alt="T800"></div>
|
||||||
<div>
|
<div>
|
||||||
<h2 class="h6 userPseudo">T800</h2>
|
<h2 class="h6 user-pseudo">T800</h2>
|
||||||
<p class="date">Reçue le 10.12.2024</p>
|
<p class="date">Reçue le 10.12.2024</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="invitation-options ms-auto">
|
<div class="invitation-options ms-auto">
|
||||||
<button type="button" class="btn text-link" data-bs-toggle="modal" data-bs-target="#acceptModal">
|
<button type="button" class="btn btn-icon" data-bs-toggle="modal" data-bs-target="#acceptModal">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||||
</svg>
|
</svg>
|
||||||
<span>Accepter</span>
|
<span>Accepter</span>
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="btn text-link" data-bs-toggle="modal" data-bs-target="#denyModal">
|
<button type="button" class="btn btn-icon" data-bs-toggle="modal" data-bs-target="#denyModal">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M7.498 15.25H4.372c-1.026 0-1.945-.694-2.054-1.715a12.137 12.137 0 0 1-.068-1.285c0-2.848.992-5.464 2.649-7.521C5.287 4.247 5.886 4 6.504 4h4.016a4.5 4.5 0 0 1 1.423.23l3.114 1.04a4.5 4.5 0 0 0 1.423.23h1.294M7.498 15.25c.618 0 .991.724.725 1.282A7.471 7.471 0 0 0 7.5 19.75 2.25 2.25 0 0 0 9.75 22a.75.75 0 0 0 .75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 0 0 2.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384m-10.253 1.5H9.7m8.075-9.75c.01.05.027.1.05.148.593 1.2.925 2.55.925 3.977 0 1.487-.36 2.89-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398-.306.774-1.086 1.227-1.918 1.227h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 0 0 .303-.54" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||||
</svg>
|
</svg>
|
||||||
<span>Refuser</span>
|
<span>Refuser</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="invitation">
|
<li class="invitation">
|
||||||
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Utilisateur"></div>
|
<div class="user-avatar"><img src="static/img/avatars/default-avatar.svg" alt="Utilisateur"></div>
|
||||||
<div>
|
<div>
|
||||||
<h2 class="h6 userPseudo">Utilisateur avec un nom à rallonge</h2>
|
<h2 class="h6 user-pseudo">Utilisateur avec un nom à rallonge</h2>
|
||||||
<p class="date">Reçue le 12.12.2024</p>
|
<p class="date">Reçue le 12.12.2024</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="invitation-options ms-auto">
|
<div class="invitation-options ms-auto">
|
||||||
<button type="button" class="btn text-link" data-bs-toggle="modal" data-bs-target="#acceptModal">
|
<button type="button" class="btn btn-icon" data-bs-toggle="modal" data-bs-target="#acceptModal">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||||
</svg>
|
</svg>
|
||||||
<span>Accepter</span>
|
<span>Accepter</span>
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="btn text-link" data-bs-toggle="modal" data-bs-target="#denyModal">
|
<button type="button" class="btn btn-icon" data-bs-toggle="modal" data-bs-target="#denyModal">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M7.498 15.25H4.372c-1.026 0-1.945-.694-2.054-1.715a12.137 12.137 0 0 1-.068-1.285c0-2.848.992-5.464 2.649-7.521C5.287 4.247 5.886 4 6.504 4h4.016a4.5 4.5 0 0 1 1.423.23l3.114 1.04a4.5 4.5 0 0 0 1.423.23h1.294M7.498 15.25c.618 0 .991.724.725 1.282A7.471 7.471 0 0 0 7.5 19.75 2.25 2.25 0 0 0 9.75 22a.75.75 0 0 0 .75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 0 0 2.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384m-10.253 1.5H9.7m8.075-9.75c.01.05.027.1.05.148.593 1.2.925 2.55.925 3.977 0 1.487-.36 2.89-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398-.306.774-1.086 1.227-1.918 1.227h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 0 0 .303-.54" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||||
</svg>
|
</svg>
|
||||||
<span>Refuser</span>
|
<span>Refuser</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -289,30 +299,30 @@
|
||||||
<h1 class="fs-2">Historique des demandes</h1>
|
<h1 class="fs-2">Historique des demandes</h1>
|
||||||
<ul id="archivedInvitations" class="mt-4">
|
<ul id="archivedInvitations" class="mt-4">
|
||||||
<li class="invitation">
|
<li class="invitation">
|
||||||
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Eric B."></div>
|
<div class="user-avatar"><img src="static/img/avatars/default-avatar.svg" alt="Eric B."></div>
|
||||||
<div>
|
<div>
|
||||||
<h2 class="h6 userPseudo">Eric B.</h2>
|
<h2 class="h6 user-pseudo">Eric B.</h2>
|
||||||
<p class="date">Acceptée le 16.12.2024</p>
|
<p class="date">Acceptée le 16.12.2024</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="invitation">
|
<li class="invitation">
|
||||||
<div class="userAvatar"><img src="static/img/avatars/55238.jpg" alt="Priscilla"></div>
|
<div class="user-avatar"><img src="static/img/avatars/55238.jpg" alt="Priscilla"></div>
|
||||||
<div>
|
<div>
|
||||||
<h2 class="h6 userPseudo">Priscilla</h2>
|
<h2 class="h6 user-pseudo">Priscilla</h2>
|
||||||
<p class="date">Acceptée le 12.12.2024</p>
|
<p class="date">Acceptée le 12.12.2024</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="invitation">
|
<li class="invitation">
|
||||||
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Utilisateur"></div>
|
<div class="user-avatar"><img src="static/img/avatars/default-avatar.svg" alt="Utilisateur"></div>
|
||||||
<div>
|
<div>
|
||||||
<h2 class="h6 userPseudo">Utilisateur avec un nom à rallonge</h2>
|
<h2 class="h6 user-pseudo">Utilisateur avec un nom à rallonge</h2>
|
||||||
<p class="date">Annulée le 12.12.2024</p>
|
<p class="date">Annulée le 12.12.2024</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="invitation">
|
<li class="invitation">
|
||||||
<div class="userAvatar"><img src="static/img/avatars/t800.jpg" alt="T800"></div>
|
<div class="user-avatar"><img src="static/img/avatars/t800.jpg" alt="T800"></div>
|
||||||
<div>
|
<div>
|
||||||
<h2 class="h6 userPseudo">T800</h2>
|
<h2 class="h6 user-pseudo">T800</h2>
|
||||||
<p class="date">Acceptée le 10.12.2024</p>
|
<p class="date">Acceptée le 10.12.2024</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
|
|
@ -32,9 +32,9 @@
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="offcanvas-body">
|
<div class="offcanvas-body">
|
||||||
<nav class="side-menu" id="offSideMenu">
|
<nav class="side-menu" id="offSideMenu">
|
||||||
<div class="userAvatar">
|
<div class="user-avatar">
|
||||||
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
|
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
|
||||||
<p class="userPseudo">Forum du Bilinguisme</p>
|
<p class="user-pseudo">Forum du Bilinguisme</p>
|
||||||
</div>
|
</div>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
|
|
@ -211,7 +211,7 @@
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div id="avatarContainer" class="row">
|
<div id="avatarContainer" class="row">
|
||||||
<div class="col-md-auto">
|
<div class="col-md-auto">
|
||||||
<div class="userAvatar">
|
<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">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -496,7 +496,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section id="tandem-meet" class="panel mt-3">
|
<section id="tandemMeet" 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">
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,7 @@ h1, h2, h3, h4, h5{
|
||||||
margin-top: var(--top-bar);
|
margin-top: var(--top-bar);
|
||||||
}
|
}
|
||||||
/* Screens */
|
/* Screens */
|
||||||
[data-screen="search"] .container-fluid > .row, [data-screen="profile"] .container-fluid > .row, [data-screen="invitations"] .container-fluid > .row{
|
[data-screen="search"] .container-fluid > .row, [data-screen="profile"] .container-fluid > .row, [data-screen="invitations"] .container-fluid > .row, [data-screen="documents"] .container-fluid > .row{
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -185,15 +185,15 @@ 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;
|
||||||
}
|
}
|
||||||
#tandem-meet .col{
|
#tandemMeet .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;
|
||||||
}
|
}
|
||||||
#tandem-meet .col img{
|
#tandemMeet .col img{
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
#tandem-meet .col label{
|
#tandemMeet .col label{
|
||||||
font-weight: initial;
|
font-weight: initial;
|
||||||
}
|
}
|
||||||
#tandemExplanations{
|
#tandemExplanations{
|
||||||
|
|
@ -256,10 +256,10 @@ article li:not(:first-of-type){
|
||||||
color: darkgray;
|
color: darkgray;
|
||||||
letter-spacing: .25em;
|
letter-spacing: .25em;
|
||||||
}
|
}
|
||||||
.profile .userAvatar{
|
.profile .user-avatar{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.userAvatar img{
|
.user-avatar img{
|
||||||
width: 9rem;
|
width: 9rem;
|
||||||
height: 9rem;
|
height: 9rem;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
|
@ -270,10 +270,10 @@ article li:not(:first-of-type){
|
||||||
.profile .label, #signalModal label{
|
.profile .label, #signalModal label{
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
.userDescription{
|
.user-description{
|
||||||
margin-top: 1.5em;
|
margin-top: 1.5em;
|
||||||
}
|
}
|
||||||
.profileOptions{
|
.profile-options{
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -286,22 +286,22 @@ article li:not(:first-of-type){
|
||||||
/* invitations */
|
/* invitations */
|
||||||
#invitationsResults ul{
|
#invitationsResults ul{
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
margin-bottom: 0
|
||||||
}
|
}
|
||||||
.invitation{
|
.invitation{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
border-top: 1px solid var(--bs-gray-300);
|
border-top: 1px dotted var(--bs-gray-400);
|
||||||
padding-top: .75rem;
|
padding-top: .75rem;
|
||||||
}
|
}
|
||||||
.invitation .userPseudo{
|
.invitation .user-pseudo{
|
||||||
margin-bottom: 0.125rem;
|
margin-bottom: 0.125rem;
|
||||||
}
|
}
|
||||||
.invitation:not(:first-of-type){
|
.invitation:not(:first-of-type){
|
||||||
margin-top: .75rem;
|
margin-top: .75rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
.invitation .userAvatar img{
|
.invitation .user-avatar img{
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
}
|
}
|
||||||
|
|
@ -317,6 +317,15 @@ article li:not(:first-of-type){
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* documents */
|
||||||
|
#documentsResults ul{
|
||||||
|
padding-left: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
#documentsResults ul li{
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* search filters */
|
/* search filters */
|
||||||
#searchFilters{
|
#searchFilters{
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
|
|
@ -356,13 +365,22 @@ article li:not(:first-of-type){
|
||||||
.btn-cta, .btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary{
|
.btn-cta, .btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary{
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
.btn-link, .text-link{
|
.btn-link, .text-link, .btn-icon{
|
||||||
color: var(--bs-link-color);
|
color: var(--bs-link-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.btn-link{
|
.btn-link{
|
||||||
padding: .725rem 1rem;
|
padding: .725rem 1rem;
|
||||||
}
|
}
|
||||||
|
.btn-icon{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.btn-icon .icon-ui{
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
.btn-link:focus-visible, .text-link:focus-visible{
|
.btn-link:focus-visible, .text-link:focus-visible{
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
color: var(--bs-link-color);
|
color: var(--bs-link-color);
|
||||||
|
|
@ -375,7 +393,7 @@ article li:not(:first-of-type){
|
||||||
border-color: var(--bs-gray-500);
|
border-color: var(--bs-gray-500);
|
||||||
}
|
}
|
||||||
.btn-stack{
|
.btn-stack{
|
||||||
display: flex;
|
display: inline-flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
@ -403,7 +421,6 @@ label[for="lang"]{
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
background: var(--accent-light);
|
background: var(--accent-light);
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
.autocomplete-suggestion{
|
.autocomplete-suggestion{
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
|
@ -512,7 +529,7 @@ nav .icon-ui{
|
||||||
margin-right: .75rem;
|
margin-right: .75rem;
|
||||||
}
|
}
|
||||||
/* media queries */
|
/* media queries */
|
||||||
@media (width <= 576px) {
|
@media only screen and (width <= 576px) {
|
||||||
:root{
|
:root{
|
||||||
--div-padding: 2em;
|
--div-padding: 2em;
|
||||||
--bottom-bar: 40px;
|
--bottom-bar: 40px;
|
||||||
|
|
@ -533,28 +550,25 @@ nav .icon-ui{
|
||||||
.partners-logo-grid{
|
.partners-logo-grid{
|
||||||
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
||||||
}
|
}
|
||||||
.userAvatar img{
|
.user-avatar img{
|
||||||
width: 6rem;
|
width: 6rem;
|
||||||
height: 6rem;
|
height: 6rem;
|
||||||
}
|
}
|
||||||
.profile .userAvatar, .profile .userPseudo, .offcanvas .userAvatar{
|
.profile .user-avatar, .profile .user-pseudo, .offcanvas .user-avatar{
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
text-align: center
|
text-align: center
|
||||||
}
|
}
|
||||||
.profile .userPseudo{
|
.profile .user-pseudo{
|
||||||
margin: .5em auto;
|
margin: .5em auto;
|
||||||
}
|
}
|
||||||
.invitation{
|
.invitation{
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
.invitation .userPseudo{
|
.invitation .user-pseudo{
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.invitation-options button span{
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
@media only screen and (width <= 992px) {
|
||||||
@media (width <= 992px) {
|
|
||||||
:root{
|
:root{
|
||||||
--top-bar: 5rem;
|
--top-bar: 5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -564,7 +578,7 @@ nav .icon-ui{
|
||||||
#avatarContainer{
|
#avatarContainer{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.profileOptions, .invitation-options{
|
.profile-options, .invitation-options{
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0 .5rem;
|
gap: 0 .5rem;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
@ -573,11 +587,11 @@ nav .icon-ui{
|
||||||
.invitation-options{
|
.invitation-options{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.offcanvas .userAvatar{
|
.offcanvas .user-avatar{
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
text-align: center
|
text-align: center
|
||||||
}
|
}
|
||||||
.offcanvas .userAvatar img{
|
.offcanvas .user-avatar img{
|
||||||
width: 5rem;
|
width: 5rem;
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -618,7 +632,7 @@ nav .icon-ui{
|
||||||
.offcanvas li:not(:first-child){
|
.offcanvas li:not(:first-child){
|
||||||
margin-top: initial;
|
margin-top: initial;
|
||||||
}
|
}
|
||||||
.offcanvas .userPseudo{
|
.offcanvas .user-pseudo{
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-top: .5em;
|
margin-top: .5em;
|
||||||
}
|
}
|
||||||
|
|
@ -636,8 +650,14 @@ nav .icon-ui{
|
||||||
.separator.menu-admin > .btn-link{
|
.separator.menu-admin > .btn-link{
|
||||||
padding: .725rem 1rem .725rem 0;
|
padding: .725rem 1rem .725rem 0;
|
||||||
}
|
}
|
||||||
|
.invitation-options button span{
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
@media (576px <= width <= 992px) {
|
.invitation-options button .icon-ui{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (576px <= width <= 992px) {
|
||||||
.btn-stack{
|
.btn-stack{
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
@ -648,7 +668,7 @@ nav .icon-ui{
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (hover: hover) {
|
@media only screen and (hover: hover) {
|
||||||
.btn-cta:hover{
|
.btn-cta:hover{
|
||||||
background-color: var(--accent-normal);
|
background-color: var(--accent-normal);
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -664,15 +684,19 @@ nav .icon-ui{
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
text-underline-offset: 0.375em;
|
text-underline-offset: 0.375em;
|
||||||
}
|
}
|
||||||
#tandem-meet .col:hover{
|
.btn-icon:hover{
|
||||||
|
border: 1px solid var(--bs-link-color);
|
||||||
|
color: var(--bs-link-color);
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
#tandemMeet .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;
|
||||||
}
|
}
|
||||||
#tandem-meet .col:hover .form-check-input{
|
#tandemMeet .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{
|
||||||
color: black;
|
color: black;
|
||||||
background: #fdc314;
|
background: #fdc314;
|
||||||
|
|
|
||||||
|
|
@ -33,9 +33,9 @@
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="offcanvas-body">
|
<div class="offcanvas-body">
|
||||||
<nav class="side-menu" id="offSideMenu">
|
<nav class="side-menu" id="offSideMenu">
|
||||||
<div class="userAvatar">
|
<div class="user-avatar">
|
||||||
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
|
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
|
||||||
<p class="userPseudo">Forum du Bilinguisme</p>
|
<p class="user-pseudo">Forum du Bilinguisme</p>
|
||||||
</div>
|
</div>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
|
|
@ -3671,12 +3671,12 @@
|
||||||
<div class="profile">
|
<div class="profile">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-2">
|
<div class="col-lg-2">
|
||||||
<div class="userAvatar">
|
<div class="user-avatar">
|
||||||
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
|
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-9">
|
<div class="col-lg-9">
|
||||||
<h4 class="userPseudo display-6 fw-bold">Priscilla</h4>
|
<h4 class="user-pseudo fs-2 fw-bold">Priscilla</h4>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="col-lg-6">
|
<div class="col-lg-6">
|
||||||
|
|
@ -3709,11 +3709,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="userDescription">
|
<p 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.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="profileOptions">
|
<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="#signalModal">Signaler ce profil inapproprié</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -3724,12 +3724,12 @@
|
||||||
<div class="profile">
|
<div class="profile">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-2">
|
<div class="col-lg-2">
|
||||||
<div class="userAvatar">
|
<div class="user-avatar">
|
||||||
<img src="static/img/avatars/55238.jpg" alt="Petra Horvat-Puzak">
|
<img src="static/img/avatars/55238.jpg" alt="Petra Horvat-Puzak">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-9">
|
<div class="col-lg-9">
|
||||||
<h4 class="userPseudo display-6 fw-bold">Petra Horvat-Puzak</h4>
|
<h4 class="user-pseudo fs-2 fw-bold">Petra Horvat-Puzak</h4>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="col-lg-6">
|
<div class="col-lg-6">
|
||||||
|
|
@ -3762,11 +3762,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="userDescription">
|
<p 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.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="profileOptions">
|
<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="#signalModal">Signaler ce profil inapproprié</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -3777,12 +3777,12 @@
|
||||||
<div class="profile">
|
<div class="profile">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-2">
|
<div class="col-lg-2">
|
||||||
<div class="userAvatar">
|
<div class="user-avatar">
|
||||||
<img src="static/img/avatars/t800.jpg" alt="I'm a T800">
|
<img src="static/img/avatars/t800.jpg" alt="I'm a T800">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-9">
|
<div class="col-lg-9">
|
||||||
<h4 class="userPseudo display-6 fw-bold">I'm a T800</h4>
|
<h4 class="user-pseudo fs-2 fw-bold">I'm a T800</h4>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="col-lg-6">
|
<div class="col-lg-6">
|
||||||
|
|
@ -3815,11 +3815,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="userDescription">
|
<p class="user-description">
|
||||||
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.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="profileOptions">
|
<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="#signalModal">Signaler ce profil inapproprié</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue