faPicker scroll just icons and icon alignment

This commit is contained in:
LenAnderson
2024-07-18 18:28:24 -04:00
parent 4340143b7b
commit 1412977083
2 changed files with 21 additions and 4 deletions

View File

@ -1921,7 +1921,9 @@ export async function showFontAwesomePicker(customList = null) {
const faList = customList ?? await fetchFa(); const faList = customList ?? await fetchFa();
const fas = {}; const fas = {};
const dom = document.createElement('div'); { const dom = document.createElement('div'); {
dom.classList.add('faPicker-container');
const search = document.createElement('div'); { const search = document.createElement('div'); {
search.classList.add('faQuery-container');
const qry = document.createElement('input'); { const qry = document.createElement('input'); {
qry.classList.add('text_pole'); qry.classList.add('text_pole');
qry.classList.add('faQuery'); qry.classList.add('faQuery');

View File

@ -5346,16 +5346,31 @@ body:not(.movingUI) .drawer-content.maximized {
color: #FAF8F6; color: #FAF8F6;
} }
.popup.vertical_scrolling_dialogue_popup:has(.faPicker) { .popup:has(.faPicker) {
/* Fix height for fa picker popup, otherwise search is making it resize weirdly */ /* Fix height for fa picker popup, otherwise search is making it resize weirdly */
height: 70%; height: 70%;
.popup-content {
display: flex;
flex-direction: column;
}
}
.faPicker-container {
display: flex;
flex-direction: column;
overflow: hidden;;
}
.faQuery-container {
flex: 0 0 auto;
} }
.faPicker { .faPicker {
display: flex; flex: 1 1 auto;
overflow: auto;
gap: 1em; gap: 1em;
flex-wrap: wrap; display: grid;
justify-content: space-between; grid-template-columns: repeat(auto-fill, minmax(3.5em, 1fr));
.menu_button { .menu_button {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;