yvv/decision
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Design ludique arrondi + mobile responsive + fix IPv6

Browse Source 
- ToolboxVignette: prop bullets[] remplace description, touch targets agrandis
- Design arrondi: border-radius 16px cards, 20px pills, 12px inputs, no borders
- Hover animations: translateY(-3px) + shadow, active states pour touch
- SectionLayout: toolbox accordion mobile, pills scroll horizontal, responsive title/subtitle
- app.vue: MoodSwitcher dans drawer mobile, header responsive, nav touch-friendly
- Dashboard: grille 2-colonnes mobile, connect banner column layout, formula code scroll
- Documents/decisions/mandates/protocols: cards responsive (padding, font-size, gap)
- Login: touch targets 3rem min, iOS zoom prevention, responsive sizing
- Modals: padding responsive sm:p-6
- Protocols: table compact mobile, proto items responsive
- nuxt.config: host 0.0.0.0 pour fix IPv4/IPv6 binding

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-02-28 23:09:29 +01:00
parent 9b6388a600
commit c7cb22f313
15 changed files with 1730 additions and 1021 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
frontend/app/pages/mandates/index.vue
View File

@@ -279,8 +279,7 @@ async function handleCreate() {
v-for="protocol in protocols.protocols"
:key="protocol.id"
:title="protocol.name"
:description="protocol.description || undefined"
context-label="Mandats"
:bullets="['Applicable aux mandats', protocol.mode_params || 'Configuration standard']"
:actions="[
{ label: 'Voir', icon: 'i-lucide-eye', to: `/protocols/${protocol.id}` },
]"
@@ -295,8 +294,8 @@ async function handleCreate() {
<!-- Create mandate modal -->
<UModal v-model:open="showCreateModal">
<template #content>
<form class="p-6 space-y-4" @submit.prevent="handleCreate">
<h3 class="text-lg font-semibold" style="color: var(--mood-text);">
<form class="p-4 sm:p-6 space-y-4" @submit.prevent="handleCreate">
<h3 class="text-base sm:text-lg font-semibold" style="color: var(--mood-text);">
Nouveau mandat
</h3>
@@ -358,17 +357,27 @@ async function handleCreate() {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.875rem 1rem;
padding: 1rem;
background: var(--mood-surface);
border: 1px solid var(--mood-border);
border-radius: 0.5rem;
border-radius: 16px;
cursor: pointer;
transition: all 0.2s ease;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
@media (min-width: 640px) {
.mandate-card {
gap: 0.625rem;
padding: 1.25rem;
}
}
.mandate-card:hover {
border-color: var(--mood-accent);
box-shadow: 0 2px 8px var(--mood-shadow);
transform: translateY(-3px);
box-shadow: 0 8px 24px var(--mood-shadow);
}
.mandate-card:active {
transform: translateY(0);
}
.mandate-card__header {
@@ -384,35 +393,53 @@ async function handleCreate() {
}
.mandate-card__title {
font-size: 0.875rem;
font-weight: 600;
font-size: 0.9375rem;
font-weight: 700;
color: var(--mood-text);
line-height: 1.3;
}
@media (min-width: 640px) {
.mandate-card__title {
font-size: 1.0625rem;
}
}
.mandate-card__description {
margin-top: 0.25rem;
font-size: 0.75rem;
font-size: 0.8125rem;
color: var(--mood-text-muted);
line-height: 1.4;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 640px) {
.mandate-card__description {
font-size: 0.875rem;
}
}
.mandate-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
gap: 0.375rem;
}
@media (min-width: 640px) {
.mandate-card__meta {
gap: 0.5rem;
}
}
.mandate-card__steps {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.6875rem;
font-size: 0.8125rem;
color: var(--mood-text-muted);
}
@@ -420,17 +447,25 @@ async function handleCreate() {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.6875rem;
font-size: 0.8125rem;
color: var(--mood-text-muted);
}
.mandate-card__dates {
display: flex;
gap: 1rem;
font-size: 0.6875rem;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.75rem;
color: var(--mood-text-muted);
}
@media (min-width: 640px) {
.mandate-card__dates {
gap: 1rem;
font-size: 0.8125rem;
}
}
/* Onboarding empty state */
.mandate-onboarding {
display: flex;
@@ -438,10 +473,16 @@ async function handleCreate() {
align-items: center;
text-align: center;
gap: 0.75rem;
padding: 2.5rem 1.5rem;
padding: 2rem 1.25rem;
background: var(--mood-surface);
border: 1px dashed var(--mood-border);
border-radius: 0.75rem;
border-radius: 20px;
}
@media (min-width: 640px) {
.mandate-onboarding {
gap: 1rem;
padding: 3rem 2rem;
}
}
.mandate-onboarding__icon {
@@ -453,31 +494,52 @@ async function handleCreate() {
border-radius: 50%;
background: var(--mood-accent-soft);
color: var(--mood-accent);
font-size: 1.5rem;
}
@media (min-width: 640px) {
.mandate-onboarding__icon {
width: 4rem;
height: 4rem;
font-size: 1.75rem;
}
}
.mandate-onboarding__title {
font-size: 1.125rem;
font-weight: 700;
font-weight: 800;
color: var(--mood-text);
}
@media (min-width: 640px) {
.mandate-onboarding__title {
font-size: 1.375rem;
}
}
.mandate-onboarding__text {
font-size: 0.8125rem;
font-size: 0.875rem;
color: var(--mood-text-muted);
line-height: 1.5;
line-height: 1.6;
max-width: 32rem;
}
@media (min-width: 640px) {
.mandate-onboarding__text {
font-size: 0.9375rem;
}
}
.mandate-onboarding__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
gap: 0.75rem;
margin-top: 0.5rem;
}
.toolbox-section-title {
font-size: 0.75rem;
font-weight: 600;
font-size: 0.8125rem;
font-weight: 700;
color: var(--mood-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
@@ -485,7 +547,7 @@ async function handleCreate() {
}
.toolbox-empty-text {
font-size: 0.75rem;
font-size: 0.8125rem;
color: var(--mood-text-muted);
}
</style>