From ff81a7709f4dac20e3b9f93a43dcc78b8188785f Mon Sep 17 00:00:00 2001 From: Your Name Date: Tue, 9 Dec 2025 05:43:01 +0000 Subject: [PATCH] Auto deploy: 2025-12-09 05:42:57 --- src/components/Map/MapView.jsx | 1 + src/styles/mapLayout.css | 213 +++++++++++++++++++++++++++++++++ src/styles/mapMarkers.css | 14 +-- 3 files changed, 217 insertions(+), 11 deletions(-) create mode 100644 src/styles/mapLayout.css diff --git a/src/components/Map/MapView.jsx b/src/components/Map/MapView.jsx index 9fbb12f..ab22765 100644 --- a/src/components/Map/MapView.jsx +++ b/src/components/Map/MapView.jsx @@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react"; import maplibregl from "maplibre-gl"; import "../../styles/maplibre.css"; import "../../styles/mapMarkers.css"; +import "../../styles/mapLayout.css"; import { fetchPosts, fetchIpLocation, createPost } from "../../api/client"; diff --git a/src/styles/mapLayout.css b/src/styles/mapLayout.css new file mode 100644 index 0000000..6a8d32c --- /dev/null +++ b/src/styles/mapLayout.css @@ -0,0 +1,213 @@ +.map-view { + position: relative; + width: 100%; + height: calc(100vh - 72px); + background: #020814; +} + +.map-container { + position: absolute; + inset: 8px 8px 12px 8px; + border-radius: 18px; + overflow: hidden; +} + +/* Overlays */ +.map-overlay { + position: absolute; + z-index: 10; + pointer-events: none; +} + +.map-overlay button, +.map-overlay .chip-pill, +.map-overlay .chip-round, +.map-overlay .chip-egg { + pointer-events: auto; +} + +/* TOP BAR */ +.map-overlay-top { + top: 16px; + left: 16px; + right: 16px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.lookat-box { + min-width: 96px; + padding: 6px 12px; + border-radius: 999px; + background: rgba(4, 24, 52, 0.96); + color: #e8f3ff; + font-size: 11px; + font-weight: 500; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); + white-space: nowrap; +} + +.wire-title { + flex: 1; + text-align: center; + color: #7fb7ff; + font-size: 11px; + font-weight: 500; +} + +.zoom-buttons { + display: flex; + align-items: center; + gap: 8px; +} + +.top-newpost { + margin-left: 8px; +} + +/* Chips génériques */ +.chip-hex, +.chip-pill, +.chip-round, +.chip-egg { + border: none; + outline: none; + cursor: pointer; + background: rgba(8, 32, 72, 0.96); + color: #f0f7ff; + font-size: 11px; + font-weight: 500; + border-radius: 999px; + padding: 6px 12px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); +} + +.chip-selected { + background: #1c9dff; + color: #04101f; +} + +/* LEFT time filters */ +.map-overlay-left { + left: 16px; + top: 96px; + display: flex; + flex-direction: column; + gap: 10px; +} + +/* RIGHT main filters */ +.map-overlay-right { + right: 16px; + top: 96px; + display: flex; + flex-direction: column; + gap: 10px; +} + +/* BOTTOM subcategories */ +.map-overlay-bottom { + left: 50%; + transform: translateX(-50%); + bottom: 20px; + display: flex; + gap: 12px; +} + +/* My spot */ +.map-overlay-myloc { + right: 16px; + bottom: 80px; +} + +/* Crosshair */ +.map-crosshair { + top: 50%; + left: 50%; + width: 0; + height: 0; + transform: translate(-50%, -50%); +} + +.crosshair-aim { + width: 22px; + height: 22px; + border-radius: 999px; + border: 2px solid #1c9dff; + box-shadow: 0 0 12px rgba(28, 157, 255, 0.9); + box-sizing: border-box; +} + +/* Create post panel */ +.create-post-panel { + left: 0; + right: 0; + bottom: 0; + padding: 10px 14px 14px; + background: linear-gradient( + to top, + rgba(2, 8, 20, 0.98), + rgba(2, 8, 20, 0.92), + transparent + ); +} + +.create-post-header { + display: flex; + align-items: center; + justify-content: space-between; + color: #dfeeff; + font-size: 12px; + margin-bottom: 6px; +} + +.create-close { + border: none; + background: transparent; + color: #9fb7ff; + font-size: 14px; + cursor: pointer; +} + +.create-row { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 6px; +} + +.crosshair-label { + font-size: 11px; + color: #9bb7ff; +} + +.create-input, +.create-textarea, +.create-row select { + width: 100%; + border-radius: 8px; + border: 1px solid #23426b; + background: rgba(3, 15, 32, 0.95); + color: #e8f3ff; + font-size: 12px; + padding: 5px 7px; + box-sizing: border-box; +} + +.create-textarea { + resize: vertical; +} + +.create-error { + color: #ff6f6f; + font-size: 11px; + margin-top: 4px; +} + +.create-actions { + margin-top: 6px; + display: flex; + justify-content: flex-end; +} diff --git a/src/styles/mapMarkers.css b/src/styles/mapMarkers.css index 3835562..dcb0adc 100644 --- a/src/styles/mapMarkers.css +++ b/src/styles/mapMarkers.css @@ -1,25 +1,21 @@ -/* Le conteneur du marker. MapLibre place le BOTTOM-CENTER de cet élément - exactement sur la coordonnée (lat/lon) qu'on lui donne. */ .post-marker { position: relative; - transform: none !important; /* ⚠️ important : pas de translate() foireux */ + transform: none !important; display: flex; align-items: center; justify-content: center; pointer-events: auto; } -/* Version compacte (petit post) */ +/* Petit post */ .post-marker-compact { padding: 2px 4px; } -/* Version étendue (gros post) */ .post-marker-expanded { padding: 0; } -/* Petit contenu compact */ .marker-inner { display: flex; align-items: center; @@ -31,7 +27,6 @@ max-width: 220px; } -/* Rond de couleur à gauche */ .marker-dot { width: 10px; height: 10px; @@ -40,7 +35,6 @@ margin-right: 6px; } -/* Texte court dans la bulle compacte */ .marker-text { color: #e8f5ff; font-size: 11px; @@ -50,7 +44,7 @@ text-overflow: ellipsis; } -/* Bulle étendue (gros post) */ +/* Gros post */ .marker-expanded-inner { display: flex; flex-direction: column; @@ -62,7 +56,6 @@ max-width: 260px; } -/* Header du gros post : rond + titre */ .marker-expanded-header { display: flex; align-items: center; @@ -75,7 +68,6 @@ font-weight: 600; } -/* Corps / texte du gros post */ .marker-expanded-body { color: #c7e3ff; font-size: 11px;