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

Redesign controls in recipe list

Browse Source
This commit is contained in:
Rafał
2026-04-22 17:58:20 +02:00
parent 2f362a7e56
commit 7328b6ec4c
4 changed files with 403 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
js/views/Filter.js
View File

@@ -18,7 +18,7 @@ const PREP_TIME_STEP = 5;
const PREP_TIME_MIN_GAP = PREP_TIME_STEP;
const FILTER_CONTEXTS = {
recipes: {
anchorShellId: 'recipe-topbar',
anchorShellId: 'recipe-bottom-controls',
buttonId: 'recipe-filter-btn',
getState: () => getFilterState(),
applyState: (nextState) => applyFilters(nextState),
@@ -247,13 +247,20 @@ function positionFilterPanel() {
const gap = 8;
const margin = 12;
const width = Math.min(anchorRect.width, viewRect.width - margin * 2);
const top = Math.max(margin, anchorRect.bottom - viewRect.top + gap);
const spaceBelow = viewRect.bottom - anchorRect.bottom - margin;
const preferredMaxHeight = Math.min(420, viewRect.height - margin * 2);
const spaceAbove = anchorRect.top - viewRect.top - gap - margin;
const opensUpward = spaceBelow < 260 && anchorRect.top - viewRect.top > spaceBelow;
const maxHeight = opensUpward
? Math.max(220, Math.min(preferredMaxHeight, spaceAbove))
: Math.max(220, viewRect.height - Math.max(margin, anchorRect.bottom - viewRect.top + gap) - margin);
const top = opensUpward
? Math.max(margin, anchorRect.top - viewRect.top - gap - maxHeight)
: Math.max(margin, anchorRect.bottom - viewRect.top + gap);
const left = Math.max(
margin,
Math.min(anchorRect.left - viewRect.left, viewRect.width - width - margin),
);
const maxHeight = Math.max(220, viewRect.height - top - margin);
panel.style.width = `${width}px`;
panel.style.left = `${left}px`;
panel.style.top = `${top}px`;
@@ -373,9 +380,16 @@ function syncPanelCount() {
if (button) {
const highlight = isFilterPanelOpen() || count > 0;
button.style.setProperty('background', highlight ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important');
button.style.setProperty('border-color', highlight ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
button.style.setProperty('color', highlight ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important');
const isRecipeGlassButton = buttonId === 'recipe-filter-btn';
if (isRecipeGlassButton && !highlight) {
button.style.removeProperty('background');
button.style.removeProperty('border-color');
button.style.removeProperty('color');
} else {
button.style.setProperty('background', highlight ? 'rgba(var(--overlay-rgb), 0.12)' : 'rgb(var(--card-rgb))', 'important');
button.style.setProperty('border-color', highlight ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
button.style.setProperty('color', highlight ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important');
}
}
const badge = button?.querySelector('[id$="-filter-count"]');