GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 06:22:22 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Make spinner's position sticky in relation to graphsContainer

Browse source
This commit is contained in:
Henrik Giesel 2020-12-25 21:49:56 +01:00
parent 6559b41734
commit 7b5e0134e5
2 changed files with 32 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ts/graphs/GraphsPage.svelte
View file

@ -3,7 +3,8 @@
</script> </script>
<script lang="typescript"> <script lang="typescript">
import { fade } from 'svelte/transition'; import { afterUpdate } from 'svelte';
import type { I18n } from "anki/i18n"; import type { I18n } from "anki/i18n";
import type pb from "anki/backend_proto"; import type pb from "anki/backend_proto";
import { getGraphData, RevlogRange } from "./graph-helpers"; import { getGraphData, RevlogRange } from "./graph-helpers";
@ -81,6 +82,19 @@
} }
}; };
let spinner: HTMLDivElement;
let graphsContainer: HTMLDivElement;
afterUpdate(() => {
// make sure graph container retains its size for spinner
if (spinner) {
graphsContainer.style.minHeight = `${document.documentElement.scrollHeight}px`;
}
else {
graphsContainer.style.minHeight = '';
}
})
const year = i18n.tr(i18n.TR.STATISTICS_RANGE_1_YEAR_HISTORY); const year = i18n.tr(i18n.TR.STATISTICS_RANGE_1_YEAR_HISTORY);
const deck = i18n.tr(i18n.TR.STATISTICS_RANGE_DECK); const deck = i18n.tr(i18n.TR.STATISTICS_RANGE_DECK);
const collection = i18n.tr(i18n.TR.STATISTICS_RANGE_COLLECTION); const collection = i18n.tr(i18n.TR.STATISTICS_RANGE_COLLECTION);
@ -127,16 +141,16 @@
<div class="range-box-pad" /> <div class="range-box-pad" />
{/if} {/if}
<div bind:this={graphsContainer} tabindex="-1" class="no-focus-outline">
{#await dataPromise} {#await dataPromise}
<div class="spin" transition:fade="{{duration=50}}">◐</div> <div bind:this={spinner} class="spin">◐</div>
{:then sourceData} {:then sourceData}
<div tabindex="-1" class="no-focus-outline">
{#each graphs as Graph} {#each graphs as Graph}
<Graph {sourceData} {revlogRange} {i18n} {nightMode} /> <Graph {sourceData} {revlogRange} {i18n} {nightMode} />
{/each} {/each}
</div>
{:catch error} {:catch error}
<script> <script>
alert({i18n.tr(i18n.TR.STATISTICS_ERROR_FETCHING)}); alert({i18n.tr(i18n.TR.STATISTICS_ERROR_FETCHING)});
</script> </script>
{/await} {/await}
</div>

5
ts/graphs/graphs.scss
View file

@ -144,7 +144,10 @@
} }
.spin { .spin {
position: absolute; position: sticky;
left: 50%;
top: 50%;
animation: spin; animation: spin;
animation-duration: 1s; animation-duration: 1s;
animation-iteration-count: infinite; animation-iteration-count: infinite;