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

servers in sidebar & collapsible sidebar
All checks were successful
Build and Push Docker Image / build (push) Successful in 15s
Details

Browse Source 
- functional server list in sidebar
- sidebar hides on smaller screens, can be revealed with dedicated button
This commit is contained in:
Corban-Lee Jones 2024-10-09 20:47:33 +01:00
parent 068d395a4b
commit 3e4112c9cf
5 changed files with 105 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,16 +1,65 @@
/* Show Sidebar Button */
.reveal-sidebar-btn {
display: none;
position: fixed;
bottom: 1rem;
right: 1rem;
}
/* Hide Sidebar Button */
.sidebar .btn-close {
display: none;
}
/* Sidebar */
.sidebar {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 280px;
width: 300px;
color: var(--bs-body-color);
background-color: var(--bs-tertiary-bg)
}
@media (max-width: 992px) {
.reveal-sidebar-btn {
display: block;
}
.sidebar .btn-close {
display: block;
}
.sidebar {
z-index: 999;
position: fixed;
left: 0;
top: 0;
bottom: 0;
}
.sidebar:not(.visible) {
display: none;
}
.sidebar.visible {
display: flex;
}
}
@media (max-width: 360px) {
.sidebar.visible {
width: 100vw;
}
}
/* Divider */
@ -29,6 +78,13 @@
color: inherit;
}
.sidebar .sidebar-header .sidebar-header-link {
display: flex;
align-items: center;
text-decoration: none;
color: inherit;
}
.sidebar .sidebar-header .sidebar-logo {
width: 45px;
margin-right: 0.5rem;
@ -91,11 +147,14 @@
background-color: var(--bs-tertiary-bg);
}
.sidebar .sidebar-content .sidebar-item:hover {
.sidebar .sidebar-content .sidebar-item:hover,
.sidebar .sidebar-content .sidebar-item:focus,
.sidebar .sidebar-content .sidebar-item.active {
background-color: var(--bs-body-bg);
}
.sidebar .sidebar-content .sidebar-item .sidebar-item-image {
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: var(--bs-border-radius-sm);

17
apps/home/static/home/js/index.js
View File

@ -1,8 +1,4 @@
$(document).ready(async function() {
// await initSubscriptionTable();
// await initFiltersTable();
// await initContentTable();
initSubscriptionsModule();
initFiltersModule();
initContentModule();
@ -258,4 +254,15 @@ function logError(error) {
// Fallback for any other types (string, number, etc.)
console.error('Error:', error);
}
}
}
// region Sidebar Visibility
$(".reveal-sidebar-btn").on("click", () => {
$(".sidebar").toggleClass("visible");
});
$(".sidebar .btn-close").on("click", () => {
$(".sidebar").removeClass("visible");
});

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

@ -83,13 +83,13 @@ function createSelectButton(serverData) {
let imageUrl = `https://cdn.discordapp.com/icons/${id}/${iconHash}.webp?size=80`;
let altText = name.split(' ').map(word => word.charAt(0)).join(''); // initials of server name, used if iconUrl is 404
template.find("img").attr("src", imageUrl).attr("alt", altText);
template.find(".js-guildName").text(name);
template.find(".js-guildId").text(id);
template.attr("data-id", id);
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);
// Bind the button for selecting this server
template.find(".server-item-selector").off("click").on("click", function() {
template.find(".sidebar-item").off("click").on("click", function() {
selectServer(id);
});
@ -107,7 +107,6 @@ $("#backToSelectServer").on("click", function() {
selectedServer = null;
});
// #endregion
// #region Server Selection
@ -121,8 +120,8 @@ function selectServer(id) {
}
// Change appearance of selected vs none-selected items
$("#serverList .server-item").removeClass("active");
$(`#serverList .server-item[data-id=${id}]`).addClass("active");
$("#serverList .sidebar-item").removeClass("active");
$(`#serverList .sidebar-item[data-id=${id}]`).addClass("active");
// Global variable
selectedServer = server;
@ -131,11 +130,13 @@ function selectServer(id) {
$("#noSelectedServer").hide();
$("#selectedServerContainer").show().css("display", "flex");
// Close sidebar on smaller screens
$(".sidebar").removeClass("visible");
// Announce change to any listeners
$(document).trigger("selectedServerChange");
}
// #endregion
// #region Resolve Strings
@ -177,6 +178,7 @@ async function loadServers() {
$(".server-loading-item").show();
generateServers()
.then(servers => {
$("#serverList .sidebar-loading").remove();
servers.forEach(server => addToLoadedServers(server, false));
})
.catch(error => {
@ -196,5 +198,3 @@ async function loadServers() {
$(".server-loading-item").hide();
});
}
// #endregion

16
apps/home/templates/home/index.html
View File

@ -56,7 +56,7 @@
</div>
</div>
<div class="col-12 bg-body-tertiary">
<div class="col-12 bg-secondary-subtle">
<ul id="serverTabs" class="nav nav-pills py-3 text-start px-sm-3" role="tablist">
<li class="nav-item me-auto">
<div class="d-flex align-items-center">
@ -138,14 +138,12 @@
{% block javascript %}
<script id="serverItemTemplate" type="text/template">
<li class="nav-item server-item" data-id="" data-guild-id="">
<button type="button" class="btn border-0 server-item-selector w-100 rounded-1 position-relative">
<div class="d-flex justify-content-start align-items-center w-100">
<img src="" alt="Guild Icon" class="rounded-1 small d-flex justify-content-center align-items-center" width="45" height="45">
<div class="server-item-labels small text-start ps-2 w-100 flex-shrink-1 overflow-hidden">
<div class="js-guildName fw-bold text-truncate"></div>
<div class="js-guildId text-truncate font-monospace"></div>
</div>
<li>
<button type="button" class="sidebar-item">
<img src="" alt="" class="sidebar-item-image js-image">
<div class="sidebar-item-data">
<span class="js-name"></span>
<span class="js-id text-body-secondary font-monospace"></span>
</div>
</button>
</li>

169
apps/home/templates/home/sidebar.html
View File

@ -1,12 +1,15 @@
{% load static %}
<div class="sidebar">
<a href="/" class="sidebar-header me-auto">
<img src="{% static '/images/pyrss_logo.webp' %}" alt="pyrss logo" class="sidebar-logo">
<span class="sidebar-title font-atkinson-hyperlegible">PYRSS</span>
</a>
<div class="sidebar-header">
<a href="/" class="sidebar-header-link me-auto">
<img src="{% static '/images/pyrss_logo.webp' %}" alt="pyrss logo" class="sidebar-logo">
<span class="sidebar-title font-atkinson-hyperlegible">PYRSS</span>
</a>
<button type="button" class="btn-close"></button>
</div>
<hr class="sidebar-divider">
<ul class="sidebar-content overflow-y-auto">
<ul id="serverList" class="sidebar-content overflow-y-auto">
{% for i in "0123456789"|make_list %}
<li class="sidebar-loading">
@ -19,53 +22,7 @@
</div>
</li>
{% endfor %}
<!--
{% for i in "0123456789"|make_list %}
<li class="nav-item server-loading-item">
<div class="btn border-0 w-100 position-relative">
<div class="d-flex justify-content-start align-items-center w-100 placeholder-wave">
<div class="rounded-1 placeholder" style="min-width: 45px !important; min-height: 45px !important;"></div>
<div class="text-start ps-2 w-100 flex-shrink-1 placeholder-wave">
{% if forloop.counter0|divisibleby:2 %}
<div class="placeholder rounded-1 w-75"></div>
<div class="placeholder rounded-1 w-100"></div>
{% else %}
<div class="placeholder rounded-1 w-75"></div>
<div class="placeholder rounded-1 w-50"></div>
{% endif %}
</div>
</div>
</div>
</li>
{% endfor %} -->
<!-- <li>
<button type="button" class="sidebar-item">
<img src="https://cdn.discordapp.com/icons/819325370087112744/65c317ab17d38db343b2b40dd992819f.webp?size=80" class="sidebar-item-image" alt="">
<div class="sidebar-item-data">
<span>Bot Testing</span>
<span class="text-body-secondary font-monospace">819325370087112744</span>
</div>
</button>
</li>
<li>
<button type="button" class="sidebar-item">
<img src="https://cdn.discordapp.com/icons/1039201459188805692/a_0a729662e9d1fd6a4597b0e565a3477d.webp?size=80" class="sidebar-item-image" alt="">
<div class="sidebar-item-data">
<span>CodeHub</span>
<span class="text-body-secondary font-monospace">1039201459188805692</span>
</div>
</button>
</li>
<li>
<button type="button" class="sidebar-item">
<img src="https://cdn.discordapp.com/icons/753323563381031042/5d160cf35fc5ad204edf85d162cd92a2.webp?size=80" class="sidebar-item-image" alt="">
<div class="sidebar-item-data">
<span>Orange</span>
<span class="text-body-secondary font-monospace">753323563381031042</span>
</div>
</button>
</li> -->
</ul>
<hr class="sidebar-divider">
<div class="sidebar-footer dropdown">
@ -82,21 +39,21 @@
<ul class="sidebar-menu dropdown-menu">
<li>
<input type="radio" name="themeToggle" id="themeToggleLight" class="btn-check" value="light" autocomplete="off">
<label for="themeToggleLight" class="dropdown-item">
<label for="themeToggleLight" class="dropdown-item" role="button">
<i class="bi bi-sun me-2"></i>
<span>Light</span>
</label>
</li>
<li>
<input type="radio" name="themeToggle" id="themeToggleDark" class="btn-check" value="dark" autocomplete="off">
<label for="themeToggleDark" class="dropdown-item">
<label for="themeToggleDark" class="dropdown-item" role="button">
<i class="bi bi-moon-stars me-2"></i>
<span>Dark</span>
</label>
</li>
<li>
<input type="radio" name="themeToggle" id="themeToggleAuto" class="btn-check" value="auto" autocomplete="off">
<label for="themeToggleAuto" class="dropdown-item">
<label for="themeToggleAuto" class="dropdown-item" role="button">
<i class="bi bi-circle-half me-2"></i>
<span>Auto</span>
</label>
@ -139,104 +96,6 @@
</div>
</div>
<!-- <div class="server-sidebar d-flex flex-column bg-body-tertiary py-3">
<h1 class="h3 mx-3 mb-0">PYRSS</h1>
<hr>
<h6 class="d-none d-lg-block ms-3">Discord Servers</h6>
<ul id="serverList" class="nav nav-pills nav-flush flex-column mb-auto text-center px-lg-2 px-1 flex-nowrap overflow-y-auto">
{% for i in "0123456789"|make_list %}
<li class="nav-item server-loading-item">
<div class="btn border-0 w-100 position-relative">
<div class="d-flex justify-content-start align-items-center w-100 placeholder-wave">
<div class="rounded-1 placeholder" style="min-width: 45px !important; min-height: 45px !important;"></div>
<div class="text-start ps-2 w-100 flex-shrink-1 placeholder-wave">
{% if forloop.counter0|divisibleby:2 %}
<div class="placeholder rounded-1 w-75"></div>
<div class="placeholder rounded-1 w-100"></div>
{% else %}
<div class="placeholder rounded-1 w-75"></div>
<div class="placeholder rounded-1 w-50"></div>
{% endif %}
</div>
</div>
</div>
</li>
{% endfor %}
<li class="nav-item server-rate-limit" style="display: none;">
<div class="alert alert-warning text-start" role="alert">
<p class="small">You are being rate limited.</p>
<p class="small mb-0">Refresh the page to try again.</p>
</div>
</li>
</ul>
<ul class="row align-items-stretch g-0 list-unstyled text-center mb-0 px-lg-2 px-1 align-items-center text-body-secondary">
<li class="col-lg-4">
<button type="button" id="themeToggle" class="sidebar-btn text-center">
<i class="bi bi-sun"></i>
</button>
</li>
<li class="col-lg-4">
<a href="https://gitea.cor.bz/corbz/PYRSS-Website" class="sidebar-btn d-block text-center">
<i class="bi bi-git"></i>
</a>
</li>
<li class="col-lg-4">
<a href="https://gitea.cor.bz/corbz/PYRSS-Website/wiki" class="sidebar-btn d-block text-center">
<i class="bi bi-question-lg"></i>
</a>
</li>
<li class="col-12">
<div class="dropdown">
<button type="button" class="sidebar-btn d-flex align-items-center px-lg-3" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<img src="{{ request.user.avatar_url }}" alt="User Icon" width="30" class="rounded-circle mx-auto mx-lg-0">
<span class="d-none d-lg-inline mx-2 small text-truncate">@{{ request.user.global_name }}</span>
<i class="d-none d-lg-inline bi bi-chevron-down ms-auto"></i>
</button>
<ul class="dropdown-menu dropdown-menu-start rounded-1">
<li>
<h6 class="dropdown-header d-flex justify-content-between">
<span>@{{ request.user.username }}</span>
<div class="vr mx-3"></div>
<span>{{ request.user.id }}</span>
</h6>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<form action="/logout/" method="post" class="m-0">
{% csrf_token %}
<button type="submit" class="dropdown-item py-2">
<i class="bi bi-arrow-left-short"></i><span class="ms-2">Logout</span>
</button>
</form>
</li>
{% if request.user.is_superuser %}
<li>
<a href="/admin/" class="dropdown-item py-2" target="_blank">
<i class="bi bi-person-check-fill"></i><span class="ms-2">Admin Interface</span>
</a>
</li>
{% endif %}
</ul>
</div>
</li>
</ul>
</div> -->
<!-- <ul class="d-flex flex-lg-row flex-column list-unstyled text-center flex-nowrap mb-0 px-lg-4 px-2 align-items-center text-body-secondary">
<li>
<a href="https://gitea.cor.bz/corbz/PYRSS-Website" class="text-reset" target="_blank">
<i class="bi bi-git fs-6"></i>
</a>
</li>
<li class="ms-lg-4 ms-0">
<a href="https://gitea.cor.bz/corbz/PYRSS-Website/wiki" class="text-reset" target="_blank">
<i class="bi bi-question-lg fs-6"></i>
</a>
</li>
<li class="mx-auto d-none d-lg-inline">
<div class="vr"></div>
</li>
<li class="d-none d-lg-inline text-nowrap text-reset small">
&copy; 2024 PYRSS
</li>
</ul> -->
<button type="button" class="reveal-sidebar-btn rounded-1 btn btn-lg btn-primary shadow">
<i class="bi bi-list"></i>
</button>