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

Add titles to menu
Some checks failed
Build and Deploy / build-and-push (push) Failing after 1m15s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-21 22:44:08 +02:00
parent e914f93781
commit 2f362a7e56
6 changed files with 55 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
index.html
View File

@@ -678,6 +678,8 @@
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0.24rem;
flex: 0 0 auto;
color: rgba(var(--text-primary-rgb), 0.94);
cursor: pointer;
@@ -692,6 +694,31 @@
font-size: 0.95rem;
line-height: 1;
}
#app-bottom-nav .nav-label {
display: none;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.62rem;
font-weight: 500;
line-height: 1.18;
}
#app-bottom-nav .nav-tab.is-active::after {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.62rem;
font-weight: 500;
line-height: 1.18;
content: "";
}
#app-bottom-nav #nav-planner.is-active::after { content: "Planer"; }
#app-bottom-nav #nav-recipes.is-active::after { content: "Katalog"; }
#app-bottom-nav #nav-pantry.is-active::after { content: "Spiżarnia"; }
#app-bottom-nav #nav-shopping.is-active::after { content: "Zakupy"; }
#app-bottom-nav .nav-tab:hover,
#app-bottom-nav .nav-action:hover {
transform: translateY(-1px);
@@ -699,8 +726,9 @@
background: var(--hover-overlay) !important;
}
#app-bottom-nav .nav-tab.is-active {
width: 2.6rem;
height: 2.6rem;
width: min(100%, 5.2rem);
height: 2.82rem;
padding: 0.34rem 0.28rem 0.3rem;
color: rgb(var(--text-primary-rgb));
background: rgba(var(--overlay-rgb), 0.38) !important;
border-radius: 1.05rem;
@@ -708,6 +736,12 @@
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.18) !important;
}
#app-bottom-nav .nav-tab.is-active .nav-label {
display: none;
}
#app-bottom-nav .nav-tab.is-active i {
font-size: 0.8rem;
}
.dark #app-bottom-nav .nav-tab.is-active {
color: #fff;
background: rgba(0, 0, 0, 0.42) !important;
@@ -743,10 +777,17 @@
border-radius: 1.28rem;
}
#app-bottom-nav .nav-tab.is-active {
width: 2.4rem;
height: 2.4rem;
width: min(100%, 4.4rem);
height: 2.65rem;
padding: 0.3rem 0.22rem 0.27rem;
border-radius: 0.96rem;
}
#app-bottom-nav .nav-label {
font-size: 0.56rem;
}
#app-bottom-nav .nav-tab.is-active::after {
font-size: 0.56rem;
}
}
/* Planner and common interactive surfaces */
@@ -792,7 +833,7 @@
</div>
<script>
const APP_ASSET_VERSION = '20260417-svg7';
const APP_ASSET_VERSION = '20260421-nav-labels';
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
const APP_VERSION_QUERY_KEY = 'appv';

6
js/ui/bottomNav.js
View File

@@ -5,21 +5,25 @@ export function getBottomNavHTML() {
<div class="nav-slot">
<button type="button" data-tab="planner" id="nav-planner" class="nav-tab is-active" aria-label="Planer" aria-current="page">
<i class="far fa-calendar-alt" aria-hidden="true"></i>
<span class="nav-label">Planer</span>
</button>
</div>
<div class="nav-slot">
<button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Przepisy">
<button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Katalog">
<i class="fas fa-search" aria-hidden="true"></i>
<span class="nav-label">Katalog</span>
</button>
</div>
<div class="nav-slot">
<button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab" aria-label="Spiżarnia">
<i class="fas fa-warehouse" aria-hidden="true"></i>
<span class="nav-label">Spiżarnia</span>
</button>
</div>
<div class="nav-slot" style="position:relative;">
<button type="button" data-tab="shopping" id="nav-shopping" class="nav-tab" aria-label="Zakupy">
<i class="fas fa-cart-shopping" aria-hidden="true"></i>
<span class="nav-label">Zakupy</span>
</button>
</div>
</div>

3
js/views/MealPlanner.js
View File

@@ -74,8 +74,7 @@ export function getMealPlannerHTML() {
return `
<div id="planner-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-[rgb(var(--app-bg-rgb))] z-10">
<div id="planner-cal-bar" class="shrink-0 bg-[rgb(var(--app-bg-rgb))] border-b border-[rgb(var(--card-strong-rgb))] mt-3 relative z-10">
<div class="min-h-12 px-4 pt-4 pb-3 flex items-center justify-between gap-3 min-w-0">
<h1 class="min-w-0 flex-1 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Plan posiłków</h1>
<div class="min-h-12 px-4 pt-4 pb-3 flex items-center justify-end gap-3 min-w-0">
${createCalendarTopbarHTML({
todayId: 'cal-go-today',
wrapperClass: 'flex shrink-0 items-center justify-end',

4
js/views/Pantry.js
View File

@@ -174,9 +174,7 @@ export function getPantryHTML() {
<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:rgb(var(--app-bg-rgb)) !important; border:none !important;">
<div class="pointer-events-auto relative z-[1] w-full">
<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);">
<h1 class="flex-1 min-w-0 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Zapasy</h1>
<div id="pantry-default-row" class="flex min-h-12 items-center justify-end gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
<div id="pantry-horizon-wrap" class="relative shrink">
<button type="button" id="pantry-horizon-compact" class="min-w-0 max-w-[12rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important;">
<span id="pantry-horizon-compact-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>

4
js/views/RecipeList.js
View File

@@ -115,9 +115,7 @@ export function getRecipeListHTML() {
<div class="pointer-events-auto relative z-[1] w-full">
<div id="recipe-topbar" class="relative min-h-12">
<div id="recipe-default-row" class="flex min-h-12 items-center gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
<h1 class="min-w-0 flex-1 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Katalog przepisów</h1>
<div id="recipe-default-row" class="flex min-h-12 items-center justify-end gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
<div id="recipe-filter-wrap" class="relative shrink-0">
<button type="button" id="recipe-filter-btn" class="relative w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell); color:rgb(var(--text-body-rgb));" aria-label="Otwórz filtry">
<i class="fas fa-sliders-h text-[12px]" aria-hidden="true"></i>

3
js/views/ShoppingList.js
View File

@@ -123,8 +123,7 @@ export function getShoppingListHTML() {
<div class="shrink-0 px-4 pt-5 pb-0">
<!-- title row + pill + bought button (position:relative anchors the popups) -->
<div class="flex items-center gap-2 mb-4" style="position:relative;">
<h1 class="flex-1 text-[18px] font-bold" style="color:rgb(var(--text-emphasis-rgb));">Lista zakupów</h1>
<div class="flex items-center justify-end gap-2 mb-4" style="position:relative;">
<button type="button" id="sl-range-pill" class="min-w-0 max-w-[10rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all shrink" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell);">
<span id="sl-range-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
<i id="sl-range-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>