Compare commits

...

2 Commits

Author SHA1 Message Date
Fred Boniface bebf2eba99 Adjust near to me refresh animation 2024-07-05 01:18:27 +01:00
Fred Boniface a3bf2af68d Add rotating reload icon 2024-07-05 01:12:56 +01:00
4 changed files with 26 additions and 1 deletions

View File

@ -19,7 +19,7 @@
</Tooltip> </Tooltip>
{/if} {/if}
{#if config.showRefresh} {#if config.showRefresh}
<button on:click={config.onRefresh} aria-label="Refresh"> <button class:refreshing={config.refreshing} on:click={config.onRefresh} aria-label="Refresh">
<IconRefresh /> <IconRefresh />
</button> </button>
{/if} {/if}
@ -67,6 +67,11 @@
gap: 0px; gap: 0px;
} }
.refreshing {
animation: spin 1.5s linear infinite;
transform-origin: 50% 45%;
}
.content { .content {
margin-top: 5px; margin-top: 5px;
} }
@ -82,4 +87,18 @@
button:hover { button:hover {
color: var(--island-header-color); color: var(--island-header-color);
} }
@keyframes spin {
0% {
transform: rotate(0deg);
color: white;
}
50% {
color: rgb(185, 185, 255);
}
100% {
transform: rotate(-360deg);
color: white;
}
}
</style> </style>

View File

@ -4,6 +4,7 @@ export interface CardConfig {
showRefresh: boolean; showRefresh: boolean;
helpText: string; helpText: string;
onRefresh: () => void; onRefresh: () => void;
refreshing: boolean;
} }
export interface LookupCardConfig { export interface LookupCardConfig {

View File

@ -10,6 +10,7 @@
showRefresh: false, showRefresh: false,
helpText: config.helpText, helpText: config.helpText,
onRefresh: () => {}, onRefresh: () => {},
refreshing: false,
}; };
</script> </script>

View File

@ -19,6 +19,7 @@
showRefresh: true, showRefresh: true,
helpText: "Your location may not be accurate on desktop and laptop devices.", helpText: "Your location may not be accurate on desktop and laptop devices.",
onRefresh: refresh, onRefresh: refresh,
refreshing: false,
}; };
function turnOnLocation() { function turnOnLocation() {
@ -28,6 +29,7 @@
} }
function refresh() { function refresh() {
config.refreshing = true;
stations = []; stations = [];
getNearestStations(); getNearestStations();
} }
@ -41,6 +43,8 @@
stations = apiResponse; stations = apiResponse;
} catch (err) { } catch (err) {
errorMessage = err as string; errorMessage = err as string;
} finally {
config.refreshing = false;
} }
} }