Selfies: Difference between revisions
From Treeverse
More actions
No edit summary |
No edit summary |
||
| Line 10: | Line 10: | ||
.tv-panel{ | .tv-panel{ | ||
position:absolute; top:10px; right:10px; z-index:1000; | position:absolute; top:10px; right:10px; z-index:1000; | ||
background:#f4f8f4; padding:8px | background:#f4f8f4; padding:6px 8px; border-radius:10px; | ||
box-shadow:0 6px 20px rgba(0,0,0,.25); | box-shadow:0 6px 20px rgba(0,0,0,.25); | ||
width: | width:220px; font:13px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; | ||
border:2px solid #3b5d3f; | border:2px solid #3b5d3f; | ||
} | } | ||
.tv-panel h3{margin:.2rem 0; font-size: | .tv-panel h3{margin:.2rem 0; font-size:15px} | ||
.tv-icon{display:flex;align-items:center;justify-content:center;width: | .tv-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%; | ||
box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.25); font-size: | box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.25); font-size:16px; line-height:1; background:#16a085} | ||
.tv-input{display:block;width:100%;margin: | .tv-input{display:block;width:100%;margin:5px 0;box-sizing:border-box} | ||
.tv-text{padding: | .tv-text{padding:6px 8px;border:1px solid #ccc;border-radius:5px;font-size:13px} | ||
.tv-btn{display:block;width:100%;margin-top: | .tv-btn{display:block;width:100%;margin-top:6px;padding:9px;border:none;border-radius:6px; | ||
font-weight:bold;cursor:pointer;font-size: | font-weight:bold;cursor:pointer;font-size:13px} | ||
.btn-add{background:#27ae60;color:#fff} .btn-add:hover{background:#1f8b4d} | .btn-add{background:#27ae60;color:#fff} .btn-add:hover{background:#1f8b4d} | ||
.btn-del{background:#bdc3c7;color:#2c3e50;transition:background .2s,color .2s} | .btn-del{background:#bdc3c7;color:#2c3e50;transition:background .2s,color .2s} | ||
.btn-del.on{background:#e74c3c;color:#fff} | .btn-del.on{background:#e74c3c;color:#fff} | ||
#m-photo{padding: | #m-photo{padding:6px;border:1px solid #ccc;border-radius:5px;font-size:13px;background:#fff} | ||
#toast{position:fixed;top:10px;left:50%;transform:translateX(-50%); | #toast{position:fixed;top:10px;left:50%;transform:translateX(-50%); | ||
| Line 33: | Line 33: | ||
#toast.show{opacity:1} | #toast.show{opacity:1} | ||
/* Popup wider than default; selfie at | /* Popup wider than default; selfie at 100% width */ | ||
.tv-popup .leaflet-popup-content{margin:10px 12px; width:360px !important; max-width:360px !important} | .tv-popup .leaflet-popup-content{margin:10px 12px; width:360px !important; max-width:360px !important} | ||
.tv-popup .leaflet-popup-content img{display:block;width: | .tv-popup .leaflet-popup-content img{display:block;width:100%;height:auto;border-radius:6px;margin-top:6px} | ||
@media (max-width:520px){ | @media (max-width:520px){ | ||
.tv-popup .leaflet-popup-content{width:72vw !important; max-width:72vw !important} | .tv-popup .leaflet-popup-content{width:72vw !important; max-width:72vw !important} | ||
| Line 71: | Line 71: | ||
function toast(msg="Saved ✅"){ const t=document.getElementById('toast'); t.textContent=msg; t.classList.add('show'); setTimeout(()=>t.classList.remove('show'),1500); } | function toast(msg="Saved ✅"){ const t=document.getElementById('toast'); t.textContent=msg; t.classList.add('show'); setTimeout(()=>t.classList.remove('show'),1500); } | ||
function icon(){ return L.divIcon({ className:'tv-icon', html:'<span>📸</span>', iconSize:[ | function icon(){ return L.divIcon({ className:'tv-icon', html:'<span>📸</span>', iconSize:[28,28], iconAnchor:[14,28], popupAnchor:[0,-24] }); } | ||
function popupHtml(title,desc,imgUrl){ | function popupHtml(title,desc,imgUrl){ | ||
const t=(title||'').trim(); | const t=(title||'').trim(); | ||
| Line 87: | Line 87: | ||
map.fitBounds(bounds); | map.fitBounds(bounds); | ||
// After fitting, | // After fitting, force center near left edge | ||
setTimeout(() => { | setTimeout(() => { | ||
try { | try { | ||
const z = map.getZoom(); | const z = map.getZoom(); | ||
map.setView([h/2, 0], z, { animate:false }); | map.setView([h/2, 0], z, { animate:false }); | ||
} catch(e) {} | } catch(e) {} | ||
}, 0); | }, 0); | ||