Fixed:
- menus - invitation banners - invitation structure
This commit is contained in:
parent
35f19d8d0a
commit
4fe5a4d04d
6 changed files with 200 additions and 109 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>e-TANDEM · Invitations envoyées</title>
|
||||
<title>e-TANDEM · Demandes de TANDEMs</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="robots" content="noindex">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
|
@ -39,14 +39,14 @@
|
|||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a href="tandem-list.html" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon-ui" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon-ui" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 15.75-2.489-2.489m0 0a3.375 3.375 0 1 0-4.773-4.773 3.375 3.375 0 0 0 4.774 4.774ZM21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||
</svg>
|
||||
Rechercher des TANDEMs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
|
||||
</svg>
|
||||
Mes TANDEMs
|
||||
|
|
@ -55,35 +55,28 @@
|
|||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="profile.html" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" />
|
||||
</svg>
|
||||
Mon profil</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859M12 3v8.25m0 0-3-3m3 3 3-3" />
|
||||
</svg>
|
||||
Demandes reçues <span class="badge rounded-pill ms-2">101</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link active" aria-current="page">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path d="M9,3.75h-2.09c-.99,0-1.86.64-2.15,1.59l-2.41,7.84c-.07.21-.1.44-.1.66v4.16c0,1.24,1.01,2.25,2.25,2.25h15c1.24,0,2.25-1.01,2.25-2.25v-4.16c0-.22-.03-.45-.1-.66l-2.41-7.84c-.29-.94-1.16-1.59-2.15-1.59h-2.09M2.25,13.5h3.86c.85,0,1.63.48,2.01,1.24l.26.51c.38.76,1.16,1.24,2.01,1.24h3.22c.85,0,1.63-.48,2.01-1.24l.26-.51c.38-.76,1.16-1.24,2.01-1.24h3.86M12,13.25V5M12,5l3,3M12,5l-3,3" style="fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px;"/>
|
||||
</svg>
|
||||
Demandes envoyées</a>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m7.875 14.25 1.214 1.942a2.25 2.25 0 0 0 1.908 1.058h2.006c.776 0 1.497-.4 1.908-1.058l1.214-1.942M2.41 9h4.636a2.25 2.25 0 0 1 1.872 1.002l.164.246a2.25 2.25 0 0 0 1.872 1.002h2.092a2.25 2.25 0 0 0 1.872-1.002l.164-.246A2.25 2.25 0 0 1 16.954 9h4.636M2.41 9a2.25 2.25 0 0 0-.16.832V12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 12V9.832c0-.287-.055-.57-.16-.832M2.41 9a2.25 2.25 0 0 1 .382-.632l3.285-3.832a2.25 2.25 0 0 1 1.708-.786h8.43c.657 0 1.281.287 1.709.786l3.284 3.832c.163.19.291.404.382.632M4.5 20.25h15A2.25 2.25 0 0 0 21.75 18v-2.625c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125V18a2.25 2.25 0 0 0 2.25 2.25Z" />
|
||||
</svg>
|
||||
Demandes<span class="badge rounded-pill ms-2">101</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
|
||||
</svg>
|
||||
Statistiques</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
|
||||
</svg>
|
||||
Espace documentaire</a>
|
||||
|
|
@ -150,10 +143,10 @@
|
|||
<div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 bottom-anchored order-2 order-lg-1 ">
|
||||
<img class="img-fluid" src="static/img/ban-3.png">
|
||||
<img class="img-fluid" src="static/img/ban-5.png">
|
||||
</div>
|
||||
<div class="col-lg-6 order-1 order-lg-2">
|
||||
<h1 class="display-5 fw-bold">Demandes envoyées</h1>
|
||||
<h1 class="display-5 fw-bold">Demandes de TANDEMs</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -174,10 +167,7 @@
|
|||
<a href="profile.html" role="menuitem" class="nav-link">Mon profil</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">Demandes reçues <span class="badge rounded-pill">101</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link active" aria-current="page">Demandes envoyées</a>
|
||||
<a href="#" role="menuitem" class="nav-link active" aria-current="page">Demandes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">Statistiques</a>
|
||||
|
|
@ -218,33 +208,98 @@
|
|||
<h5 class="userPseudo fw-bold">Priscilla</h5>
|
||||
<p>Demande envoyée le 12.12.2024</p>
|
||||
</div>
|
||||
<div class="invitationOptions col-md-auto">
|
||||
<div class="invitation-options col-md-auto">
|
||||
<button type="button" class="btn btn-cta rounded" data-bs-toggle="modal" data-bs-target="#alertModal">Annuler cette demande</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<section class="panel">
|
||||
<h1 class="fs-2">Demandes non traitées</h1>
|
||||
<h2 class="fs-4 mt-4">Demandes envoyées</h2>
|
||||
<ul id="sentInvitations" class="mt-4">
|
||||
<li class="invitation">
|
||||
<div class="userAvatar"><img src="static/img/avatars/55238.jpg" alt="Priscilla"></div>
|
||||
<div>
|
||||
<h2 class="h6 userPseudo">Priscilla</h2>
|
||||
<p class="date">Envoyée le 12.12.2024</p>
|
||||
</div>
|
||||
<div class="invitation-options ms-auto">
|
||||
<button type="button" class="btn btn-link ms-auto" data-bs-toggle="modal" data-bs-target="#cancelModal">Annuler</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="invitation">
|
||||
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Eric B."></div>
|
||||
<div>
|
||||
<h2 class="h6 userPseudo">Eric B.</h2>
|
||||
<p class="date">Envoyée le 16.12.2024</p>
|
||||
</div>
|
||||
<div class="invitation-options ms-auto">
|
||||
<button type="button" class="btn btn-link ms-auto" data-bs-toggle="modal" data-bs-target="#cancelModal">Annuler</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="fs-4 mt-4">Demandes reçues</h2>
|
||||
<ul id="receivedInvitations" class="mt-4">
|
||||
<li class="invitation">
|
||||
<div class="userAvatar"><img src="static/img/avatars/t800.jpg" alt="T800"></div>
|
||||
<div>
|
||||
<h2 class="h6 userPseudo">T800</h2>
|
||||
<p class="date">Reçue le 10.12.2024</p>
|
||||
</div>
|
||||
<div class="invitation-options ms-auto">
|
||||
<button type="button" class="btn text-link" data-bs-toggle="modal" data-bs-target="#acceptModal">Accepter</button>
|
||||
<button type="button" class="btn text-link" data-bs-toggle="modal" data-bs-target="#denyModal">Refuser</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="invitation">
|
||||
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Utilisateur"></div>
|
||||
<div>
|
||||
<h2 class="h6 userPseudo">Utilisateur avec un nom à rallonge</h2>
|
||||
<p class="date">Reçue le 12.12.2024</p>
|
||||
</div>
|
||||
<div class="invitation-options ms-auto">
|
||||
<button type="button" class="btn text-link" data-bs-toggle="modal" data-bs-target="#acceptModal">Accepter</button>
|
||||
<button type="button" class="btn text-link" data-bs-toggle="modal" data-bs-target="#denyModal">Refuser</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="panel mt-4">
|
||||
<h1 class="fs-2">Demandes traitées</h1>
|
||||
<ul id="archivedInvitations" class="mt-4">
|
||||
<li class="invitation">
|
||||
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Eric B."></div>
|
||||
<div>
|
||||
<h2 class="h6 userPseudo">Eric B.</h2>
|
||||
<p class="date">Acceptée le 16.12.2024</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="invitation">
|
||||
<div class="userAvatar"><img src="static/img/avatars/55238.jpg" alt="Priscilla"></div>
|
||||
<div>
|
||||
<h2 class="h6 userPseudo">Priscilla</h2>
|
||||
<p class="date">Acceptée le 12.12.2024</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="invitation">
|
||||
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Utilisateur"></div>
|
||||
<div>
|
||||
<h2 class="h6 userPseudo">Utilisateur avec un nom à rallonge</h2>
|
||||
<p class="date">Annulée le 12.12.2024</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="invitation">
|
||||
<div class="userAvatar"><img src="static/img/avatars/t800.jpg" alt="T800"></div>
|
||||
<div>
|
||||
<h2 class="h6 userPseudo">T800</h2>
|
||||
<p class="date">Acceptée le 10.12.2024</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<ul>
|
||||
<li class="invitation">
|
||||
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Priscilla"></div>
|
||||
<div>
|
||||
<h2 class="h5 userPseudo">Priscilla</h2>
|
||||
<p class="date">Envoyée le 12.12.2024</p>
|
||||
</div>
|
||||
<button type="button" class="btn btn-link rounded ms-auto" data-bs-toggle="modal" data-bs-target="#alertModal">Annuler</button>
|
||||
</li>
|
||||
<li class="invitation">
|
||||
<div class="userAvatar"><img src="static/img/avatars/default-avatar.svg" alt="Priscilla"></div>
|
||||
<div>
|
||||
<h2 class="h5 userPseudo">Priscilla</h2>
|
||||
<p class="date">Envoyée le 12.12.2024</p>
|
||||
</div>
|
||||
<button type="button" class="btn btn-link rounded ms-auto" data-bs-toggle="modal" data-bs-target="#alertModal">Annuler</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
|
@ -274,8 +329,7 @@
|
|||
</footer>
|
||||
|
||||
<!-- Modal -->
|
||||
|
||||
<div class="modal fade" id="alertModal" tabindex="-1" aria-label="Annuler la demande de TANDEM" aria-hidden="true">
|
||||
<div class="modal fade" id="cancelModal" tabindex="-1" aria-label="Annuler la demande de TANDEM" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
|
|
@ -283,14 +337,56 @@
|
|||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<p>Vous allez annuler votre demande de TANDEM avec { userPseudo }, veuillez confirmer votre action. L'utilisateur sera notifié de cette annulation.</p>
|
||||
<p>Vous allez annuler votre demande de TANDEM avec { userPseudo }, veuillez confirmer votre action.</p>
|
||||
<p>{ userPseudo } sera notifié de cette annulation.</p>
|
||||
<input type="hidden" id="userId" name="userId" value="678910" />
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
|
||||
<button type="button" class="btn btn-primary">Confirmer</button>
|
||||
<button type="submit" class="btn btn-primary">Confirmer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="denyModal" tabindex="-1" aria-label="Refuser la demande de TANDEM" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Refuser le TANDEM avec<br>{ userPseudo }</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<p>Vous allez refuser la demande de TANDEM effectuée { userPseudo }, veuillez confirmer votre action.</p>
|
||||
<p>{ userPseudo } sera notifié de ce refus.</p>
|
||||
<input type="hidden" id="userId" name="userId" value="678910" />
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
|
||||
<button type="submit" class="btn btn-primary">Refuser</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="acceptModal" tabindex="-1" aria-label="Accepter la demande de TANDEM" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Accepter le TANDEM avec<br>{ userPseudo }</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<p>Vous allez accepter la demande de TANDEM effectuée { userPseudo }.</p>
|
||||
<p>En cliquant sur Accepter, { userPseudo } sera notifié de votre acceptation et vous pourrez commencer votre TANDEM immédiatement.</p>
|
||||
<input type="hidden" id="userId" name="userId" value="678910" />
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
|
||||
<button type="submit" class="btn btn-primary">Accepter</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue