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

sidebar username overflow fix #64
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-11 10:16:26 +01:00
parent 41211e61bd
commit c4ce4b28a0
3 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -214,6 +214,18 @@
background-color: var(--bs-body-bg); background-color: var(--bs-body-bg);
} }
.sidebar .sidebar-user-btn {
flex-grow: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar .sidebar-pin-btn {
flex-grow: 0;
}
.sidebar .sidebar-avatar { .sidebar .sidebar-avatar {
border-radius: 50%; border-radius: 50%;
margin-right: 0.5rem; margin-right: 0.5rem;

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

@ -296,13 +296,13 @@ $(window).on('resize', () => {
// region Sidebar Pin // region Sidebar Pin
var _sidebarPinned = $(".sidebar .pin-sidebar-btn").hasClass("active"); var _sidebarPinned = $(".sidebar .sidebar-pin-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 // Show button as active or not
const btn = $(".sidebar .pin-sidebar-btn"); const btn = $(".sidebar .sidebar-pin-btn");
pin ? btn.addClass("active") : btn.removeClass("active"); pin ? btn.addClass("active") : btn.removeClass("active");
$(".sidebar .btn-close").prop("disabled", pin); $(".sidebar .btn-close").prop("disabled", pin);
@ -311,4 +311,4 @@ const setSidebarPinned = pin => {
const toggleSidebarPinned = () => setSidebarPinned(!getSidebarPinned()); const toggleSidebarPinned = () => setSidebarPinned(!getSidebarPinned());
// User controls for pinning the sidebar // User controls for pinning the sidebar
$(".sidebar .pin-sidebar-btn").on("click", toggleSidebarPinned); $(".sidebar .sidebar-pin-btn").on("click", toggleSidebarPinned);

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

@ -35,11 +35,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 flex-grow-1" data-bs-toggle="dropdown" data-bs-auto-close="outside"> <button type="button" class="sidebar-menu-btn sidebar-user-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 class="text-truncate">{{ 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 flex-grow-0 px-3"> <button type="button" class="sidebar-pin-btn sidebar-menu-btn justify-content-center d-flex d-lg-none 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">