Migrate grateWizard from React/Next.js to native Nuxt integration
- Port all React components to Vue 3 (GwTabs, GwMN, GwCRA, GwCRS, GwMap, GwRelations, GwPerimeterList) - Port hooks to Vue composables (useCesiumProfiles, useSavedPerimeters) - Copy pure TS services and utils (duniter/, ss58, gratewizard utils) - Add Leaflet + Geoman + MarkerCluster dependencies - Serve grateWizard as popup via /gratewizard?popup (layout: false) and info page on /gratewizard (with Librodrome layout) - Remove public/gratewizard-app/ static Next.js export - Refine UI: compact tabs, buttons, inputs, cards, perimeter list - Use Ğ1 breve everywhere, French locale for all dates and amounts - Rename roles: vendeur→offre / acheteur→reçoit le produit ou service - Rename prix→évaluation in all visible text - Add calculated result column in CRA and CRS relation tables - DU/Ğ1 selector uses toggle switch (same as role toggle) - Auto-scroll to monetary data card on polygon selection Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
@@ -1,73 +1,105 @@
|
||||
<template>
|
||||
<div class="section-padding">
|
||||
<div class="container-content max-w-3xl mx-auto">
|
||||
<!-- Back link -->
|
||||
<UiScrollReveal>
|
||||
<NuxtLink to="/" class="inline-flex items-center gap-2 text-sm text-white/50 hover:text-white/80 mb-8 transition-colors">
|
||||
<div class="i-lucide-arrow-left h-4 w-4" />
|
||||
Retour à l'accueil
|
||||
</NuxtLink>
|
||||
</UiScrollReveal>
|
||||
<!-- Popup mode: standalone app, no Librodrome layout -->
|
||||
<main v-if="isPopup" class="gw-app flex flex-col items-center sm:p-4 overflow-x-hidden h-screen">
|
||||
<div class="sm:max-w-screen-sm w-full">
|
||||
<div class="gw-card">
|
||||
<GratewizardGwTabs />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Header -->
|
||||
<UiScrollReveal>
|
||||
<div class="text-center mb-12">
|
||||
<span class="inline-block mb-3 rounded-full bg-amber-400/15 px-3 py-0.5 font-mono text-xs tracking-widest text-amber-400 uppercase">
|
||||
{{ content?.kicker }}
|
||||
</span>
|
||||
<h1 class="page-title font-display font-bold text-white">
|
||||
{{ content?.title }}
|
||||
</h1>
|
||||
<p class="mt-4 text-lg text-white/60 leading-relaxed max-w-xl mx-auto">
|
||||
{{ content?.description }}
|
||||
</p>
|
||||
</div>
|
||||
</UiScrollReveal>
|
||||
<!-- Info mode: Librodrome layout with feature cards -->
|
||||
<NuxtLayout v-else>
|
||||
<div class="section-padding">
|
||||
<div class="container-content max-w-3xl mx-auto">
|
||||
<!-- Back link -->
|
||||
<UiScrollReveal>
|
||||
<NuxtLink to="/" class="inline-flex items-center gap-2 text-sm text-white/50 hover:text-white/80 mb-8 transition-colors">
|
||||
<div class="i-lucide-arrow-left h-4 w-4" />
|
||||
Retour à l'accueil
|
||||
</NuxtLink>
|
||||
</UiScrollReveal>
|
||||
|
||||
<!-- Explanation cards -->
|
||||
<div class="grid gap-6 md:grid-cols-2 mb-12">
|
||||
<UiScrollReveal
|
||||
v-for="(feature, i) in content?.features"
|
||||
:key="i"
|
||||
:delay="(i + 1) * 100"
|
||||
>
|
||||
<div class="gw-feature-card">
|
||||
<div :class="`i-lucide-${feature.icon}`" class="h-6 w-6 text-amber-400 mb-3" />
|
||||
<h3 class="font-display text-lg font-semibold text-white mb-2">{{ feature.title }}</h3>
|
||||
<p class="text-sm text-white/60 leading-relaxed">
|
||||
{{ feature.description }}
|
||||
<!-- Header -->
|
||||
<UiScrollReveal>
|
||||
<div class="text-center mb-12">
|
||||
<span class="inline-block mb-3 rounded-full bg-amber-400/15 px-3 py-0.5 font-mono text-xs tracking-widest text-amber-400 uppercase">
|
||||
{{ content?.kicker }}
|
||||
</span>
|
||||
<h1 class="page-title font-display font-bold text-white">
|
||||
{{ content?.title }}
|
||||
</h1>
|
||||
<p class="mt-4 text-lg text-white/60 leading-relaxed max-w-xl mx-auto">
|
||||
{{ content?.description }}
|
||||
</p>
|
||||
</div>
|
||||
</UiScrollReveal>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<UiScrollReveal :delay="500">
|
||||
<div class="text-center">
|
||||
<p class="text-sm text-white/40 mb-4">
|
||||
{{ content?.cta.note }}
|
||||
</p>
|
||||
<UiBaseButton @click="launch">
|
||||
<div class="i-lucide-external-link mr-2 h-5 w-5" />
|
||||
{{ content?.cta.label }}
|
||||
</UiBaseButton>
|
||||
<!-- Explanation cards -->
|
||||
<div class="grid gap-6 md:grid-cols-2 mb-12">
|
||||
<UiScrollReveal
|
||||
v-for="(feature, i) in content?.features"
|
||||
:key="i"
|
||||
:delay="(i + 1) * 100"
|
||||
>
|
||||
<div class="gw-feature-card">
|
||||
<div :class="`i-lucide-${feature.icon}`" class="h-6 w-6 text-amber-400 mb-3" />
|
||||
<h3 class="font-display text-lg font-semibold text-white mb-2">{{ feature.title }}</h3>
|
||||
<p class="text-sm text-white/60 leading-relaxed">
|
||||
{{ feature.description }}
|
||||
</p>
|
||||
</div>
|
||||
</UiScrollReveal>
|
||||
</div>
|
||||
</UiScrollReveal>
|
||||
|
||||
<!-- CTA -->
|
||||
<UiScrollReveal :delay="500">
|
||||
<div class="text-center">
|
||||
<p class="text-sm text-white/40 mb-4">
|
||||
{{ content?.cta.note }}
|
||||
</p>
|
||||
<UiBaseButton :href="url" target="_blank" @click="launch">
|
||||
<div class="i-lucide-external-link mr-2 h-5 w-5" />
|
||||
{{ content?.cta.label }}
|
||||
</UiBaseButton>
|
||||
</div>
|
||||
</UiScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({ layout: false })
|
||||
|
||||
const route = useRoute()
|
||||
const isPopup = computed(() => route.query.popup !== undefined)
|
||||
|
||||
const { data: content } = await usePageContent('gratewizard')
|
||||
|
||||
useHead({
|
||||
title: content.value?.meta?.title ?? 'GrateWizard — Coefficients relatifs',
|
||||
})
|
||||
useHead(isPopup.value
|
||||
? {
|
||||
title: 'grateWizard',
|
||||
htmlAttrs: { lang: 'fr' },
|
||||
meta: [{ name: 'color-scheme', content: 'dark' }],
|
||||
link: [
|
||||
{ rel: 'preconnect', href: 'https://fonts.bunny.net' },
|
||||
{
|
||||
rel: 'stylesheet',
|
||||
href: 'https://fonts.bunny.net/css?family=space-grotesk:300,400,500,600,700',
|
||||
},
|
||||
],
|
||||
}
|
||||
: {
|
||||
title: content.value?.meta?.title ?? 'grateWizard \u2014 Coefficients relatifs',
|
||||
},
|
||||
)
|
||||
|
||||
const { launch } = useGrateWizard()
|
||||
const { url, launch } = useGrateWizard()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Info page styles */
|
||||
.page-title {
|
||||
font-size: clamp(2rem, 5vw, 2.75rem);
|
||||
}
|
||||
@@ -93,3 +125,301 @@ code {
|
||||
background: hsl(40 80% 50% / 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* Standalone popup app styles — unscoped so child components inherit */
|
||||
.gw-app {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
background-color: hsl(20 8% 3.5%);
|
||||
color: white;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.gw-app button,
|
||||
.gw-app select {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.gw-card {
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid hsl(20 8% 18% / 0.5);
|
||||
background: hsl(20 8% 8%);
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
/* --- Typography --- */
|
||||
.gw-metric {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.gw-title {
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.gw-text {
|
||||
font-size: 0.8125rem;
|
||||
color: hsl(0 0% 75%);
|
||||
}
|
||||
|
||||
.gw-chip {
|
||||
display: inline-block;
|
||||
padding: 0.0625rem 0.375rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
background: hsl(36 80% 52% / 0.15);
|
||||
color: hsl(36 80% 52%);
|
||||
}
|
||||
|
||||
/* --- Tab buttons --- */
|
||||
.gw-tab-btn {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gw-tab-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.gw-tab-active {
|
||||
background: hsl(36 80% 52%);
|
||||
color: hsl(20 8% 3.5%);
|
||||
box-shadow: 0 1px 3px hsl(36 80% 52% / 0.3);
|
||||
}
|
||||
|
||||
.gw-tab-inactive {
|
||||
color: hsl(0 0% 100% / 0.5);
|
||||
}
|
||||
|
||||
.gw-tab-inactive:not(:disabled):hover {
|
||||
color: hsl(0 0% 100% / 0.8);
|
||||
background: hsl(0 0% 100% / 0.05);
|
||||
}
|
||||
|
||||
/* --- Buttons --- */
|
||||
.gw-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.3125rem 0.875rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.gw-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.gw-btn-accent {
|
||||
background: hsl(36 80% 52%);
|
||||
color: hsl(20 8% 3.5%);
|
||||
box-shadow: 0 1px 2px hsl(36 80% 52% / 0.25);
|
||||
}
|
||||
|
||||
.gw-btn-accent:not(:disabled):hover {
|
||||
background: hsl(36 80% 58%);
|
||||
box-shadow: 0 2px 6px hsl(36 80% 52% / 0.3);
|
||||
}
|
||||
|
||||
.gw-btn-accent:not(:disabled):active {
|
||||
background: hsl(36 80% 46%);
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.gw-btn-danger {
|
||||
background: hsl(0 72% 50%);
|
||||
color: white;
|
||||
box-shadow: 0 1px 2px hsl(0 72% 50% / 0.25);
|
||||
}
|
||||
|
||||
.gw-btn-danger:not(:disabled):hover {
|
||||
background: hsl(0 72% 56%);
|
||||
box-shadow: 0 2px 6px hsl(0 72% 50% / 0.3);
|
||||
}
|
||||
|
||||
.gw-btn-danger:not(:disabled):active {
|
||||
background: hsl(0 72% 44%);
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* --- Inputs --- */
|
||||
.gw-input {
|
||||
padding: 0.3125rem 0.625rem;
|
||||
font-size: 0.8125rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid hsl(20 8% 22%);
|
||||
background: hsl(20 8% 6%);
|
||||
color: white;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.gw-input:focus {
|
||||
border-color: hsl(36 80% 52%);
|
||||
box-shadow: 0 0 0 2px hsl(36 80% 52% / 0.12);
|
||||
}
|
||||
|
||||
/* --- Icon button --- */
|
||||
.gw-icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 9999px;
|
||||
background: hsl(36 80% 52%);
|
||||
color: hsl(20 8% 3.5%);
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gw-icon-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.gw-icon-btn:not(:disabled):hover {
|
||||
background: hsl(36 80% 58%);
|
||||
box-shadow: 0 2px 6px hsl(36 80% 52% / 0.3);
|
||||
}
|
||||
|
||||
.gw-icon-btn:not(:disabled):active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
/* --- Toggle --- */
|
||||
.gw-toggle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.gw-toggle input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.gw-toggle-slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 9999px;
|
||||
background: hsl(20 8% 22%);
|
||||
transition: background 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gw-toggle-slider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 0.875rem;
|
||||
width: 0.875rem;
|
||||
left: 0.1875rem;
|
||||
bottom: 0.1875rem;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.gw-toggle input:checked + .gw-toggle-slider {
|
||||
background: hsl(36 80% 52%);
|
||||
}
|
||||
|
||||
.gw-toggle input:checked + .gw-toggle-slider::before {
|
||||
transform: translateX(1rem);
|
||||
}
|
||||
|
||||
/* --- Spinner --- */
|
||||
.gw-spinner {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border: 2px solid hsl(20 8% 22%);
|
||||
border-top-color: hsl(36 80% 52%);
|
||||
border-radius: 50%;
|
||||
animation: gw-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes gw-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* --- Card surface --- */
|
||||
.card-surface {
|
||||
border-radius: 0.625rem;
|
||||
background: hsl(20 8% 7%);
|
||||
border: 1px solid hsl(0 0% 100% / 0.06);
|
||||
padding: 1rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
/* --- Perimeter list items --- */
|
||||
.gw-perimeter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
background: hsl(20 8% 12%);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.gw-perimeter-item:hover {
|
||||
background: hsl(20 8% 16%);
|
||||
}
|
||||
|
||||
.gw-perimeter-delete {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1;
|
||||
color: hsl(0 60% 60%);
|
||||
background: hsl(0 60% 50% / 0.1);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.gw-perimeter-delete:hover {
|
||||
background: hsl(0 60% 50% / 0.2);
|
||||
color: hsl(0 60% 70%);
|
||||
}
|
||||
|
||||
/* --- Scrollbar --- */
|
||||
.gw-app ::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
.gw-app ::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.gw-app ::-webkit-scrollbar-thumb {
|
||||
background: hsl(0 0% 100% / 0.12);
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user