Fix weather widget position and z-index hierarchy
- Position weather widget fixed at left:24px, top:240px - Set weather widget z-index to 300 (below FAB at 398-400) - Fix FAB z-index to be below search dropdown - Fix various z-index issues for modals and overlays Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
dac9f620d0
commit
85ebb500bc
11
src/App.jsx
11
src/App.jsx
|
|
@ -17,6 +17,17 @@ export default function App() {
|
|||
const { t } = useTranslation();
|
||||
const [theme, setTheme] = useState("blue");
|
||||
|
||||
// Clean up Facebook OAuth hash fragment (#_=_)
|
||||
useEffect(() => {
|
||||
if (window.location.hash === "#_=_") {
|
||||
if (window.history.replaceState) {
|
||||
window.history.replaceState(null, "", window.location.pathname + window.location.search);
|
||||
} else {
|
||||
window.location.hash = "";
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Wall state (lifted from MapView)
|
||||
const [wallPosts, setWallPosts] = useState([]);
|
||||
const [wallLoading, setWallLoading] = useState(false);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { CREATE_CATEGORY_MAP, FILTER_MAIN_CATEGORIES } from "../Map/mapConfig";
|
|||
import "./Live.css";
|
||||
|
||||
const API_BASE = (import.meta?.env?.VITE_API_BASE_URL || "").replace(/\/+$/, "");
|
||||
const LIVEKIT_API = "https://live.us1.sociowire.com";
|
||||
const LIVEKIT_API = "https://stream.us4.sociowire.com";
|
||||
|
||||
/**
|
||||
* LiveKit-based broadcast component
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import { Room, RoomEvent } from "livekit-client";
|
|||
import { useAuth } from "../../auth/AuthContext";
|
||||
import "./Live.css";
|
||||
|
||||
const LIVEKIT_URL = "wss://live.us1.sociowire.com";
|
||||
const LIVEKIT_API = "https://live.us1.sociowire.com";
|
||||
const LIVEKIT_URL = "wss://live.us4.sociowire.com";
|
||||
const LIVEKIT_API = "https://stream.us4.sociowire.com";
|
||||
|
||||
function roomNameFromPost(post) {
|
||||
const raw = (post?.embed_url || post?.video_url || "").toString().trim();
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ import {
|
|||
createLocalAudioTrack,
|
||||
} from "livekit-client";
|
||||
|
||||
const LIVEKIT_URL = "wss://live.us1.sociowire.com";
|
||||
const LIVEKIT_API = "https://live.us1.sociowire.com";
|
||||
const LIVEKIT_URL = "wss://live.us4.sociowire.com";
|
||||
const LIVEKIT_API = "https://stream.us4.sociowire.com";
|
||||
|
||||
/**
|
||||
* Hook for LiveKit-based live streaming
|
||||
|
|
|
|||
|
|
@ -1974,11 +1974,12 @@ export default function MapView({
|
|||
<div
|
||||
onClick={() => setActiveWeatherPost(w)}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
left: '24px',
|
||||
top: '240px',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '5px',
|
||||
marginTop: '8px',
|
||||
marginLeft: '70px', // Offset from left FAB
|
||||
padding: '5px 12px',
|
||||
borderRadius: '16px',
|
||||
background: bg,
|
||||
|
|
@ -1989,6 +1990,7 @@ export default function MapView({
|
|||
cursor: 'pointer',
|
||||
backdropFilter: 'blur(8px)',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
|
||||
zIndex: 300,
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: '16px' }}>{w.icon}</span>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
background: rgba(0, 0, 0, 0.15);
|
||||
backdrop-filter: blur(2px);
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
z-index: 998;
|
||||
z-index: 398; /* Below search dropdown (500) */
|
||||
animation: fab-fade-in 0.2s ease;
|
||||
}
|
||||
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
.fab-right {
|
||||
position: fixed;
|
||||
top: 180px;
|
||||
z-index: 999;
|
||||
z-index: 399; /* Below search dropdown (500) */
|
||||
}
|
||||
|
||||
.fab-left {
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
z-index: 400; /* Below search dropdown (500) */
|
||||
}
|
||||
|
||||
.fab-btn-right {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.auth-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10000020;
|
||||
z-index: 10000; /* Auth modal - highest priority */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -240,18 +240,6 @@ body[data-theme="light"] .sw-icon-active .sw-icon-label{
|
|||
|
||||
/* SW_FILTER_ICON_VISIBILITY:END */
|
||||
|
||||
/* VERSION INDICATOR */
|
||||
body::after {
|
||||
content: "© Sociowire v0.0011";
|
||||
position: fixed;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
font-size: 10px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
z-index: 99999;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ===== THEME PILLS D / B / L : blanc sur fond noir comme les catégories ===== */
|
||||
.sw-theme-toggle{
|
||||
display:flex;
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@
|
|||
transform:translateX(-50%);
|
||||
max-width: min(980px, calc(100vw - 24px));
|
||||
width:100%;
|
||||
z-index: 10001; /* Au-dessus des filtres (z-index: 300) et du dropdown (9999) */
|
||||
z-index: 800; /* Above filters (300) but below modals (9999) */
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1365,7 +1365,7 @@ body[data-theme="light"] .map-action-btn * {
|
|||
bottom:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%, 50%);
|
||||
z-index:9000;
|
||||
z-index:900; /* Below modals (9999) but above filters/content */
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:6px;
|
||||
|
|
|
|||
|
|
@ -1116,7 +1116,7 @@ body[data-theme="light"] .sw-modal-hero-fallback{
|
|||
.sw-centered-backdrop{
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999999;
|
||||
z-index: 9999; /* Centered modal - above most content but below auth */
|
||||
background: rgba(0,0,0,0.08);
|
||||
backdrop-filter: blur(1px);
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
.user-profile-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9998; /* Just below island viewer */
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ body[data-theme="light"] {
|
|||
|
||||
.sw-search__dropdown {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
z-index: 500;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 8px;
|
||||
|
|
|
|||
|
|
@ -767,7 +767,7 @@ body[data-theme="light"] .sw-avatar{
|
|||
position: fixed;
|
||||
top: 70px;
|
||||
right: 16px;
|
||||
z-index: 10000005;
|
||||
z-index: 1000;
|
||||
animation: friendsSlideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
|
|
@ -829,7 +829,7 @@ body[data-theme="light"] .sw-avatar{
|
|||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.05);
|
||||
backdrop-filter: blur(16px);
|
||||
overflow: hidden;
|
||||
z-index: 10000010;
|
||||
z-index: 1001;
|
||||
animation: langDropIn 0.18s ease-out;
|
||||
}
|
||||
|
||||
|
|
@ -908,7 +908,7 @@ body[data-theme="light"] .lang-option.is-active{
|
|||
|
||||
.theme-dropdown{
|
||||
position: fixed;
|
||||
z-index: 10000010;
|
||||
z-index: 1001;
|
||||
background: rgba(15, 23, 42, 0.98);
|
||||
border: 1px solid rgba(139, 92, 246, 0.5);
|
||||
border-radius: 8px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue