Selfies: Difference between revisions
From Treeverse
More actions
m Protected "Selfies" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)) |
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:10px; border-radius:12px; | background:#f4f8f4; padding:8px 10px; border-radius:12px; | ||
box-shadow:0 6px 20px rgba(0,0,0,.25); | box-shadow:0 6px 20px rgba(0,0,0,.25); | ||
width: | width:260px; font:14px/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} | .tv-panel h3{margin:.2rem 0; font-size:16px} | ||
.tv-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%; | .tv-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%; | ||
box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.25); font-size:18px; line-height:1; background:#16a085} | box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.25); font-size:18px; line-height:1; background:#16a085} | ||
.tv-input{display:block;width:100%;margin:6px 0;box-sizing:border-box} | .tv-input{display:block;width:100%;margin:6px 0;box-sizing:border-box} | ||
.tv-text{padding: | .tv-text{padding:7px 9px;border:1px solid #ccc;border-radius:6px;font-size:14px} | ||
.tv-btn{display:block;width:100%;margin-top:8px;padding: | .tv-btn{display:block;width:100%;margin-top:8px;padding:10px;border:none;border-radius:6px; | ||
font-weight:bold;cursor:pointer} | font-weight:bold;cursor:pointer;font-size:14px} | ||
.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:8px;border:1px solid #ccc;border-radius:6px;font-size: | #m-photo{padding:8px;border:1px solid #ccc;border-radius:6px;font-size:14px;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} | ||
.tv-popup .leaflet-popup-content{margin:10px 12px; width: | /* Popup wider than default; selfie at 75% width */ | ||
.tv-popup .leaflet-popup-content img{display:block;width: | .tv-popup .leaflet-popup-content{margin:10px 12px; width:360px !important; max-width:360px !important} | ||
.tv-popup .leaflet-popup-content img{display:block;width:75%;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 54: | Line 55: | ||
<div style="font-size:12px;opacity:.75;margin-top:6px;line-height:1.4"> | <div style="font-size:12px;opacity:.75;margin-top:6px;line-height:1.4"> | ||
Click on | Click on pin to view selfie.<br> | ||
Right-click on | Right-click on pin to delete (if Delete Mode is ON). | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 85: | Line 86: | ||
L.imageOverlay(MAP_IMAGE_URL, bounds, { crossOrigin:'anonymous' }).addTo(map); | L.imageOverlay(MAP_IMAGE_URL, bounds, { crossOrigin:'anonymous' }).addTo(map); | ||
map.fitBounds(bounds); | map.fitBounds(bounds); | ||
// After fitting, bias view to the extreme left (as far as bounds allow) | |||
setTimeout(() => { | |||
try { | |||
const z = map.getZoom(); | |||
map.setView([h/2, 0], z, { animate:false }); // center near left edge | |||
} catch(e) {} | |||
}, 0); | |||
const popupOpts = { className:'tv-popup', maxWidth:600, minWidth:220, | const popupOpts = { className:'tv-popup', maxWidth:600, minWidth:220, | ||