diff --git a/src/components/Posts/WallPage.jsx b/src/components/Posts/WallPage.jsx new file mode 100644 index 0000000..634ee4a --- /dev/null +++ b/src/components/Posts/WallPage.jsx @@ -0,0 +1,68 @@ +import React, { useEffect, useMemo, useState } from "react"; +import { fetchPosts } from "../../api/client"; + +function useHashParams() { + const [hash, setHash] = useState(window.location.hash || ""); + useEffect(() => { + const onHash = () => setHash(window.location.hash || ""); + window.addEventListener("hashchange", onHash); + return () => window.removeEventListener("hashchange", onHash); + }, []); + const q = new URLSearchParams(hash.replace(/^#wall\??/, "")); + return { hash, params: q }; +} + +export default function WallPage() { + const { params } = useHashParams(); + const [posts, setPosts] = useState([]); + const [loading, setLoading] = useState(true); + + const filters = useMemo(() => { + const f = {}; + if (params.get("category")) f.category = params.get("category"); + if (params.get("sub")) f.subCategory = params.get("sub"); + if (params.get("time")) f.time = params.get("time"); + if (params.get("lat")) f.lat = Number(params.get("lat")); + if (params.get("lon")) f.lon = Number(params.get("lon")); + if (params.get("r")) f.radiusKm = Number(params.get("r")); + return f; + }, [params]); + + useEffect(() => { + let off = false; + (async () => { + try { + setLoading(true); + const data = await fetchPosts(filters); + if (!off) setPosts(Array.isArray(data) ? data : []); + } finally { + if (!off) setLoading(false); + } + })(); + return () => { + off = true; + }; + }, [filters]); + + return ( +
+
+ +
SOCIOWALL — full view
+
+ +
+ {loading &&
Loading…
} + {!loading && posts.length === 0 &&
No posts with these filters.
} + {posts.map((p) => ( +
+

{p.title || "Post"}

+

{p.snippet || p.body || p.text || ""}

+
+ ))} +
+
+ ); +} diff --git a/src/styles/overlays.css b/src/styles/overlays.css index d3b8fe3..cfbbc59 100644 --- a/src/styles/overlays.css +++ b/src/styles/overlays.css @@ -1,7 +1,6 @@ /* ========================================== - SOCIOWIRE — OVERLAYS AUTOUR DE LA MAP - (TOP / LEFT / RIGHT / BOTTOM / MY SPOT / - CREATE PANEL) + SOCIOWIRE — OVERLAYS (TOP / LEFT / RIGHT / + BOTTOM / MY SPOT / CREATE PANEL) ========================================== */ .map-overlay { @@ -14,7 +13,7 @@ pointer-events: auto; } -/* --------- TOP : "Look at..." + "Place your wire" --------- */ +/* --------- TOP --------- */ .map-overlay-top { top: 0.7rem; @@ -25,25 +24,18 @@ align-items: center; } -.chip-pill { - background: radial-gradient(circle at 30% 30%, #0f172a, #020617); - border: 1px solid rgba(148, 163, 184, 0.9); - color: #e5e7eb; - padding: 0.45rem 1.1rem; - font-size: 0.8rem; - border-radius: 999px; - cursor: pointer; - box-shadow: - 0 6px 16px rgba(0, 0, 0, 0.85), - 0 0 16px rgba(56, 189, 248, 0.4); +.lookat-box { + font-size: 0.75rem; + color: #93c5fd; } -.chip-pill:first-child { - /* "Look at..." un peu plus large, façon bannière */ - padding-inline: 1.4rem; +.wire-title { + font-size: 0.75rem; + opacity: 0.9; + color: #93c5fd; } -/* --------- LEFT : filtres temps (Now / Today / Recently / Past) --------- */ +/* --------- LEFT --------- */ .map-overlay-left { left: 0.7rem; @@ -51,23 +43,10 @@ transform: translateY(-50%); display: flex; flex-direction: column; - gap: 0.55rem; + gap: 0.5rem; } -.chip-round { - background: radial-gradient(circle at 30% 30%, #020617, #020617); - border-radius: 999px; - border: 1px solid rgba(148, 163, 184, 0.9); - color: #e5e7eb; - padding: 0.5rem 1rem; - font-size: 0.78rem; - cursor: pointer; - box-shadow: - 0 5px 14px rgba(0, 0, 0, 0.8), - 0 0 14px rgba(56, 189, 248, 0.35); -} - -/* --------- RIGHT : filtres principaux (All / News / Friends / Events / Market) --------- */ +/* --------- RIGHT --------- */ .map-overlay-right { right: 0.7rem; @@ -75,19 +54,17 @@ transform: translateY(-50%); display: flex; flex-direction: column; - gap: 0.55rem; + gap: 0.5rem; } -/* Quand un bouton est sélectionné (temps ou catégorie) */ +/* Bouton principal sélectionné */ .chip-selected { - background: linear-gradient(135deg, #1d4ed8, #0ea5e9); + background: linear-gradient(135deg, #2563eb, #0ea5e9); border-color: #7dd3fc; - box-shadow: - 0 0 20px rgba(56, 189, 248, 0.55), - 0 8px 22px rgba(0, 0, 0, 0.9); + box-shadow: 0 0 20px rgba(56, 189, 248, 0.55); } -/* --------- BOTTOM : sous-catégories en arc --------- */ +/* --------- BOTTOM — ARC AUTOUR DU GLOBE --------- */ .map-overlay-bottom { bottom: 3.2rem; @@ -97,51 +74,31 @@ gap: 0.4rem; } -.chip-egg { - background: rgba(0, 10, 30, 0.95); - border-radius: 999px; - border: 1px solid rgba(56, 189, 248, 0.55); - color: #e5e7eb; - padding: 0.4rem 0.9rem; - font-size: 0.78rem; - cursor: pointer; - box-shadow: - 0 5px 14px rgba(0, 0, 0, 0.8), - 0 0 14px rgba(56, 189, 248, 0.4); -} - -/* effet de courbe autour du bas de la carte - (5 premiers œufs, les autres restent droits) */ +/* courbure inversée : centre plus bas, côtés plus hauts */ .map-overlay-bottom .chip-egg:nth-child(1) { - transform: translateY(-10px) rotate(-14deg); + transform: translateY(-8px) rotate(-12deg); } .map-overlay-bottom .chip-egg:nth-child(2) { - transform: translateY(-6px) rotate(-7deg); + transform: translateY(-4px) rotate(-6deg); } .map-overlay-bottom .chip-egg:nth-child(3) { - transform: translateY(-2px) rotate(0deg); + transform: translateY(0px) rotate(0deg); } .map-overlay-bottom .chip-egg:nth-child(4) { - transform: translateY(-6px) rotate(7deg); + transform: translateY(-4px) rotate(6deg); } .map-overlay-bottom .chip-egg:nth-child(5) { - transform: translateY(-10px) rotate(14deg); -} - -/* œuf sélectionné */ -.chip-egg-active { - background: linear-gradient(135deg, #1d4ed8, #0ea5e9); - border-color: #7dd3fc; + transform: translateY(-8px) rotate(12deg); } /* --------- BOUTON "MY SPOT" --------- */ .map-overlay-myloc { right: 0.7rem; - bottom: 6.2rem; + bottom: 6rem; } -/* --------- CROSSHAIR (si tu le remets plus tard) --------- */ +/* --------- CROSSHAIR SUR LA MAP --------- */ .map-crosshair { left: 50%; @@ -178,7 +135,7 @@ height: 70%; } -/* --------- CREATE POST PANEL (fenêtre 1/5 du bas) --------- */ +/* --------- CREATE POST PANEL --------- */ .create-post-panel { left: 50%; @@ -215,16 +172,16 @@ cursor: pointer; } -.crosshair-label { - font-size: 0.75rem; - color: #cbd5f5; -} - .create-row { display: flex; align-items: center; gap: 0.5rem; - margin: 0.35rem 0; + margin-bottom: 0.4rem; +} + +.crosshair-label { + font-size: 0.75rem; + color: #cbd5f5; } .create-row select { @@ -270,3 +227,35 @@ display: flex; justify-content: flex-end; } + +/* --------- STYLES DES CHIPS --------- */ + +.chip-round, +.chip-pill, +.chip-egg, +.chip-hex { + background: rgba(15, 23, 42, 0.96); + border: 1px solid rgba(148, 163, 184, 0.85); + color: #e5e7eb; + padding: 0.45rem 0.9rem; + font-size: 0.78rem; + border-radius: 999px; + cursor: pointer; + box-shadow: + 0 5px 12px rgba(0, 0, 0, 0.7), + 0 0 12px rgba(56, 189, 248, 0.35); +} + +.chip-egg { + background: rgba(0, 10, 30, 0.9); + border: 1px solid rgba(56, 189, 248, 0.55); +} + +.chip-egg-active { + background: linear-gradient(135deg, #1d4ed8, #0ea5e9); + border-color: #7dd3fc; +} + +.chip-hex { + border-radius: 0.65rem; +} diff --git a/src/styles/posts.css b/src/styles/posts.css index be7c004..dfd20f3 100644 --- a/src/styles/posts.css +++ b/src/styles/posts.css @@ -11,7 +11,7 @@ gap: 0.6rem; align-items: stretch; pointer-events: none; - z-index: 10; /* un peu plus bas que les autres overlays */ + z-index: 10; } .map-overlay-wall * { @@ -22,8 +22,8 @@ .sociowall-panel { flex: 1.5; - min-height: 90px; - max-height: 150px; /* HAUTEUR FIXE → n’envahit pas la map */ + min-height: 110px; + max-height: 260px; /* PLUS GRAND → plus de posts avant scroll */ background: rgba(15, 23, 42, 0.96); border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.9); @@ -48,7 +48,7 @@ .post-list { flex: 1; - overflow-y: auto; /* c’est ICI que ça scrolle */ + overflow-y: auto; padding-right: 0.15rem; } @@ -142,7 +142,7 @@ .chat-panel { width: 150px; min-width: 130px; - max-height: 150px; + max-height: 260px; background: rgba(15, 23, 42, 0.96); border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.9); diff --git a/src/styles/wall.css b/src/styles/wall.css new file mode 100644 index 0000000..9416cca --- /dev/null +++ b/src/styles/wall.css @@ -0,0 +1,61 @@ +/* ===== PAGE SOCIOWALL (plein écran, sous la map) ===== */ + +.wall-page { + min-height: 100vh; + background: #060b1a; + color: #e5e7eb; + display: flex; + flex-direction: column; +} + +.wall-header { + position: sticky; + top: 0; + z-index: 5; + display: flex; + align-items: center; + gap: 0.6rem; + padding: 0.6rem 0.8rem; + background: #0b1020; + border-bottom: 1px solid #1f2937; +} + +.wall-title { + font-weight: 700; + font-size: 0.95rem; + letter-spacing: .02em; +} + +.wall-back { + padding: 0.35rem 0.8rem; + font-size: 0.8rem; + border-radius: 999px; + border: 1px solid #60a5fa; + background: #1e293b; + color: #dbeafe; + cursor: pointer; +} + +.wall-content { + padding: 0.8rem; + display: grid; + gap: 0.45rem; +} + +/* réutilise l’esthétique du mini Sociowall mais à l’aise */ +.wall-post { + border-radius: 12px; + border: 1px solid rgba(55,65,81,.9); + background: rgba(15,23,42,.92); + padding: 0.55rem 0.7rem; + font-size: .9rem; +} +.wall-post h3 { + margin: 0 0 .2rem 0; + font-size: 1rem; +} +.wall-post p { + margin: 0; + font-size: .85rem; + opacity: .95; +}