canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix live filter to include cameras and update pin styling 

- Live filter sends live,camera content types to API
- Camera pin border and pointer changed to sky blue (#0ea5e9)
- Camera pin background is sky blue when no thumbnail

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Sociowire Dev 2026-01-13 09:08:59 +00:00
parent a9a1d782c3
commit e32b8a531a
4 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.jsx
View File

@ -251,7 +251,7 @@ export default function App() {
<footer className="sw-footer"> <footer className="sw-footer">
<div className="sw-footer-inner"> <div className="sw-footer-inner">
<div className="sw-footer-brand">SOCIOWIRE</div> <div className="sw-footer-brand">SOCIOWIRE</div>
<div className="sw-footer-brand">© Sociowire v0.0018</div> <div className="sw-footer-brand">© Sociowire v0.0019</div>
<div id="sw-weather-debug" style={{color: '#0ea5e9', fontSize: '10px'}}></div> <div id="sw-weather-debug" style={{color: '#0ea5e9', fontSize: '10px'}}></div>
<nav className="sw-footer-nav" aria-label="Site"> <nav className="sw-footer-nav" aria-label="Site">
<a href="/">{t('nav.home')}</a> <a href="/">{t('nav.home')}</a>

61
src/components/Map/markerManager.js
View File

@ -2466,46 +2466,45 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
// Weather city name for label // Weather city name for label
const weatherCity = isWeather ? (activePost?.city || (activePost?.title || '').split(':')[0].replace(/^[^\w\s]+/, '').trim()) : ''; const weatherCity = isWeather ? (activePost?.city || (activePost?.title || '').split(':')[0].replace(/^[^\w\s]+/, '').trim()) : '';
// Camera thumbnail URL - only show camera marker if thumbnail available // Camera thumbnail URL
const cameraThumbnail = isCamera ? (activePost?.thumbnail_url || activePost?.image_small || '') : ''; const cameraThumbnail = isCamera ? (activePost?.thumbnail_url || activePost?.image_small || '') : '';
const showCameraMarker = isCamera && cameraThumbnail;
// Marqueur pin avec image en haut et pointe en bas // Camera pin - square thumbnail with red live dot
root.innerHTML = showCameraMarker ? ` root.innerHTML = isCamera ? `
<div class="sw-camera-pin" style=" <div style="position:relative;">
position: relative; <div style="
width: 48px; width: 44px;
height: 36px; height: 32px;
border-radius: 6px; border-radius: 4px;
background: #1a1a2e; background: #0ea5e9;
border: 2px solid rgba(56, 189, 248, 0.9); border: 2px solid #0ea5e9;
box-shadow: 0 3px 12px rgba(0,0,0,0.4), 0 0 20px rgba(56, 189, 248, 0.3); box-shadow: 0 2px 8px rgba(0,0,0,0.4);
overflow: hidden; overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease; ">
"> ${cameraThumbnail ? `<img src="${cameraThumbnail}" style="width:100%;height:100%;object-fit:cover;" onerror="this.style.display='none';" />` : ``}
<img src="${cameraThumbnail}" alt="" style="width:100%;height:100%;object-fit:cover;" onerror="this.parentElement.parentElement.style.display='none';" /> </div>
<div style=" <div style="
position: absolute; position: absolute;
top: 3px; top: -4px;
right: 3px; right: -4px;
width: 6px; width: 10px;
height: 6px; height: 10px;
border-radius: 50%; border-radius: 50%;
background: #ef4444; background: #ef4444;
box-shadow: 0 0 4px rgba(239, 68, 68, 0.8); border: 2px solid #fff;
box-shadow: 0 0 6px #ef4444;
animation: pulse 1.5s infinite; animation: pulse 1.5s infinite;
"></div> "></div>
<div style="
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #0ea5e9;
margin: -2px auto 0;
"></div>
</div> </div>
<div style=" ` : `
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 10px solid rgba(56, 189, 248, 0.9);
margin-top: -1px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
"></div>
` : isCamera ? `` : `
<div class="sw-simple-marker ${isLive ? 'sw-live-marker' : ''} ${isWeather ? 'sw-weather-marker' : ''}" style=" <div class="sw-simple-marker ${isLive ? 'sw-live-marker' : ''} ${isWeather ? 'sw-weather-marker' : ''}" style="
${isWeather ? 'width: auto; height: auto; padding: 4px 8px; border-radius: 12px;' : 'width: 32px; height: 32px; border-radius: 50%;'} ${isWeather ? 'width: auto; height: auto; padding: 4px 8px; border-radius: 12px;' : 'width: 32px; height: 32px; border-radius: 50%;'}
background: ${isWeather ? 'rgba(14, 165, 233, 0.75)' : color}; background: ${isWeather ? 'rgba(14, 165, 233, 0.75)' : color};

2
src/components/Map/usePostsEngine.js
View File

@ -1113,7 +1113,7 @@ export function usePostsEngine({
// Map contentFilter to content_type for API // Map contentFilter to content_type for API
let contentTypeParam = undefined; let contentTypeParam = undefined;
if (contentFilter && contentFilter !== "all") { if (contentFilter && contentFilter !== "all") {
if (contentFilter === "live") contentTypeParam = "camera"; if (contentFilter === "live") contentTypeParam = "live,camera";
else if (contentFilter === "video") contentTypeParam = "video,camera"; else if (contentFilter === "video") contentTypeParam = "video,camera";
else if (contentFilter === "image") contentTypeParam = "image"; else if (contentFilter === "image") contentTypeParam = "image";
else if (contentFilter === "text") contentTypeParam = "post"; else if (contentFilter === "text") contentTypeParam = "post";

2
src/styles/map.css
View File

@ -144,7 +144,7 @@
.below-stage{ .below-stage{
margin-top: calc(var(--sw-below-overlap) * -1); margin-top: calc(var(--sw-below-overlap) * -1);
position:relative; position:relative;
z-index:25; z-index:250;
padding: 0.5rem 1rem 1.5rem; padding: 0.5rem 1rem 1.5rem;
transition: opacity 320ms ease, filter 320ms ease; transition: opacity 320ms ease, filter 320ms ease;
} }