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

Redesign meal plan editor

Browse Source
This commit is contained in:
Rafał
2026-04-04 21:49:00 +02:00
parent 20424b4ecb
commit bfe3074a26
12 changed files with 129 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/views/Filter.js
View File

@@ -1,4 +1,4 @@
import { RECIPES } from '../data/catalog.js';
import { RECIPES } from '../data/catalog.js?v=2';
import { MEAL_SLOTS } from '../planner/mealSlots.js';
import { applyFilters, getFilterState, getFilteredCount, refreshRecipeList } from './RecipeList.js';

8
js/views/MealPlanner.js
View File

@@ -1,4 +1,4 @@
import { INGREDIENTS, RECIPES } from '../data/catalog.js';
import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=2';
import { MEAL_SLOTS } from '../planner/mealSlots.js';
import {
addDays,
@@ -60,7 +60,7 @@ function syncTodayButton(mode, weekStart, monthAnchor, selected) {
export function getMealPlannerHTML() {
return `
<div id="planner-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-gray-50 z-10 pb-24">
<div id="planner-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-[#2d2e2b] z-10 pb-24">
<div class="shrink-0 bg-white border-b border-gray-200 mt-3">
${createCalendarTopbarHTML({
titleId: 'cal-period-label',
@@ -83,14 +83,14 @@ export function getMealPlannerHTML() {
</div>
</div>
<div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-4">
<div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-4 bg-[#2d2e2b]">
<div class="flex items-center justify-between mb-2">
<p id="planner-day-heading" class="text-[13px] font-semibold text-gray-900 tabular-nums"></p>
<button type="button" id="planner-copy-day" class="shrink-0 text-[11px] font-semibold text-gray-500 hover:text-gray-900 px-2.5 py-1 rounded-lg hover:bg-gray-100 transition-colors flex items-center gap-1.5">
<i class="fas fa-copy text-[9px]"></i>Kopiuj dzień
</button>
</div>
<div id="planner-summary-card" class="rounded-xl border border-amber-200/80 bg-gradient-to-br from-amber-50 to-white p-2.5 shadow-sm mb-3">
<div id="planner-summary-card" class="rounded-xl border border-amber-200/80 bg-[#2d2e2b] p-2.5 shadow-sm mb-3">
<div class="flex items-start justify-between gap-2 mb-2">
<div>
<p class="text-[10px] font-semibold uppercase tracking-wide text-amber-900/70">Dziś — podsumowanie</p>

2
js/views/Pantry.js
View File

@@ -2,7 +2,7 @@ import {
INGREDIENTS,
CATEGORY_LABELS,
pantryQtyStep,
} from '../data/catalog.js';
} from '../data/catalog.js?v=2';
import { addIngredientToKitchenList, categoryLabel, loadPantry, setPantryQty } from '../services/pantryShopping.js';
import { showAppToast } from '../ui/toast.js';

2
js/views/RecipeDetail.js
View File

@@ -1,4 +1,4 @@
import { RECIPES, INGREDIENTS } from '../data/catalog.js';
import { RECIPES, INGREDIENTS } from '../data/catalog.js?v=2';
import { MEAL_SLOTS } from '../planner/mealSlots.js';
import { addDays, addMonths, sameDay, sameMonth, startOfDay, startOfMonth, startOfWeekMonday } from '../services/dateUtils.js';
import { dateKey, loadPlans, newPlanEntryId, savePlans } from '../services/planStore.js';

6
js/views/RecipeDetailV2.js
View File

@@ -1,4 +1,4 @@
import { RECIPES, INGREDIENTS } from '../data/catalog.js';
import { RECIPES, INGREDIENTS } from '../data/catalog.js?v=2';
import { MEAL_SLOTS } from '../planner/mealSlots.js';
function escapeHtml(s) {
@@ -13,7 +13,7 @@ const slotLabelMap = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
export function getRecipeDetailHTML() {
return `
<div id="recipe-detail-view" class="absolute inset-0 bg-white z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none flex flex-col overflow-hidden">
<div id="recipe-detail-view" class="absolute inset-0 bg-[#2d2e2b] z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none flex flex-col overflow-hidden">
<div class="absolute top-0 w-full p-3.5 flex justify-between z-40 mt-3">
<button onclick="closeRecipeDetail()" class="w-9 h-9 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-800 hover:bg-white transition-colors">
<i class="fas fa-arrow-left text-[13px]"></i>
@@ -28,7 +28,7 @@ export function getRecipeDetailHTML() {
<span id="rd-hero-label" class="absolute inset-0 flex items-center justify-center text-white font-medium text-[15px]"></span>
</div>
<div class="bg-white rounded-t-3xl -mt-6 relative z-30 pt-6 flex flex-col flex-1 overflow-hidden">
<div class="bg-[#2d2e2b] rounded-t-3xl -mt-6 relative z-30 pt-6 flex flex-col flex-1 overflow-hidden">
<div class="mb-3 px-5 shrink-0">
<div class="flex justify-between items-start mb-2.5">
<h1 id="rd-title" class="text-xl font-bold text-gray-900"></h1>

6
js/views/RecipeList.js
View File

@@ -1,4 +1,4 @@
import { RECIPES } from '../data/catalog.js';
import { RECIPES } from '../data/catalog.js?v=2';
import { MEAL_SLOTS } from '../planner/mealSlots.js';
function escapeHtml(s) {
@@ -98,7 +98,7 @@ function renderGrid() {
export function getRecipeListHTML() {
return `
<div id="main-view" class="flex flex-col h-full absolute inset-0 bg-gray-50 z-10">
<div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[#2d2e2b] z-10">
<div class="p-4 border-b border-gray-200 mt-4 bg-white">
<div class="flex items-center w-full border border-gray-300 rounded-lg bg-white focus-within:border-gray-400 transition-colors">
<div class="pl-3 pr-2 text-gray-400"><i class="fas fa-search"></i></div>
@@ -110,7 +110,7 @@ export function getRecipeListHTML() {
</div>
</div>
<div class="flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-gray-50">
<div class="flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-[#2d2e2b]">
<div id="recipe-grid" class="grid grid-cols-2 gap-3"></div>
</div>
</div>