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 class="nav-item ms-auto">
<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>
</button>
<ul class="dropdown-menu">

31
static/css/base.css
View File

@ -75,3 +75,34 @@
.w-xxl-100 { width: 100%; }
.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">
<span class="navbar-toggler-icon"></span>
</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">
<h5 id="navCollapseLabel" class="offcanvas-title">PYRSS</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3 align-items-center">
<li class="nav-item w-lg-100 py-lg-0 py-3 px-lg-0 px-1">
<button type="button" id="themeToggle" class="me-0 btn btn-link p-0 text-body text-decoration-none">
<ul class="navbar-nav justify-content-end align-items-stretch flex-grow-1">
<li class="nav-item w-lg-100">
<button type="button" id="themeToggle" class="navbar-btn">
<i class="bi bi-sun"></i>
<span class="d-lg-none ms-2 text-body-secondary">Change Theme</span>
</button>
</li>
{% if request.user.is_authenticated %}
<li class="nav-item w-lg-100">
<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">
<span>{{ request.user.global_name }}</span>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">@{{ request.user.username }}</h6></li>
<ul class="dropdown-menu dropdown-menu-end rounded-1">
<li>
<a href="https://gitea.cor.bz/corbz/PYRSS-Website/src/branch/master/README.md" class="dropdown-item" target="_blank">
<i class="bi bi-question"></i><span class="ms-2">Help</span>
</a>
<h6 class="dropdown-header d-flex justify-content-between">
<span>@{{ request.user.username }}</span>
<div class="vr mx-3"></div>
<span>{{ request.user.id }}</span>
</h6>
</li>
<li><hr class="dropdown-divider"></li>
<li>
{% comment %}<!-- Logout only accepts POST requests -->{% endcomment %}
<form action="/logout/" method="post" class="m-0">
{% 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>
</button>
</form>
</li>
{% if request.user.is_superuser %}
<li><hr class="dropdown-divider"></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>
</a>
</li>