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

server sidebar support smaller screens

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-09-14 20:12:22 +01:00
parent b9c0f237f7
commit 2b6546bd76
2 changed files with 49 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
apps/static/css/home/index.css
View File

@ -30,6 +30,39 @@
transition: border-radius .15s ease-in;
} */
.server-sidebar {
width: 16rem;
}
@media (max-width: 992px) {
.server-sidebar {
width: 4.5rem;
}
.server-item > button {
padding: 0.25rem !important;
}
.server-item > button > div {
justify-content: center !important;
}
.server-item .server-item-labels {
display: none !important;
}
.server-sidebar > ul > li:has(> #newServerBtn) {
display: flex;
justify-content: center !important;
}
#newServerBtn {
width: 45px !important;
height: 45px !important;
padding: 0 !important;
}
}
.server-item {
max-width: calc(16rem - 1rem);
}
@ -99,4 +132,12 @@ td > .btn-link {
#serverTabs .nav-link:not(.active) {
color: var(--bs-text-body);
}
.dot-icon {
height: .75rem;
width: .75rem;
background-color: var(--bs-primary);
border-radius: 50%;
display: inline-block;
}

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

@ -11,13 +11,13 @@
{% block content %}
<div class="px-0 h-100">
<div class="d-flex flex-nowrap h-100 border-start border-end">
<div class="d-flex flex-column bg-body-tertiary py-3 border-end" style="width: 16rem">
<ul id="serverList" class="nav nav-pills nav-flush flex-column mb-auto text-center px-2">
<div class="d-flex flex-nowrap h-100">
<div class="server-sidebar d-flex flex-column bg-body-tertiary py-3 border-end">
<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">
<li class="nav-item">
<button type="button" id="newServerBtn" class="btn btn-outline-primary rounded-1 mt-2 w-100 d-flex justify-content-center align-items-center">
<i class="bi bi-plus-lg fs-5 d-none"></i>
<span class="small">Add Server</span>
<i class="bi bi-plus-lg fs-5 d-lg-none d-inline"></i>
<span class="small d-lg-inline d-none">Add Server</span>
</button>
</li>
</ul>
@ -117,7 +117,7 @@
<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" width="45" height="45">
<div class="small text-start ps-2 w-100 flex-shrink-1 overflow-hidden">
<div class="server-item-labels small text-start ps-2 w-100 flex-shrink-1 overflow-hidden">
<div class="js-guildName text-body fw-bold text-truncate"></div>
<div class="js-guildId text-body-secondary text-truncate font-monospace"></div>
</div>
@ -126,8 +126,8 @@
</li>
</script>
<script id="serverItemIconTemplate" type="text/template">
<div class="position-absolute top-0 end-0 badge rounded-1 text-warning fs-5 p-1" data-bs-toggle="tooltip" data-bs-placement="right">
<i class="bi bi-exclamation-triangle-fill"></i>
<div class="position-absolute top-0 end-0 badge rounded-1 fs-5 p-1" data-bs-toggle="tooltip" data-bs-placement="right">
<i class="dot-icon bg-warning"></i>
</div>
</script>
<script src="{% static 'js/api.js' %}"></script>