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"
:class="['nav-btn', { active: 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>
</button>
</nav>
@@ -17,9 +18,35 @@ defineProps({ modelValue: String })
defineEmits(['update:modelValue'])
const tabs = [
{ id: 'meal', icon: '📅', label: 'Pasti' },
{ id: 'convert', icon: '⚖️', label: 'Converti' },
{ id: 'shop', icon: '🛒', label: 'Spesa' },
{
id: 'meal',
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>
@@ -36,6 +63,7 @@ const tabs = [
border-top: 1px solid var(--color-border);
display: flex;
z-index: 100;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}
.nav-btn {
@@ -44,24 +72,39 @@ const tabs = [
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
gap: 3px;
background: none;
border-radius: 0;
color: var(--color-muted);
min-height: unset;
padding: 0;
font-size: 0.7rem;
position: relative;
transition: color var(--transition);
}
.nav-btn.active {
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 {
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
}
.nav-label {
font-size: 0.7rem;
font-size: 0.68rem;
font-weight: 500;
}
</style>

37
src/components/CheckboxItem.vue
View File

@@ -4,7 +4,11 @@
<input type="checkbox" :checked="item.checked" @change="$emit('toggle')" />
<span class="item-name">{{ item.name }}</span>
</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>
</template>
@@ -19,9 +23,17 @@ defineEmits(['toggle', 'remove'])
align-items: center;
justify-content: space-between;
background: var(--color-surface);
border-radius: var(--radius);
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 4px 4px 4px 14px;
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 {
@@ -30,6 +42,7 @@ defineEmits(['toggle', 'remove'])
gap: 12px;
cursor: pointer;
flex: 1;
padding: 8px 0;
}
input[type="checkbox"] {
@@ -37,10 +50,12 @@ input[type="checkbox"] {
height: 20px;
cursor: pointer;
accent-color: var(--color-primary);
flex-shrink: 0;
}
.item-name {
font-size: 1rem;
transition: color var(--transition);
}
.checked .item-name {
@@ -48,11 +63,19 @@ input[type="checkbox"] {
color: var(--color-muted);
}
/* touch target pieno 44×44px */
.btn-remove {
background: none;
color: var(--color-muted);
min-height: unset;
padding: 0 4px;
font-size: 0.8rem;
min-height: 44px;
min-width: 44px;
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>

165
src/components/MealCard.vue
View File

@@ -1,47 +1,71 @@
<template>
<div class="meal-card">
<h2 class="day-name">{{ dayName }}</h2>
<div class="meal-card" :class="{ open: isOpen }">
<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">
<h3 class="slot-label">{{ slot.label }}</h3>
<div class="card-body" v-show="isOpen">
<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">
<li v-for="(item, idx) in meals[slot.id]" :key="idx" class="item-row">
<span class="item-text">{{ item }}</span>
<button class="btn-remove" @click="$emit('remove', slot.id, idx)">✕</button>
</li>
</ul>
<ul v-if="meals[slot.id].length" class="item-list">
<li v-for="(item, idx) in meals[slot.id]" :key="idx" class="item-row">
<span class="item-text">{{ item }}</span>
<button class="btn-remove" @click="$emit('remove', slot.id, idx)" :aria-label="`Rimuovi ${item}`">✕</button>
</li>
</ul>
<div class="input-row">
<input
v-model="inputs[slot.id]"
type="text"
:placeholder="`Aggiungi a ${slot.label.toLowerCase()}...`"
@keyup.enter="submit(slot.id)"
/>
<button class="btn-add" @click="submit(slot.id)">+</button>
<div class="input-row">
<input
v-model="inputs[slot.id]"
type="text"
:placeholder="`Aggiungi a ${slot.label.toLowerCase()}...`"
@keyup.enter="submit(slot.id)"
/>
<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>
</template>
<script setup>
import { reactive } from 'vue'
import { ref, reactive, computed } from 'vue'
const props = defineProps({
dayName: String,
meals: Object,
defaultOpen: { type: Boolean, default: false },
})
const emit = defineEmits(['add', 'remove'])
const isOpen = ref(props.defaultOpen)
const slots = [
{ id: 'colazione', label: 'Colazione' },
{ id: 'pranzo', label: 'Pranzo' },
{ id: 'cena', label: 'Cena' },
{ id: 'colazione', label: 'Colazione', icon: '☀️' },
{ id: 'pranzo', label: 'Pranzo', icon: '🌤️' },
{ id: 'cena', label: 'Cena', icon: '🌙' },
]
const inputs = reactive({ colazione: '', pranzo: '', cena: '' })
const totalItems = computed(() =>
slots.reduce((sum, s) => sum + props.meals[s.id].length, 0)
)
function submit(slotId) {
const t = inputs[slotId].trim()
if (!t) return
@@ -54,37 +78,77 @@ function submit(slotId) {
.meal-card {
background: var(--color-surface);
border-radius: var(--radius);
padding: 16px;
margin-bottom: 12px;
margin-bottom: 10px;
box-shadow: var(--shadow-sm);
overflow: hidden;
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 {
font-size: 1rem;
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);
text-transform: capitalize;
padding: 2px 8px;
border-radius: var(--radius-full);
font-weight: 600;
}
.meal-slot {
margin-bottom: 12px;
.chevron {
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 {
font-size: 0.8rem;
font-weight: 600;
font-size: 0.75rem;
font-weight: 700;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
letter-spacing: 0.06em;
}
.item-list {
list-style: none;
margin-bottom: 6px;
display: flex;
flex-direction: column;
gap: 4px;
@@ -95,32 +159,39 @@ function submit(slotId) {
align-items: center;
justify-content: space-between;
background: var(--color-bg);
border-radius: 6px;
padding: 6px 10px;
border-radius: var(--radius-sm);
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 {
background: none;
color: var(--color-muted);
min-height: unset;
padding: 0 4px;
min-height: 44px;
min-width: 44px;
padding: 0;
font-size: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
}
.input-row {
display: flex;
gap: 6px;
}
.btn-remove:active { color: var(--color-danger); }
.input-row { display: flex; gap: 8px; }
.btn-add {
background: var(--color-primary-light);
background: var(--color-primary);
color: #fff;
font-size: 1.2rem;
min-width: 40px;
min-width: 48px;
min-height: 48px;
flex-shrink: 0;
min-height: 40px;
padding: 0;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
</style>