shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

games card pics are cliquable
All checks were successful
Deploy Sokko G / deploy (push) Successful in 5s
Details

Browse source
This commit is contained in:
Shinuwa 2026-07-21 14:01:15 +02:00
parent 0493db233a
commit b8d1829bc7
3 changed files with 16 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
tests/static-smoke.test.mjs
View file

@ -63,6 +63,7 @@ test("react application defines the expected local toolbox primitives", async ()
assert.match(iconComponent, /export function Icon/); assert.match(iconComponent, /export function Icon/);
assert.match(gamesPage, /export function GamesPage/); assert.match(gamesPage, /export function GamesPage/);
assert.match(gamesPage, /siteContent\.gamesPage/); assert.match(gamesPage, /siteContent\.gamesPage/);
assert.match(gamesPage, /game-card-cover-link/);
assert.match(gameRoute, /export function GameRoute/); assert.match(gameRoute, /export function GameRoute/);
assert.match(gameRoute, /MhwildsPage/); assert.match(gameRoute, /MhwildsPage/);
assert.match(mhwildsPage, /export function MhwildsPage/); assert.match(mhwildsPage, /export function MhwildsPage/);

10
website/src/features/games/GamesPage.jsx
View file

@ -13,9 +13,15 @@ export function GamesPage({ siteContent, games, gamesError }) {
<section className="game-list"> <section className="game-list">
{games.length ? games.map((game) => ( {games.length ? games.map((game) => (
<article className="card game-card" key={game.id}> <article className="card game-card" key={game.id}>
<div className="card-cover game-card-cover" style={{ "--game-cover": game.cover || "var(--gradient-nebula)" }}> <a
className="card-cover game-card-cover game-card-cover-link"
href={`#/games/${game.id}`}
aria-label={`Ouvrir ${game.title}`}
title={`Ouvrir ${game.title}`}
style={{ "--game-cover": game.cover || "var(--gradient-nebula)" }}
>
<img src={game.image || ""} alt={game.title} loading="lazy" /> <img src={game.image || ""} alt={game.title} loading="lazy" />
</div> </a>
<div className="card-body"> <div className="card-body">
<p className="eyebrow">{game.eyebrow || "Guide de jeu"}</p> <p className="eyebrow">{game.eyebrow || "Guide de jeu"}</p>
<h2>{game.title}</h2> <h2>{game.title}</h2>

10
website/src/styles/_cards.scss
View file

@ -98,18 +98,22 @@
min-height: 124px; min-height: 124px;
} }
.toolbox-card-cover-link { .toolbox-card-cover-link,
.game-card-cover-link {
display: block; display: block;
outline-offset: -3px; outline-offset: -3px;
} }
.toolbox-card-cover-link:hover img, .toolbox-card-cover-link:hover img,
.toolbox-card-cover-link:focus-visible img { .toolbox-card-cover-link:focus-visible img,
.game-card-cover-link:hover img,
.game-card-cover-link:focus-visible img {
transform: scale(1.035); transform: scale(1.035);
filter: brightness(1.08); filter: brightness(1.08);
} }
.toolbox-card-cover-link img { .toolbox-card-cover-link img,
.game-card-cover-link img {
transition: transition:
transform var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard),
filter var(--duration-normal) var(--ease-standard); filter var(--duration-normal) var(--ease-standard);