jalil/jalil.arfaoui.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Layout masonry avec ordre de lecture naturel pour les recommandations

Browse source 
Remplace CSS columns (ordre vertical) par deux colonnes flex avec
distribution en zigzag : les plus récentes en haut, lecture
gauche-droite ligne par ligne, hauteur naturelle des cartes préservée.
This commit is contained in:
Jalil Arfaoui 2026-02-23 00:14:18 +01:00
parent 53c9f5ffb4
commit f4b71d387f
3 changed files with 96 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/pages/ar/برمجة/توصيات.astro
View file

@ -5,6 +5,9 @@ import RecommendationCard from "../../../components/code/RecommendationCard.astr
const recommendations = (await getCollection("recommendations"))
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
const leftCol = recommendations.filter((_, i) => i % 2 === 0);
const rightCol = recommendations.filter((_, i) => i % 2 === 1);
---
<Layout
@ -24,9 +27,10 @@ const recommendations = (await getCollection("recommendations"))
<p class="mt-3 text-white/60 text-lg">ما يقوله الأشخاص الذين عملت معهم.</p>
</div>
<div class="columns-1 sm:columns-2 gap-5 space-y-5">
{recommendations.map((rec) => (
<div class="break-inside-avoid">
<div class="hidden sm:grid grid-cols-2 gap-5 items-start">
{[leftCol, rightCol].map((col) => (
<div class="space-y-5">
{col.map((rec) => (
<RecommendationCard
author={rec.data.author}
authorRole={rec.data.authorRole}
@ -37,8 +41,23 @@ const recommendations = (await getCollection("recommendations"))
url={rec.data.url}
lang={rec.data.lang}
/>
))}
</div>
))}
</div>
<div class="sm:hidden space-y-5">
{recommendations.map((rec) => (
<RecommendationCard
author={rec.data.author}
authorRole={rec.data.authorRole}
company={rec.data.company}
text={rec.body || ''}
date={rec.data.date}
avatar={rec.data.avatar}
url={rec.data.url}
lang={rec.data.lang}
/>
))}
</div>
</section>
</Layout>

25
src/pages/code/recommandations.astro
View file

@ -5,6 +5,9 @@ import RecommendationCard from "../../components/code/RecommendationCard.astro";
const recommendations = (await getCollection("recommendations"))
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
const leftCol = recommendations.filter((_, i) => i % 2 === 0);
const rightCol = recommendations.filter((_, i) => i % 2 === 1);
---
<Layout
@ -24,9 +27,10 @@ const recommendations = (await getCollection("recommendations"))
<p class="mt-3 text-white/60 text-lg">Ce que disent les gens avec qui j'ai travaillé.</p>
</div>
<div class="columns-1 sm:columns-2 gap-5 space-y-5">
{recommendations.map((rec) => (
<div class="break-inside-avoid">
<div class="hidden sm:grid grid-cols-2 gap-5 items-start">
{[leftCol, rightCol].map((col) => (
<div class="space-y-5">
{col.map((rec) => (
<RecommendationCard
author={rec.data.author}
authorRole={rec.data.authorRole}
@ -37,8 +41,23 @@ const recommendations = (await getCollection("recommendations"))
url={rec.data.url}
lang={rec.data.lang}
/>
))}
</div>
))}
</div>
<div class="sm:hidden space-y-5">
{recommendations.map((rec) => (
<RecommendationCard
author={rec.data.author}
authorRole={rec.data.authorRole}
company={rec.data.company}
text={rec.body || ''}
date={rec.data.date}
avatar={rec.data.avatar}
url={rec.data.url}
lang={rec.data.lang}
/>
))}
</div>
</section>
</Layout>

25
src/pages/en/code/recommendations.astro
View file

@ -5,6 +5,9 @@ import RecommendationCard from "../../../components/code/RecommendationCard.astr
const recommendations = (await getCollection("recommendations"))
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
const leftCol = recommendations.filter((_, i) => i % 2 === 0);
const rightCol = recommendations.filter((_, i) => i % 2 === 1);
---
<Layout
@ -24,9 +27,10 @@ const recommendations = (await getCollection("recommendations"))
<p class="mt-3 text-white/60 text-lg">What people I've worked with say about me.</p>
</div>
<div class="columns-1 sm:columns-2 gap-5 space-y-5">
{recommendations.map((rec) => (
<div class="break-inside-avoid">
<div class="hidden sm:grid grid-cols-2 gap-5 items-start">
{[leftCol, rightCol].map((col) => (
<div class="space-y-5">
{col.map((rec) => (
<RecommendationCard
author={rec.data.author}
authorRole={rec.data.authorRole}
@ -37,8 +41,23 @@ const recommendations = (await getCollection("recommendations"))
url={rec.data.url}
lang={rec.data.lang}
/>
))}
</div>
))}
</div>
<div class="sm:hidden space-y-5">
{recommendations.map((rec) => (
<RecommendationCard
author={rec.data.author}
authorRole={rec.data.authorRole}
company={rec.data.company}
text={rec.body || ''}
date={rec.data.date}
avatar={rec.data.avatar}
url={rec.data.url}
lang={rec.data.lang}
/>
))}
</div>
</section>
</Layout>