Remove swipe destination peek labels
Drop the 'Hourly'/'Daily'/etc. peek chip shown at the edge while swiping. The live finger-tracking slide remains; only the label affordance is removed.
This commit is contained in:
parent
f5488eaa98
commit
5bb35b278f
124
dist/index.html
vendored
124
dist/index.html
vendored
@ -7188,7 +7188,7 @@ var root_4$3 = /* @__PURE__ */ from_html(`<span class="lightning-strike svelte-t
|
||||
var root_5$3 = /* @__PURE__ */ from_html(`<div class="lightning-layer svelte-tjvfz7" aria-label="Lightning strikes"></div>`);
|
||||
var root_6$2 = /* @__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_7$1 = /* @__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_8$1 = /* @__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_8 = /* @__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_9 = /* @__PURE__ */ from_html(`<div class="lightning-status svelte-tjvfz7"><span class="text-xs svelte-tjvfz7">⏳ Loading lightning...</span></div>`);
|
||||
var root_10 = /* @__PURE__ */ from_html(`<div class="lightning-status lightning-status-err svelte-tjvfz7"><span class="text-xs svelte-tjvfz7"> </span></div>`);
|
||||
var root_11 = /* @__PURE__ */ from_html(`<div class="lightning-status svelte-tjvfz7"><span class="text-xs svelte-tjvfz7">⚡ No recent strikes nearby</span></div>`);
|
||||
@ -7536,7 +7536,7 @@ function PrecipitationRadar($$anchor, $$props) {
|
||||
});
|
||||
var node_7 = sibling(node_6, 2);
|
||||
var consequent_6 = ($$anchor) => {
|
||||
var div_8 = root_8$1();
|
||||
var div_8 = root_8();
|
||||
var span_2 = child(div_8);
|
||||
var text_1 = child(span_2);
|
||||
reset(span_2);
|
||||
@ -8250,10 +8250,9 @@ var root_1 = /* @__PURE__ */ from_html(`<span class="current-badge svelte-1n46o8
|
||||
var root_2 = /* @__PURE__ */ from_html(`<div class="error-banner animate-slide-down svelte-1n46o8q"><span> </span> <button class="btn-icon" aria-label="Dismiss">✕</button></div>`);
|
||||
var root_3 = /* @__PURE__ */ from_html(`<div class="empty-state svelte-1n46o8q"><div class="empty-icon svelte-1n46o8q">🌍</div> <h2 class="svelte-1n46o8q">Welcome to WeatherLens</h2> <p class="text-muted"> </p> <button class="btn btn-primary mt-3">+ Add a Location</button></div>`);
|
||||
var root_4 = /* @__PURE__ */ from_html(`<div class="loading-state svelte-1n46o8q"><div class="loading-spinner svelte-1n46o8q">⏳</div> <p class="text-muted mt-2">Loading weather data...</p></div>`);
|
||||
var root_5 = /* @__PURE__ */ from_html(`<span aria-hidden="true"> </span>`);
|
||||
var root_6 = /* @__PURE__ */ from_html(`<div class="animate-fade-in"><!></div>`);
|
||||
var root_7 = /* @__PURE__ */ from_html(`<div class="mobile-nav svelte-1n46o8q"><button>Now</button> <button>Hourly</button> <button>Daily</button> <button>More</button> <button>Radar</button></div> <div class="desktop-tabs svelte-1n46o8q"><button>Current</button> <button>Hourly</button> <button>7-Day Forecast</button> <button>Details</button> <button>Radar</button></div> <div><div><!> <!></div></div>`, 1);
|
||||
var root_8 = /* @__PURE__ */ from_html(`<div class="app-shell svelte-1n46o8q"><div class="mobile-header svelte-1n46o8q"><button class="btn-icon" aria-label="Toggle menu"> </button> <span class="mobile-title svelte-1n46o8q"> </span> <button class="btn-icon" aria-label="Settings" title="Settings">⚙️</button> <!></div> <!> <aside><!></aside> <main class="main-content svelte-1n46o8q"><div class="top-bar svelte-1n46o8q"><div class="top-bar-title svelte-1n46o8q"><h1 class="svelte-1n46o8q"> </h1> <!></div> <div class="top-bar-actions svelte-1n46o8q"><!></div></div> <!> <!> <!> <!></main> <!> <!></div>`);
|
||||
var root_5 = /* @__PURE__ */ from_html(`<div class="animate-fade-in"><!></div>`);
|
||||
var root_6 = /* @__PURE__ */ from_html(`<div class="mobile-nav svelte-1n46o8q"><button>Now</button> <button>Hourly</button> <button>Daily</button> <button>More</button> <button>Radar</button></div> <div class="desktop-tabs svelte-1n46o8q"><button>Current</button> <button>Hourly</button> <button>7-Day Forecast</button> <button>Details</button> <button>Radar</button></div> <div><div><!></div></div>`, 1);
|
||||
var root_7 = /* @__PURE__ */ from_html(`<div class="app-shell svelte-1n46o8q"><div class="mobile-header svelte-1n46o8q"><button class="btn-icon" aria-label="Toggle menu"> </button> <span class="mobile-title svelte-1n46o8q"> </span> <button class="btn-icon" aria-label="Settings" title="Settings">⚙️</button> <!></div> <!> <aside><!></aside> <main class="main-content svelte-1n46o8q"><div class="top-bar svelte-1n46o8q"><div class="top-bar-title svelte-1n46o8q"><h1 class="svelte-1n46o8q"> </h1> <!></div> <div class="top-bar-actions svelte-1n46o8q"><!></div></div> <!> <!> <!> <!></main> <!> <!></div>`);
|
||||
function App($$anchor, $$props) {
|
||||
push($$props, true);
|
||||
let viewMode = /* @__PURE__ */ state(proxy(parseHash(typeof window !== "undefined" ? window.location.hash : "")));
|
||||
@ -8274,13 +8273,6 @@ function App($$anchor, $$props) {
|
||||
const SWIPE_THRESHOLD = 70;
|
||||
const AXIS_THRESHOLD = 12;
|
||||
const SWIPE_TIMEOUT = 160;
|
||||
const TAB_LABELS = {
|
||||
current: "Now",
|
||||
hourly: "Hourly",
|
||||
daily: "Daily",
|
||||
detail: "More",
|
||||
radar: "Radar"
|
||||
};
|
||||
let contentEl = /* @__PURE__ */ state(null);
|
||||
let swiping = /* @__PURE__ */ state(false);
|
||||
let swipeAnchor = /* @__PURE__ */ state(null);
|
||||
@ -8288,7 +8280,6 @@ function App($$anchor, $$props) {
|
||||
let swipeLock = /* @__PURE__ */ state(null);
|
||||
let settling = /* @__PURE__ */ state(false);
|
||||
const clampIdx = (i) => Math.min(Math.max(i, 0), VALID_VIEWS.length - 1);
|
||||
const peekView = /* @__PURE__ */ user_derived(() => get(swiping) && get(swipeLock) === "x" && VALID_VIEWS.includes(get(viewMode)) ? VALID_VIEWS[clampIdx(VALID_VIEWS.indexOf(get(viewMode)) + (get(swipeDX) < 0 ? 1 : -1))] : null);
|
||||
function onSwipeStart(e) {
|
||||
if (get(viewMode) === "radar" || !e.touches || !e.touches[0]) return;
|
||||
const t = e.touches[0];
|
||||
@ -8430,7 +8421,7 @@ function App($$anchor, $$props) {
|
||||
const newest = updated[updated.length - 1];
|
||||
if (newest) app$1.selectLocation(newest.id);
|
||||
}
|
||||
var div = root_8();
|
||||
var div = root_7();
|
||||
var div_1 = child(div);
|
||||
var button = child(div_1);
|
||||
var text = child(button, true);
|
||||
@ -8510,8 +8501,8 @@ function App($$anchor, $$props) {
|
||||
if (app$1.loading && !app$1.forecastData) $$render(consequent_4);
|
||||
});
|
||||
var node_8 = sibling(node_7, 2);
|
||||
var consequent_11 = ($$anchor) => {
|
||||
var fragment = root_7();
|
||||
var consequent_10 = ($$anchor) => {
|
||||
var fragment = root_6();
|
||||
var div_8 = first_child(fragment);
|
||||
var button_5 = child(div_8);
|
||||
let classes_1;
|
||||
@ -8542,59 +8533,41 @@ function App($$anchor, $$props) {
|
||||
let classes_12;
|
||||
var node_9 = child(div_11);
|
||||
var consequent_5 = ($$anchor) => {
|
||||
var span_3 = root_5();
|
||||
let classes_13;
|
||||
var text_5 = child(span_3, true);
|
||||
reset(span_3);
|
||||
template_effect(() => {
|
||||
classes_13 = set_class(span_3, 1, "swipe-peek svelte-1n46o8q", null, classes_13, {
|
||||
"from-left": get(swipeDX) >= 0,
|
||||
"from-right": get(swipeDX) < 0
|
||||
});
|
||||
set_text(text_5, TAB_LABELS[get(peekView)]);
|
||||
});
|
||||
append($$anchor, span_3);
|
||||
};
|
||||
if_block(node_9, ($$render) => {
|
||||
if (get(peekView) && TAB_LABELS[get(peekView)]) $$render(consequent_5);
|
||||
});
|
||||
var node_10 = sibling(node_9, 2);
|
||||
var consequent_6 = ($$anchor) => {
|
||||
var div_12 = root_6();
|
||||
var div_12 = root_5();
|
||||
CurrentWeather(child(div_12), {});
|
||||
reset(div_12);
|
||||
append($$anchor, div_12);
|
||||
};
|
||||
var consequent_7 = ($$anchor) => {
|
||||
var div_13 = root_6();
|
||||
var consequent_6 = ($$anchor) => {
|
||||
var div_13 = root_5();
|
||||
HourlyForecast(child(div_13), {});
|
||||
reset(div_13);
|
||||
append($$anchor, div_13);
|
||||
};
|
||||
var consequent_8 = ($$anchor) => {
|
||||
var div_14 = root_6();
|
||||
var consequent_7 = ($$anchor) => {
|
||||
var div_14 = root_5();
|
||||
DailyForecast(child(div_14), {});
|
||||
reset(div_14);
|
||||
append($$anchor, div_14);
|
||||
};
|
||||
var consequent_9 = ($$anchor) => {
|
||||
var div_15 = root_6();
|
||||
var consequent_8 = ($$anchor) => {
|
||||
var div_15 = root_5();
|
||||
WeatherDetail(child(div_15), {});
|
||||
reset(div_15);
|
||||
append($$anchor, div_15);
|
||||
};
|
||||
var consequent_10 = ($$anchor) => {
|
||||
var div_16 = root_6();
|
||||
var consequent_9 = ($$anchor) => {
|
||||
var div_16 = root_5();
|
||||
PrecipitationRadar(child(div_16), {});
|
||||
reset(div_16);
|
||||
append($$anchor, div_16);
|
||||
};
|
||||
if_block(node_10, ($$render) => {
|
||||
if (get(viewMode) === "current") $$render(consequent_6);
|
||||
else if (get(viewMode) === "hourly") $$render(consequent_7, 1);
|
||||
else if (get(viewMode) === "daily") $$render(consequent_8, 2);
|
||||
else if (get(viewMode) === "detail") $$render(consequent_9, 3);
|
||||
else if (get(viewMode) === "radar") $$render(consequent_10, 4);
|
||||
if_block(node_9, ($$render) => {
|
||||
if (get(viewMode) === "current") $$render(consequent_5);
|
||||
else if (get(viewMode) === "hourly") $$render(consequent_6, 1);
|
||||
else if (get(viewMode) === "daily") $$render(consequent_7, 2);
|
||||
else if (get(viewMode) === "detail") $$render(consequent_8, 3);
|
||||
else if (get(viewMode) === "radar") $$render(consequent_9, 4);
|
||||
});
|
||||
reset(div_11);
|
||||
reset(div_10);
|
||||
@ -8631,18 +8604,18 @@ function App($$anchor, $$props) {
|
||||
append($$anchor, fragment);
|
||||
};
|
||||
if_block(node_8, ($$render) => {
|
||||
if (app$1.forecastData && app$1.selectedLocation) $$render(consequent_11);
|
||||
if (app$1.forecastData && app$1.selectedLocation) $$render(consequent_10);
|
||||
});
|
||||
reset(main);
|
||||
var node_16 = sibling(main, 2);
|
||||
var consequent_12 = ($$anchor) => {
|
||||
var node_15 = sibling(main, 2);
|
||||
var consequent_11 = ($$anchor) => {
|
||||
SettingsDialog($$anchor, { onClose: () => app$1.showSettings = false });
|
||||
};
|
||||
if_block(node_16, ($$render) => {
|
||||
if (app$1.showSettings) $$render(consequent_12);
|
||||
if_block(node_15, ($$render) => {
|
||||
if (app$1.showSettings) $$render(consequent_11);
|
||||
});
|
||||
var node_17 = sibling(node_16, 2);
|
||||
var consequent_13 = ($$anchor) => {
|
||||
var node_16 = sibling(node_15, 2);
|
||||
var consequent_12 = ($$anchor) => {
|
||||
AddLocationDialog($$anchor, {
|
||||
onClose: () => {
|
||||
app$1.showAddLocation = false;
|
||||
@ -8651,8 +8624,8 @@ function App($$anchor, $$props) {
|
||||
onAdd: handleAddLocation
|
||||
});
|
||||
};
|
||||
if_block(node_17, ($$render) => {
|
||||
if (app$1.showAddLocation) $$render(consequent_13);
|
||||
if_block(node_16, ($$render) => {
|
||||
if (app$1.showAddLocation) $$render(consequent_12);
|
||||
});
|
||||
reset(div);
|
||||
template_effect(() => {
|
||||
@ -8674,7 +8647,7 @@ delegate([
|
||||
]);
|
||||
//#endregion
|
||||
//#region src/main.js
|
||||
console.info({ commit_hash: "09cea275b7ac2fd46d2184d84524ee1c3ddcbe60" });
|
||||
console.info({ commit_hash: "f5488eaa983eaef1a39ca585192aa9b7b450a2c4" });
|
||||
mount(App, { target: document.getElementById("app") });
|
||||
//#endregion</script>
|
||||
<style rel="stylesheet" crossorigin>/* ===== CSS Reset & Base ===== */
|
||||
@ -11027,37 +11000,6 @@ input::placeholder {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.swipe-peek.svelte-1n46o8q {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
z-index: 5;
|
||||
padding: 5px 10px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-primary);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
|
||||
opacity: 0;
|
||||
animation: svelte-1n46o8q-peek-in 160ms ease-out forwards;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.swipe-peek.from-left.svelte-1n46o8q {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.swipe-peek.from-right.svelte-1n46o8q {
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
@keyframes svelte-1n46o8q-peek-in {
|
||||
from { opacity: 0; transform: translateX(10px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1023px) {
|
||||
|
||||
@ -45,7 +45,6 @@
|
||||
const SWIPE_THRESHOLD = 70 // px of horizontal travel before it counts as a swipe
|
||||
const AXIS_THRESHOLD = 12 // travel before we decide horizontal vs vertical
|
||||
const SWIPE_TIMEOUT = 160 // ms for the snap-back / snap-forward animation
|
||||
const TAB_LABELS = { current: 'Now', hourly: 'Hourly', daily: 'Daily', detail: 'More', radar: 'Radar' }
|
||||
|
||||
let contentEl = $state(null) // bound to .content-area, gives travel distance
|
||||
let swiping = $state(false) // a touch drag is in progress
|
||||
@ -58,12 +57,6 @@
|
||||
|
||||
// The destination view to hint at as the finger drags (only after we've
|
||||
// committed to a horizontal swipe, so vertical scrolling shows nothing).
|
||||
const peekView = $derived(
|
||||
swiping && swipeLock === 'x' && VALID_VIEWS.includes(viewMode)
|
||||
? VALID_VIEWS[clampIdx(VALID_VIEWS.indexOf(viewMode) + (swipeDX < 0 ? 1 : -1))]
|
||||
: null
|
||||
)
|
||||
|
||||
function onSwipeStart(e) {
|
||||
if (viewMode === 'radar' || !e.touches || !e.touches[0]) return
|
||||
const t = e.touches[0]
|
||||
@ -366,14 +359,6 @@
|
||||
class:settle={settling}
|
||||
style={slideStyle}
|
||||
>
|
||||
{#if peekView && TAB_LABELS[peekView]}
|
||||
<span
|
||||
class="swipe-peek"
|
||||
class:from-left={swipeDX >= 0}
|
||||
class:from-right={swipeDX < 0}
|
||||
aria-hidden="true"
|
||||
>{TAB_LABELS[peekView]}</span>
|
||||
{/if}
|
||||
{#if viewMode === 'current'}
|
||||
<div class="animate-fade-in">
|
||||
<CurrentWeather />
|
||||
@ -670,37 +655,6 @@
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.swipe-peek {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
z-index: 5;
|
||||
padding: 5px 10px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-primary);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
|
||||
opacity: 0;
|
||||
animation: peek-in 160ms ease-out forwards;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.swipe-peek.from-left {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.swipe-peek.from-right {
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
@keyframes peek-in {
|
||||
from { opacity: 0; transform: translateX(10px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1023px) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user