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

Floating menu and search bar
Some checks failed
Build and Deploy / build-and-push (push) Failing after 1m16s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-06 12:40:56 +02:00
parent 36f9f35b0b
commit e640b34b0f
3 changed files with 189 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
js/views/RecipeList.js
View File

@@ -13,8 +13,7 @@ const slotLabelMap = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
const DEFAULT_MIN_MINUTES = 5;
const DEFAULT_MAX_MINUTES = 120;
const SEARCH_SHELL_BASE_SHADOW =
'inset 0 1px 0 rgba(255,255,255,0.045), 0 0 0 1px rgba(255,255,255,0.015)';
const SEARCH_HEADER_SCROLLED_SHADOW = '0 10px 16px rgba(0,0,0,0.34)';
'0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04)';
function slotLabelsFor(recipe) {
return (recipe.allowedSlots || [])
@@ -84,21 +83,14 @@ function renderRecipeCard(recipe) {
function syncRecipeScrollShadow() {
const scroll = document.getElementById('recipe-scroll');
const shadow = document.getElementById('recipe-top-bar-shadow');
const header = document.getElementById('recipe-top-bar');
const searchShell = document.getElementById('recipe-search-shell');
if (!shadow || !header || !searchShell) return;
if (!searchShell) return;
if (!scroll) {
shadow.style.opacity = '0';
header.style.boxShadow = 'none';
searchShell.style.boxShadow = SEARCH_SHELL_BASE_SHADOW;
return;
}
const isScrolled = scroll.scrollTop > 6;
shadow.style.opacity = isScrolled ? '1' : '0';
header.style.boxShadow = isScrolled ? SEARCH_HEADER_SCROLLED_SHADOW : 'none';
searchShell.style.boxShadow = SEARCH_SHELL_BASE_SHADOW;
}
@@ -127,17 +119,16 @@ function renderGrid() {
export function getRecipeListHTML() {
return `
<div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[#2d2e2b] z-10" style="background:#2d2e2b !important;">
<div id="recipe-top-bar" class="relative z-[2] px-4 pt-3 pb-4 mt-2" style="background:#2d2e2b !important; border:none !important; transition:box-shadow 180ms ease;">
<div id="recipe-search-shell" class="relative z-[1] flex items-center w-full overflow-hidden" style="background:#3a3b38 !important; border:1px solid rgba(79,81,76,0.95) !important; border-radius:1.5rem !important; box-shadow:${SEARCH_SHELL_BASE_SHADOW} !important; transition:box-shadow 180ms ease;">
<div id="recipe-top-bar" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4" style="background:transparent !important; border:none !important;">
<div id="recipe-search-shell" class="pointer-events-auto relative z-[1] mx-auto flex items-center w-full overflow-hidden" style="width:min(calc(100% - 0.5rem), 22.4rem); background:#393937 !important; border:1px solid #41423f !important; border-radius:999px !important; box-shadow:${SEARCH_SHELL_BASE_SHADOW} !important; transition:box-shadow 180ms ease;">
<input type="text" id="recipe-search-input" placeholder="Szukaj przepisów..." class="w-full bg-transparent outline-none text-[15px] text-center py-[12px] pl-8 pr-14" style="background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important;">
<button id="recipe-filter-btn" onclick="openFilters()" class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 text-[#c9c3b8] hover:text-[#f0e8dc] flex items-center justify-center transition-colors" style="background:transparent !important; border:none !important; box-shadow:none !important;" aria-label="Otwórz filtry">
<i class="fas fa-sliders-h"></i>
</button>
</div>
<div id="recipe-top-bar-shadow" class="pointer-events-none absolute inset-x-0 bottom-0 z-[0] h-4 translate-y-1 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to bottom, rgba(0,0,0,0.46), rgba(0,0,0,0.18), rgba(0,0,0,0)); filter:blur(7px);"></div>
</div>
<div id="recipe-scroll" class="relative flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-[#2d2e2b]" style="background:#2d2e2b !important;">
<div id="recipe-scroll" class="relative flex-1 overflow-y-auto px-4 pt-20 pb-24 bg-[#2d2e2b]" style="background:#2d2e2b !important;">
<div id="recipe-grid" class="grid grid-cols-2 gap-3 bg-[#2d2e2b]" style="background:#2d2e2b !important;"></div>
</div>
</div>