chim1chim2/ambient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

carte du jour

Browse Source
This commit is contained in:
LATCHIMY Nicolas
2026-02-28 07:31:13 +04:00
parent 0da38c01ba
commit 9a6405789f
2 changed files with 111 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/EventCard.astro
View File

@@ -18,6 +18,7 @@ const categoryColors = {
Festival: "#f59e0b", Festival: "#f59e0b",
IRL: "#a1be18", IRL: "#a1be18",
Amical: "#8b5cf6", Amical: "#8b5cf6",
Professionnel: "#5ae0f7",
SI_Arbitrage: "violet", SI_Arbitrage: "violet",
SI_Applicatif: "#5ca6e8", SI_Applicatif: "#5ca6e8",
SI_Logistique: "#45c494", SI_Logistique: "#45c494",

202
src/pages/collection.astro
View File

@@ -3,85 +3,91 @@ import { getCollection } from "astro:content";
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro"; import Card from "../components/Card.astro";
import EventCard from "../components/EventCard.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 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 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( 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( 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( const sortedBanks = allBanks.sort((a: any, b: any) =>
(a: any, b: any) => a.data.name.localeCompare(b.data.name)); a.data.name.localeCompare(b.data.name),
);
// 2. Groupement par utilisateur // 2. Groupement
const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => { const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
const userName = entry.data.name; const userName = entry.data.name;
if (!acc[userName]) acc[userName] = []; if (!acc[userName]) acc[userName] = [];
acc[userName].push(entry); acc[userName].push(entry);
return acc; return acc;
}, {}); }, {});
--- ---
<Layout title="Collection"> <Layout title="Collection">
<header class="collection-header"> <header class="collection-header">
<a href="/" class="back-link">← Retour au flux</a> <a href="/" class="back-link">← Retour au flux</a>
<h1>Collection</h1> <h1>Collection</h1>
<p class="back-link">Cliquer sur une carte pour en voir les détails.</p> <p class="back-link">
Cliquer sur un titre pour ouvrir/fermer, ou une carte pour les
détails.
</p>
</header> </header>
<main class="collection-container"> <main class="collection-container">
{/* SECTION HUMAINS */} {/* SECTION HUMAINS */}
{ {
Object.entries(groupedHumans).map(([userName, cards]) => ( Object.entries(groupedHumans).map(([userName, cards]) => (
<section class="user-collection"> <details class="user-collection">
<h2 class="user-title"> <summary class="user-title">
{userName} {userName}
<span>({(cards as any[]).length} souffles)</span> <span>({(cards as any[]).length} souffles)</span>
</h2> </summary>
<div class="user-flex-row"> <div class="user-flex-row">
{ {(cards as any[]).map((entry) => (
(cards as any[]).map((entry) => ( <a
<a href={`/${entry.id.replace(/\.md$/, "")}`}
href={`/${entry.id.replace(/\.md$/, "")}`} class="card-link"
class="card-link" >
> <div class="card-scaler">
<div class="card-scaler"> <Card frontmatter={entry.data} />
<Card frontmatter={entry.data} /> <div class="entry-meta">
<div class="entry-meta"> <p>
<p> {new Date(
{new Date(entry.data.date).toLocaleDateString("fr-FR")} entry.data.date,
</p> ).toLocaleDateString("fr-FR")}
</div> </p>
</div> </div>
</a> </div>
)) </a>
} ))}
</div> </div>
<hr class="separator" /> <hr class="separator" />
</section> </details>
)) ))
} }
{/* SECTION ÉVÉNEMENTS (Même structure que les humains) */} {/* SECTION ÉVÉNEMENTS */}
{ {
sortedEvents.length > 0 && ( sortedEvents.length > 0 && (
<section class="user-collection"> <details class="user-collection">
<h2 class="user-title"> <summary class="user-title">
Événements <span>({sortedEvents.length} cartes)</span> Événements <span>({sortedEvents.length} cartes)</span>
</h2> </summary>
<div class="user-flex-row"> <div class="user-flex-row">
{sortedEvents.map((event) => ( {sortedEvents.map((event) => (
<a <a
@@ -100,30 +106,38 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
</a> </a>
))} ))}
</div> </div>
<hr class="separator" /> <hr class="separator" />
</section> </details>
<section class="user-collection">
<h2 class="user-title">Trésoreries <span>(Sources de Flux)</span></h2>
<div class="user-flex-row">
{
sortedBanks.map((bank) => (
<div class="card-link">
<div class="card-scaler">
{bank.data.sub_category === "finances" ? (
<BankCard frontmatter={bank.data} allHumans={myHumans} />
) : (
/* Autre type de stuff si nécessaire */
<div class="tcg-card">Objet: {bank.data.name}</div>
)}
</div>
</div>
))
}
</div>
</section>
) )
} }
{/* SECTION TRÉSORERIES */}
<details class="user-collection">
<summary class="user-title">
Trésoreries <span>(Sources de Flux)</span>
</summary>
<div class="user-flex-row">
{
sortedBanks.map((bank) => (
<div class="card-link">
<div class="card-scaler">
{bank.data.sub_category === "finances" ? (
<BankCard
frontmatter={bank.data}
allHumans={myHumans}
/>
) : (
<div class="tcg-card">
Objet: {bank.data.name}
</div>
)}
</div>
</div>
))
}
</div>
<hr class="separator" />
</details>
</main> </main>
</Layout> </Layout>
@@ -145,8 +159,15 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
padding: 0 20px 40px; padding: 0 20px 40px;
} }
/* Accordéon Style */
.user-collection { .user-collection {
margin-bottom: 60px; margin-bottom: 20px;
display: block;
}
summary {
display: flex;
flex-direction: column;
} }
.user-title { .user-title {
@@ -156,6 +177,26 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
margin-bottom: 25px; margin-bottom: 25px;
border-left: 5px solid #333; border-left: 5px solid #333;
padding-left: 15px; 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 { .user-title span {
@@ -167,10 +208,10 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
.user-flex-row { .user-flex-row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 45px; /* Gap simple comme demandé */ gap: 45px;
justify-content: flex-start; justify-content: flex-start;
padding: 20px 0; padding: 20px 0;
margin-bottom: 100px; margin-bottom: 40px;
} }
.entry-meta { .entry-meta {
@@ -187,14 +228,10 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
.card-link { .card-link {
text-decoration: none; text-decoration: none;
transition: transform 0.3s ease; 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; width: 230px;
height: 375px; height: 375px;
/* 2. On autorise le contenu à déborder visuellement de la boîte logicielle */
overflow: visible; overflow: visible;
display: block;
} }
.card-link:hover { .card-link:hover {
@@ -202,57 +239,38 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
} }
.card-scaler { .card-scaler {
/* 3. On réduit l'échelle */
transform: scale(0.8); 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; 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 <Card /> */
width: 300px; width: 300px;
height: 440px; height: 440px;
} }
.separator { .separator {
margin-top: 50px; margin-top: 10px;
border: 0; border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.05); border-top: 1px solid rgba(0, 0, 0, 0.05);
} }
/* Adaptabilité mobile */
@media (max-width: 480px) { @media (max-width: 480px) {
.user-flex-row { .user-flex-row {
display: flex; /* */ gap: 10px;
flex-wrap: wrap; /* */ justify-content: center;
gap: 10px; /* Espacement horizontal entre les colonnes */
justify-content: center; /* [cite: 36] */
padding: 0;
} }
.card-link { .card-link {
/* On force la largeur à un tiers de l'écran moins le gap */
width: calc(45%); width: calc(45%);
/* On réduit la hauteur de la boîte pour que le separator remonte */
height: 190px; height: 190px;
text-decoration: none; /* [cite: 33] */
display: block;
overflow: visible;
} }
.card-scaler { .card-scaler {
transform: scale(0.4) !important; /* On force le scale à 0.3 */ transform: scale(0.4) !important;
transform-origin: top left; /* Indispensable pour coller au bord haut-gauche */ width: 300px;
width: 300px; /* Taille originale [cite: 23] */ height: 440px;
height: 440px; /* Taille originale [cite: 24] */
} }
.entry-meta { .entry-meta {
/* On masque ou on réduit drastiquement la méta pour gagner de la place */ font-size: 0.5rem;
font-size: 0.5rem; /* [cite: 32] */
margin-top: -5px; margin-top: -5px;
white-space: nowrap;
} }
} }
</style> </style>