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

Light mode
Some checks failed
Build and Deploy / build-and-push (push) Failing after 1m17s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-18 12:15:51 +02:00
parent 5c21fb1e64
commit 3055ce53c1
11 changed files with 104 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
js/views/Filter.js
View File

@@ -12,7 +12,6 @@ const FILTER_TEXT_MUTED = 'rgb(var(--text-muted-rgb))';
const FILTER_TEXT_ACTIVE = 'rgb(var(--text-emphasis-rgb))';
const FILTER_TRACK = 'rgb(var(--card-rgb))';
const FILTER_TRACK_FILL = 'rgba(var(--border-input-rgb), 0.58)';
const FILTER_SHADOW = '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)';
const PREP_TIME_MIN = 5;
const PREP_TIME_MAX = 120;
const PREP_TIME_STEP = 5;
@@ -74,13 +73,13 @@ export function getFilterHTML() {
border-radius: 9999px;
border: 1px solid rgba(var(--text-emphasis-rgb),0.16);
background: ${FILTER_TRACK_FILL};
box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
box-shadow: 0 0 0 1px rgba(var(--overlay-rgb),0.12);
touch-action: none;
outline: none;
}
</style>
<div id="filter-view" class="absolute inset-0 z-[70] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:transparent !important; background-image:none !important;" aria-hidden="true">
<div id="filter-panel" class="absolute flex flex-col overflow-hidden rounded-[1.35rem]" style="background:${FILTER_SURFACE} !important; background-image:none !important; border:1px solid ${FILTER_BORDER} !important; opacity:0; transform:translateY(-0.5rem) scale(0.98); transform-origin:top center; transition:${FILTER_PANEL_TRANSITION}; box-shadow:${FILTER_SHADOW}; width:min(calc(100% - 1.5rem), 22rem);">
<div id="filter-panel" class="absolute flex flex-col overflow-hidden rounded-[1.35rem]" style="background:${FILTER_SURFACE} !important; background-image:none !important; border:1px solid ${FILTER_BORDER} !important; opacity:0; transform:translateY(-0.5rem) scale(0.98); transform-origin:top center; transition:${FILTER_PANEL_TRANSITION}; box-shadow:var(--shadow-shell); width:min(calc(100% - 1.5rem), 22rem);">
<div class="shrink-0 px-3 pt-3 pb-2 flex items-center justify-between gap-3">
<p class="text-[11px] font-semibold leading-none" style="color:${FILTER_TEXT_ACTIVE};">Filtry</p>
<button id="filter-clear-btn" type="button" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:${FILTER_TEXT_MUTED};">Wyczyść</button>
@@ -180,7 +179,7 @@ function getChipStyle(active) {
const color = active ? FILTER_TEXT_ACTIVE : FILTER_TEXT_SECONDARY;
const borderRule = active ? `border:1px solid ${FILTER_BORDER};` : 'border:none;';
const shadow = active
? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(0,0,0,0.08);'
? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(var(--overlay-rgb),0.08);'
: '';
return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
}