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-direction: column;
flex-shrink: 0; flex-shrink: 0;
width: 300px; width: 300px;
color: var(--bs-body-color); 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) { @media (max-width: 992px) {
@ -43,14 +43,11 @@
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
} transform: translateX(-100%);
.sidebar:not(.visible) {
display: none;
} }
.sidebar.visible { .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-image").attr("src", imageUrl).attr("alt", altText);
template.find(".js-name").text(name); template.find(".js-name").text(name);
template.find(".js-id").text(id); 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 // Bind the button for selecting this server
template.find(".sidebar-item").off("click").on("click", function() { template.find(".sidebar-item").off("click").on("click", function() {
selectServer(id); selectServer($(this).data("id"));
}); });
$("#serverList").prepend(template); $("#serverList").prepend(template);
@ -121,7 +121,7 @@ function selectServer(id) {
// Change appearance of selected vs none-selected items // Change appearance of selected vs none-selected items
$("#serverList .sidebar-item").removeClass("active"); $("#serverList .sidebar-item").removeClass("active");
$(`#serverList .sidebar-item[data-id=${id}]`).addClass("active"); $(`#serverList .sidebar-item[data-id="${id}"]`).addClass("active");
// Global variable // Global variable
selectedServer = server; selectedServer = server;