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

Design moderne + seed reel engagements forgeron avec votes

Browse Source 
- CSS: couleurs saturees sans pastels, border-radius 4-6px, inputs mood-aware
- Header: allege (3.25rem), logo typographique, bouton connexion fin
- Login: redesign complet avec steps dots et input natif style
- Dashboard: entry cards epurees, tags toolbox compacts
- Seed: 34 vraies clauses forgeron v2.0.0 (forum topic 33165)
- Seed: 9 clauses certification (licence G1)
- Seed: 11 votants simules + 3 sessions de vote (10 pour / 1 contre)
- MoodSwitcher: dots colores au lieu d'icones

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-02-28 18:28:14 +01:00
parent 77dceb49c3
commit 61a414d214
10 changed files with 1774 additions and 1015 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
frontend/app/components/common/SectionLayout.vue
View File

@@ -1,10 +1,9 @@
<script setup lang="ts">
/**
* SectionLayout — Mise en page reutilisable pour les sections (documents, decisions, mandats).
* SectionLayout — Mise en page pour sections (documents, decisions, mandats).
*
* Structure : titre + status filter pills en haut,
* puis une grille principale (contenu) + barre laterale "Boite a outils".
* Responsive : sur mobile la boite a outils passe sous le contenu principal.
* Structure : titre + status pills + grille (contenu + toolbox).
* Responsive : toolbox passe sous le contenu sur mobile.
*/
export interface StatusFilter {
@@ -43,7 +42,6 @@ const emit = defineEmits<{
'update:activeStatus': [status: string | null]
}>()
/** Map status id to CSS class for status pills. */
const statusCssMap: Record<string, string> = {
draft: 'status-prepa',
qualification: 'status-prepa',
@@ -74,19 +72,15 @@ function toggleStatus(statusId: string) {
</script>
<template>
<div class="section-layout">
<!-- Header: title + status pills -->
<div class="section-layout__header">
<div class="section-layout__title-block">
<h1 class="section-layout__title">
{{ title }}
</h1>
<p v-if="subtitle" class="section-layout__subtitle">
{{ subtitle }}
</p>
<div class="section">
<!-- Header -->
<div class="section__header">
<div class="section__title-block">
<h1 class="section__title">{{ title }}</h1>
<p v-if="subtitle" class="section__subtitle">{{ subtitle }}</p>
</div>
<div v-if="statuses.length > 0" class="section-layout__status-pills">
<div v-if="statuses.length > 0" class="section__pills">
<button
v-for="status in statuses"
:key="status.id"
@@ -96,45 +90,34 @@ function toggleStatus(statusId: string) {
@click="toggleStatus(status.id)"
>
{{ status.label }}
<span v-if="status.count > 0" class="status-pill__count">
{{ status.count }}
</span>
<span v-if="status.count > 0" class="section__pill-count">{{ status.count }}</span>
</button>
</div>
</div>
<!-- Main content area: list + toolbox sidebar -->
<div class="section-layout__body">
<!-- Left: search + list -->
<div class="section-layout__main">
<!-- Search / sort bar slot -->
<div v-if="$slots.search" class="section-layout__search">
<!-- Body: content + toolbox -->
<div class="section__body">
<div class="section__main">
<div v-if="$slots.search" class="section__search">
<slot name="search" />
</div>
<!-- Main list content -->
<div class="section-layout__content">
<div class="section__content">
<slot />
</div>
<!-- Empty state slot -->
<div v-if="$slots.empty" class="section-layout__empty">
<div v-if="$slots.empty" class="section__empty">
<slot name="empty" />
</div>
</div>
<!-- Right: toolbox sidebar -->
<aside class="section-layout__toolbox">
<div class="section-layout__toolbox-header">
<UIcon name="i-lucide-wrench" class="text-sm" />
<aside class="section__toolbox">
<div class="section__toolbox-head">
<UIcon name="i-lucide-wrench" class="text-xs" />
<span>Boite a outils</span>
</div>
<!-- Custom toolbox slot or default vignettes -->
<div v-if="$slots.toolbox" class="section-layout__toolbox-content">
<div v-if="$slots.toolbox" class="section__toolbox-body">
<slot name="toolbox" />
</div>
<div v-else-if="toolboxItems && toolboxItems.length > 0" class="section-layout__toolbox-content">
<div v-else-if="toolboxItems && toolboxItems.length > 0" class="section__toolbox-body">
<ToolboxVignette
v-for="(item, idx) in toolboxItems"
:key="idx"
@@ -142,8 +125,8 @@ function toggleStatus(statusId: string) {
:description="item.description"
/>
</div>
<div v-else class="section-layout__toolbox-empty">
<p>Aucun outil disponible</p>
<div v-else class="section__toolbox-empty">
Aucun outil disponible
</div>
</aside>
</div>
@@ -151,126 +134,118 @@ function toggleStatus(statusId: string) {
</template>
<style scoped>
.section-layout {
.section {
display: flex;
flex-direction: column;
gap: 1.5rem;
gap: 1.25rem;
}
.section-layout__header {
.section__header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
gap: 0.75rem;
}
.section-layout__title-block {
.section__title-block {
flex: 1;
min-width: 0;
}
.section-layout__title {
font-size: 1.5rem;
.section__title {
font-size: 1.375rem;
font-weight: 700;
color: var(--mood-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
.section-layout__subtitle {
margin-top: 0.25rem;
font-size: 0.875rem;
.section__subtitle {
margin-top: 0.125rem;
font-size: 0.8125rem;
color: var(--mood-text-muted);
}
.section-layout__status-pills {
.section__pills {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
align-items: center;
}
.section__pill-count {
margin-left: 0.25rem;
font-size: 0.5625rem;
font-weight: 700;
opacity: 0.7;
}
.section__body {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.25rem;
align-items: start;
}
.section__main {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
}
.section__search {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
/* Active state ring for pills */
.status-pill.active {
outline: 2px solid var(--mood-accent);
outline-offset: 2px;
.section__content {
min-height: 12rem;
}
.status-pill__count {
margin-left: 0.375rem;
font-size: 0.625rem;
font-weight: 700;
opacity: 0.8;
}
.section-layout__body {
display: grid;
grid-template-columns: 1fr 280px;
gap: 1.5rem;
align-items: start;
}
.section-layout__main {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.section-layout__search {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
}
.section-layout__content {
min-height: 200px;
}
.section-layout__toolbox {
.section__toolbox {
position: sticky;
top: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
background: var(--mood-surface);
border: 1px solid var(--mood-border);
border-radius: 0.75rem;
padding: 1rem;
}
.section-layout__toolbox-header {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
font-weight: 700;
color: var(--mood-accent);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.section-layout__toolbox-content {
top: 4rem;
display: flex;
flex-direction: column;
gap: 0.625rem;
background: var(--mood-surface);
border: 1px solid var(--mood-border);
border-radius: 6px;
padding: 0.875rem;
}
.section-layout__toolbox-empty {
font-size: 0.75rem;
.section__toolbox-head {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.6875rem;
font-weight: 700;
color: var(--mood-accent);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.section__toolbox-body {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.section__toolbox-empty {
font-size: 0.6875rem;
color: var(--mood-text-muted);
text-align: center;
padding: 1rem 0;
padding: 0.75rem 0;
}
/* Responsive: on mobile, toolbox goes below */
@media (max-width: 1023px) {
.section-layout__body {
.section__body {
grid-template-columns: 1fr;
}
.section-layout__toolbox {
.section__toolbox {
position: static;
order: 2;
}