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

192
frontend/app/pages/login.vue
View File

@@ -29,10 +29,10 @@ async function handleLogin() {
}
const steps = computed(() => [
{ label: 'Adresse SS58', icon: 'i-lucide-user', done: step.value !== 'input' },
{ label: 'Challenge', icon: 'i-lucide-shield', done: step.value === 'signing' || step.value === 'success' },
{ label: 'Signature', icon: 'i-lucide-key', done: step.value === 'success' },
{ label: 'Connecte', icon: 'i-lucide-check', done: false },
{ label: 'Adresse', done: step.value !== 'input' },
{ label: 'Challenge', done: step.value === 'signing' || step.value === 'success' },
{ label: 'Signature', done: step.value === 'success' },
{ label: 'OK', done: false },
])
const activeStepIndex = computed(() => {
@@ -58,10 +58,13 @@ onMounted(() => {
<!-- Logo -->
<div class="login-card__header">
<div class="login-card__logo">
<UIcon name="i-lucide-gavel" class="text-xl" />
<UIcon name="i-lucide-gavel" class="login-card__logo-icon" />
</div>
<h1 class="login-card__title">Connexion</h1>
<p class="login-card__subtitle">ğ(Decision) · Duniter V2 · Ed25519</p>
<p class="login-card__subtitle">
<span class="login-card__g">ğ</span><span class="login-card__paren">(</span>Decision<span class="login-card__paren">)</span>
· Duniter V2 · Ed25519
</p>
</div>
<!-- Steps indicator -->
@@ -76,7 +79,7 @@ onMounted(() => {
}"
>
<div class="login-step__dot">
<UIcon v-if="s.done" name="i-lucide-check" class="text-xs" />
<UIcon v-if="s.done" name="i-lucide-check" />
<span v-else class="login-step__num">{{ i + 1 }}</span>
</div>
<span class="login-step__label">{{ s.label }}</span>
@@ -98,13 +101,13 @@ onMounted(() => {
<!-- Error -->
<div v-if="errorMessage || auth.error" class="login-card__error">
<UIcon name="i-lucide-alert-circle" class="text-sm flex-shrink-0" />
<UIcon name="i-lucide-alert-circle" />
<span>{{ errorMessage || auth.error }}</span>
</div>
<!-- Success -->
<div v-if="step === 'success'" class="login-card__success">
<UIcon name="i-lucide-check-circle" class="text-sm flex-shrink-0" />
<UIcon name="i-lucide-check-circle" />
<span>Connecte. Redirection...</span>
</div>
@@ -114,8 +117,8 @@ onMounted(() => {
:disabled="!address.trim() || step === 'success' || auth.loading"
@click="handleLogin"
>
<UIcon v-if="auth.loading" name="i-lucide-loader-2" class="animate-spin text-sm" />
<UIcon v-else name="i-lucide-log-in" class="text-sm" />
<UIcon v-if="auth.loading" name="i-lucide-loader-2" class="animate-spin" />
<UIcon v-else name="i-lucide-log-in" />
<span>{{ auth.loading ? 'Verification...' : 'Se connecter' }}</span>
</button>
@@ -132,18 +135,31 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
min-height: 70vh;
padding: 2rem 1rem;
min-height: 60vh;
padding: 1.5rem 1rem;
}
@media (min-width: 640px) {
.login-page {
min-height: 70vh;
padding: 2rem 1rem;
}
}
.login-card {
width: 100%;
max-width: 24rem;
max-width: 26rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
@media (min-width: 640px) {
.login-card {
gap: 1.5rem;
}
}
.login-card__header {
text-align: center;
}
@@ -152,28 +168,49 @@ onMounted(() => {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
font-size: 1.5rem;
font-weight: 800;
width: 3.5rem;
height: 3.5rem;
font-size: 1.75rem;
color: var(--mood-accent-text);
background: var(--mood-accent);
border-radius: 8px;
margin-bottom: 0.75rem;
border-radius: 16px;
margin-bottom: 1rem;
}
.login-card__logo-icon {
transform: scaleX(-1);
}
.login-card__title {
font-size: 1.375rem;
font-weight: 700;
font-size: 1.5rem;
font-weight: 800;
color: var(--mood-text);
margin: 0;
}
@media (min-width: 640px) {
.login-card__title {
font-size: 1.75rem;
}
}
.login-card__subtitle {
font-size: 0.75rem;
font-size: 0.8125rem;
color: var(--mood-text-muted);
margin-top: 0.25rem;
letter-spacing: 0.02em;
margin-top: 0.375rem;
}
@media (min-width: 640px) {
.login-card__subtitle {
font-size: 0.9375rem;
}
}
.login-card__g {
font-style: italic;
font-weight: 700;
}
.login-card__paren {
font-weight: 300;
opacity: 0.5;
}
/* Steps */
@@ -189,85 +226,85 @@ onMounted(() => {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
gap: 0.375rem;
flex: 1;
}
.login-step__dot {
width: 1.5rem;
height: 1.5rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.625rem;
font-weight: 700;
border: 1.5px solid var(--mood-border);
font-size: 0.8125rem;
font-weight: 800;
color: var(--mood-text-muted);
background: var(--mood-surface);
background: var(--mood-accent-soft);
transition: all 0.2s ease;
}
.login-step--active .login-step__dot {
border-color: var(--mood-accent);
color: var(--mood-accent);
box-shadow: 0 0 0 3px var(--mood-accent-soft);
}
.login-step--done .login-step__dot {
border-color: var(--mood-success);
background: var(--mood-success);
color: white;
}
.login-step__num {
font-size: 0.5625rem;
font-size: 0.75rem;
}
.login-step__label {
font-size: 0.5625rem;
font-weight: 500;
font-size: 0.75rem;
font-weight: 600;
color: var(--mood-text-muted);
text-align: center;
letter-spacing: 0.02em;
}
.login-step--active .login-step__label {
color: var(--mood-accent);
font-weight: 600;
font-weight: 700;
}
/* Field */
.login-card__field {
display: flex;
flex-direction: column;
gap: 0.375rem;
gap: 0.5rem;
}
.login-card__label {
font-size: 0.6875rem;
font-weight: 600;
font-size: 0.875rem;
font-weight: 700;
color: var(--mood-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.login-card__input {
width: 100%;
padding: 0.625rem 0.75rem;
font-size: 0.8125rem;
padding: 0.875rem 1rem;
font-size: 0.875rem;
font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', monospace;
color: var(--mood-text);
background: var(--mood-input-bg, var(--mood-surface));
border: 1px solid var(--mood-input-border, var(--mood-border));
border-radius: 4px;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
background: var(--mood-accent-soft);
border-radius: 12px;
transition: box-shadow 0.15s ease;
/* Prevent iOS zoom on focus */
-webkit-text-size-adjust: 100%;
}
@media (min-width: 640px) {
.login-card__input {
padding: 0.75rem 1rem;
font-size: 0.9375rem;
}
}
.login-card__input:focus {
border-color: var(--mood-input-focus, var(--mood-accent));
box-shadow: 0 0 0 2px var(--mood-accent-soft);
box-shadow: 0 0 0 3px var(--mood-accent-soft);
}
.login-card__input:disabled {
@@ -277,7 +314,7 @@ onMounted(() => {
.login-card__input::placeholder {
color: var(--mood-text-muted);
opacity: 0.5;
opacity: 0.4;
}
/* Messages */
@@ -285,24 +322,24 @@ onMounted(() => {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
padding: 0.625rem 1rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--mood-error);
background: rgba(196, 43, 43, 0.08);
border-radius: 4px;
border-radius: 12px;
}
.login-card__success {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
padding: 0.625rem 1rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--mood-success);
background: rgba(24, 132, 59, 0.08);
border-radius: 4px;
border-radius: 12px;
}
/* Button */
@@ -310,22 +347,33 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
gap: 0.625rem;
width: 100%;
padding: 0.625rem 1rem;
font-size: 0.8125rem;
font-weight: 600;
padding: 1rem 1.25rem;
font-size: 1rem;
font-weight: 700;
color: var(--mood-accent-text);
background: var(--mood-accent);
border: none;
border-radius: 4px;
border-radius: 16px;
cursor: pointer;
transition: opacity 0.15s ease;
letter-spacing: 0.01em;
transition: transform 0.12s ease, box-shadow 0.12s ease;
min-height: 3rem;
}
@media (min-width: 640px) {
.login-card__btn {
padding: 0.875rem 1.25rem;
font-size: 1.0625rem;
}
}
.login-card__btn:hover:not(:disabled) {
opacity: 0.88;
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--mood-shadow);
}
.login-card__btn:active:not(:disabled) {
transform: translateY(0);
}
.login-card__btn:disabled {
@@ -336,7 +384,7 @@ onMounted(() => {
/* Note */
.login-card__note {
text-align: center;
font-size: 0.6875rem;
font-size: 0.8125rem;
color: var(--mood-text-muted);
opacity: 0.7;
}