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

finish sidebar scss rewrite

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-10-14 22:44:52 +01:00
parent c10c1ff511
commit 507b60e54e
2 changed files with 180 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
apps/home/static/home/scss/sidebar.scss
View File

@ -17,7 +17,7 @@
bottom: 1rem;
right: 1rem;
@include media-breakpoint-down(xl) { display: block; }
@include media-breakpoint-down(lg) { display: block; }
}
@ -35,7 +35,7 @@
z-index: 999;
// Hide the sidebar
@include media-breakpoint-down(xl) {
@include media-breakpoint-down(lg) {
transform: translateX(-100%);
position: fixed;
left: 0;
@ -45,7 +45,7 @@
// Show the sidebar on smaller screens
&.visible {
@include media-breakpoint-down(xl) { transform: translateX(0); }
@include media-breakpoint-down(lg) { transform: translateX(0); }
@include media-breakpoint-down(sm) { width: 100vw; }
}
@ -87,7 +87,7 @@
display: none;
@include media-breakpoint-down(xl) { display: block; }
@include media-breakpoint-down(lg) { display: block; }
}
@ -228,7 +228,9 @@
display: flex;
padding: 0 1rem 1rem 1rem;
.sidebar-menu-btn {
}
.sidebar-btn {
display: flex;
align-items: center;
@ -239,19 +241,32 @@
color: var(--bs-body-color);
background-color: inherit;
&:hover, &.active { background-color: var(--bs-body-bg); }
&:hover, &:focus, &.active { background-color: var(--bs-body-bg); }
&.sidebar-user-btn {
&.sidebar-mini-btn {
flex-grow: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
justify-content: center;
padding-left: 1rem;
padding-right: 1rem;
}
.sidebar-pin-btn { flex-grow: 0; }
&.dropdown { padding: 0; }
>.sidebar-menu-btn {
text-align: start;
padding: 0.5rem;
border: 0;
width: 100%;
height: 100%;
color: inherit;
background-color: inherit;
border-radius: $border-radius-sm;
}
}
.sidebar-avatar {
@ -262,11 +277,43 @@
}
.theme-menu {
flex-direction: row;
&.show {
display: flex;
inset: auto auto 0 auto !important;
// transform: translateX(-50%) !important;
}
.theme-btn {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.25rem;
border: 0;
width: 50px;
height: 50px;
color: var(--bs-body-color);
background-color: inherit;
border-radius: $border-radius-sm;
&:hover, &:focus { background-color: var(--bs-tertiary-bg); }
&.active {
color: var(--bs-white);
background-color: var(--bs-primary);
}
}
}
.sidebar-menu {
.dropdown-menu {
border: none;
border-radius: var(--bs-border-radius-sm);

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

@ -15,7 +15,7 @@
<span>Failed to fetch results - you are being rate limited by Discord.</span>
<i class="bi bi-question-circle-fill" data-bs-toggle="tooltip" data-bs-title="Discord rate-limits when requests are made in rapid succession."></i>
</p>
<button type="button" class="sidebar-menu-btn sidebar-retry-btn w-100 rounded-1">
<button type="button" class="sidebar-btn sidebar-retry-btn w-100 rounded-1">
<i class="bi bi-arrow-clockwise me-2"></i>
<span>Retry</span>
</button>
@ -35,22 +35,20 @@
</ul>
<hr class="sidebar-divider">
<div class="sidebar-footer dropdown">
<button type="button" class="sidebar-menu-btn sidebar-user-btn dropdown-toggle flex-grow-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<div class="sidebar-footer">
<div class="sidebar-btn text-start flex-grow-1 dropdown p-0">
<button type="button" class="sidebar-menu-btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<img src="{{ request.user.avatar_url }}" alt="user icon" class="sidebar-avatar">
<strong class="text-truncate">{{ request.user.global_name }}</strong>
</button>
<button type="button" class="sidebar-pin-btn sidebar-menu-btn justify-content-center d-flex d-lg-none px-3">
<i class="bi bi-pin-angle"></i>
</button>
<ul class="sidebar-menu dropdown-menu">
<ul class="dropdown-menu">
<li class="dropend">
<button type="button" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<i class="bi bi-sun me-2"></i>
<span>Theme</span>
</button>
<ul class="sidebar-menu dropdown-menu">
<li>
<ul class="dropdown-menu">
<!-- <li>
<input type="radio" name="themeToggle" id="themeToggleLight" class="btn-check" value="light" autocomplete="off">
<label for="themeToggleLight" class="dropdown-item" role="button">
<i class="bi bi-sun me-2"></i>
@ -70,7 +68,7 @@
<i class="bi bi-circle-half me-2"></i>
<span>Auto</span>
</label>
</li>
</li> -->
</ul>
</li>
<li>
@ -107,6 +105,44 @@
</li>
</ul>
</div>
<div class="sidebar-btn sidebar-mini-btn dropdown">
<button type="button" class="js-themeMenuBtn sidebar-menu-btn px-3" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<i class="bi bi-sun"></i>
</button>
<ul class="theme-menu dropdown-menu dropdown-menu-center">
<li>
<input type="radio" name="themeToggle" id="themeToggleLight" class="btn-check" value="light" autocomplete="off">
<label for="themeToggleLight" class="theme-btn" role="button" data-bs-toggle="tooltip" data-bs-title="Light">
<i class="bi bi-sun"></i>
</label>
</li>
<li>
<input type="radio" name="themeToggle" id="themeToggleDark" class="btn-check" value="dark" autocomplete="off">
<label for="themeToggleDark" class="theme-btn" role="button" data-bs-toggle="tooltip" data-bs-title="Dark">
<i class="bi bi-moon-stars"></i>
</label>
</li>
<li>
<input type="radio" name="themeToggle" id="themeToggleAuto" class="btn-check" value="auto" autocomplete="off">
<label for="themeToggleAuto" class="theme-btn" role="button" data-bs-toggle="tooltip" data-bs-title="Auto">
<i class="bi bi-circle-half"></i>
</label>
</li>
<!-- <button type="button" class="theme-btn">
<i class="bi bi-sun"></i>
</button>
<button type="button" class="theme-btn">
<i class="bi bi-moon-stars"></i>
</button>
<button type="button" class="theme-btn">
<i class="bi bi-circle-half"></i>
</button> -->
</ul>
</div>
<button type="button" class="js-pinSidebar sidebar-btn sidebar-mini-btn d-flex d-lg-none">
<i class="bi bi-pin-angle"></i>
</button>
</div>
</div>
<button type="button" class="reveal-sidebar-btn rounded-1 btn btn-lg btn-primary shadow">