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

Clean DOM and modified side-menu

Browse source
This commit is contained in:
ericb 2024-12-02 15:06:19 +01:00
parent 476bc01a8c
commit 5fa25967a6
4 changed files with 47 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
home.html
View file

@ -53,7 +53,7 @@
<main> <main>
<div class="hero hero-primary container-fluid"> <div class="hero hero-primary container-fluid">
<div class="d-flex"> <div>
<div class="row"> <div class="row">
<div class="col-lg-4 bottom-anchored order-2 order-lg-1 "> <div class="col-lg-4 bottom-anchored order-2 order-lg-1 ">
<img class="img-fluid" src="static/img/public-ban-home.png"> <img class="img-fluid" src="static/img/public-ban-home.png">

2
profile.html
View file

@ -54,7 +54,7 @@
<main data-screen="profile"> <main data-screen="profile">
<div class="hero hero-secondary container-fluid"> <div class="hero hero-secondary container-fluid">
<div class="d-flex"> <div>
<div class="container"> <div class="container">
<div class="col-lg-8"> <div class="col-lg-8">
<h1 class="display-5 fw-bold lh-1 mb-3 mb-lg-5">Mon profil</h1> <h1 class="display-5 fw-bold lh-1 mb-3 mb-lg-5">Mon profil</h1>

44
static/css/main.css
View file

@ -115,11 +115,13 @@ h1, h2, h3, h4{
/* heros */ /* heros */
.hero{ .hero{
background-image: linear-gradient(to right bottom, #f28705, #f69602, #f9a502, #fbb409, #fdc314); /* background-image: linear-gradient(to right bottom, #f28705, #f69602, #f9a502, #fbb409, #fdc314); */
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));
margin-top: var(--top-bar); margin-top: var(--top-bar);
height: auto; height: auto;
} }
.hero .d-flex{ .hero > div{
display: flex;
justify-content: center; justify-content: center;
} }
.hero .row{ .hero .row{
@ -201,7 +203,7 @@ h1, h2, h3, h4{
padding: var(--div-padding); padding: var(--div-padding);
} }
#tandem-method{ #tandem-method{
background-image: linear-gradient(to right bottom, #f28705, #f69602, #f9a502, #fbb409, #fdc314); 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{
margin-bottom: calc(var(--div-padding) * -1); margin-bottom: calc(var(--div-padding) * -1);
@ -422,7 +424,41 @@ footer a img{
margin: calc(var(--div-padding) / 1.25) auto 0; margin: calc(var(--div-padding) / 1.25) auto 0;
} }
.offcanvas-body{ .offcanvas-body{
background-color: var(--accent-light); padding: 0;
background: rgb(253, 195, 20);
}
.offcanvas-body nav{
margin-top: calc(var(--div-padding) / 2);
}
.offcanvas .nav{
padding-left: calc(var(--div-padding) / 2);
margin-bottom: auto !important;
flex-direction: column !important;
}
.offcanvas .nav-link{
background: none;
padding: var(--bs-nav-link-padding-y) calc(var(--div-padding) / 2);
border-radius: 0;
color: black;
}
.offcanvas .nav-link.active{
background-color: rgba(255,255,255,.5);
font-weight: 700;
pointer-events: none;
cursor: default;
border-top-left-radius: 2rem;
border-bottom-left-radius: 2rem;
}
.offcanvas .nav-link:focus{
color: white;
background-color: #fdc314;
font-weight: 600;
}
#side-lang{
display: flex;
align-items: center;
gap: 1rem;
padding: calc(var(--div-padding) / 2);
} }
} }
@media (576px <= width <= 992px) { @media (576px <= width <= 992px) {

10
tandem-list.html
View file

@ -29,7 +29,7 @@
</div> --> </div> -->
<div class="offcanvas-body"> <div class="offcanvas-body">
<nav class="side-menu" id="offSideMenu"> <nav class="side-menu" id="offSideMenu">
<ul class="nav flex-column mb-auto"> <ul class="nav">
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link active" aria-current="page">Rechercher des TANDEMs</a> <a href="#" role="menuitem" class="nav-link active" aria-current="page">Rechercher des TANDEMs</a>
</li> </li>
@ -53,7 +53,7 @@
</li> </li>
</ul> </ul>
<div class="menu-separator">Admin</div> <div class="menu-separator">Admin</div>
<ul class="nav flex-column mb-auto"> <ul class="nav">
<li class="nav-item"> <li class="nav-item">
<a href="#" role="menuitem" class="nav-link">Gérer les comptes</a> <a href="#" role="menuitem" class="nav-link">Gérer les comptes</a>
</li> </li>
@ -68,7 +68,7 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<div class="d-flex align-items-center gap-2 ms-auto"> <div id="side-lang">
<div class="col"> <div class="col">
<label for="lang">Choisir la langue</label> <label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language"> <select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">
@ -89,7 +89,7 @@
<main data-screen="search"> <main data-screen="search">
<div class="hero hero-primary container-fluid"> <div class="hero hero-primary container-fluid">
<div class="d-flex"> <div>
<div class="row"> <div class="row">
<div class="col-lg-6 bottom-anchored order-2 order-lg-1 "> <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-3.png">
@ -102,7 +102,7 @@
</div> </div>
<section class="container-fluid"> <section class="container-fluid">
<div class="row my-5"> <div class="row my-3">
<div id="secondary-nav" class="col-lg-3"> <div id="secondary-nav" class="col-lg-3">
<nav class="side-menu"> <nav class="side-menu">
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">