dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 9 Pull requests Releases 14 Activity

{NAVBAR} Rewrote

Browse source
This commit is contained in:
Damien Broqua 2024-06-19 10:36:41 +02:00
parent 4f707ece88
commit 6ee117b583
2 changed files with 113 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
sass/navbar.scss
View file

@ -103,7 +103,7 @@
.navbar-item { .navbar-item {
line-height: 1.5; line-height: 1.5;
padding: .5rem .75rem; padding: .5rem;
position: relative; position: relative;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
@ -126,7 +126,7 @@
box-shadow: 0 8px 8px rgba(10,10,10,.1); box-shadow: 0 8px 8px rgba(10,10,10,.1);
display: none; display: none;
font-size: .875rem; font-size: .875rem;
min-width: 100%; min-width: 280px;
position: absolute; position: absolute;
top: 100%; top: 100%;
} }
@ -263,12 +263,6 @@
margin: .5rem 0 0 1.5rem; margin: .5rem 0 0 1.5rem;
} }
.navbar-item {
cursor: pointer;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@include respond-to("medium-up") { @include respond-to("medium-up") {
background-color: var(--default-color); background-color: var(--default-color);
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
@ -286,11 +280,10 @@
margin: 0.5rem 0; margin: 0.5rem 0;
} }
.navbar-item { // .navbar-item {
white-space: nowrap; // white-space: nowrap;
padding: .375rem 1rem; // padding-block: .375rem;
padding-right: 3rem; // }
}
} }
} }
@ -324,4 +317,10 @@
.navbar { .navbar {
box-shadow: none; box-shadow: none;
} }
}
nav {
ul {
padding-inline: 16px;
}
} }

174
views/index.ejs
View file

@ -64,22 +64,18 @@
Ajouter un album Ajouter un album
</span> </span>
</a> </a>
<a class="button is-secondary" href="/ajouter-a-ma-liste-de-souhaits" aria-label="Ajouter un album à ma liste de souhaits">
<i class="icon-plus"></i>
<span>
Liste de souhaits
</span>
</a>
</div> </div>
</div> </div>
</div> </div>
<% } %> <% } %>
<div class="navbar-end"> <ul class="navbar-end">
<a class="navbar-item" href="/nous-contacter"> <li class="navbar-item">
Nous contacter <a href="/nous-contacter">
</a> Nous contacter
<div class="navbar-item has-dropdown"> </a>
</li>
<li class="navbar-item has-dropdown">
<a class="navbar-link"> <a class="navbar-link">
<i class="icon-adjust theme-system icon-theme hidden"></i> <i class="icon-adjust theme-system icon-theme hidden"></i>
<i class="icon-sun theme-light icon-theme hidden"></i> <i class="icon-sun theme-light icon-theme hidden"></i>
@ -89,29 +85,35 @@
</span> </span>
</a> </a>
<div class="navbar-dropdown"> <ul class="navbar-dropdown">
<button class="navbar-item theme" data-value="system"> <li>
<i class="icon-adjust"></i> <button class="navbar-item theme" data-value="system">
<span> <i class="icon-adjust"></i>
Système <span>
</span> Système
</button> </span>
<button class="navbar-item theme" data-value="light"> </button>
<i class="icon-sun"></i> </li>
<span> <li>
Clair <button class="navbar-item theme" data-value="light">
</span> <i class="icon-sun"></i>
</button> <span>
<button class="navbar-item theme" data-value="dark"> Clair
<i class="icon-moon"></i> </span>
<span> </button>
Sombre </li>
</span> <li>
</button> <button class="navbar-item theme" data-value="dark">
</div> <i class="icon-moon"></i>
</div> <span>
Sombre
</span>
</button>
</li>
</ul>
</li>
<% if ( user ) { %> <% if ( user ) { %>
<div class="navbar-item has-dropdown"> <li class="navbar-item has-dropdown">
<a class="navbar-link"> <a class="navbar-link">
<i class="icon-user"></i> <i class="icon-user"></i>
<span> <span>
@ -119,54 +121,80 @@
</span> </span>
</a> </a>
<div class="navbar-dropdown"> <ul class="navbar-dropdown">
<a class="navbar-item" href="/mon-compte"> <li>
Mon compte <a class="navbar-item" href="/mon-compte">
</a> Mon compte
<hr /> </a>
<a class="navbar-item" href="/ma-collection"> </li>
Ma collection <li><hr /></li>
</a> <li>
<a class="navbar-item" href="/ma-liste-de-souhaits"> <a class="navbar-item" href="/ma-collection">Ma collection</a>
Ma liste de souhaits <ul>
</a> <li>
<a class="navbar-item" href="/ma-collection/on-air"> <a class="navbar-item" href="/ma-collection/on-air">
On air On air
</a> </a>
<a class="navbar-item" href="/ma-collection/statistiques"> </li>
Statistiques <li>
</a> <a class="navbar-item" href="/ma-collection/statistiques">
<hr /> Statistiques
<a class="navbar-item" href="/ma-collection/exporter"> </a>
Exporter ma collection </li>
</a> <li>
<a class="navbar-item" href="/ma-collection/importer"> <a class="navbar-item" href="/ma-collection/exporter">
Importer une collection Exporter
</a> </a>
<hr /> </li>
<a class="navbar-item" href="/ma-liste-de-souhaits/exporter"> <li>
Exporter ma liste de souhaits <a class="navbar-item" href="/ma-collection/importer">
</a> Importer
<a class="navbar-item" href="/ma-liste-de-souhaits/importer"> </a>
Importer une liste de souhaits </li>
</a> </ul>
<hr /> </li>
<a class="navbar-item is-danger" href="/se-deconnecter"> <li><hr /></li>
Déconnexion <li>
</a> <a class="navbar-item" href="/ma-liste-de-souhaits">
</div> Ma liste de souhaits
</div> </a>
<ul>
<li>
<a class="navbar-item" href="/ajouter-a-ma-liste-de-souhaits">
Ajouter
</a>
</li>
<li>
<a class="navbar-item" href="/ma-liste-de-souhaits/exporter">
Exporter
</a>
</li>
<li>
<a class="navbar-item" href="/ma-liste-de-souhaits/importer">
Importer
</a>
</li>
</ul>
</li>
<li><hr /></li>
<li>
<a class="navbar-item is-danger" href="/se-deconnecter">
Déconnexion
</a>
</li>
</ul>
</li>
<% } %> <% } %>
<% if ( !user ) { %> <% if ( !user ) { %>
<div class="navbar-item"> <li class="navbar-item">
<div class="buttons"> <div class="buttons">
<a class="button is-primary" href="/connexion"> <a class="button is-primary" href="/connexion">
<strong>Connexion</strong> <strong>Connexion</strong>
</a> </a>
</div> </div>
</div> </li>
<% } %> <% } %>
</div> </ul>
</div> </div>
</nav> </nav>
</nav> </nav>