Skip to content

feat(ui): exploiter la largeur d'écran sur les pages app #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tbeaumont79 merged 1 commit into from
Jun 10, 2026
Merged

feat(ui): exploiter la largeur d'écran sur les pages app #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/app/layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const year = new Date().getFullYear()
<template>
<div class="flex min-h-full flex-col bg-surface-muted">
<header class="sticky top-0 z-40 border-b border-border bg-surface/80 backdrop-blur">
<div class="mx-auto flex h-16 w-full max-w-4xl items-center justify-between gap-4 px-6">
<div class="mx-auto flex h-16 w-full max-w-6xl items-center justify-between gap-4 px-6">
<div class="flex min-w-0 items-center gap-6">
<NuxtLink
to="/"
Expand Down Expand Up @@ -188,12 +188,12 @@ const year = new Date().getFullYear()
</div>
</header>

<main class="mx-auto w-full max-w-4xl flex-1 px-6 py-10">
<main class="mx-auto w-full max-w-6xl flex-1 px-6 py-10">
<slot />
</main>

<footer class="border-t border-border bg-surface-muted">
<div class="mx-auto w-full max-w-4xl px-6 py-10">
<div class="mx-auto w-full max-w-6xl px-6 py-10">
<div class="flex flex-col gap-10 sm:flex-row sm:items-start sm:justify-between">
<div class="max-w-xs space-y-3">
<NuxtLink
Expand Down
47 changes: 27 additions & 20 deletions apps/app/pages/cv/demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,33 +128,40 @@ async function handleExport() {

<template>
<div class="bg-surface-muted print:bg-white">
<!-- Barre d'actions — chrome d'aperçu, masquée à l'impression. -->
<!--
Aperçu type "feuille + inspecteur" : la feuille A4 occupe l'espace à gauche,
le panneau d'actions est au-dessus sur mobile, à droite (sticky) sur desktop.
-->
<div
class="mx-auto mb-8 flex w-full max-w-[210mm] flex-col gap-4 sm:flex-row sm:items-center sm:justify-between print:hidden"
class="flex flex-col gap-8 lg:flex-row-reverse lg:items-start lg:justify-center print:block"
>
<div class="min-w-0">
<!-- Panneau d'actions — chrome d'aperçu, masqué à l'impression. -->
<aside class="w-full shrink-0 lg:sticky lg:top-24 lg:w-72 print:hidden">
<div class="flex flex-wrap items-center gap-2.5">
<h1 class="text-2xl font-bold tracking-tight text-ink-900">Aperçu de ton CV</h1>
<UiBadge variant="brand">Données de démo</UiBadge>
</div>
<p class="mt-1 text-sm text-ink-500">Vérifie le rendu, puis télécharge-le en un clic.</p>
</div>
<UiButton :loading="exporting" class="shrink-0" @click="handleExport">
<Download v-if="!exporting" class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
Télécharger en PDF
</UiButton>
</div>
<p class="mt-2 text-sm leading-relaxed text-ink-500">
Voici à quoi ressemblera un CV généré par Teven. Vérifie le rendu, puis télécharge-le.
</p>
<UiButton :loading="exporting" class="mt-5 w-full" @click="handleExport">
<Download v-if="!exporting" class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
Télécharger en PDF
</UiButton>
<p class="mt-4 text-xs leading-relaxed text-ink-400">
Le PDF téléchargé est strictement identique à cet aperçu.
</p>
</aside>

<!--
Feuille d'aperçu : seul le conteneur est stylé.
CvTemplate (.cv-page) reste intouché — parité stricte avec l'export PDF serveur.
-->
<div
class="mx-auto max-w-[210mm] overflow-hidden rounded-card shadow-pop ring-1 ring-border print:max-w-none print:overflow-visible print:rounded-none print:shadow-none print:ring-0"
>
<CvTemplate :cv="demoCv" />
<!--
Feuille d'aperçu : seul le conteneur est stylé.
CvTemplate (.cv-page) reste intouché — parité stricte avec l'export PDF serveur.
-->
<div
class="mx-auto w-full max-w-[210mm] shrink-0 overflow-hidden rounded-card shadow-pop ring-1 ring-border lg:mx-0 print:mx-0 print:max-w-none print:overflow-visible print:rounded-none print:shadow-none print:ring-0"
>
<CvTemplate :cv="demoCv" />
</div>
</div>

<p class="mt-5 text-center text-xs text-ink-400 print:hidden">Aperçu fidèle au PDF exporté.</p>
</div>
</template>
Loading
Loading