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

move filter dropdown into search group
Some checks failed
Build and Push Docker Image / build (push) Failing after 7m14s
Details

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-11-12 20:35:03 +00:00
parent e619f526c6
commit af3f019552
3 changed files with 33 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/home/static/home/scss/tables.scss
View File

@ -12,8 +12,6 @@
border-radius: 0.25rem; border-radius: 0.25rem;
color: var(--bs-body-color); color: var(--bs-body-color);
background-color: var(--bs-body-bg); background-color: var(--bs-body-bg);
overflow: hidden;
.table-search-label { .table-search-label {
@ -25,7 +23,7 @@
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
color: inherit; color: inherit;
background-color: inherit; background-color: transparent;
border: none; border: none;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
@ -46,7 +44,7 @@
border: none; border: none;
border-radius: 0; border-radius: 0;
color: inherit; color: inherit;
background-color: inherit; background-color: transparent;
background-clip: padding-box; background-clip: padding-box;
// Disable bootstrap's focus highlights // Disable bootstrap's focus highlights
@ -59,6 +57,24 @@
} }
.table-search-button {
@extend .btn;
color: inherit;
background-color: transparent;
border: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-right: 1px solid var(--bs-border-color) !important;
margin-right: -1px;
&:focus, &:hover { background-color: var(--bs-tertiary-bg); }
}
} }
// Badge popover // Badge popover

35
apps/home/templates/home/tabs/subs.html
View File

@ -1,32 +1,21 @@
<div class="js-tableFilters row mt-4 mb-3 px-sm-3"> <div class="js-tableFilters row mt-4 mb-3 px-sm-3">
<div class="col-md-6 col-lg-5 col-xl-4 d-flex"> <div class="col-md-6 col-lg-5 col-xl-4 d-flex">
<div class="table-search-group mb-md-0 mb-3 me-md-0 me-3"> <div class="table-search-group mb-md-0 mb-3 me-md-0 me-3 dropdown">
<label for="searchForSubscription" class="table-search-label"> <label for="searchForSubscription" class="table-search-label">
<i class="bi bi-search"></i> <i class="bi bi-search"></i>
</label> </label>
<input type="search" id="searchForSubscription" class="table-search-input" placeholder="search"> <input type="search" id="searchForSubscription" class="table-search-input" placeholder="search">
</div> <button type="button" class="table-search-button dropdown-toggle" data-bs-toggle="dropdown" data-bs-autoclose="outside" aria-expanded="false">
<div class="btn-group rounded-1 ms-md-3 ms-auto mb-md-0 mb-3" role="group"> <i class="bi bi-funnel"></i>
<div class="btn-group" role="group"> </button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-autoclose="outside" aria-expanded="false"> <ul class="dropdown-menu dropdown-menu-end">
<i class="bi bi-sort-alpha-up"></i> <li>
</button> <h6 class="dropdown-header">Sort By</h6>
<ul class="dropdown-menu"> </li>
<li> <li>
<h6 class="dropdown-header">Sort By</h6> <h6 class="dropdown-header">Filter By</h6>
</li> </li>
</ul> </ul>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-autoclose="outside" aria-expanded="false">
<i class="bi bi-funnel-fill"></i>
</button>
<ul class="dropdown-menu">
<li>
<h6 class="dropdown-header">Filter By</h6>
</li>
</ul>
</div>
</div> </div>
</div> </div>
<div class="col-md-6 col-lg-7 col-xl-8 text-md-end table-button-controls"> <div class="col-md-6 col-lg-7 col-xl-8 text-md-end table-button-controls">

2
static/js/base.js
View File

@ -1,6 +1,6 @@
const getStoredTheme = () => localStorage.getItem("theme"); const getStoredTheme = () => localStorage.getItem("theme");
const setStoredTheme = theme => localStorage.setItem("theme", theme); const setStoredTheme = theme => localStorage.setItem("theme", theme);
const getPreferredTheme = () => window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; const getPreferredTheme = () => window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
$('input[name="themeToggle"]').on("change", function() { $('input[name="themeToggle"]').on("change", function() {
const selectedTheme = $(this).val(); const selectedTheme = $(this).val();