ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign menu
All checks were successful
Build and Deploy / build-and-push (push) Successful in 27s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-22 22:53:24 +02:00
parent ded24b53b4
commit 53a7212dfe
5 changed files with 271 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
js/views/RecipeList.js
View File

@@ -13,6 +13,7 @@ let filterState = {
};
let recipeListDocListenersBound = false;
let recipeSearchOpen = false;
function matchesFilters(recipe) {
const { query, slots, tags, minMinutes, maxMinutes } = filterState;
@@ -43,29 +44,62 @@ function getFilteredRecipes() {
}
function syncRecipeScrollShadow() {
const searchShell = document.getElementById('recipe-search-shell');
if (searchShell) {
searchShell.style.boxShadow = 'var(--shadow-shell)';
}
syncRecipeTopbarUI();
}
function syncRecipeTopbarUI() {
const searchWrap = document.getElementById('recipe-search-wrap');
const searchShell = document.getElementById('recipe-search-shell');
const rightBtn = document.getElementById('recipe-filter-btn');
const rightIcon = document.getElementById('recipe-right-btn-icon');
const filterCount = document.getElementById('recipe-filter-count');
const dot = document.getElementById('recipe-search-active-dot');
const isOpen = recipeSearchOpen;
if (searchWrap) searchWrap.classList.toggle('hidden', isOpen);
if (searchShell) {
searchShell.style.boxShadow = 'var(--shadow-shell)';
searchShell.style.opacity = isOpen ? '1' : '0';
searchShell.style.pointerEvents = isOpen ? 'auto' : 'none';
searchShell.style.transform = isOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
}
if (rightIcon) {
rightIcon.className = `fas ${isOpen ? 'fa-xmark' : 'fa-sliders-h'}`;
}
if (rightBtn) {
rightBtn.setAttribute('aria-label', isOpen ? 'Zamknij wyszukiwanie' : 'Otwórz filtry');
}
if (filterCount) {
const activeCount = Number.parseInt(filterCount.textContent || '0', 10) || 0;
const showCount = !isOpen && activeCount > 0;
filterCount.classList.toggle('hidden', !showCount);
filterCount.classList.toggle('flex', showCount);
}
if (dot) {
const hasQuery = Boolean(filterState.query);
dot.classList.toggle('hidden', !hasQuery);
}
}
function closeSearch() {
const input = document.getElementById('recipe-search-input');
const hadQuery = Boolean(input?.value);
if (input) {
input.value = '';
input.blur();
function setSearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
const hadQuery = Boolean(filterState.query);
recipeSearchOpen = open;
document.documentElement.classList.toggle('is-inline-search-open', recipeSearchOpen);
if (clearQuery) {
filterState.query = '';
}
const input = document.getElementById('recipe-search-input');
if (input) {
if (open) {
input.value = filterState.query;
if (focusInput) {
input.focus();
input.setSelectionRange(input.value.length, input.value.length);
}
} else {
input.blur();
}
}
filterState.query = '';
syncRecipeTopbarUI();
if (hadQuery) renderGrid();
if (clearQuery && hadQuery) renderGrid();
}
function renderGrid() {
@@ -96,19 +130,22 @@ export function getRecipeListHTML() {
emptyTitle: 'Brak wyników',
emptyMessage: 'Zmień kryteria wyszukiwania lub filtry',
})}
<div id="recipe-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[24] h-[3.05rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="recipe-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-auto absolute bottom-0 flex items-center gap-2 px-3">
<div id="recipe-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.05rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="recipe-search-wrap" class="pointer-events-auto absolute bottom-0">
<button type="button" id="recipe-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj przepisów">
<i class="fas fa-search" aria-hidden="true"></i>
<span id="recipe-search-active-dot" class="hidden absolute -top-1 -right-1 w-[0.65rem] h-[0.65rem] rounded-full" style="background:rgb(var(--text-emphasis-rgb)); border:1px solid rgba(255,255,255,0.42); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
</button>
</div>
<div id="recipe-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-none absolute bottom-0 flex items-center gap-2 px-3" style="opacity:0; transform:translateY(0.45rem) scale(0.98); transition:opacity 0.2s ease, transform 0.2s ease;">
<i class="fas fa-search shrink-0" aria-hidden="true"></i>
<input type="search" id="recipe-search-input" autocomplete="off" placeholder="Szukaj przepisów…"
class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; color:rgb(var(--text-body-rgb)); margin:0; padding:0 !important;">
<button type="button" id="recipe-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; color:rgb(var(--text-dim-rgb)); box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<i class="fas fa-xmark text-[13px]"></i>
</button>
</div>
<div id="recipe-filter-wrap" class="pointer-events-auto absolute bottom-0 right-4">
<button type="button" id="recipe-filter-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
<i class="fas fa-sliders-h" aria-hidden="true"></i>
<i id="recipe-right-btn-icon" class="fas fa-sliders-h" aria-hidden="true"></i>
<span id="recipe-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
</button>
</div>
@@ -137,20 +174,25 @@ export function refreshRecipeList() {
export function setupRecipeList() {
renderGrid();
document.getElementById('recipe-search-btn')?.addEventListener('click', (e) => {
e.stopPropagation();
setSearchOpen(true, { focusInput: true });
});
document.getElementById('recipe-search-input')?.addEventListener('input', (e) => {
filterState.query = e.target.value.trim();
renderGrid();
});
document.getElementById('recipe-search-input')?.addEventListener('keydown', (e) => {
if (e.key !== 'Escape') return;
if (e.target.value) closeSearch();
else e.target.blur();
e.stopPropagation();
setSearchOpen(false, { clearQuery: true });
});
document.getElementById('recipe-search-close')?.addEventListener('click', () => closeSearch());
document.getElementById('recipe-filter-btn')?.addEventListener('click', (e) => {
e.stopPropagation();
document.getElementById('recipe-search-input')?.blur();
if (recipeSearchOpen) {
setSearchOpen(false, { clearQuery: true });
return;
}
window.openFilters?.('recipes');
});
@@ -167,16 +209,18 @@ export function setupRecipeList() {
const isRecipeViewVisible = !document.getElementById('main-view')?.classList.contains('hidden');
if (e.key !== 'Escape') return;
if (isRecipeViewVisible) {
document.getElementById('recipe-search-input')?.blur();
if (recipeSearchOpen) setSearchOpen(false, { clearQuery: true });
}
});
window.addEventListener('app-tab-change', () => {
document.getElementById('recipe-search-input')?.blur();
if (recipeSearchOpen) setSearchOpen(false);
syncRecipeTopbarUI();
});
window.closeRecipeSearch = () => {
document.getElementById('recipe-search-input')?.blur();
if (recipeSearchOpen) setSearchOpen(false);
syncRecipeTopbarUI();
};
}
}