Auto deploy: 2025-12-09 05:42:57

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";
 

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;
+}

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;