style changes for server list

This commit is contained in:
Corban-Lee Jones 2024-04-14 13:24:41 +01:00
parent a29dd64766
commit 46a7fc10db
2 changed files with 9 additions and 7 deletions

View File

@ -12,7 +12,7 @@ function getCurrentlyActiveServer() {
return activeServer;
}
function addToLoadedServers(server) {
function addToLoadedServers(server, selectNew=true) {
// Remove the 'id' property and add the 'currentlyActive' property
({id, ...rest} = server, server = {...rest, currentlyActive: false})
@ -23,7 +23,9 @@ function addToLoadedServers(server) {
addServerTemplate(id, server.guild_id, server.name, server.icon);
// Select the newly added server
selectServer(id);
if (selectNew) {
selectServer(id);
}
}
function removeFromLoadedServers(serverPrimaryKey) {
@ -92,7 +94,7 @@ async function loadSavedGuilds() {
// 'Register' the server, by storing it for later and
// displaying it on the server list sidebar
addToLoadedServers(server);
addToLoadedServers(server, false);
});
}
catch (error) {
@ -170,7 +172,7 @@ function selectServer(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");
$(`#serverList .server-item[data-id=${primaryKey}] button img`).removeClass("rounded-circle").addClass("rounded-3").animate({top: '+=100px'}, 200, 'swing');;
// Display details of the selected server
$("#selectedServerContainer .selected-server-name").text(server.name);

View File

@ -21,9 +21,9 @@
<div class="peer bg-body-secondary">
<div id="serverList" class="p-2 layers border-end h-100">
<div class="layer mb-2">
<button type="button" id="newServerBtn" class="btn bg-body rounded-circle p-1 bd">
<span class="d-flex jc-c ai-c" style="width: 50px; height: 50px;">
<i class="bi bi-plus-lg fs-4"></i>
<button type="button" id="newServerBtn" class="btn bg-body rounded-circle bd" style="width: 50px; height: 50px;">
<span class="d-flex jc-c ai-c">
<i class="bi bi-plus-lg fs-5"></i>
</span>
</button>
</div>