studio-variable/world-game
4
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Feat: couleur d'arrière-plan dynamique sur GalleryAnimation (galleryBackgroundColor)
All checks were successful
Deploy / Deploy to Production (push) Successful in 19s
Details

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-06 18:22:50 +01:00
parent 47be2b4662
commit 802a3ed5bf
4 changed files with 12 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
site/blueprints/pages/project.yml
View file

@ -99,6 +99,10 @@ columns:
uploads: uploads:
template: image template: image
help: Petite image carrée représentant le jeu help: Petite image carrée représentant le jeu
galleryBackgroundColor:
label: Couleur d'arrière-plan de la galerie animée
type: color
alpha: false
keywords: keywords:
label: Mots clés label: Mots clés
type: structure type: structure

3
site/templates/portfolio.json.php
View file

@ -13,7 +13,8 @@ $specificData = [
'srcset' => $f->srcset('gallery'), 'srcset' => $f->srcset('gallery'),
'webp' => $f->srcset('gallery-webp'), 'webp' => $f->srcset('gallery-webp'),
])->values(), ])->values(),
'mockup' => $project->mockup()->toFile()?->url(), 'mockup' => $project->mockup()->toFile()?->url(),
'gallery_background_color' => $project->galleryBackgroundColor()->value(),
'keywords' => $project->keywords()->toStructure()->map(fn($i) => [ 'keywords' => $project->keywords()->toStructure()->map(fn($i) => [
'label' => $i->label()->value(), 'label' => $i->label()->value(),
'text' => $i->text()->value(), 'text' => $i->text()->value(),

8
src/components/ui/GalleryAnimation.svelte
View file

@ -4,7 +4,7 @@
* @prop {Array<{src: string, srcset: string, webp: string}>} images * @prop {Array<{src: string, srcset: string, webp: string}>} images
* @prop {number} secondsPerImage — durée par image (défaut: 8s) * @prop {number} secondsPerImage — durée par image (défaut: 8s)
*/ */
let { images = [], secondsPerImage = 8 } = $props() let { images = [], secondsPerImage = 8, backgroundColor = null } = $props()
const columns = $derived.by(() => { const columns = $derived.by(() => {
const count = images.length const count = images.length
@ -29,7 +29,7 @@
<div <div
class="gallery-animation gallery-animation--vertical" class="gallery-animation gallery-animation--vertical"
style="--gallery-duration: {columns[0]?.duration ?? 24}s" style="--gallery-duration: {columns[0]?.duration ?? 24}s{backgroundColor ? `; --background-color: ${backgroundColor}` : ''}"
> >
{#each columns as col} {#each columns as col}
<div class="gallery-animation__column"> <div class="gallery-animation__column">
@ -65,13 +65,14 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background-color: var(--background-color, transparent);
} }
/* Vertical mode (Portfolio) */ /* Vertical mode (Portfolio) */
.gallery-animation--vertical { .gallery-animation--vertical {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 8px; gap: 1rem;
} }
.gallery-animation--vertical :global(.gallery-animation__column) { .gallery-animation--vertical :global(.gallery-animation__column) {
@ -84,6 +85,7 @@
.gallery-animation--vertical :global(.gallery-animation__track) { .gallery-animation--vertical :global(.gallery-animation__track) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: 1rem;
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }

2
src/views/Portfolio.svelte
View file

@ -94,7 +94,7 @@
{#if currentProject} {#if currentProject}
<!-- Galerie animation (gauche) --> <!-- Galerie animation (gauche) -->
<div class="portfolio-gallery" aria-hidden="true"> <div class="portfolio-gallery" aria-hidden="true">
<GalleryAnimation images={currentProject.images_gallery} /> <GalleryAnimation images={currentProject.images_gallery} backgroundColor={currentProject.gallery_background_color} />
</div> </div>
<!-- Mockup device (centre) --> <!-- Mockup device (centre) -->