exlim/weather_app
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove swipe destination peek labels
All checks were successful
Test, Build & Deploy / test-and-build (push) Successful in 39s
Details
Test, Build & Deploy / deploy (push) Successful in 22s
Details

Browse Source 
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:
hermes-explorigin 2026-08-30 19:26:19 +00:00
parent f5488eaa98
commit 5bb35b278f
2 changed files with 33 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
dist/index.html vendored
View File

@ -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_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_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_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_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_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>`); 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 node_7 = sibling(node_6, 2);
var consequent_6 = ($$anchor) => { var consequent_6 = ($$anchor) => {
var div_8 = root_8$1(); var div_8 = root_8();
var span_2 = child(div_8); var span_2 = child(div_8);
var text_1 = child(span_2); var text_1 = child(span_2);
reset(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_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_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_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_5 = /* @__PURE__ */ from_html(`<div class="animate-fade-in"><!></div>`);
var root_6 = /* @__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="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>`);
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>`);
function App($$anchor, $$props) { function App($$anchor, $$props) {
push($$props, true); push($$props, true);
let viewMode = /* @__PURE__ */ state(proxy(parseHash(typeof window !== "undefined" ? window.location.hash : ""))); 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 SWIPE_THRESHOLD = 70;
const AXIS_THRESHOLD = 12; const AXIS_THRESHOLD = 12;
const SWIPE_TIMEOUT = 160; const SWIPE_TIMEOUT = 160;
const TAB_LABELS = {
current: "Now",
hourly: "Hourly",
daily: "Daily",
detail: "More",
radar: "Radar"
};
let contentEl = /* @__PURE__ */ state(null); let contentEl = /* @__PURE__ */ state(null);
let swiping = /* @__PURE__ */ state(false); let swiping = /* @__PURE__ */ state(false);
let swipeAnchor = /* @__PURE__ */ state(null); let swipeAnchor = /* @__PURE__ */ state(null);
@ -8288,7 +8280,6 @@ function App($$anchor, $$props) {
let swipeLock = /* @__PURE__ */ state(null); let swipeLock = /* @__PURE__ */ state(null);
let settling = /* @__PURE__ */ state(false); let settling = /* @__PURE__ */ state(false);
const clampIdx = (i) => Math.min(Math.max(i, 0), VALID_VIEWS.length - 1); 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) { function onSwipeStart(e) {
if (get(viewMode) === "radar" || !e.touches || !e.touches[0]) return; if (get(viewMode) === "radar" || !e.touches || !e.touches[0]) return;
const t = e.touches[0]; const t = e.touches[0];
@ -8430,7 +8421,7 @@ function App($$anchor, $$props) {
const newest = updated[updated.length - 1]; const newest = updated[updated.length - 1];
if (newest) app$1.selectLocation(newest.id); if (newest) app$1.selectLocation(newest.id);
} }
var div = root_8(); var div = root_7();
var div_1 = child(div); var div_1 = child(div);
var button = child(div_1); var button = child(div_1);
var text = child(button, true); var text = child(button, true);
@ -8510,8 +8501,8 @@ function App($$anchor, $$props) {
if (app$1.loading && !app$1.forecastData) $$render(consequent_4); if (app$1.loading && !app$1.forecastData) $$render(consequent_4);
}); });
var node_8 = sibling(node_7, 2); var node_8 = sibling(node_7, 2);
var consequent_11 = ($$anchor) => { var consequent_10 = ($$anchor) => {
var fragment = root_7(); var fragment = root_6();
var div_8 = first_child(fragment); var div_8 = first_child(fragment);
var button_5 = child(div_8); var button_5 = child(div_8);
let classes_1; let classes_1;
@ -8542,59 +8533,41 @@ function App($$anchor, $$props) {
let classes_12; let classes_12;
var node_9 = child(div_11); var node_9 = child(div_11);
var consequent_5 = ($$anchor) => { var consequent_5 = ($$anchor) => {
var span_3 = root_5(); var div_12 = 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();
CurrentWeather(child(div_12), {}); CurrentWeather(child(div_12), {});
reset(div_12); reset(div_12);
append($$anchor, div_12); append($$anchor, div_12);
}; };
var consequent_7 = ($$anchor) => { var consequent_6 = ($$anchor) => {
var div_13 = root_6(); var div_13 = root_5();
HourlyForecast(child(div_13), {}); HourlyForecast(child(div_13), {});
reset(div_13); reset(div_13);
append($$anchor, div_13); append($$anchor, div_13);
}; };
var consequent_8 = ($$anchor) => { var consequent_7 = ($$anchor) => {
var div_14 = root_6(); var div_14 = root_5();
DailyForecast(child(div_14), {}); DailyForecast(child(div_14), {});
reset(div_14); reset(div_14);
append($$anchor, div_14); append($$anchor, div_14);
}; };
var consequent_9 = ($$anchor) => { var consequent_8 = ($$anchor) => {
var div_15 = root_6(); var div_15 = root_5();
WeatherDetail(child(div_15), {}); WeatherDetail(child(div_15), {});
reset(div_15); reset(div_15);
append($$anchor, div_15); append($$anchor, div_15);
}; };
var consequent_10 = ($$anchor) => { var consequent_9 = ($$anchor) => {
var div_16 = root_6(); var div_16 = root_5();
PrecipitationRadar(child(div_16), {}); PrecipitationRadar(child(div_16), {});
reset(div_16); reset(div_16);
append($$anchor, div_16); append($$anchor, div_16);
}; };
if_block(node_10, ($$render) => { if_block(node_9, ($$render) => {
if (get(viewMode) === "current") $$render(consequent_6); if (get(viewMode) === "current") $$render(consequent_5);
else if (get(viewMode) === "hourly") $$render(consequent_7, 1); else if (get(viewMode) === "hourly") $$render(consequent_6, 1);
else if (get(viewMode) === "daily") $$render(consequent_8, 2); else if (get(viewMode) === "daily") $$render(consequent_7, 2);
else if (get(viewMode) === "detail") $$render(consequent_9, 3); else if (get(viewMode) === "detail") $$render(consequent_8, 3);
else if (get(viewMode) === "radar") $$render(consequent_10, 4); else if (get(viewMode) === "radar") $$render(consequent_9, 4);
}); });
reset(div_11); reset(div_11);
reset(div_10); reset(div_10);
@ -8631,18 +8604,18 @@ function App($$anchor, $$props) {
append($$anchor, fragment); append($$anchor, fragment);
}; };
if_block(node_8, ($$render) => { 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); reset(main);
var node_16 = sibling(main, 2); var node_15 = sibling(main, 2);
var consequent_12 = ($$anchor) => { var consequent_11 = ($$anchor) => {
SettingsDialog($$anchor, { onClose: () => app$1.showSettings = false }); SettingsDialog($$anchor, { onClose: () => app$1.showSettings = false });
}; };
if_block(node_16, ($$render) => { if_block(node_15, ($$render) => {
if (app$1.showSettings) $$render(consequent_12); if (app$1.showSettings) $$render(consequent_11);
}); });
var node_17 = sibling(node_16, 2); var node_16 = sibling(node_15, 2);
var consequent_13 = ($$anchor) => { var consequent_12 = ($$anchor) => {
AddLocationDialog($$anchor, { AddLocationDialog($$anchor, {
onClose: () => { onClose: () => {
app$1.showAddLocation = false; app$1.showAddLocation = false;
@ -8651,8 +8624,8 @@ function App($$anchor, $$props) {
onAdd: handleAddLocation onAdd: handleAddLocation
}); });
}; };
if_block(node_17, ($$render) => { if_block(node_16, ($$render) => {
if (app$1.showAddLocation) $$render(consequent_13); if (app$1.showAddLocation) $$render(consequent_12);
}); });
reset(div); reset(div);
template_effect(() => { template_effect(() => {
@ -8674,7 +8647,7 @@ delegate([
]); ]);
//#endregion //#endregion
//#region src/main.js //#region src/main.js
console.info({ commit_hash: "09cea275b7ac2fd46d2184d84524ee1c3ddcbe60" }); console.info({ commit_hash: "f5488eaa983eaef1a39ca585192aa9b7b450a2c4" });
mount(App, { target: document.getElementById("app") }); mount(App, { target: document.getElementById("app") });
//#endregion</script> //#endregion</script>
<style rel="stylesheet" crossorigin>/* ===== CSS Reset & Base ===== */ <style rel="stylesheet" crossorigin>/* ===== CSS Reset & Base ===== */
@ -11027,37 +11000,6 @@ input::placeholder {
cursor: grabbing; 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 */ /* Responsive */
@media (max-width: 1023px) { @media (max-width: 1023px) {

46
src/App.svelte
View File

@ -45,7 +45,6 @@
const SWIPE_THRESHOLD = 70 // px of horizontal travel before it counts as a swipe 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 AXIS_THRESHOLD = 12 // travel before we decide horizontal vs vertical
const SWIPE_TIMEOUT = 160 // ms for the snap-back / snap-forward animation 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 contentEl = $state(null) // bound to .content-area, gives travel distance
let swiping = $state(false) // a touch drag is in progress 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 // The destination view to hint at as the finger drags (only after we've
// committed to a horizontal swipe, so vertical scrolling shows nothing). // 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) { function onSwipeStart(e) {
if (viewMode === 'radar' || !e.touches || !e.touches[0]) return if (viewMode === 'radar' || !e.touches || !e.touches[0]) return
const t = e.touches[0] const t = e.touches[0]
@ -366,14 +359,6 @@
class:settle={settling} class:settle={settling}
style={slideStyle} 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'} {#if viewMode === 'current'}
<div class="animate-fade-in"> <div class="animate-fade-in">
<CurrentWeather /> <CurrentWeather />
@ -670,37 +655,6 @@
cursor: grabbing; 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 */ /* Responsive */
@media (max-width: 1023px) { @media (max-width: 1023px) {