finish sidebar scss rewrite
This commit is contained in:
parent
c10c1ff511
commit
507b60e54e
@ -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; }
|
||||
|
||||
}
|
||||
|
||||
@ -227,38 +227,85 @@
|
||||
|
||||
display: flex;
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
|
||||
}
|
||||
|
||||
.sidebar-menu-btn {
|
||||
.sidebar-btn {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
padding: 0.5rem;
|
||||
border: none;
|
||||
border-radius: $border-radius-sm;
|
||||
color: var(--bs-body-color);
|
||||
background-color: inherit;
|
||||
|
||||
&:hover, &:focus, &.active { background-color: var(--bs-body-bg); }
|
||||
|
||||
&.sidebar-mini-btn {
|
||||
|
||||
justify-content: center;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
|
||||
}
|
||||
|
||||
&.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 {
|
||||
|
||||
border-radius: 50%;
|
||||
margin-right: 0.5rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
width: auto;
|
||||
padding: 0.5rem;
|
||||
border: none;
|
||||
border-radius: $border-radius-sm;
|
||||
font-size: 1.25rem;
|
||||
border: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
color: var(--bs-body-color);
|
||||
background-color: inherit;
|
||||
border-radius: $border-radius-sm;
|
||||
|
||||
&:hover, &.active { background-color: var(--bs-body-bg); }
|
||||
&:hover, &:focus { background-color: var(--bs-tertiary-bg); }
|
||||
|
||||
&.sidebar-user-btn {
|
||||
&.active {
|
||||
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.sidebar-pin-btn { flex-grow: 0; }
|
||||
|
||||
.sidebar-avatar {
|
||||
|
||||
border-radius: 50%;
|
||||
margin-right: 0.5rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--bs-white);
|
||||
background-color: var(--bs-primary);
|
||||
|
||||
}
|
||||
|
||||
@ -266,7 +313,7 @@
|
||||
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
.dropdown-menu {
|
||||
|
||||
border: none;
|
||||
border-radius: var(--bs-border-radius-sm);
|
||||
|
||||
@ -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,77 +35,113 @@
|
||||
|
||||
</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">
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<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" 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" role="button">
|
||||
<i class="bi bi-circle-half me-2"></i>
|
||||
<span>Auto</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://gitea.cor.bz/corbz/PYRSS-Website" class="dropdown-item" target="_blank">
|
||||
<i class="bi bi-git me-2"></i>
|
||||
<span>Source Code</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://gitea.cor.bz/corbz/PYRSS-Website/wiki" class="dropdown-item" target="_blank">
|
||||
<i class="bi bi-question-lg me-2"></i>
|
||||
<span>Help</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
{% if request.user.is_superuser %}
|
||||
<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>
|
||||
<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="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>
|
||||
<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" 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" role="button">
|
||||
<i class="bi bi-circle-half me-2"></i>
|
||||
<span>Auto</span>
|
||||
</label>
|
||||
</li> -->
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/admin/" class="dropdown-item" target="_blank">
|
||||
<i class="bi bi-person-check-fill me-2"></i>
|
||||
<span>Admin</span>
|
||||
<a href="https://gitea.cor.bz/corbz/PYRSS-Website" class="dropdown-item" target="_blank">
|
||||
<i class="bi bi-git me-2"></i>
|
||||
<span>Source Code</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li>
|
||||
<form action="/logout/" method="post" class="m-0">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="dropdown-item">
|
||||
<i class="bi bi-arrow-left me-2"></i>
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
<li>
|
||||
<a href="https://gitea.cor.bz/corbz/PYRSS-Website/wiki" class="dropdown-item" target="_blank">
|
||||
<i class="bi bi-question-lg me-2"></i>
|
||||
<span>Help</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
{% if request.user.is_superuser %}
|
||||
<li>
|
||||
<a href="/admin/" class="dropdown-item" target="_blank">
|
||||
<i class="bi bi-person-check-fill me-2"></i>
|
||||
<span>Admin</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li>
|
||||
<form action="/logout/" method="post" class="m-0">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="dropdown-item">
|
||||
<i class="bi bi-arrow-left me-2"></i>
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</form>
|
||||
</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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user