davide/biteplan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migliora UI: design moderno, accordion pasti, fix UX

Browse Source 
- style.css: shadows, transizioni, variabili --radius-sm/full,
  --color-primary-muted, --color-danger-muted
- BottomNav: icone SVG cross-platform, indicatore pill attivo,
  shadow verso l'alto
- MealCard: accordion (solo oggi aperto di default), badge voci
  quando chiusa, icone pasto, fix touch target btn-remove
- MealPlanner: rileva giorno corrente, mostra come sottotitolo
- Converter: chip alimento selezionato, result box con formula
  (es. 140g x 0.75 = 105g), layout migliorato
- ShoppingList: contatore X/Y completati, sezione separata voci
  spuntate, btn-clear ghost invece di solid rosso, empty state
- CheckboxItem: touch target 44px garantito, transizione checked,
  icona SVG per rimuovere, fix plurale "1 voce / N voci"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Davide Grilli
2026-03-25 08:20:57 +01:00
parent 4413c8e7b6
commit 76135e404a
7 changed files with 476 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/BottomNav.vue
View File

@@ -5,8 +5,9 @@
:key="tab.id" :key="tab.id"
:class="['nav-btn', { active: modelValue === tab.id }]" :class="['nav-btn', { active: modelValue === tab.id }]"
@click="$emit('update:modelValue', tab.id)" @click="$emit('update:modelValue', tab.id)"
:aria-label="tab.label"
> >
<span class="nav-icon">{{ tab.icon }}</span> <span class="nav-icon" v-html="tab.icon" />
<span class="nav-label">{{ tab.label }}</span> <span class="nav-label">{{ tab.label }}</span>
</button> </button>
</nav> </nav>
@@ -17,9 +18,35 @@ defineProps({ modelValue: String })
defineEmits(['update:modelValue']) defineEmits(['update:modelValue'])
const tabs = [ const tabs = [
{ id: 'meal', icon: '📅', label: 'Pasti' }, {
{ id: 'convert', icon: '⚖️', label: 'Converti' }, id: 'meal',
{ id: 'shop', icon: '🛒', label: 'Spesa' }, label: 'Pasti',
icon: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2"/>
<line x1="16" y1="2" x2="16" y2="6"/>
<line x1="8" y1="2" x2="8" y2="6"/>
<line x1="3" y1="10" x2="21" y2="10"/>
</svg>`,
},
{
id: 'convert',
label: 'Converti',
icon: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="17 1 21 5 17 9"/>
<path d="M3 11V9a4 4 0 014-4h14"/>
<polyline points="7 23 3 19 7 15"/>
<path d="M21 13v2a4 4 0 01-4 4H3"/>
</svg>`,
},
{
id: 'shop',
label: 'Spesa',
icon: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/>
<line x1="3" y1="6" x2="21" y2="6"/>
<path d="M16 10a4 4 0 01-8 0"/>
</svg>`,
},
] ]
</script> </script>
@@ -36,6 +63,7 @@ const tabs = [
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
display: flex; display: flex;
z-index: 100; z-index: 100;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
} }
.nav-btn { .nav-btn {
@@ -44,24 +72,39 @@ const tabs = [
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 2px; gap: 3px;
background: none; background: none;
border-radius: 0; border-radius: 0;
color: var(--color-muted); color: var(--color-muted);
min-height: unset; min-height: unset;
padding: 0; padding: 0;
font-size: 0.7rem; position: relative;
transition: color var(--transition);
} }
.nav-btn.active { .nav-btn.active {
color: var(--color-primary); color: var(--color-primary);
} }
/* indicatore attivo: pill sopra l'icona — segnala la tab senza aggressività */
.nav-btn.active::before {
content: '';
position: absolute;
top: 6px;
width: 28px;
height: 3px;
background: var(--color-primary);
border-radius: var(--radius-full);
}
.nav-icon { .nav-icon {
font-size: 1.2rem; display: flex;
align-items: center;
justify-content: center;
} }
.nav-label { .nav-label {
font-size: 0.7rem; font-size: 0.68rem;
font-weight: 500;
} }
</style> </style>

37
src/components/CheckboxItem.vue
View File

@@ -4,7 +4,11 @@
<input type="checkbox" :checked="item.checked" @change="$emit('toggle')" /> <input type="checkbox" :checked="item.checked" @change="$emit('toggle')" />
<span class="item-name">{{ item.name }}</span> <span class="item-name">{{ item.name }}</span>
</label> </label>
<button class="btn-remove" @click="$emit('remove')">✕</button> <button class="btn-remove" @click="$emit('remove')" :aria-label="`Rimuovi ${item.name}`">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</li> </li>
</template> </template>
@@ -19,9 +23,17 @@ defineEmits(['toggle', 'remove'])
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: var(--color-surface); background: var(--color-surface);
border-radius: var(--radius); border-radius: var(--radius-sm);
padding: 12px 14px; padding: 4px 4px 4px 14px;
border: 1px solid var(--color-border); border: 1.5px solid var(--color-border);
box-shadow: var(--shadow-sm);
transition: background var(--transition), border-color var(--transition);
}
.checkbox-item.checked {
background: var(--color-bg);
border-color: transparent;
box-shadow: none;
} }
.item-label { .item-label {
@@ -30,6 +42,7 @@ defineEmits(['toggle', 'remove'])
gap: 12px; gap: 12px;
cursor: pointer; cursor: pointer;
flex: 1; flex: 1;
padding: 8px 0;
} }
input[type="checkbox"] { input[type="checkbox"] {
@@ -37,10 +50,12 @@ input[type="checkbox"] {
height: 20px; height: 20px;
cursor: pointer; cursor: pointer;
accent-color: var(--color-primary); accent-color: var(--color-primary);
flex-shrink: 0;
} }
.item-name { .item-name {
font-size: 1rem; font-size: 1rem;
transition: color var(--transition);
} }
.checked .item-name { .checked .item-name {
@@ -48,11 +63,19 @@ input[type="checkbox"] {
color: var(--color-muted); color: var(--color-muted);
} }
/* touch target pieno 44×44px */
.btn-remove { .btn-remove {
background: none; background: none;
color: var(--color-muted); color: var(--color-muted);
min-height: unset; min-height: 44px;
padding: 0 4px; min-width: 44px;
font-size: 0.8rem; padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
flex-shrink: 0;
} }
.btn-remove:active { color: var(--color-danger); }
</style> </style>

165
src/components/MealCard.vue
View File

@@ -1,47 +1,71 @@
<template> <template>
<div class="meal-card"> <div class="meal-card" :class="{ open: isOpen }">
<h2 class="day-name">{{ dayName }}</h2> <button class="card-header" @click="isOpen = !isOpen" :aria-expanded="isOpen">
<span class="day-name">{{ dayName }}</span>
<span class="day-summary" v-if="!isOpen && totalItems > 0">{{ totalItems }} {{ totalItems === 1 ? 'voce' : 'voci' }}</span>
<span class="chevron" :class="{ rotated: isOpen }">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"/>
</svg>
</span>
</button>
<div v-for="slot in slots" :key="slot.id" class="meal-slot"> <div class="card-body" v-show="isOpen">
<h3 class="slot-label">{{ slot.label }}</h3> <div v-for="slot in slots" :key="slot.id" class="meal-slot">
<div class="slot-header">
<span class="slot-icon">{{ slot.icon }}</span>
<h3 class="slot-label">{{ slot.label }}</h3>
</div>
<ul v-if="meals[slot.id].length" class="item-list"> <ul v-if="meals[slot.id].length" class="item-list">
<li v-for="(item, idx) in meals[slot.id]" :key="idx" class="item-row"> <li v-for="(item, idx) in meals[slot.id]" :key="idx" class="item-row">
<span class="item-text">{{ item }}</span> <span class="item-text">{{ item }}</span>
<button class="btn-remove" @click="$emit('remove', slot.id, idx)">✕</button> <button class="btn-remove" @click="$emit('remove', slot.id, idx)" :aria-label="`Rimuovi ${item}`">✕</button>
</li> </li>
</ul> </ul>
<div class="input-row"> <div class="input-row">
<input <input
v-model="inputs[slot.id]" v-model="inputs[slot.id]"
type="text" type="text"
:placeholder="`Aggiungi a ${slot.label.toLowerCase()}...`" :placeholder="`Aggiungi a ${slot.label.toLowerCase()}...`"
@keyup.enter="submit(slot.id)" @keyup.enter="submit(slot.id)"
/> />
<button class="btn-add" @click="submit(slot.id)">+</button> <button class="btn-add" @click="submit(slot.id)" aria-label="Aggiungi">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { reactive } from 'vue' import { ref, reactive, computed } from 'vue'
const props = defineProps({ const props = defineProps({
dayName: String, dayName: String,
meals: Object, meals: Object,
defaultOpen: { type: Boolean, default: false },
}) })
const emit = defineEmits(['add', 'remove']) const emit = defineEmits(['add', 'remove'])
const isOpen = ref(props.defaultOpen)
const slots = [ const slots = [
{ id: 'colazione', label: 'Colazione' }, { id: 'colazione', label: 'Colazione', icon: '☀️' },
{ id: 'pranzo', label: 'Pranzo' }, { id: 'pranzo', label: 'Pranzo', icon: '🌤️' },
{ id: 'cena', label: 'Cena' }, { id: 'cena', label: 'Cena', icon: '🌙' },
] ]
const inputs = reactive({ colazione: '', pranzo: '', cena: '' }) const inputs = reactive({ colazione: '', pranzo: '', cena: '' })
const totalItems = computed(() =>
slots.reduce((sum, s) => sum + props.meals[s.id].length, 0)
)
function submit(slotId) { function submit(slotId) {
const t = inputs[slotId].trim() const t = inputs[slotId].trim()
if (!t) return if (!t) return
@@ -54,37 +78,77 @@ function submit(slotId) {
.meal-card { .meal-card {
background: var(--color-surface); background: var(--color-surface);
border-radius: var(--radius); border-radius: var(--radius);
padding: 16px; margin-bottom: 10px;
margin-bottom: 12px; box-shadow: var(--shadow-sm);
overflow: hidden;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
} }
.card-header {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 14px 16px;
background: none;
border-radius: 0;
min-height: unset;
text-align: left;
}
.day-name { .day-name {
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
margin-bottom: 12px; color: var(--color-text);
flex: 1;
}
/* numero voci mostrato quando la card è chiusa */
.day-summary {
font-size: 0.75rem;
color: var(--color-muted);
background: var(--color-primary-muted);
color: var(--color-primary); color: var(--color-primary);
text-transform: capitalize; padding: 2px 8px;
border-radius: var(--radius-full);
font-weight: 600;
} }
.meal-slot { .chevron {
margin-bottom: 12px; color: var(--color-muted);
display: flex;
transition: transform var(--transition);
} }
.meal-slot:last-child { margin-bottom: 0; } .chevron.rotated { transform: rotate(180deg); }
.card-body {
padding: 0 16px 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.meal-slot { display: flex; flex-direction: column; gap: 6px; }
.slot-header {
display: flex;
align-items: center;
gap: 6px;
}
.slot-icon { font-size: 0.9rem; }
.slot-label { .slot-label {
font-size: 0.8rem; font-size: 0.75rem;
font-weight: 600; font-weight: 700;
color: var(--color-muted); color: var(--color-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.06em;
margin-bottom: 6px;
} }
.item-list { .item-list {
list-style: none; list-style: none;
margin-bottom: 6px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
@@ -95,32 +159,39 @@ function submit(slotId) {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: var(--color-bg); background: var(--color-bg);
border-radius: 6px; border-radius: var(--radius-sm);
padding: 6px 10px; padding: 8px 10px;
} }
.item-text { font-size: 0.9rem; } .item-text { font-size: 0.9rem; flex: 1; }
/* touch target 44px garantito con padding */
.btn-remove { .btn-remove {
background: none; background: none;
color: var(--color-muted); color: var(--color-muted);
min-height: unset; min-height: 44px;
padding: 0 4px; min-width: 44px;
padding: 0;
font-size: 0.75rem; font-size: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
} }
.input-row { .btn-remove:active { color: var(--color-danger); }
display: flex;
gap: 6px; .input-row { display: flex; gap: 8px; }
}
.btn-add { .btn-add {
background: var(--color-primary-light); background: var(--color-primary);
color: #fff; color: #fff;
font-size: 1.2rem; min-width: 48px;
min-width: 40px; min-height: 48px;
flex-shrink: 0; flex-shrink: 0;
min-height: 40px;
padding: 0; padding: 0;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
} }
</style> </style>

158
src/pages/Converter.vue
View File

@@ -1,13 +1,17 @@
<template> <template>
<div class="page"> <div class="page">
<h1 class="page-title">Conversione crudo / cotto</h1> <div class="page-header">
<h1 class="page-title">Conversione</h1>
<p class="page-subtitle">crudo ↔ cotto</p>
</div>
<div class="search-box"> <div class="search-box">
<input <input
v-model="query" v-model="query"
type="text" type="text"
placeholder="Cerca alimento (es. pollo)" placeholder="Cerca alimento (es. pollo, riso...)"
@input="onSearch" @input="onSearch"
:disabled="!!selected"
/> />
</div> </div>
@@ -18,14 +22,20 @@
class="result-item" class="result-item"
@click="selectItem(r)" @click="selectItem(r)"
> >
{{ r.food }} — {{ r.method }} <span class="result-food">{{ r.food }}</span>
<span class="result-method">{{ r.method }}</span>
</li> </li>
</ul> </ul>
<div v-if="selected" class="converter-panel"> <div v-if="selected" class="converter-panel">
<div class="selected-label">
{{ selected.food }} — {{ selected.method }} <div class="selected-chip">
<button class="btn-link" @click="reset">cambia</button> <span class="chip-text">{{ selected.food }} · {{ selected.method }}</span>
<button class="btn-chip-reset" @click="reset" aria-label="Cambia alimento">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</div> </div>
<div class="direction-toggle"> <div class="direction-toggle">
@@ -33,15 +43,23 @@
<button :class="['toggle-btn', { active: direction === 'cookedToRaw' }]" @click="direction = 'cookedToRaw'">cotto → crudo</button> <button :class="['toggle-btn', { active: direction === 'cookedToRaw' }]" @click="direction = 'cookedToRaw'">cotto → crudo</button>
</div> </div>
<div class="input-row"> <div class="input-group">
<input v-model.number="grams" type="number" min="0" placeholder="grammi" /> <label class="input-label">{{ direction === 'rawToCooked' ? 'Grammi crudi' : 'Grammi cotti' }}</label>
<span class="unit">g</span> <div class="input-row">
<input v-model.number="grams" type="number" min="0" placeholder="0" />
<span class="unit">g</span>
</div>
</div> </div>
<div v-if="result !== null" class="result-box"> <div v-if="result !== null" class="result-box">
<span class="result-value">{{ result }}</span> <div class="result-formula">
<span class="result-unit">g</span> {{ grams }}g × {{ yieldValue }} =
<span class="result-label">{{ direction === 'rawToCooked' ? 'cotti' : 'crudi' }}</span> </div>
<div class="result-main">
<span class="result-value">{{ result }}</span>
<span class="result-unit">g</span>
</div>
<div class="result-desc">{{ direction === 'rawToCooked' ? 'da mangiare cotti' : 'peso crudo equivalente' }}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -58,6 +76,11 @@ const selected = ref(null)
const direction = ref('rawToCooked') const direction = ref('rawToCooked')
const grams = ref(null) const grams = ref(null)
const yieldValue = computed(() => {
if (!selected.value) return ''
return db[selected.value.food][selected.value.method].yield
})
const result = computed(() => { const result = computed(() => {
if (!selected.value || !grams.value || grams.value <= 0) return null if (!selected.value || !grams.value || grams.value <= 0) return null
const { food, method } = selected.value const { food, method } = selected.value
@@ -97,53 +120,73 @@ function reset() {
</script> </script>
<style scoped> <style scoped>
.search-box { margin-bottom: 12px; } .search-box { margin-bottom: 8px; }
.results-list { .results-list {
list-style: none; list-style: none;
background: var(--color-surface); background: var(--color-surface);
border: 1px solid var(--color-border); border: 1.5px solid var(--color-border);
border-radius: var(--radius); border-radius: var(--radius);
overflow: hidden; overflow: hidden;
margin-bottom: 16px; margin-bottom: 16px;
box-shadow: var(--shadow-sm);
} }
.result-item { .result-item {
padding: 12px 16px; display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
text-transform: capitalize; transition: background var(--transition);
} }
.result-item:last-child { border-bottom: none; } .result-item:last-child { border-bottom: none; }
.result-item:active { background: var(--color-bg); } .result-item:active { background: var(--color-bg); }
.result-food { font-weight: 600; text-transform: capitalize; }
.result-method { font-size: 0.85rem; color: var(--color-muted); text-transform: capitalize; }
.converter-panel { display: flex; flex-direction: column; gap: 16px; } .converter-panel { display: flex; flex-direction: column; gap: 16px; }
.selected-label { .selected-chip {
font-weight: 600; display: inline-flex;
text-transform: capitalize;
display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
background: var(--color-primary-muted);
border-radius: var(--radius-full);
padding: 6px 12px 6px 14px;
align-self: flex-start;
} }
.btn-link { .chip-text {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-primary);
text-transform: capitalize;
}
.btn-chip-reset {
background: none; background: none;
color: var(--color-primary); color: var(--color-primary);
min-height: unset; min-height: unset;
padding: 0; padding: 2px;
font-size: 0.85rem; display: flex;
align-items: center;
opacity: 0.7;
} }
.direction-toggle { display: flex; gap: 8px; } .direction-toggle { display: flex; gap: 8px; }
.toggle-btn { .toggle-btn {
flex: 1; flex: 1;
background: var(--color-bg); background: var(--color-surface);
color: var(--color-muted); color: var(--color-muted);
border: 1px solid var(--color-border); border: 1.5px solid var(--color-border);
font-size: 0.85rem; font-size: 0.875rem;
font-weight: 500;
border-radius: var(--radius-sm);
} }
.toggle-btn.active { .toggle-btn.active {
@@ -152,18 +195,59 @@ function reset() {
border-color: var(--color-primary); border-color: var(--color-primary);
} }
.input-row { display: flex; align-items: center; gap: 8px; } .input-group { display: flex; flex-direction: column; gap: 6px; }
.unit { font-size: 1rem; color: var(--color-muted); }
.result-box { .input-label {
background: var(--color-surface); font-size: 0.8rem;
border: 1px solid var(--color-border); font-weight: 600;
border-radius: var(--radius); color: var(--color-muted);
padding: 20px; text-transform: uppercase;
text-align: center; letter-spacing: 0.05em;
} }
.result-value { font-size: 2.5rem; font-weight: 700; color: var(--color-primary); } .input-row { display: flex; align-items: center; gap: 10px; }
.result-unit { font-size: 1.2rem; color: var(--color-muted); margin: 0 4px; } .unit { font-size: 1rem; color: var(--color-muted); font-weight: 500; }
.result-label { font-size: 1rem; color: var(--color-muted); }
.result-box {
background: var(--color-primary);
border-radius: var(--radius);
padding: 24px 20px;
text-align: center;
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
gap: 4px;
}
.result-formula {
font-size: 0.8rem;
color: rgba(255,255,255,0.65);
}
.result-main {
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
}
.result-value {
font-size: 3rem;
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
line-height: 1;
}
.result-unit {
font-size: 1.4rem;
color: rgba(255,255,255,0.8);
font-weight: 600;
}
.result-desc {
font-size: 0.85rem;
color: rgba(255,255,255,0.65);
margin-top: 2px;
}
</style> </style>

10
src/pages/MealPlanner.vue
View File

@@ -1,11 +1,15 @@
<template> <template>
<div class="page"> <div class="page">
<h1 class="page-title">Pasti della settimana</h1> <div class="page-header">
<h1 class="page-title">Pasti della settimana</h1>
<p class="page-subtitle">{{ todayLabel }}</p>
</div>
<MealCard <MealCard
v-for="day in days" v-for="day in days"
:key="day.id" :key="day.id"
:day-name="day.label" :day-name="day.label"
:meals="meals[day.id]" :meals="meals[day.id]"
:default-open="day.id === todayId"
@add="(slot, text) => addItem(day.id, slot, text)" @add="(slot, text) => addItem(day.id, slot, text)"
@remove="(slot, idx) => removeItem(day.id, slot, idx)" @remove="(slot, idx) => removeItem(day.id, slot, idx)"
/> />
@@ -27,6 +31,10 @@ const days = [
{ id: 'domenica', label: 'Domenica' }, { id: 'domenica', label: 'Domenica' },
] ]
const todayMap = ['domenica', 'lunedi', 'martedi', 'mercoledi', 'giovedi', 'venerdi', 'sabato']
const todayId = todayMap[new Date().getDay()]
const todayLabel = days.find(d => d.id === todayId)?.label ?? ''
const defaultMeals = () => const defaultMeals = () =>
Object.fromEntries(days.map(d => [d.id, { colazione: [], pranzo: [], cena: [] }])) Object.fromEntries(days.map(d => [d.id, { colazione: [], pranzo: [], cena: [] }]))

126
src/pages/ShoppingList.vue
View File

@@ -1,6 +1,11 @@
<template> <template>
<div class="page"> <div class="page">
<h1 class="page-title">Lista della spesa</h1> <div class="page-header">
<h1 class="page-title">Lista della spesa</h1>
<p class="page-subtitle" v-if="items.length">
{{ checkedCount }} / {{ items.length }} completat{{ checkedCount === 1 ? 'o' : 'i' }}
</p>
</div>
<div class="add-row"> <div class="add-row">
<input <input
@@ -9,33 +14,66 @@
placeholder="Aggiungi elemento..." placeholder="Aggiungi elemento..."
@keyup.enter="add" @keyup.enter="add"
/> />
<button class="btn-add" @click="add">+</button> <button class="btn-add" @click="add" aria-label="Aggiungi">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</button>
</div> </div>
<ul v-if="items.length" class="shop-list"> <template v-if="items.length">
<CheckboxItem <ul class="shop-list">
v-for="item in items" <CheckboxItem
:key="item.id" v-for="item in pendingItems"
:item="item" :key="item.id"
@toggle="toggle(item.id)" :item="item"
@remove="remove(item.id)" @toggle="toggle(item.id)"
/> @remove="remove(item.id)"
</ul> />
</ul>
<p v-else class="empty-msg">Nessun elemento nella lista.</p> <template v-if="checkedCount > 0">
<div class="section-divider">
<span>Completati ({{ checkedCount }})</span>
</div>
<ul class="shop-list muted">
<CheckboxItem
v-for="item in checkedItems"
:key="item.id"
:item="item"
@toggle="toggle(item.id)"
@remove="remove(item.id)"
/>
</ul>
</template>
<button v-if="items.length" class="btn-clear" @click="clearAll">Svuota lista</button> <button class="btn-clear" @click="clearAll">Svuota lista</button>
</template>
<div v-else class="empty-state">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--color-border)">
<path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/>
<line x1="3" y1="6" x2="21" y2="6"/>
<path d="M16 10a4 4 0 01-8 0"/>
</svg>
<p>Lista vuota</p>
<p class="empty-hint">Aggiungi qualcosa con il campo qui sopra.</p>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, watch } from 'vue' import { ref, computed, watch } from 'vue'
import CheckboxItem from '../components/CheckboxItem.vue' import CheckboxItem from '../components/CheckboxItem.vue'
import { save, load } from '../utils/storage.js' import { save, load } from '../utils/storage.js'
const items = ref(load('shopping', [])) const items = ref(load('shopping', []))
const newItem = ref('') const newItem = ref('')
const pendingItems = computed(() => items.value.filter(i => !i.checked))
const checkedItems = computed(() => items.value.filter(i => i.checked))
const checkedCount = computed(() => checkedItems.value.length)
watch(items, () => save('shopping', items.value), { deep: true }) watch(items, () => save('shopping', items.value), { deep: true })
function add() { function add() {
@@ -69,28 +107,70 @@ function clearAll() {
.btn-add { .btn-add {
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: #fff;
font-size: 1.4rem; min-width: 48px;
min-width: 44px; min-height: 48px;
flex-shrink: 0; flex-shrink: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
} }
.shop-list { .shop-list {
list-style: none; list-style: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 6px;
margin-bottom: 20px; margin-bottom: 8px;
} }
.empty-msg { .section-divider {
display: flex;
align-items: center;
gap: 8px;
margin: 12px 0 8px;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-muted); color: var(--color-muted);
text-align: center; text-transform: uppercase;
margin: 40px 0; letter-spacing: 0.05em;
} }
.section-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--color-border);
}
/* bottone distruttivo in ghost style — meno aggressivo del solid rosso */
.btn-clear { .btn-clear {
width: 100%; width: 100%;
background: var(--color-danger); background: transparent;
color: #fff; color: var(--color-danger);
border: 1.5px solid var(--color-danger);
margin-top: 16px;
font-weight: 600;
}
.btn-clear:active {
background: var(--color-danger-muted);
opacity: 1;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 60px 20px;
color: var(--color-muted);
}
.empty-hint {
font-size: 0.85rem;
color: var(--color-muted);
opacity: 0.7;
} }
</style> </style>

60
src/style.css
View File

@@ -5,16 +5,23 @@
} }
:root { :root {
--color-bg: #f5f5f5; --color-bg: #f0f4f1;
--color-surface: #ffffff; --color-surface: #ffffff;
--color-primary: #2d6a4f; --color-primary: #2d6a4f;
--color-primary-light: #52b788; --color-primary-light: #52b788;
--color-primary-muted: #e8f5ee;
--color-text: #1a1a1a; --color-text: #1a1a1a;
--color-muted: #6b7280; --color-muted: #6b7280;
--color-border: #e5e7eb; --color-border: #e2e8e4;
--color-danger: #dc2626; --color-danger: #dc2626;
--radius: 8px; --color-danger-muted: #fef2f2;
--nav-height: 60px; --radius: 12px;
--radius-sm: 8px;
--radius-full: 999px;
--nav-height: 64px;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
--transition: 150ms ease;
} }
html, body { html, body {
@@ -23,6 +30,7 @@ html, body {
font-size: 16px; font-size: 16px;
background: var(--color-bg); background: var(--color-bg);
color: var(--color-text); color: var(--color-text);
-webkit-font-smoothing: antialiased;
} }
#app { #app {
@@ -37,38 +45,58 @@ html, body {
.page { .page {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 16px; padding: 20px 16px;
padding-bottom: calc(var(--nav-height) + 16px); padding-bottom: calc(var(--nav-height) + 20px);
}
.page-header {
margin-bottom: 20px;
} }
.page-title { .page-title {
font-size: 1.25rem; font-size: 1.4rem;
font-weight: 700; font-weight: 800;
margin-bottom: 16px; letter-spacing: -0.02em;
color: var(--color-text);
}
.page-subtitle {
font-size: 0.85rem;
color: var(--color-muted);
margin-top: 2px;
} }
button { button {
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
border: none; border: none;
border-radius: var(--radius); border-radius: var(--radius-sm);
min-height: 44px; min-height: 44px;
padding: 0 16px; padding: 0 16px;
transition: opacity var(--transition), background var(--transition), color var(--transition);
} }
button:active { opacity: 0.75; }
input[type="text"], input[type="text"],
input[type="number"] { input[type="number"] {
font-size: 1rem; font-size: 1rem;
border: 1px solid var(--color-border); border: 1.5px solid var(--color-border);
border-radius: var(--radius); border-radius: var(--radius-sm);
padding: 10px 12px; padding: 10px 14px;
min-height: 44px; min-height: 48px;
width: 100%; width: 100%;
background: var(--color-surface); background: var(--color-surface);
color: var(--color-text); color: var(--color-text);
transition: border-color var(--transition), box-shadow var(--transition);
} }
input:focus { input:focus {
outline: 2px solid var(--color-primary); outline: none;
outline-offset: 1px; border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.12);
}
input::placeholder {
color: #b0bab4;
} }