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

"spot" colours for sidebar items
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-12 23:13:01 +01:00
parent d7a30b9139
commit 306b24988f
2 changed files with 51 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -148,7 +148,7 @@
}
/* Content - Servers */
/* Content (Servers) */
.sidebar .sidebar-content .sidebar-item {
position: relative;
@ -167,7 +167,52 @@
background-color: var(--bs-body-bg);
}
.sidebar .sidebar-content .sidebar-item.is-not-operational::before {
/* Content Alerts */
.sidebar .sidebar-content .sidebar-item.spot::before {
content: "";
transition: 0.1s ease;
transform: translate(-100%, -50%);
position: absolute;
left: 0;
top: 50%;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: var(--bs-body-bg);
}
.sidebar .sidebar-content .sidebar-item.spot:not(:disabled):hover::before,
.sidebar .sidebar-content .sidebar-item.spot:not(:disabled):focus::before,
.sidebar .sidebar-content .sidebar-item.spot.active::before {
transition: 0.15s ease;
width: 0.25rem;
height: 60px;
border-radius: 0.25rem 0 0 0.25rem;
}
/* Content Alerts Colours */
.sidebar .sidebar-content .sidebar-item.spot.spot-primary::before {
background-color: var(--bs-primary);
}
.sidebar .sidebar-content .sidebar-item.spot.spot-secondary::before {
background-color: var(--bs-secondary);
}
.sidebar .sidebar-content .sidebar-item.spot.spot-success::before {
background-color: var(--bs-success);
}
.sidebar .sidebar-content .sidebar-item.spot.spot-danger::before {
background-color: var(--bs-danger);
}
.sidebar .sidebar-content .sidebar-item.spot.spot-warning::before {
background-color: var(--bs-warning);
}
.sidebar .sidebar-content .sidebar-item.spot.spot-info::before {
background-color: var(--bs-info);
}
/* .sidebar .sidebar-content .sidebar-item.is-not-operational::before {
content: "";
position: absolute;
left: 0;
@ -187,7 +232,7 @@
width: 0.25rem;
height: 60px;
border-radius: 0.25rem 0 0 0.25rem;
}
} */
.sidebar .sidebar-content .sidebar-item .sidebar-item-image {
display: flex;

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

@ -67,7 +67,7 @@ const fetchChannels = async serverId => {
$(".sidebar .sidebar-item").prop("disabled", true);
try {
$(`.sidebar .sidebar-item[data-id="${serverId}"]`).removeClass("is-not-operational");
$(`.sidebar .sidebar-item[data-id="${serverId}"]`).removeClass("spot spot-danger");
channels = await ajaxRequest(`/generate-channels?guild=${serverId}`, "GET");
_loadedChannels[serverId] = channels;
}
@ -113,7 +113,7 @@ const rateLimitedLoadingChannels = retryAfterSeconds => {
const notAuthorisedLoadingChannels = serverId => {
// Mark the sidebar item as non-operational
$(`.sidebar .sidebar-item[data-id="${serverId}"]`).addClass("is-not-operational");
$(`.sidebar .sidebar-item[data-id="${serverId}"]`).addClass("spot spot-danger");
const inviteBotToServer = () => {
window.open(
@ -173,7 +173,7 @@ function createSelectButton(serverData) {
// Show inoperational status, also, `isBotOperatioanl` can be null,
// so we can't rely on it's truthy value.
if (isBotOperational === false) {
template.find(".sidebar-item").addClass("is-not-operational");
template.find(".sidebar-item").addClass("spot spot-danger");
}
// Bind the button for selecting this server