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

Update appearance of serverlist items

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-04-14 13:40:57 +01:00
parent 46a7fc10db
commit 369e3d9b7d
2 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/static/css/home/main.css
View File

@ -29,4 +29,25 @@
color: var(--bs-body-color);
background-color: var(--bs-tertiary-bg);
border: 1px solid var(--border-colour);
}
@keyframes bump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(3px); /* Adjust the height of the bump */
}
100% {
transform: translateY(0);
}
}
#serverList .server-item.active button img {
border-radius: .75rem !important;
animation: bump .2s ease-out;
}
#serverList .server-item:hover button img {
border-radius: .75rem !important;
}

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

@ -170,9 +170,9 @@ async function registerNewServer(serverName, serverGuildId, serverIconHash) {
function selectServer(primaryKey) {
var server = loadedServers[primaryKey];
// Change shape of selected vs none-selected items
$("#serverList .server-item button img").removeClass("rounded-3").addClass("rounded-circle");
$(`#serverList .server-item[data-id=${primaryKey}] button img`).removeClass("rounded-circle").addClass("rounded-3").animate({top: '+=100px'}, 200, 'swing');;
// Change appearance of selected vs none-selected items
$("#serverList .server-item").removeClass("active")
$(`#serverList .server-item[data-id=${primaryKey}]`).addClass("active")
// Display details of the selected server
$("#selectedServerContainer .selected-server-name").text(server.name);