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

Reorganizacja górnych paneli i ujednolicenie stylu filtrów

Browse Source 
- Kalendarz: data między strzałkami zamiast napisu "Dziś", nawigacja po prawej, mniejszy komponent dopasowany do wysokości dnia
- MealPlanner/Pantry/RecipeList: spójne nagłówki z tytułem po lewej i kontrolkami po prawej
- RecipeList: nowy top bar z przyciskami filtrów i wyszukiwania wzorowany na spiżarni
- Filter popup: ujednolicony styl z popoverem spiżarni (ciemniejsze tło, jaśniejsze obramowanie, spójne chipy)
- Usunięcie przyciemnienia otoczenia przy otwieraniu filtrów
- Badge z liczbą aktywnych filtrów na przycisku, zachowujący stan po zamknięciu popupu
- Usunięcie ikon kalendarza z pigułek w spiżarni

Made-with: Cursor
This commit is contained in:
Rafał
2026-04-16 00:17:41 +02:00
parent d3a68a80eb
commit 4d7a1a12ae
7 changed files with 553 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
index.html
View File

@@ -254,9 +254,7 @@
}
#main-view > div:first-child,
#planner-view > div:first-child,
#pantry-view > div:first-child,
#filter-view > div:first-child,
#filter-view > div:last-child {
#pantry-view > div:first-child {
background: rgb(var(--app-bg-rgb)) !important;
backdrop-filter: none;
}
@@ -345,7 +343,38 @@
background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(var(--app-bg-rgb), 0.5) 92%);
pointer-events: none;
}
#recipe-search-shell,
#recipe-topbar #recipe-search-shell {
min-height: 0;
width: 100%;
margin-inline: 0;
isolation: auto;
}
#recipe-topbar #recipe-search-shell::after {
display: none;
}
#recipe-topbar #recipe-search-shell,
#recipe-topbar #recipe-search-shell:focus-within {
background: #23221e !important;
border: 1px solid #787876 !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
#recipe-topbar #recipe-search-input {
appearance: none;
-webkit-appearance: none;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #ddd6ca !important;
caret-color: #ddd6ca;
}
#recipe-topbar #recipe-search-input::placeholder {
color: #9b978f !important;
opacity: 1;
}
#recipe-topbar #recipe-filter-btn {
border-radius: 999px;
}
#planner-picker-search-shell {
min-height: 3rem;
width: min(calc(100% - 0.5rem), 22.4rem);
@@ -366,7 +395,6 @@
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
#recipe-search-shell::after,
#planner-picker-search-shell::after {
content: '';
position: absolute;
@@ -381,7 +409,6 @@
z-index: -1;
pointer-events: none;
}
#recipe-search-shell:focus-within,
#planner-picker-search-shell:focus-within {
background: #393937 !important;
border: 1px solid #4a4b47 !important;
@@ -393,7 +420,6 @@
inset 0 2px 7px rgba(0, 0, 0, 0.18),
inset 0 -1px 2px rgba(255, 255, 255, 0.03) !important;
}
#recipe-search-input,
#planner-picker-search {
appearance: none;
-webkit-appearance: none;
@@ -407,20 +433,17 @@
font-weight: 400;
letter-spacing: -0.02em;
}
#recipe-search-input::placeholder,
#planner-picker-search::placeholder,
#pantry-search::placeholder {
color: #beb8ae !important;
opacity: 1;
}
#recipe-filter-btn,
#planner-picker-filter-btn {
border-radius: 999px;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
#recipe-filter-btn:hover,
#planner-picker-filter-btn:hover {
background: rgba(255, 255, 255, 0.03) !important;
}
@@ -440,7 +463,7 @@
backdrop-filter: blur(18px);
}
#filter-view {
background: rgb(var(--app-bg-rgb)) !important;
background: transparent !important;
backdrop-filter: none;
}
#planner-picker-backdrop,
@@ -601,7 +624,7 @@
</div>
<script>
const APP_ASSET_VERSION = '20260414-118';
const APP_ASSET_VERSION = '20260415-163';
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
const APP_VERSION_QUERY_KEY = 'appv';