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

nicer pin btn size, and disable sidebar toggle btns when pinned
All checks were successful
Build and Push Docker Image / build (push) Successful in 14s
Details

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-10-10 16:44:20 +01:00
parent 9ff2cdd1f1
commit b8ff2ae303
3 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/home/static/home/css/sidebar.css
View File

@ -201,7 +201,7 @@
.sidebar .sidebar-footer .sidebar-menu-btn { .sidebar .sidebar-footer .sidebar-menu-btn {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: auto;
padding: 0.5rem; padding: 0.5rem;
border: none; border: none;
border-radius: var(--bs-border-radius-sm); border-radius: var(--bs-border-radius-sm);

5
apps/home/static/home/js/index.js
View File

@ -300,8 +300,13 @@ var _sidebarPinned = $(".sidebar .pin-sidebar-btn").hasClass("active");
const getSidebarPinned = () => _sidebarPinned; const getSidebarPinned = () => _sidebarPinned;
const setSidebarPinned = pin => { const setSidebarPinned = pin => {
_sidebarPinned = pin; _sidebarPinned = pin;
// Show button as active or not
const btn = $(".sidebar .pin-sidebar-btn"); const btn = $(".sidebar .pin-sidebar-btn");
pin ? btn.addClass("active") : btn.removeClass("active"); pin ? btn.addClass("active") : btn.removeClass("active");
$(".sidebar .btn-close").prop("disabled", pin);
$(".reveal-sidebar-btn").prop("disabled", pin);
} }
const toggleSidebarPinned = () => setSidebarPinned(!getSidebarPinned()); const toggleSidebarPinned = () => setSidebarPinned(!getSidebarPinned());

4
apps/home/templates/home/sidebar.html
View File

@ -26,11 +26,11 @@
</ul> </ul>
<hr class="sidebar-divider"> <hr class="sidebar-divider">
<div class="sidebar-footer dropdown"> <div class="sidebar-footer dropdown">
<button type="button" class="sidebar-menu-btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside"> <button type="button" class="sidebar-menu-btn dropdown-toggle flex-grow-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<img src="{{ request.user.avatar_url }}" alt="user icon" class="sidebar-avatar"> <img src="{{ request.user.avatar_url }}" alt="user icon" class="sidebar-avatar">
<strong>{{ request.user.global_name }}</strong> <strong>{{ request.user.global_name }}</strong>
</button> </button>
<button type="button" class="pin-sidebar-btn sidebar-menu-btn justify-content-center d-flex d-lg-none"> <button type="button" class="pin-sidebar-btn sidebar-menu-btn justify-content-center d-flex d-lg-none flex-grow-0 px-3">
<i class="bi bi-pin-angle"></i> <i class="bi bi-pin-angle"></i>
</button> </button>
<ul class="sidebar-menu dropdown-menu"> <ul class="sidebar-menu dropdown-menu">