Layout masonry avec ordre de lecture naturel pour les recommandations
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:
parent
53c9f5ffb4
commit
f4b71d387f
3 changed files with 96 additions and 39 deletions
|
|
@ -5,6 +5,9 @@ import RecommendationCard from "../../../components/code/RecommendationCard.astr
|
||||||
|
|
||||||
const recommendations = (await getCollection("recommendations"))
|
const recommendations = (await getCollection("recommendations"))
|
||||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
|
.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
|
<Layout
|
||||||
|
|
@ -24,21 +27,37 @@ const recommendations = (await getCollection("recommendations"))
|
||||||
<p class="mt-3 text-white/60 text-lg">ما يقوله الأشخاص الذين عملت معهم.</p>
|
<p class="mt-3 text-white/60 text-lg">ما يقوله الأشخاص الذين عملت معهم.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="columns-1 sm:columns-2 gap-5 space-y-5">
|
<div class="hidden sm:grid grid-cols-2 gap-5 items-start">
|
||||||
{recommendations.map((rec) => (
|
{[leftCol, rightCol].map((col) => (
|
||||||
<div class="break-inside-avoid">
|
<div class="space-y-5">
|
||||||
<RecommendationCard
|
{col.map((rec) => (
|
||||||
author={rec.data.author}
|
<RecommendationCard
|
||||||
authorRole={rec.data.authorRole}
|
author={rec.data.author}
|
||||||
company={rec.data.company}
|
authorRole={rec.data.authorRole}
|
||||||
text={rec.body || ''}
|
company={rec.data.company}
|
||||||
date={rec.data.date}
|
text={rec.body || ''}
|
||||||
avatar={rec.data.avatar}
|
date={rec.data.date}
|
||||||
url={rec.data.url}
|
avatar={rec.data.avatar}
|
||||||
lang={rec.data.lang}
|
url={rec.data.url}
|
||||||
/>
|
lang={rec.data.lang}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</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>
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,9 @@ import RecommendationCard from "../../components/code/RecommendationCard.astro";
|
||||||
|
|
||||||
const recommendations = (await getCollection("recommendations"))
|
const recommendations = (await getCollection("recommendations"))
|
||||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
|
.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
|
<Layout
|
||||||
|
|
@ -24,21 +27,37 @@ 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>
|
<p class="mt-3 text-white/60 text-lg">Ce que disent les gens avec qui j'ai travaillé.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="columns-1 sm:columns-2 gap-5 space-y-5">
|
<div class="hidden sm:grid grid-cols-2 gap-5 items-start">
|
||||||
{recommendations.map((rec) => (
|
{[leftCol, rightCol].map((col) => (
|
||||||
<div class="break-inside-avoid">
|
<div class="space-y-5">
|
||||||
<RecommendationCard
|
{col.map((rec) => (
|
||||||
author={rec.data.author}
|
<RecommendationCard
|
||||||
authorRole={rec.data.authorRole}
|
author={rec.data.author}
|
||||||
company={rec.data.company}
|
authorRole={rec.data.authorRole}
|
||||||
text={rec.body || ''}
|
company={rec.data.company}
|
||||||
date={rec.data.date}
|
text={rec.body || ''}
|
||||||
avatar={rec.data.avatar}
|
date={rec.data.date}
|
||||||
url={rec.data.url}
|
avatar={rec.data.avatar}
|
||||||
lang={rec.data.lang}
|
url={rec.data.url}
|
||||||
/>
|
lang={rec.data.lang}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</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>
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,9 @@ import RecommendationCard from "../../../components/code/RecommendationCard.astr
|
||||||
|
|
||||||
const recommendations = (await getCollection("recommendations"))
|
const recommendations = (await getCollection("recommendations"))
|
||||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
|
.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
|
<Layout
|
||||||
|
|
@ -24,21 +27,37 @@ const recommendations = (await getCollection("recommendations"))
|
||||||
<p class="mt-3 text-white/60 text-lg">What people I've worked with say about me.</p>
|
<p class="mt-3 text-white/60 text-lg">What people I've worked with say about me.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="columns-1 sm:columns-2 gap-5 space-y-5">
|
<div class="hidden sm:grid grid-cols-2 gap-5 items-start">
|
||||||
{recommendations.map((rec) => (
|
{[leftCol, rightCol].map((col) => (
|
||||||
<div class="break-inside-avoid">
|
<div class="space-y-5">
|
||||||
<RecommendationCard
|
{col.map((rec) => (
|
||||||
author={rec.data.author}
|
<RecommendationCard
|
||||||
authorRole={rec.data.authorRole}
|
author={rec.data.author}
|
||||||
company={rec.data.company}
|
authorRole={rec.data.authorRole}
|
||||||
text={rec.body || ''}
|
company={rec.data.company}
|
||||||
date={rec.data.date}
|
text={rec.body || ''}
|
||||||
avatar={rec.data.avatar}
|
date={rec.data.date}
|
||||||
url={rec.data.url}
|
avatar={rec.data.avatar}
|
||||||
lang={rec.data.lang}
|
url={rec.data.url}
|
||||||
/>
|
lang={rec.data.lang}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</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>
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue