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

Compare commits

base: eric:8bf2721b4163045b1c782cc761de2cd39745cec2
Branches Tags
eric:main
..
compare: eric:916fe4c01b258cb66ffcc5ce034542115e8f1a7e
Branches Tags
eric:main

2 commits
8bf2721b41 ... 916fe4c01b

Author SHA1 Message Date
ericb
916fe4c01b Made hover media query and fixed bug leading to link inconsistencies 2024-11-26 16:45:15 +01:00
ericb
35ec8b06a2 Cleaned code 2024-11-26 16:44:43 +01:00
2 changed files with 55 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

58
static/css/main.css
View file

@ -75,9 +75,7 @@ body {
}
/* side menu */
.side-menu .nav-item{
position: relative;
}
.side-menu .nav-link{
color: black;
padding: 0.725rem 1rem;
@ -86,18 +84,13 @@ body {
border-left: 0px solid #f28705;
transition: all ease-in 0.25s;
}
.side-menu .nav-link:active, .side-menu .nav-link.active{
.side-menu .nav-link.active{
background-color: #f28705;
font-weight: 700;
pointer-events: none;
cursor: default;
}
.side-menu .nav-link:not(.active):hover{
color: black;
background: #fdc314;
border-left: 6px solid #f28705;
transition: all ease-in 0.25s;
}
.side-menu .nav-link:focus{
color: black;
background-color: #fdc314;
@ -168,14 +161,7 @@ body {
padding: 1.5rem;
transition: all ease-out 0.3s;
}
#tandem-meet .col:hover{
background-color: var(--accent-light);
border-radius: 0.5rem;
transition: all ease-out 0.3s;
}
#tandem-meet .col:hover .form-check-input{
--bs-border-color: var(--primary);
}
#tandem-meet .col img{
margin-bottom: 1rem;
}
@ -273,11 +259,6 @@ article li:not(:first-of-type){
padding: 0.5em 1.5em;
border: none;
}
.btn-hero-primary:hover{
background-color: var(--primary);
/* border-color: var(--primary); */
color: white;
}
.btn-hero-secondary{
border-color: var(--primary);
@ -290,11 +271,7 @@ article li:not(:first-of-type){
padding: 0.5em 1.5em;
}
.btn-cta:hover{
background-color: var(--accent-normal);
color: white;
border: 1px solid white;
}
.btn-cta, .btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary{
font-size: 1em;
}
@ -430,4 +407,29 @@ footer a img{
.partners-logo-grid{
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
}
}
@media (hover: hover) {
.btn-cta:hover{
background-color: var(--accent-normal);
color: white;
border: 1px solid white;
}
#tandem-meet .col:hover{
background-color: var(--accent-light);
border-radius: 0.5rem;
transition: all ease-out 0.3s;
}
#tandem-meet .col:hover .form-check-input{
--bs-border-color: var(--primary);
}
.btn-hero-primary:hover{
background-color: var(--primary);
color: white;
}
.side-menu .nav-link:not(.active):hover{
color: black;
background: #fdc314;
border-left: 6px solid #f28705;
transition: all ease-in 0.25s;
}
}

35
tandem-list.html
View file

@ -31,27 +31,42 @@
<nav class="side-menu" id="offSideMenu">
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a href="#" role="menuitem" class="nav-link active" aria-current="page">Rechercher des TANDEMs</a>
<a href="#"class="nav-link active" aria-current="page">Rechercher des TANDEMs</a>
</li>
<li>
<a href="#" role="menuitem" class="nav-link">Mes TANDEMs</a>
<a href="#" class="nav-link">Mes TANDEMs</a>
</li>
<li>
<a href="profile.html" role="menuitem" class="nav-link">Modifier mon profil</a>
<a href="profile.html" class="nav-link">Modifier mon profil</a>
</li>
<li>
<a href="#" role="menuitem" class="nav-link">Demandes reçues <span class="badge text-bg-secondary rounded-pill">101</span></a>
<a href="#" class="nav-link">Demandes reçues <span class="badge text-bg-secondary rounded-pill">101</span></a>
</li>
<li>
<a href="#" role="menuitem" class="nav-link">Demandes envoyées</a>
<a href="#" class="nav-link">Demandes envoyées</a>
</li>
<li>
<a href="#" role="menuitem" class="nav-link">Statistiques</a>
<a href="#" class="nav-link">Statistiques</a>
</li>
<li>
<a href="#" role="menuitem" class="nav-link">Espace documentaire</a>
<a href="#" class="nav-link">Espace documentaire</a>
</li>
</ul>
</ul>
<div class="menu-separator">Admin</div>
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link">Comptes</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Signalements</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Langues</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Dictionnaire</a>
</li>
</ul>
</nav>
<div class="d-flex align-items-center gap-2 ms-auto">
<div class="col">
@ -62,9 +77,9 @@
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</select>
</div>
</div>
</div>
</div>
</div>
</div>