feat(activities): move to details

1 files changed, 23 insertions, 16 deletions

diff --git a/src/lib/Tools/ActivityHistory.svelte b/src/lib/Tools/ActivityHistory.svelte
index bbadf6fb..6b1c73e1 100644
--- a/src/lib/Tools/ActivityHistory.svelte
+++ b/src/lib/Tools/ActivityHistory.svelte
@@ -18,6 +18,7 @@
 	let activityHistoryData: Promise<ActivityHistoryEntry[]>;
 	let currentUserIdentity = { name: '', id: -1 };
 	let baseHue = Math.floor(Math.random() * 360);
+	let generated = false;
 
 	onMount(async () => {
 		clearAllParameters();
@@ -67,6 +68,8 @@
 					gridFinal.innerHTML = '';
 
 					gridFinal.appendChild(downloadWrapper);
+
+					generated = true;
 				}
 
 				downloadWrapper.click();
@@ -75,10 +78,6 @@
 	};
 </script>
 
-<blockquote>
-	Days in risk of developing an activity history hole. (days with one activity)
-</blockquote>
-
 {#if user === undefined}
 	Please log in to view this page.
 {:else}
@@ -110,21 +109,29 @@
 
 			<div id="grid-final" />
 
-			<p />
+			{#if generated}
+				<p />
+			{/if}
 
 			<p><a href={'#'} on:click={screenshot}>Generate grid image</a></p>
 
-			<ul>
-				{#each fillMissingDays(activities) as activity}
-					{#if activity.amount === 0}
-						<li>
-							{new Date(
-								activity.date * 1000 + new Date().getTimezoneOffset() * 60 * 1000
-							).toDateString()}
-						</li>
-					{/if}
-				{/each}
-			</ul>
+			<details open>
+				<summary>
+					Days in risk of developing an activity history hole. (days with one activity)
+				</summary>
+
+				<ul>
+					{#each fillMissingDays(activities) as activity}
+						{#if activity.amount === 0}
+							<li>
+								{new Date(
+									activity.date * 1000 + new Date().getTimezoneOffset() * 60 * 1000
+								).toDateString()}
+							</li>
+						{/if}
+					{/each}
+				</ul>
+			</details>
 		{/if}
 	{/await}
 {/if}