diff --git a/src/components/EventCard.astro b/src/components/EventCard.astro index 3692c0a..5d1d55e 100644 --- a/src/components/EventCard.astro +++ b/src/components/EventCard.astro @@ -18,6 +18,7 @@ const categoryColors = { Festival: "#f59e0b", IRL: "#a1be18", Amical: "#8b5cf6", + Professionnel: "#5ae0f7", SI_Arbitrage: "violet", SI_Applicatif: "#5ca6e8", SI_Logistique: "#45c494", diff --git a/src/pages/collection.astro b/src/pages/collection.astro index 5cf6a79..3a9a95d 100644 --- a/src/pages/collection.astro +++ b/src/pages/collection.astro @@ -3,85 +3,91 @@ import { getCollection } from "astro:content"; import Layout from "../layouts/Layout.astro"; import Card from "../components/Card.astro"; import EventCard from "../components/EventCard.astro"; -import BankCard from "../components/BankCard.astro"; // Import du nouveau composant +import BankCard from "../components/BankCard.astro"; const allHumans = await getCollection("humans"); -const myHumans = allHumans.filter((entry: any) => entry.id.startsWith("latchimynicolas/")); - +const myHumans = allHumans.filter((entry: any) => + entry.id.startsWith("latchimynicolas/"), +); const allEvents = await getCollection("events"); -const allBanks = await getCollection("banks"); // Récupération des cartes banques/objets +const allBanks = await getCollection("banks"); -// 1. Tri chronologique global +// 1. Tri const sortedEntries = allHumans.sort( - (a: any, b: any) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime() + (a: any, b: any) => + new Date(b.data.date).getTime() - new Date(a.data.date).getTime(), ); const sortedEvents = allEvents.sort( - (a: any, b: any) => new Date(a.data.date).getTime() - new Date(b.data.date).getTime(), + (a: any, b: any) => + new Date(a.data.date).getTime() - new Date(b.data.date).getTime(), ); -const sortedBanks = allBanks.sort( - (a: any, b: any) => a.data.name.localeCompare(b.data.name)); +const sortedBanks = allBanks.sort((a: any, b: any) => + a.data.name.localeCompare(b.data.name), +); -// 2. Groupement par utilisateur +// 2. Groupement const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => { const userName = entry.data.name; if (!acc[userName]) acc[userName] = []; acc[userName].push(entry); return acc; }, {}); - ---
← Retour au flux

Collection

-

Cliquer sur une carte pour en voir les détails.

+

+ Cliquer sur un titre pour ouvrir/fermer, ou une carte pour les + détails. +

{/* SECTION HUMAINS */} { Object.entries(groupedHumans).map(([userName, cards]) => ( -
-

+
+ {userName} ({(cards as any[]).length} souffles) -

+
- { - (cards as any[]).map((entry) => ( - -
- -
-

- {new Date(entry.data.date).toLocaleDateString("fr-FR")} -

-
+ {(cards as any[]).map((entry) => ( + +
+ +
+

+ {new Date( + entry.data.date, + ).toLocaleDateString("fr-FR")} +

- - )) - } +
+ + ))}
-
+ )) } - {/* SECTION ÉVÉNEMENTS (Même structure que les humains) */} + {/* SECTION ÉVÉNEMENTS */} { sortedEvents.length > 0 && ( -
-

+
+ Événements ({sortedEvents.length} cartes) -

+
{sortedEvents.map((event) => ( { ))}
-
-
- -
-

Trésoreries (Sources de Flux)

-
- { - sortedBanks.map((bank) => ( -
-
- {bank.data.sub_category === "finances" ? ( - - ) : ( - /* Autre type de stuff si nécessaire */ -
Objet: {bank.data.name}
- )} -
-
- )) - } -
-
+
+ ) } + + {/* SECTION TRÉSORERIES */} +
+ + Trésoreries (Sources de Flux) + +
+ { + sortedBanks.map((bank) => ( +
+
+ {bank.data.sub_category === "finances" ? ( + + ) : ( +
+ Objet: {bank.data.name} +
+ )} +
+
+ )) + } +
+
+
@@ -145,8 +159,15 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => { padding: 0 20px 40px; } + /* Accordéon Style */ .user-collection { - margin-bottom: 60px; + margin-bottom: 20px; + display: block; + } + + summary { + display: flex; + flex-direction: column; } .user-title { @@ -156,6 +177,26 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => { margin-bottom: 25px; border-left: 5px solid #333; padding-left: 15px; + cursor: pointer; + list-style: none; /* Cache la flèche par défaut */ + display: flex; + align-items: center; + gap: 10px; + } + + .user-title::-webkit-details-marker { + display: none; + } + + .user-title::before { + content: "▸"; + font-size: 1rem; + color: #94a3b8; + transition: transform 0.2s ease; + } + + details[open] .user-title::before { + transform: rotate(90deg); } .user-title span { @@ -167,10 +208,10 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => { .user-flex-row { display: flex; flex-wrap: wrap; - gap: 45px; /* Gap simple comme demandé */ + gap: 45px; justify-content: flex-start; padding: 20px 0; - margin-bottom: 100px; + margin-bottom: 40px; } .entry-meta { @@ -187,14 +228,10 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => { .card-link { text-decoration: none; transition: transform 0.3s ease; - - /* 1. On définit la taille "réelle" que prendra la carte dans le flux */ - /* Si ta Card fait 300px de large, on met 150px ici */ width: 230px; height: 375px; - - /* 2. On autorise le contenu à déborder visuellement de la boîte logicielle */ overflow: visible; + display: block; } .card-link:hover { @@ -202,57 +239,38 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => { } .card-scaler { - /* 3. On réduit l'échelle */ transform: scale(0.8); - - /* 4. On fixe l'origine en haut à gauche pour que la carte - se cale parfaitement dans le coin du .card-link */ transform-origin: top left; - - /* 5. On s'assure que la carte garde sa taille originale en interne - pour ne pas briser le layout interne de */ width: 300px; height: 440px; } .separator { - margin-top: 50px; + margin-top: 10px; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.05); } - /* Adaptabilité mobile */ @media (max-width: 480px) { .user-flex-row { - display: flex; /* */ - flex-wrap: wrap; /* */ - gap: 10px; /* Espacement horizontal entre les colonnes */ - justify-content: center; /* [cite: 36] */ - padding: 0; + gap: 10px; + justify-content: center; } .card-link { - /* On force la largeur à un tiers de l'écran moins le gap */ width: calc(45%); - /* On réduit la hauteur de la boîte pour que le separator remonte */ height: 190px; - text-decoration: none; /* [cite: 33] */ - display: block; - overflow: visible; } .card-scaler { - transform: scale(0.4) !important; /* On force le scale à 0.3 */ - transform-origin: top left; /* Indispensable pour coller au bord haut-gauche */ - width: 300px; /* Taille originale [cite: 23] */ - height: 440px; /* Taille originale [cite: 24] */ + transform: scale(0.4) !important; + width: 300px; + height: 440px; } .entry-meta { - /* On masque ou on réduit drastiquement la méta pour gagner de la place */ - font-size: 0.5rem; /* [cite: 32] */ + font-size: 0.5rem; margin-top: -5px; - white-space: nowrap; } }