Remove location label badge from radar pin
This commit is contained in:
parent
0e2a15dd28
commit
3635937085
157
dist/index.html
vendored
157
dist/index.html
vendored
@ -7091,14 +7091,13 @@ function WeatherDetail($$anchor, $$props) {
|
|||||||
var root$4 = /* @__PURE__ */ from_html(`<div class="radar-status radar-status-err svelte-tjvfz7"><span class="svelte-tjvfz7"> </span> <button class="btn btn-ghost btn-sm svelte-tjvfz7">Retry</button></div>`);
|
var root$4 = /* @__PURE__ */ from_html(`<div class="radar-status radar-status-err svelte-tjvfz7"><span class="svelte-tjvfz7"> </span> <button class="btn btn-ghost btn-sm svelte-tjvfz7">Retry</button></div>`);
|
||||||
var root_1$4 = /* @__PURE__ */ from_html(`<img class="radar-tile tile-overlay svelte-tjvfz7" alt="" loading="lazy" draggable="false"/>`);
|
var root_1$4 = /* @__PURE__ */ from_html(`<img class="radar-tile tile-overlay svelte-tjvfz7" alt="" loading="lazy" draggable="false"/>`);
|
||||||
var root_2$3 = /* @__PURE__ */ from_html(`<img class="radar-tile tile-base svelte-tjvfz7" alt="" loading="lazy" draggable="false"/> <!>`, 1);
|
var root_2$3 = /* @__PURE__ */ from_html(`<img class="radar-tile tile-base svelte-tjvfz7" alt="" loading="lazy" draggable="false"/> <!>`, 1);
|
||||||
var root_3$3 = /* @__PURE__ */ from_html(`<div class="marker-label-badge svelte-tjvfz7"> </div>`);
|
var root_3$3 = /* @__PURE__ */ from_html(`<div class="radar-layer svelte-tjvfz7"></div> <div class="location-marker svelte-tjvfz7"><span class="marker-dot svelte-tjvfz7"></span></div>`, 1);
|
||||||
var root_4$3 = /* @__PURE__ */ from_html(`<div class="radar-layer svelte-tjvfz7"></div> <div class="location-marker svelte-tjvfz7"><span class="marker-dot svelte-tjvfz7"></span></div> <!>`, 1);
|
var root_4$3 = /* @__PURE__ */ from_html(`<div class="radar-overlay svelte-tjvfz7"><span class="loading-spinner svelte-tjvfz7">⏳</span> <span class="text-xs text-muted svelte-tjvfz7">Loading radar...</span></div>`);
|
||||||
var root_5$3 = /* @__PURE__ */ from_html(`<div class="radar-overlay svelte-tjvfz7"><span class="loading-spinner svelte-tjvfz7">⏳</span> <span class="text-xs text-muted svelte-tjvfz7">Loading radar...</span></div>`);
|
var root_5$3 = /* @__PURE__ */ from_html(`<div class="radar-error-banner svelte-tjvfz7"><span class="text-xs svelte-tjvfz7"> </span> <button class="btn btn-ghost btn-sm svelte-tjvfz7">Retry</button></div>`);
|
||||||
var root_6$2 = /* @__PURE__ */ from_html(`<div class="radar-error-banner svelte-tjvfz7"><span class="text-xs svelte-tjvfz7"> </span> <button class="btn btn-ghost btn-sm svelte-tjvfz7">Retry</button></div>`);
|
var root_6$2 = /* @__PURE__ */ from_html(`<div class="timeline svelte-tjvfz7"><div class="tl-controls svelte-tjvfz7"><button class="ctrl-btn svelte-tjvfz7" aria-label="Previous" title="Previous">⏮</button> <button class="ctrl-btn play-btn svelte-tjvfz7"> </button> <button class="ctrl-btn svelte-tjvfz7" aria-label="Next" title="Next">⏭</button></div> <div class="tl-slider svelte-tjvfz7"><input type="range" min="0" aria-label="Radar timeline" class="svelte-tjvfz7"/></div> <div class="tl-info svelte-tjvfz7"><span class="tl-time svelte-tjvfz7"> </span> <span class="tl-date text-muted svelte-tjvfz7"> </span> <span> </span> <span class="text-muted text-xs svelte-tjvfz7"> </span></div></div>`);
|
||||||
var root_7$1 = /* @__PURE__ */ from_html(`<div class="timeline svelte-tjvfz7"><div class="tl-controls svelte-tjvfz7"><button class="ctrl-btn svelte-tjvfz7" aria-label="Previous" title="Previous">⏮</button> <button class="ctrl-btn play-btn svelte-tjvfz7"> </button> <button class="ctrl-btn svelte-tjvfz7" aria-label="Next" title="Next">⏭</button></div> <div class="tl-slider svelte-tjvfz7"><input type="range" min="0" aria-label="Radar timeline" class="svelte-tjvfz7"/></div> <div class="tl-info svelte-tjvfz7"><span class="tl-time svelte-tjvfz7"> </span> <span class="tl-date text-muted svelte-tjvfz7"> </span> <span> </span> <span class="text-muted text-xs svelte-tjvfz7"> </span></div></div>`);
|
var root_7$1 = /* @__PURE__ */ from_html(`<div class="radar-status svelte-tjvfz7"><p class="text-muted svelte-tjvfz7">No radar data available.</p> <button class="btn btn-ghost btn-sm svelte-tjvfz7">Reload</button></div>`);
|
||||||
var root_8 = /* @__PURE__ */ from_html(`<div class="radar-status svelte-tjvfz7"><p class="text-muted svelte-tjvfz7">No radar data available.</p> <button class="btn btn-ghost btn-sm svelte-tjvfz7">Reload</button></div>`);
|
var root_8 = /* @__PURE__ */ from_html(`<div style="touch-action: none" role="img" aria-label="Precipitation radar map"><!> <!> <!> <div class="zoom-ctrl svelte-tjvfz7"><button class="zoom-btn svelte-tjvfz7" aria-label="Zoom in">+</button> <span class="zoom-level text-xs text-muted svelte-tjvfz7"> </span> <button class="zoom-btn svelte-tjvfz7" aria-label="Zoom out">−</button></div></div> <!>`, 1);
|
||||||
var root_9 = /* @__PURE__ */ from_html(`<div style="touch-action: none" role="img" aria-label="Precipitation radar map"><!> <!> <!> <div class="zoom-ctrl svelte-tjvfz7"><button class="zoom-btn svelte-tjvfz7" aria-label="Zoom in">+</button> <span class="zoom-level text-xs text-muted svelte-tjvfz7"> </span> <button class="zoom-btn svelte-tjvfz7" aria-label="Zoom out">−</button></div></div> <!>`, 1);
|
var root_9 = /* @__PURE__ */ from_html(`<div class="radar-section svelte-tjvfz7"><h3 class="section-title svelte-tjvfz7">Precipitation Radar</h3> <!></div>`);
|
||||||
var root_10 = /* @__PURE__ */ from_html(`<div class="radar-section svelte-tjvfz7"><h3 class="section-title svelte-tjvfz7">Precipitation Radar</h3> <!></div>`);
|
|
||||||
function PrecipitationRadar($$anchor, $$props) {
|
function PrecipitationRadar($$anchor, $$props) {
|
||||||
push($$props, true);
|
push($$props, true);
|
||||||
let radarData = /* @__PURE__ */ state(null);
|
let radarData = /* @__PURE__ */ state(null);
|
||||||
@ -7273,7 +7272,7 @@ function PrecipitationRadar($$anchor, $$props) {
|
|||||||
}
|
}
|
||||||
const isPast = /* @__PURE__ */ user_derived(() => get(currentIdx) < get(pastFrames).length);
|
const isPast = /* @__PURE__ */ user_derived(() => get(currentIdx) < get(pastFrames).length);
|
||||||
const frameLabel = /* @__PURE__ */ user_derived(() => get(isPast) ? "Past" : "Forecast");
|
const frameLabel = /* @__PURE__ */ user_derived(() => get(isPast) ? "Past" : "Forecast");
|
||||||
var div = root_10();
|
var div = root_9();
|
||||||
var node = sibling(child(div), 2);
|
var node = sibling(child(div), 2);
|
||||||
var consequent = ($$anchor) => {
|
var consequent = ($$anchor) => {
|
||||||
var div_1 = root$4();
|
var div_1 = root$4();
|
||||||
@ -7287,12 +7286,12 @@ function PrecipitationRadar($$anchor, $$props) {
|
|||||||
append($$anchor, div_1);
|
append($$anchor, div_1);
|
||||||
};
|
};
|
||||||
var alternate = ($$anchor) => {
|
var alternate = ($$anchor) => {
|
||||||
var fragment = root_9();
|
var fragment = root_8();
|
||||||
var div_2 = first_child(fragment);
|
var div_2 = first_child(fragment);
|
||||||
let classes;
|
let classes;
|
||||||
var node_1 = child(div_2);
|
var node_1 = child(div_2);
|
||||||
var consequent_3 = ($$anchor) => {
|
var consequent_2 = ($$anchor) => {
|
||||||
var fragment_1 = root_4$3();
|
var fragment_1 = root_3$3();
|
||||||
var div_3 = first_child(fragment_1);
|
var div_3 = first_child(fragment_1);
|
||||||
each(div_3, 21, () => get(tiles), (t) => t.col + "_" + t.row, ($$anchor, t) => {
|
each(div_3, 21, () => get(tiles), (t) => t.col + "_" + t.row, ($$anchor, t) => {
|
||||||
var fragment_2 = root_2$3();
|
var fragment_2 = root_2$3();
|
||||||
@ -7317,20 +7316,6 @@ function PrecipitationRadar($$anchor, $$props) {
|
|||||||
});
|
});
|
||||||
reset(div_3);
|
reset(div_3);
|
||||||
var div_4 = sibling(div_3, 2);
|
var div_4 = sibling(div_3, 2);
|
||||||
var node_3 = sibling(div_4, 2);
|
|
||||||
var consequent_2 = ($$anchor) => {
|
|
||||||
var div_5 = root_3$3();
|
|
||||||
var text_1 = child(div_5, true);
|
|
||||||
reset(div_5);
|
|
||||||
template_effect(() => {
|
|
||||||
set_style(div_5, `transform: translate(calc(-50% + ${get(panX) ?? ""}px), ${get(panY) ?? ""}px)`);
|
|
||||||
set_text(text_1, get(loc).name);
|
|
||||||
});
|
|
||||||
append($$anchor, div_5);
|
|
||||||
};
|
|
||||||
if_block(node_3, ($$render) => {
|
|
||||||
if (get(loc)?.name) $$render(consequent_2);
|
|
||||||
});
|
|
||||||
template_effect(() => {
|
template_effect(() => {
|
||||||
set_style(div_3, `transform: translate(${get(panX) + 128 - get(pxOff)}px, ${get(panY) + 128 - get(pyOff)}px)`);
|
set_style(div_3, `transform: translate(${get(panX) + 128 - get(pxOff)}px, ${get(panY) + 128 - get(pyOff)}px)`);
|
||||||
set_attribute(div_4, "title", get(loc)?.name || "");
|
set_attribute(div_4, "title", get(loc)?.name || "");
|
||||||
@ -7339,81 +7324,81 @@ function PrecipitationRadar($$anchor, $$props) {
|
|||||||
append($$anchor, fragment_1);
|
append($$anchor, fragment_1);
|
||||||
};
|
};
|
||||||
if_block(node_1, ($$render) => {
|
if_block(node_1, ($$render) => {
|
||||||
if (get(loc)) $$render(consequent_3);
|
if (get(loc)) $$render(consequent_2);
|
||||||
});
|
});
|
||||||
var node_4 = sibling(node_1, 2);
|
var node_3 = sibling(node_1, 2);
|
||||||
var consequent_4 = ($$anchor) => {
|
var consequent_3 = ($$anchor) => {
|
||||||
append($$anchor, root_5$3());
|
append($$anchor, root_4$3());
|
||||||
};
|
};
|
||||||
if_block(node_4, ($$render) => {
|
if_block(node_3, ($$render) => {
|
||||||
if (get(loading)) $$render(consequent_4);
|
if (get(loading)) $$render(consequent_3);
|
||||||
});
|
});
|
||||||
var node_5 = sibling(node_4, 2);
|
var node_4 = sibling(node_3, 2);
|
||||||
var consequent_5 = ($$anchor) => {
|
var consequent_4 = ($$anchor) => {
|
||||||
var div_7 = root_6$2();
|
var div_6 = root_5$3();
|
||||||
var span_1 = child(div_7);
|
var span_1 = child(div_6);
|
||||||
var text_2 = child(span_1);
|
var text_1 = child(span_1);
|
||||||
reset(span_1);
|
reset(span_1);
|
||||||
var button_1 = sibling(span_1, 2);
|
var button_1 = sibling(span_1, 2);
|
||||||
reset(div_7);
|
reset(div_6);
|
||||||
template_effect(() => set_text(text_2, `⚠️ ${get(error) ?? ""}`));
|
template_effect(() => set_text(text_1, `⚠️ ${get(error) ?? ""}`));
|
||||||
delegated("click", button_1, loadRadar);
|
delegated("click", button_1, loadRadar);
|
||||||
append($$anchor, div_7);
|
append($$anchor, div_6);
|
||||||
};
|
};
|
||||||
if_block(node_5, ($$render) => {
|
if_block(node_4, ($$render) => {
|
||||||
if (get(error)) $$render(consequent_5);
|
if (get(error)) $$render(consequent_4);
|
||||||
});
|
});
|
||||||
var div_8 = sibling(node_5, 2);
|
var div_7 = sibling(node_4, 2);
|
||||||
var button_2 = child(div_8);
|
var button_2 = child(div_7);
|
||||||
var span_2 = sibling(button_2, 2);
|
var span_2 = sibling(button_2, 2);
|
||||||
var text_3 = child(span_2, true);
|
var text_2 = child(span_2, true);
|
||||||
reset(span_2);
|
reset(span_2);
|
||||||
var button_3 = sibling(span_2, 2);
|
var button_3 = sibling(span_2, 2);
|
||||||
reset(div_8);
|
reset(div_7);
|
||||||
reset(div_2);
|
reset(div_2);
|
||||||
var node_6 = sibling(div_2, 2);
|
var node_5 = sibling(div_2, 2);
|
||||||
var consequent_6 = ($$anchor) => {
|
var consequent_5 = ($$anchor) => {
|
||||||
var div_9 = root_7$1();
|
var div_8 = root_6$2();
|
||||||
var div_10 = child(div_9);
|
var div_9 = child(div_8);
|
||||||
var button_4 = child(div_10);
|
var button_4 = child(div_9);
|
||||||
var button_5 = sibling(button_4, 2);
|
var button_5 = sibling(button_4, 2);
|
||||||
var text_4 = child(button_5, true);
|
var text_3 = child(button_5, true);
|
||||||
reset(button_5);
|
reset(button_5);
|
||||||
var button_6 = sibling(button_5, 2);
|
var button_6 = sibling(button_5, 2);
|
||||||
|
reset(div_9);
|
||||||
|
var div_10 = sibling(div_9, 2);
|
||||||
|
var input = child(div_10);
|
||||||
|
remove_input_defaults(input);
|
||||||
reset(div_10);
|
reset(div_10);
|
||||||
var div_11 = sibling(div_10, 2);
|
var div_11 = sibling(div_10, 2);
|
||||||
var input = child(div_11);
|
var span_3 = child(div_11);
|
||||||
remove_input_defaults(input);
|
var text_4 = child(span_3, true);
|
||||||
reset(div_11);
|
|
||||||
var div_12 = sibling(div_11, 2);
|
|
||||||
var span_3 = child(div_12);
|
|
||||||
var text_5 = child(span_3, true);
|
|
||||||
reset(span_3);
|
reset(span_3);
|
||||||
var span_4 = sibling(span_3, 2);
|
var span_4 = sibling(span_3, 2);
|
||||||
var text_6 = child(span_4, true);
|
var text_5 = child(span_4, true);
|
||||||
reset(span_4);
|
reset(span_4);
|
||||||
var span_5 = sibling(span_4, 2);
|
var span_5 = sibling(span_4, 2);
|
||||||
let classes_1;
|
let classes_1;
|
||||||
var text_7 = child(span_5, true);
|
var text_6 = child(span_5, true);
|
||||||
reset(span_5);
|
reset(span_5);
|
||||||
var span_6 = sibling(span_5, 2);
|
var span_6 = sibling(span_5, 2);
|
||||||
var text_8 = child(span_6);
|
var text_7 = child(span_6);
|
||||||
reset(span_6);
|
reset(span_6);
|
||||||
reset(div_12);
|
reset(div_11);
|
||||||
reset(div_9);
|
reset(div_8);
|
||||||
template_effect(($0, $1) => {
|
template_effect(($0, $1) => {
|
||||||
set_attribute(button_5, "aria-label", get(playing) ? "Pause" : "Play");
|
set_attribute(button_5, "aria-label", get(playing) ? "Pause" : "Play");
|
||||||
set_text(text_4, get(playing) ? "⏸" : "▶");
|
set_text(text_3, get(playing) ? "⏸" : "▶");
|
||||||
set_attribute(input, "max", get(totalFrames) - 1);
|
set_attribute(input, "max", get(totalFrames) - 1);
|
||||||
set_value(input, get(currentIdx));
|
set_value(input, get(currentIdx));
|
||||||
set_text(text_5, $0);
|
set_text(text_4, $0);
|
||||||
set_text(text_6, $1);
|
set_text(text_5, $1);
|
||||||
classes_1 = set_class(span_5, 1, "tl-badge svelte-tjvfz7", null, classes_1, {
|
classes_1 = set_class(span_5, 1, "tl-badge svelte-tjvfz7", null, classes_1, {
|
||||||
"tl-past": get(isPast),
|
"tl-past": get(isPast),
|
||||||
"tl-future": !get(isPast)
|
"tl-future": !get(isPast)
|
||||||
});
|
});
|
||||||
set_text(text_7, get(frameLabel));
|
set_text(text_6, get(frameLabel));
|
||||||
set_text(text_8, `${get(currentIdx) + 1}/${get(totalFrames) ?? ""}`);
|
set_text(text_7, `${get(currentIdx) + 1}/${get(totalFrames) ?? ""}`);
|
||||||
}, [() => fmtTime(get(frame).time), () => fmtDate(get(frame).time)]);
|
}, [() => fmtTime(get(frame).time), () => fmtDate(get(frame).time)]);
|
||||||
delegated("click", button_4, stepBack);
|
delegated("click", button_4, stepBack);
|
||||||
delegated("click", button_5, togglePlay);
|
delegated("click", button_5, togglePlay);
|
||||||
@ -7426,23 +7411,23 @@ function PrecipitationRadar($$anchor, $$props) {
|
|||||||
}
|
}
|
||||||
set(currentIdx, Number(e.target.value), true);
|
set(currentIdx, Number(e.target.value), true);
|
||||||
});
|
});
|
||||||
append($$anchor, div_9);
|
append($$anchor, div_8);
|
||||||
};
|
};
|
||||||
var consequent_7 = ($$anchor) => {
|
var consequent_6 = ($$anchor) => {
|
||||||
var div_13 = root_8();
|
var div_12 = root_7$1();
|
||||||
var button_7 = sibling(child(div_13), 2);
|
var button_7 = sibling(child(div_12), 2);
|
||||||
reset(div_13);
|
reset(div_12);
|
||||||
delegated("click", button_7, loadRadar);
|
delegated("click", button_7, loadRadar);
|
||||||
append($$anchor, div_13);
|
append($$anchor, div_12);
|
||||||
};
|
};
|
||||||
if_block(node_6, ($$render) => {
|
if_block(node_5, ($$render) => {
|
||||||
if (get(frame)) $$render(consequent_6);
|
if (get(frame)) $$render(consequent_5);
|
||||||
else if (!get(loading)) $$render(consequent_7, 1);
|
else if (!get(loading)) $$render(consequent_6, 1);
|
||||||
});
|
});
|
||||||
template_effect(() => {
|
template_effect(() => {
|
||||||
classes = set_class(div_2, 1, "radar-viewport svelte-tjvfz7", null, classes, { dragging: get(dragging) });
|
classes = set_class(div_2, 1, "radar-viewport svelte-tjvfz7", null, classes, { dragging: get(dragging) });
|
||||||
button_2.disabled = get(zoom) >= 11;
|
button_2.disabled = get(zoom) >= 11;
|
||||||
set_text(text_3, get(zoom));
|
set_text(text_2, get(zoom));
|
||||||
button_3.disabled = get(zoom) <= 2;
|
button_3.disabled = get(zoom) <= 2;
|
||||||
});
|
});
|
||||||
delegated("pointerdown", div_2, onPointerDown);
|
delegated("pointerdown", div_2, onPointerDown);
|
||||||
@ -9580,22 +9565,6 @@ input::placeholder {
|
|||||||
50% { box-shadow: 0 0 20px rgba(56, 189, 248, 0.9); }
|
50% { box-shadow: 0 0 20px rgba(56, 189, 248, 0.9); }
|
||||||
}
|
}
|
||||||
|
|
||||||
.marker-label-badge.svelte-tjvfz7 {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(50% + 12px);
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
background: rgba(0, 0, 0, 0.75);
|
|
||||||
color: #fff;
|
|
||||||
padding: 3px 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 500;
|
|
||||||
white-space: nowrap;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Zoom controls ── */
|
/* ── Zoom controls ── */
|
||||||
.zoom-ctrl.svelte-tjvfz7 {
|
.zoom-ctrl.svelte-tjvfz7 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@ -228,14 +228,6 @@
|
|||||||
>
|
>
|
||||||
<span class="marker-dot"></span>
|
<span class="marker-dot"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Location label (scrolls with map via panX/panY) -->
|
|
||||||
{#if loc?.name}
|
|
||||||
<div
|
|
||||||
class="marker-label-badge"
|
|
||||||
style="transform: translate(calc(-50% + {panX}px), {panY}px)"
|
|
||||||
>{loc.name}</div>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Loading overlay -->
|
<!-- Loading overlay -->
|
||||||
@ -445,22 +437,6 @@
|
|||||||
50% { box-shadow: 0 0 20px rgba(56, 189, 248, 0.9); }
|
50% { box-shadow: 0 0 20px rgba(56, 189, 248, 0.9); }
|
||||||
}
|
}
|
||||||
|
|
||||||
.marker-label-badge {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(50% + 12px);
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
background: rgba(0, 0, 0, 0.75);
|
|
||||||
color: #fff;
|
|
||||||
padding: 3px 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 500;
|
|
||||||
white-space: nowrap;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Zoom controls ── */
|
/* ── Zoom controls ── */
|
||||||
.zoom-ctrl {
|
.zoom-ctrl {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user