From acee536d8b755e3aa09c7d8198188903f12c1406 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sat, 20 Dec 2025 23:22:34 -0500 Subject: [PATCH] update frontend --- src/styles/map.css | 71 +++++++++++----------------------------------- 1 file changed, 17 insertions(+), 54 deletions(-) diff --git a/src/styles/map.css b/src/styles/map.css index 79da097..6f9086c 100644 --- a/src/styles/map.css +++ b/src/styles/map.css @@ -76,6 +76,7 @@ left:50%; transform:translateX(-50%); max-width: min(980px, calc(100vw - 24px)); + width:100%; } /* Left / right: filtres */ @@ -242,6 +243,7 @@ box-shadow: 0 5px 12px rgba(0,0,0,.70), 0 0 14px rgba(56,189,248,.22); backdrop-filter: blur(10px); min-height: 38px; + width:100%; } .sw-searchbar:focus-within{ @@ -261,8 +263,9 @@ color: #e5e7eb; font-size: 0.80rem; font-weight: 800; - width: min(52vw, 360px); - min-width: 160px; + width: 100%; + max-width: 100%; + min-width: 0; } .sw-search-input::placeholder{ @@ -305,14 +308,6 @@ body[data-theme="light"] .sw-search-clear{ border-color: rgba(148,163,184,.55); } -/* Tight phones: keep it clean */ -@media (max-width: 420px){ - .sw-search-input{ - width: min(72vw, 320px); - min-width: 120px; - } -} - /* ===== TOP ROW: search + 2 icônes ===== */ .sw-top-row{ @@ -320,18 +315,23 @@ body[data-theme="light"] .sw-search-clear{ align-items:center; justify-content:space-between; gap:0.75rem; + width:100%; } -/* search = prend la place à gauche */ +/* search = 50% à gauche */ .sw-top-search{ - flex:1 1 auto; + flex:0 0 50%; + max-width:50%; } -/* bloc des 2 boutons à droite */ +/* bloc des 2 boutons = 50% à droite */ .map-top-actions{ + flex:0 0 50%; + max-width:50%; display:flex; flex-direction:row; align-items:center; + justify-content:flex-end; gap:0.5rem; } @@ -369,49 +369,12 @@ body[data-theme="light"] .sw-search-clear{ letter-spacing:0.04em; } -.map-top-actions .map-action-btn i{ - display:block; - font-size:1.05rem; - margin-bottom:0.15rem; -} - -.map-top-actions .map-action-btn span{ - font-size:0.65rem; - font-weight:600; - letter-spacing:0.03em; -} - -/* TOP layout: 75% search / 25% boutons */ -.map-overlay-top .sw-top-row{ - display:flex; - align-items:center; - justify-content:space-between; - gap:0.75rem; -} - -.map-overlay-top .sw-searchbar{ - flex:0 0 75%; - max-width:75%; -} - -.map-overlay-top .map-top-actions{ - flex:0 0 25%; - max-width:25%; - display:flex; - justify-content:flex-end; - gap:0.5rem; -} - -/* petits écrans */ +/* petits écrans : on laisse 50/50 mais on compresse un peu les boutons */ @media (max-width:480px){ - .map-overlay-top .sw-top-row{ - gap:0.4rem; + .sw-top-row{ + gap:0.5rem; } - .map-top-actions .map-action-btn{ + .map-action-btn{ padding:0.3rem 0.45rem; } - .map-overlay-top .sw-searchbar{ - flex:1 1 auto; - max-width:100%; - } }