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

Fix scrolling areas
Some checks failed
Build and Deploy / build-and-push (push) Failing after 1m13s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-17 17:51:32 +02:00
parent f533db1743
commit 92cc779dbf
3 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
js/views/Pantry.js
View File

@@ -174,7 +174,7 @@ export function getPantryHTML() {
<div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:#2d2e2b !important;">
<!-- ── floating top bar ── -->
<div 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="pantry-topbar-outer" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:#2d2e2b !important; border:none !important;">
<div class="pointer-events-auto relative z-[1] mx-auto" style="width:min(calc(100% - 0.5rem), 22.4rem);">
<div id="pantry-topbar" class="relative min-h-12">
<div id="pantry-default-row" class="flex min-h-12 items-center gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
@@ -716,6 +716,18 @@ export function setupPantry() {
syncHorizonUI();
renderBoard();
// Scroll shadow under top bar
const pantryScroll = document.getElementById('pantry-scroll');
const topbarOuter = document.getElementById('pantry-topbar-outer');
if (pantryScroll && topbarOuter) {
const shadow = document.createElement('div');
shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(0,0,0,0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
topbarOuter.appendChild(shadow);
pantryScroll.addEventListener('scroll', () => {
shadow.style.opacity = pantryScroll.scrollTop > 2 ? '1' : '0';
});
}
// Search
document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
document.getElementById('pantry-search')?.addEventListener('keydown', (event) => {

14
js/views/RecipeList.js
View File

@@ -114,7 +114,7 @@ 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="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-top-bar" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:#2d2e2b !important; border:none !important;">
<div class="pointer-events-auto relative z-[1] mx-auto" style="width:min(calc(100% - 0.5rem), 22.4rem);">
<div id="recipe-topbar" class="relative min-h-12">
@@ -205,8 +205,16 @@ export function setupRecipeList() {
if (recipeId) window.openRecipeDetail?.(recipeId);
});
document.getElementById('recipe-scroll')?.addEventListener('scroll', syncRecipeScrollShadow);
syncRecipeScrollShadow();
const recipeScroll = document.getElementById('recipe-scroll');
const recipeTopBar = document.getElementById('recipe-top-bar');
if (recipeScroll && recipeTopBar) {
const shadow = document.createElement('div');
shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(0,0,0,0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
recipeTopBar.appendChild(shadow);
recipeScroll.addEventListener('scroll', () => {
shadow.style.opacity = recipeScroll.scrollTop > 2 ? '1' : '0';
});
}
if (!recipeListDocListenersBound) {
recipeListDocListenersBound = true;