carte du jour
This commit is contained in:
@@ -18,6 +18,7 @@ const categoryColors = {
|
||||
Festival: "#f59e0b",
|
||||
IRL: "#a1be18",
|
||||
Amical: "#8b5cf6",
|
||||
Professionnel: "#5ae0f7",
|
||||
SI_Arbitrage: "violet",
|
||||
SI_Applicatif: "#5ca6e8",
|
||||
SI_Logistique: "#45c494",
|
||||
|
||||
@@ -3,57 +3,62 @@ 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;
|
||||
}, {});
|
||||
|
||||
---
|
||||
|
||||
<Layout title="Collection">
|
||||
<header class="collection-header">
|
||||
<a href="/" class="back-link">← Retour au flux</a>
|
||||
<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>
|
||||
|
||||
<main class="collection-container">
|
||||
{/* SECTION HUMAINS */}
|
||||
{
|
||||
Object.entries(groupedHumans).map(([userName, cards]) => (
|
||||
<section class="user-collection">
|
||||
<h2 class="user-title">
|
||||
<details class="user-collection">
|
||||
<summary class="user-title">
|
||||
{userName}
|
||||
<span>({(cards as any[]).length} souffles)</span>
|
||||
</h2>
|
||||
</summary>
|
||||
|
||||
<div class="user-flex-row">
|
||||
{
|
||||
(cards as any[]).map((entry) => (
|
||||
{(cards as any[]).map((entry) => (
|
||||
<a
|
||||
href={`/${entry.id.replace(/\.md$/, "")}`}
|
||||
class="card-link"
|
||||
@@ -62,26 +67,27 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
|
||||
<Card frontmatter={entry.data} />
|
||||
<div class="entry-meta">
|
||||
<p>
|
||||
{new Date(entry.data.date).toLocaleDateString("fr-FR")}
|
||||
{new Date(
|
||||
entry.data.date,
|
||||
).toLocaleDateString("fr-FR")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
))}
|
||||
</div>
|
||||
<hr class="separator" />
|
||||
</section>
|
||||
</details>
|
||||
))
|
||||
}
|
||||
|
||||
{/* SECTION ÉVÉNEMENTS (Même structure que les humains) */}
|
||||
{/* SECTION ÉVÉNEMENTS */}
|
||||
{
|
||||
sortedEvents.length > 0 && (
|
||||
<section class="user-collection">
|
||||
<h2 class="user-title">
|
||||
<details class="user-collection">
|
||||
<summary class="user-title">
|
||||
Événements <span>({sortedEvents.length} cartes)</span>
|
||||
</h2>
|
||||
</summary>
|
||||
<div class="user-flex-row">
|
||||
{sortedEvents.map((event) => (
|
||||
<a
|
||||
@@ -101,29 +107,37 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
|
||||
))}
|
||||
</div>
|
||||
<hr class="separator" />
|
||||
</section>
|
||||
</details>
|
||||
)
|
||||
}
|
||||
|
||||
<section class="user-collection">
|
||||
<h2 class="user-title">Trésoreries <span>(Sources de Flux)</span></h2>
|
||||
{/* 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} />
|
||||
<BankCard
|
||||
frontmatter={bank.data}
|
||||
allHumans={myHumans}
|
||||
/>
|
||||
) : (
|
||||
/* Autre type de stuff si nécessaire */
|
||||
<div class="tcg-card">Objet: {bank.data.name}</div>
|
||||
<div class="tcg-card">
|
||||
Objet: {bank.data.name}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
<hr class="separator" />
|
||||
</details>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
@@ -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 <Card /> */
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user