card cosmo ambient
This commit is contained in:
@@ -18,9 +18,24 @@ export async function getStaticPaths() {
|
||||
|
||||
const { entry, sortedEntries } = Astro.props;
|
||||
const manifestations = entry.data.manifestations || [];
|
||||
|
||||
// Groupement des manifestations par catégorie (cercle)
|
||||
const groupedManifestations = manifestations.reduce((acc, m) => {
|
||||
if (!acc[m.cercle]) {
|
||||
acc[m.cercle] = [];
|
||||
}
|
||||
acc[m.cercle].push(m);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// Définition de l'ordre d'affichage des cercles
|
||||
const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
|
||||
---
|
||||
|
||||
<Layout title={`Hebel - ${entry.data.name}`}>
|
||||
<Layout title={`${entry.data.name}`}>
|
||||
<header class="collection-header">
|
||||
<a href="/collection" class="back-link">← Retour à la collection</a>
|
||||
</header>
|
||||
<div class="hebel-dashboard">
|
||||
<aside class="nav-column">
|
||||
<TimelineBoard entry={entry} sortedEntries={sortedEntries} />
|
||||
@@ -33,17 +48,41 @@ const manifestations = entry.data.manifestations || [];
|
||||
</main>
|
||||
|
||||
<aside class="details-column">
|
||||
<h2 class="section-title">Émanations</h2>
|
||||
<h2 class="section-title">Émanations (Détails par Cercle)</h2>
|
||||
<div class="details-scroll">
|
||||
{
|
||||
manifestations.map((m) => (
|
||||
<div class={`detail-card ${m.cercle}`}>
|
||||
<header>
|
||||
<span class="cercle-label">{m.cercle}</span>
|
||||
</header>
|
||||
<p>{m.content}</p>
|
||||
</div>
|
||||
))
|
||||
circleOrder.map(
|
||||
(cercle) =>
|
||||
groupedManifestations[cercle] && (
|
||||
<section class={`cercle-group ${cercle}`}>
|
||||
<h3 class="cercle-header">
|
||||
{cercle} (
|
||||
{groupedManifestations[cercle].length} )
|
||||
</h3>
|
||||
<div class="cercle-content">
|
||||
{groupedManifestations[cercle].map(
|
||||
(m) => (
|
||||
<details
|
||||
class={`detail-item ${m.type || "neu"}`}
|
||||
>
|
||||
<summary class="note-summary">
|
||||
<span
|
||||
class={`status-dot ${m.type || "neu"}`}
|
||||
/>
|
||||
<span class="note-label">
|
||||
Séquence
|
||||
</span>
|
||||
</summary>
|
||||
<p class="private-content">
|
||||
{m.content}
|
||||
</p>
|
||||
</details>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
),
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</aside>
|
||||
@@ -51,6 +90,16 @@ const manifestations = entry.data.manifestations || [];
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.collection-header {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: #64748b;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.hebel-dashboard {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr 320px;
|
||||
@@ -64,18 +113,13 @@ const manifestations = entry.data.manifestations || [];
|
||||
|
||||
/* Aligner le style des colonnes sur la Card */
|
||||
.details-column {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 18px; /* Comme la Card [cite: 48] */
|
||||
padding: 20px;
|
||||
border: 1px solid #e2e8f0;
|
||||
height: calc(100vh - 40px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: "Philosopher", serif; /* Cohérence [cite: 127] */
|
||||
font-family: "Philosopher", serif; /* Cohérence */
|
||||
text-transform: uppercase;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 2px;
|
||||
@@ -88,11 +132,8 @@ const manifestations = entry.data.manifestations || [];
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Style des items calqué sur les types de la Card [cite: 107, 108, 109, 110] */
|
||||
/* Style des items calqué sur les types de la Card */
|
||||
.detail-card {
|
||||
background: white;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 4px solid #666;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
@@ -117,6 +158,105 @@ const manifestations = entry.data.manifestations || [];
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.cercle-group {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.cercle-header {
|
||||
font-family: "Philosopher", serif;
|
||||
border-bottom: 2px solid var(--border-color, #666);
|
||||
padding: 5px 0;
|
||||
margin: 15px 0 10px 0;
|
||||
}
|
||||
|
||||
.detail-item summary {
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
color: #64748b;
|
||||
list-style: none; /* Cache la flèche par défaut */
|
||||
}
|
||||
|
||||
.note-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
padding: 4px 0;
|
||||
list-style: none; /* Cache la flèche par défaut */
|
||||
}
|
||||
|
||||
/* Le petit point de statut minimaliste */
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #cbd5e1; /* Neutre par défaut */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status-dot.pos {
|
||||
background-color: #4ade80; /* Vert succès */
|
||||
box-shadow: 0 0 5px rgba(74, 222, 128, 0.5);
|
||||
}
|
||||
|
||||
.status-dot.neg {
|
||||
background-color: #f87171; /* Rouge alerte */
|
||||
box-shadow: 0 0 5px rgba(248, 113, 113, 0.5);
|
||||
}
|
||||
|
||||
.note-label {
|
||||
font-family: "Philosopher", serif;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* Style du contenu révélé */
|
||||
.private-content {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
border-left: 1px solid #e2e8f0;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
/* Couleurs des cercles basées sur tes fichiers */
|
||||
.PRO {
|
||||
--border-color: #f59e0b;
|
||||
}
|
||||
.SAN {
|
||||
--border-color: #3b82f6;
|
||||
}
|
||||
.HYG {
|
||||
--border-color: #9400ff;
|
||||
}
|
||||
.SOC {
|
||||
--border-color: #ec4899;
|
||||
}
|
||||
.FLX {
|
||||
--border-color: #10b981;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
font-size: 0.9rem;
|
||||
padding: 8px;
|
||||
margin-bottom: 6px;
|
||||
background: white;
|
||||
border-left: 3px solid #cbd5e1;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.detail-item.pos {
|
||||
border-left-color: #4ade80;
|
||||
}
|
||||
.detail-item.neg {
|
||||
border-left-color: #f87171;
|
||||
}
|
||||
|
||||
/* CONTROLE DU SCROLL HORIZONTAL (MOBILE) */
|
||||
.focus-column {
|
||||
display: flex;
|
||||
@@ -125,32 +265,44 @@ const manifestations = entry.data.manifestations || [];
|
||||
}
|
||||
|
||||
.card-scaling-container {
|
||||
max-width: 100%; /* Empêche le débordement [cite: 128] */
|
||||
max-width: 100%; /* Empêche le débordement */
|
||||
}
|
||||
|
||||
/* RESPONSIVE : Passage en colonne pour ton Samsung */
|
||||
@media (max-width: 1100px) {
|
||||
.hebel-dashboard {
|
||||
grid-template-columns: 1fr;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.nav-column,
|
||||
.details-column {
|
||||
order: 2;
|
||||
height: auto;
|
||||
display: flex; /* On passe en flex pour mieux contrôler l'empilement */
|
||||
flex-direction: column;
|
||||
align-items: center; /* Centre tout ce qui est dans le dashboard */
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.focus-column {
|
||||
order: 1;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
justify-content: center; /* Centre la carte horizontalement */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Réduction de la carte si l'écran est trop petit */
|
||||
.card-scaling-container {
|
||||
display: block;
|
||||
margin: 0 auto; /* Centrage automatique via les marges */
|
||||
width: fit-content; /* S'adapte à la taille de la Card */
|
||||
transform: scale(0.9);
|
||||
transform-origin: top center;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
/* Important : On s'assure que la nav et les détails ne poussent pas le layout */
|
||||
.nav-column,
|
||||
.details-column {
|
||||
width: 95%; /* Laisse une petite marge visuelle sur les côtés */
|
||||
margin: 0 auto;
|
||||
padding: 15px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user