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

add wrapper to custom select options, to exclude search from scrolling
Some checks failed
Build and Push Docker Image / build (push) Failing after 6m57s
Details

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-11-13 10:56:01 +00:00
parent 7a36e4fbe3
commit 34155dc300
2 changed files with 63 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
apps/home/static/home/scss/index.scss
View File

@ -121,14 +121,11 @@
border: 1px solid var(--bs-border-color);
border-radius: 0 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm);
box-shadow: var(--bs-box-shadow);
max-height: 200px;
overflow-y: auto;
z-index: 1000;
outline: 0;
.corbz-select-search {
// display: none; // disabled for now
width: 100%;
padding: 0.375rem 0.75rem;
background: none;
@ -145,62 +142,69 @@
@extend small;
}
.corbz-select-option {
padding: 0.375rem 0.75rem;
cursor: pointer;
outline: 0;
.corbz-select-dropdown-options {
&:hover, &:focus { background-color: var(--bs-tertiary-bg); }
&.active {
max-height: 200px;
overflow-y: auto;
color: var(--bs-white);
background-color: var(--bs-primary);
.corbz-select-option {
}
// Multi-select versions
> .corbz-option-checkbox {
--bs-form-check-bg-image: none;
width: 1rem;
height: 1rem;
appearance: none;
background-color: var(--bs-body-bg);
background-image: var(--bs-form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius-sm);
vertical-align: middle;
padding: 0.375rem 0.75rem;
cursor: pointer;
outline: 0;
&:checked {
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
&:hover, &:focus { background-color: var(--bs-tertiary-bg); }
&.active {
color: var(--bs-white);
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
&:focus {
border-color: #86b7fe;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
// Multi-select versions
> .corbz-option-checkbox {
--bs-form-check-bg-image: none;
width: 1rem;
height: 1rem;
appearance: none;
background-color: var(--bs-body-bg);
background-image: var(--bs-form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius-sm);
vertical-align: middle;
outline: 0;
&:checked {
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
&:focus {
border-color: #86b7fe;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
}
}
> span {
display: inline-block;
vertical-align: middle;
margin-left: 0.75rem;
> span {
display: inline-block;
vertical-align: middle;
margin-left: 0.75rem;
}
}
}

13
static/js/base.js
View File

@ -108,7 +108,9 @@ $(document).ready(function() {
initThemeChoice();
});
// Custom Select Jquery
// region Custom Select Control
(($) => {
function initCorbzSelect() {
const defaultSelectedHtml = " ";
@ -117,8 +119,6 @@ $(document).ready(function() {
let values = $select.val() || [];
let names = [];
// if (settings.id === "styleTitleMutator") { debugger; }
if (!Array.isArray(values)) { values = [values] };
// Update names based on values
@ -167,7 +167,9 @@ $(document).ready(function() {
const $dropdown = $('<div class="corbz-select-dropdown">');
// Search input to filter the dropdown results
const $search = $('<input type="text" class="corbz-select-search" placeholder="Search ...">');
const $search = $('<input type="search" class="corbz-select-search" placeholder="Search ...">');
const $optionsContainer = $('<div class="corbz-select-dropdown-options"></div>');
const settings = {
id: $select.prop("id"),
@ -179,6 +181,7 @@ $(document).ready(function() {
// Add custom elements to the DOM
$dropdown.prepend($search);
$dropdown.append($optionsContainer)
$container.append($selected).append($dropdown);
$select.hide().after($container);
@ -262,7 +265,7 @@ $(document).ready(function() {
});
}
$dropdown.append($option)
$optionsContainer.append($option)
});
// For no options, display a message