update frontend
This commit is contained in:
Your Name
parent
de706cb4a5
commit
f6957f347f
|
|
@ -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 (
|
||||
<section className="wall-page">
|
||||
<div className="wall-header">
|
||||
<button className="wall-back" onClick={() => (window.location.hash = "")}>
|
||||
← Back to map
|
||||
</button>
|
||||
<div className="wall-title">SOCIOWALL — full view</div>
|
||||
</div>
|
||||
|
||||
<div className="wall-content">
|
||||
{loading && <div>Loading…</div>}
|
||||
{!loading && posts.length === 0 && <div>No posts with these filters.</div>}
|
||||
{posts.map((p) => (
|
||||
<article key={p.id ?? p._id} className="wall-post">
|
||||
<h3>{p.title || "Post"}</h3>
|
||||
<p>{p.snippet || p.body || p.text || ""}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue