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

portfolio : decouple animation direction from mockup position
All checks were successful
Deploy / Deploy to Production (push) Successful in 27s
Details

Browse source 
refs #44

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-04-05 10:00:19 +02:00
parent fc1fa42e67
commit 4dc937addd
3 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -149,7 +149,7 @@ tabs:
- width: 1/2 - width: 1/2
fields: fields:
galleryAnimationMode: galleryAnimationMode:
label: Mode d'animation de la galerie label: Sens de l'animation
type: toggles type: toggles
default: vertical default: vertical
options: options:
@ -160,6 +160,16 @@ tabs:
text: Horizontal text: Horizontal
icon: arrow-left-right icon: arrow-left-right
help: "Direction du défilement des images dans la galerie animée" help: "Direction du défilement des images dans la galerie animée"
mockupPosition:
label: Position du mockup
type: toggles
default: center
options:
- value: center
text: Centre
- value: left
text: Gauche
help: "Position du mockup sur la page"
secondsPerImage: secondsPerImage:
label: Durée de l'animation label: Durée de l'animation
type: range type: range

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

@ -21,6 +21,7 @@ $specificData = [
'mockupSrcset' => $mockupFile?->srcset('mockup'), 'mockupSrcset' => $mockupFile?->srcset('mockup'),
'mockupWebp' => $mockupFile?->srcset('mockup-webp'), 'mockupWebp' => $mockupFile?->srcset('mockup-webp'),
'galleryAnimationMode' => $project->galleryAnimationMode()->value() ?: 'vertical', 'galleryAnimationMode' => $project->galleryAnimationMode()->value() ?: 'vertical',
'mockupPosition' => $project->mockupPosition()->value() ?: 'center',
'secondsPerImage' => $project->secondsPerImage()->isNotEmpty() ? (int) $project->secondsPerImage()->value() : 8, 'secondsPerImage' => $project->secondsPerImage()->isNotEmpty() ? (int) $project->secondsPerImage()->value() : 8,
'galleryBackgroundColor' => $project->galleryBackgroundColor()->value(), 'galleryBackgroundColor' => $project->galleryBackgroundColor()->value(),
'galleryBackgroundImage' => $project->galleryBackgroundImage()->isNotEmpty() ? $project->galleryBackgroundImage()->toFile()->url() : null, 'galleryBackgroundImage' => $project->galleryBackgroundImage()->isNotEmpty() ? $project->galleryBackgroundImage()->toFile()->url() : null,

6
src/views/Portfolio.svelte
View file

@ -187,7 +187,7 @@
{/if} {/if}
<!-- Mockup device (centre) — prioritaire --> <!-- Mockup device (centre) — prioritaire -->
<div class="portfolio-mockup portfolio-mockup--{currentProject.galleryAnimationMode}" bind:this={mockupEl}> <div class="portfolio-mockup portfolio-mockup--{currentProject.mockupPosition}" bind:this={mockupEl}>
<ResponsivePicture <ResponsivePicture
src={currentProject.mockup} src={currentProject.mockup}
srcset={currentProject.mockupSrcset} srcset={currentProject.mockupSrcset}
@ -279,7 +279,7 @@
transform: translateX(2vw); transform: translateX(2vw);
} }
.portfolio-mockup--horizontal { .portfolio-mockup--left {
grid-area: 7/1 / span 12 / span 8; grid-area: 7/1 / span 12 / span 8;
transform: none; transform: none;
} }
@ -480,7 +480,7 @@
z-index: var(--z-content); z-index: var(--z-content);
} }
.portfolio-mockup--horizontal { .portfolio-mockup--left {
grid-area: 8/4 / span 8 / span 14; grid-area: 8/4 / span 8 / span 14;
scale: 1.2; scale: 1.2;
} }