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

animate sidebar & fix active server not highlighted
All checks were successful
Build and Push Docker Image / build (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-10-09 21:05:45 +01:00
parent 3e4112c9cf
commit 4dcd1f71fb
2 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,9 +23,9 @@
flex-direction: column;
flex-shrink: 0;
width: 300px;
color: var(--bs-body-color);
background-color: var(--bs-tertiary-bg)
background-color: var(--bs-tertiary-bg);
transition: transform 0.3s ease-in-out;
}
@media (max-width: 992px) {
@ -43,14 +43,11 @@
left: 0;
top: 0;
bottom: 0;
}
.sidebar:not(.visible) {
display: none;
transform: translateX(-100%);
}
.sidebar.visible {
display: flex;
transform: translateX(0);
}
}

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

@ -86,11 +86,11 @@ function createSelectButton(serverData) {
template.find(".js-image").attr("src", imageUrl).attr("alt", altText);
template.find(".js-name").text(name);
template.find(".js-id").text(id);
template.find(".sidebar-item").data("id", id);
template.find(".sidebar-item").attr("data-id", id);
// Bind the button for selecting this server
template.find(".sidebar-item").off("click").on("click", function() {
selectServer(id);
selectServer($(this).data("id"));
});
$("#serverList").prepend(template);
@ -121,7 +121,7 @@ function selectServer(id) {
// Change appearance of selected vs none-selected items
$("#serverList .sidebar-item").removeClass("active");
$(`#serverList .sidebar-item[data-id=${id}]`).addClass("active");
$(`#serverList .sidebar-item[data-id="${id}"]`).addClass("active");
// Global variable
selectedServer = server;