corbz/PYRSS-Website
corbz/PYRSS-Website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Releases 1 Wiki Activity

navbar cleanup

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-10-02 17:44:19 +01:00
parent 6a9ed93054
commit 443fb58d17
3 changed files with 47 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/home/templates/home/index.html
View File

@ -127,7 +127,7 @@
</li> </li>
<li class="nav-item ms-auto"> <li class="nav-item ms-auto">
<div class="dropdown"> <div class="dropdown">
<button class="nav-link rounded-1 dropdown-toggle" type="button" data-bs-toggle="dropdown"> <button class="nav-link rounded-1 dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<i class="bi bi-gear"></i> <i class="bi bi-gear"></i>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">

31
static/css/base.css
View File

@ -75,3 +75,34 @@
.w-xxl-100 { width: 100%; } .w-xxl-100 { width: 100%; }
.w-xxl-auto { width: auto; } .w-xxl-auto { width: auto; }
} }
/* Navbar */
#navCollapse .navbar-nav {
height: auto;
padding-right: none;
}
@media (min-width: 992px) {
#navCollapse .navbar-nav {
height: 100%;
}
}
.navbar-btn {
text-align: start;
border: none;
width: 100%;
height: 100%;
padding: 0.5rem 1rem;
text-decoration: none;
border-radius: var(--bs-border-radius-sm);
color: var(--bs-body-color);
background-color: var(--bs-secondary-bg);
}
.navbar-btn:hover {
background-color: var(--bs-tertiary-bg);
}

28
templates/includes/navbar.html
View File

@ -9,46 +9,48 @@
<button type="button" class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#navCollapse" aria-controls="navCollapse" aria-label="Toggle navigation"> <button type="button" class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#navCollapse" aria-controls="navCollapse" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div id="navCollapse" class="offcanvas offcanvas-end" tabindex="-1" aria-labelledby="navCollapseLabel"> <div id="navCollapse" class="offcanvas offcanvas-end bg-body-secondary" tabindex="-1" aria-labelledby="navCollapseLabel">
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 id="navCollapseLabel" class="offcanvas-title">PYRSS</h5> <h5 id="navCollapseLabel" class="offcanvas-title">PYRSS</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div> </div>
<div class="offcanvas-body"> <div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3 align-items-center"> <ul class="navbar-nav justify-content-end align-items-stretch flex-grow-1">
<li class="nav-item w-lg-100 py-lg-0 py-3 px-lg-0 px-1"> <li class="nav-item w-lg-100">
<button type="button" id="themeToggle" class="me-0 btn btn-link p-0 text-body text-decoration-none"> <button type="button" id="themeToggle" class="navbar-btn">
<i class="bi bi-sun"></i> <i class="bi bi-sun"></i>
<span class="d-lg-none ms-2 text-body-secondary">Change Theme</span> <span class="d-lg-none ms-2 text-body-secondary">Change Theme</span>
</button> </button>
</li> </li>
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<li class="nav-item w-lg-100"> <li class="nav-item w-lg-100">
<div class="dropdown"> <div class="dropdown">
<button type="button" class="nav-link dropdown-toggle ms-lg-3" data-bs-toggle="dropdown"> <button type="button" class="dropdown-toggle navbar-btn" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<img src="{{ request.user.avatar_url }}" alt="User Icon" width="30" class="rounded-circle me-2"> <img src="{{ request.user.avatar_url }}" alt="User Icon" width="30" class="rounded-circle me-2">
<span>{{ request.user.global_name }}</span> <span>{{ request.user.global_name }}</span>
</button> </button>
<ul class="dropdown-menu dropdown-menu-end"> <ul class="dropdown-menu dropdown-menu-end rounded-1">
<li><h6 class="dropdown-header">@{{ request.user.username }}</h6></li>
<li> <li>
<a href="https://gitea.cor.bz/corbz/PYRSS-Website/src/branch/master/README.md" class="dropdown-item" target="_blank"> <h6 class="dropdown-header d-flex justify-content-between">
<i class="bi bi-question"></i><span class="ms-2">Help</span> <span>@{{ request.user.username }}</span>
</a> <div class="vr mx-3"></div>
<span>{{ request.user.id }}</span>
</h6>
</li> </li>
<li><hr class="dropdown-divider"></li>
<li> <li>
{% comment %}<!-- Logout only accepts POST requests -->{% endcomment %} {% comment %}<!-- Logout only accepts POST requests -->{% endcomment %}
<form action="/logout/" method="post" class="m-0"> <form action="/logout/" method="post" class="m-0">
{% csrf_token %} {% csrf_token %}
<button type="submit" class="dropdown-item"> <button type="submit" class="dropdown-item py-2">
<i class="bi bi-arrow-left-short"></i><span class="ms-2">Logout</span> <i class="bi bi-arrow-left-short"></i><span class="ms-2">Logout</span>
</button> </button>
</form> </form>
</li> </li>
{% if request.user.is_superuser %} {% if request.user.is_superuser %}
<li><hr class="dropdown-divider"></li>
<li> <li>
<a href="/admin/" class="dropdown-item" target="_blank"> <a href="/admin/" class="dropdown-item py-2" target="_blank">
<i class="bi bi-person-check-fill"></i><span class="ms-2">Admin Interface</span> <i class="bi bi-person-check-fill"></i><span class="ms-2">Admin Interface</span>
</a> </a>
</li> </li>