v0.0.21: Fix camera pins, carousel gallery, polaroid text
- Camera posts now use small blue pins with red flashing dot - Fixed carousel gallery arrows for posts with multiple images - Added title and source text to polaroid mini cards - Bumped version to 0.0.21 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Sociowire Dev
parent
2a46aff450
commit
0e741329cb
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "sociowire-frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"version": "0.0.21",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host 0.0.0.0",
|
||||
|
|
|
|||
|
|
@ -251,7 +251,7 @@ export default function App() {
|
|||
<footer className="sw-footer">
|
||||
<div className="sw-footer-inner">
|
||||
<div className="sw-footer-brand">SOCIOWIRE</div>
|
||||
<div className="sw-footer-brand">© Sociowire v0.0019</div>
|
||||
<div className="sw-footer-brand">© Sociowire v0.0.21</div>
|
||||
<div id="sw-weather-debug" style={{color: '#0ea5e9', fontSize: '10px'}}></div>
|
||||
<nav className="sw-footer-nav" aria-label="Site">
|
||||
<a href="/">{t('nav.home')}</a>
|
||||
|
|
|
|||
|
|
@ -286,6 +286,23 @@ function applyPostDetails(modalWrap, post) {
|
|||
const indicatorHtml = heroHasGallery
|
||||
? `<div class="sw-modal-gallery-indicator" aria-live="polite"><span class="sw-modal-gallery-current">1</span><span class="sw-modal-gallery-separator">/</span><span class="sw-modal-gallery-total">${heroGallery.length}</span></div>`
|
||||
: "";
|
||||
// DEBUG v0.0.21 - send debug to server
|
||||
try {
|
||||
fetch('/api/debug-log', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
event: 'modal_gallery',
|
||||
post_id: post?.id,
|
||||
media_urls_raw: post?.media_urls,
|
||||
media_urls_count: Array.isArray(post?.media_urls) ? post.media_urls.length : 0,
|
||||
gallery_count: heroGallery.length,
|
||||
gallery_items: heroGallery,
|
||||
has_gallery: heroHasGallery,
|
||||
content_type: post?.content_type
|
||||
})
|
||||
}).catch(() => {});
|
||||
} catch {}
|
||||
target.innerHTML = `${heroImageHtml}${arrowHtml}${indicatorHtml}`;
|
||||
bindHeroLightbox(modalWrap);
|
||||
if (heroHasGallery) {
|
||||
|
|
@ -1192,7 +1209,10 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
|
|||
const sub = (postData?.sub_category || postData?.subCategory || "").toString().trim();
|
||||
const metaLeft = author ? `by ${author}` : "";
|
||||
const metaRight = sub ? sub : "";
|
||||
const img = heroImageForPost(postData);
|
||||
const heroGallery = collectGalleryImages(postData);
|
||||
const img = heroGallery[0] || heroImageForPost(postData);
|
||||
const heroFullSrc = heroGallery[0] || fullImageForPost(postData);
|
||||
const heroHasGallery = heroGallery.length > 1;
|
||||
const truth = truthScore(postData);
|
||||
const url = data?.url || "";
|
||||
const postID = postData?.id || postData?.ID || postData?.post_id || 0;
|
||||
|
|
@ -1389,7 +1409,7 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
|
|||
</div>
|
||||
</div>
|
||||
` : img
|
||||
? `<img src="${escapeHtml(img)}" data-fullsrc="${escapeHtml(fullImageForPost(postData))}" alt="" loading="lazy" />`
|
||||
? `<img src="${escapeHtml(img)}" data-fullsrc="${escapeHtml(heroFullSrc)}" alt="" loading="lazy" data-gallery-index="0" />${heroHasGallery ? `<button class="sw-modal-hero-arrow left" type="button" aria-label="Previous image"><i class="fa-solid fa-chevron-left"></i></button><button class="sw-modal-hero-arrow right" type="button" aria-label="Next image"><i class="fa-solid fa-chevron-right"></i></button><div class="sw-modal-gallery-indicator" aria-live="polite"><span class="sw-modal-gallery-current">1</span><span class="sw-modal-gallery-separator">/</span><span class="sw-modal-gallery-total">${heroGallery.length}</span></div>` : ''}`
|
||||
: `<div class="sw-modal-hero-fallback"><div class="sw-modal-hero-fallback-inner"><i class="${categoryIconClass(postData)}"></i><span>${escapeHtml(normCatLabel(postData))}</span></div></div>`
|
||||
}
|
||||
</div>
|
||||
|
|
@ -1492,6 +1512,9 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
|
|||
}
|
||||
|
||||
bindHeroLightbox(modalWrap);
|
||||
if (heroHasGallery) {
|
||||
initModalGallery(modalWrap, heroGallery);
|
||||
}
|
||||
|
||||
backdrop.appendChild(modalWrap);
|
||||
document.body.appendChild(backdrop);
|
||||
|
|
|
|||
|
|
@ -131,12 +131,19 @@ export function prioritizePosts(posts, viewCenter, options = {}) {
|
|||
let hasTiers = false;
|
||||
for (const post of posts) {
|
||||
const tier = (post?.tier || '').toLowerCase();
|
||||
const contentType = (post?.content_type || '').toLowerCase();
|
||||
|
||||
// DEBUG: Log tier values
|
||||
if (posts.indexOf(post) < 5) {
|
||||
console.log('[prioritizePosts] post:', post.id, 'tier:', post.tier, 'content_type:', post.content_type);
|
||||
}
|
||||
|
||||
// Camera posts ALWAYS use simple markers (small blue pin with red dot)
|
||||
if (contentType === 'camera') {
|
||||
simpleMarkerPosts.push(post);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (tier === 'premium') {
|
||||
fullCardPosts.push(post);
|
||||
hasTiers = true;
|
||||
|
|
|
|||
|
|
@ -11,12 +11,13 @@
|
|||
export const TEMPLATE_SPECS = {
|
||||
polaroid: {
|
||||
mini_spec: {
|
||||
size: { w: 180, h: 210 },
|
||||
size: { w: 180, h: 230 },
|
||||
background: { type: "solid", value: "#ffffff" },
|
||||
radius: 8,
|
||||
layers: [
|
||||
{ id: "image", type: "image", x: 10, y: 10, w: 160, h: 160, bind: "data.image", radius: 4 },
|
||||
{ id: "author", type: "text", x: 10, y: 178, w: 160, h: 24, bind: "data.source", style: "text.polaroidCaption", maxLines: 1 },
|
||||
{ id: "title", type: "text", x: 10, y: 176, w: 160, h: 28, bind: "data.headline", style: "text.polaroidTitle", maxLines: 2 },
|
||||
{ id: "author", type: "text", x: 10, y: 206, w: 160, h: 18, bind: "data.source", style: "text.polaroidCaption", maxLines: 1 },
|
||||
],
|
||||
},
|
||||
full_spec: {
|
||||
|
|
|
|||
|
|
@ -1416,8 +1416,14 @@ export function usePostsEngine({
|
|||
const id = getId(normalized);
|
||||
const have = new Set((markersRef.current || []).map((x) => x.id));
|
||||
if (id != null && !have.has(id)) {
|
||||
// Camera posts always use simple markers (small blue pin with red dot)
|
||||
const ct = (normalized?.content_type || '').toLowerCase();
|
||||
if (ct === 'camera') {
|
||||
createSimpleMarkerForPost(normalized, mapRef, markersRef, expandedElRef, theme);
|
||||
} else {
|
||||
createMarkerForPost(normalized, mapRef, markersRef, expandedElRef, theme);
|
||||
}
|
||||
}
|
||||
|
||||
setVisiblePosts((current) => [normalized, ...current]);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@ export const cardTokens = {
|
|||
h1: { color: "#E9EEF8", fontSize: 22, fontWeight: 900, lineHeight: "26px" },
|
||||
body: { color: "#D7DEED", fontSize: 14, fontWeight: 600, lineHeight: "18px" },
|
||||
icon: { color: "rgba(255,255,255,0.3)", fontSize: 48, fontFamily: "Font Awesome 6 Free", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 900 },
|
||||
polaroidTitle: { color: "#1a1a1a", fontSize: 11, fontWeight: 700, lineHeight: "13px" },
|
||||
polaroidCaption: { color: "#666666", fontSize: 10, fontWeight: 500, lineHeight: "12px" },
|
||||
},
|
||||
chip: {
|
||||
news: { background: "rgba(78,161,255,0.18)", color: "#CFE6FF", fontWeight: 800, fontSize: 12, borderRadius: 999 },
|
||||
|
|
@ -57,6 +59,8 @@ export const cardTokens = {
|
|||
h1: { color: "#F0F7FF", fontSize: 22, fontWeight: 900, lineHeight: "26px" },
|
||||
body: { color: "#D7E9FF", fontSize: 14, fontWeight: 700, lineHeight: "18px" },
|
||||
icon: { color: "rgba(255,255,255,0.3)", fontSize: 48, fontFamily: "Font Awesome 6 Free", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 900 },
|
||||
polaroidTitle: { color: "#1a1a1a", fontSize: 11, fontWeight: 700, lineHeight: "13px" },
|
||||
polaroidCaption: { color: "#666666", fontSize: 10, fontWeight: 500, lineHeight: "12px" },
|
||||
},
|
||||
chip: {
|
||||
news: { background: "rgba(56,189,248,0.18)", color: "#D7F3FF", fontWeight: 900, fontSize: 12, borderRadius: 999 },
|
||||
|
|
@ -91,6 +95,8 @@ export const cardTokens = {
|
|||
h1: { color: "#0B1220", fontSize: 22, fontWeight: 900, lineHeight: "26px" },
|
||||
body: { color: "#1A2740", fontSize: 14, fontWeight: 600, lineHeight: "18px" },
|
||||
icon: { color: "rgba(0,0,0,0.15)", fontSize: 48, fontFamily: "Font Awesome 6 Free", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 900 },
|
||||
polaroidTitle: { color: "#1a1a1a", fontSize: 11, fontWeight: 700, lineHeight: "13px" },
|
||||
polaroidCaption: { color: "#666666", fontSize: 10, fontWeight: 500, lineHeight: "12px" },
|
||||
},
|
||||
chip: {
|
||||
news: { background: "rgba(30,107,255,0.12)", color: "#0B1220", fontWeight: 900, fontSize: 12, borderRadius: 999 },
|
||||
|
|
|
|||
Loading…
Reference in New Issue