🐛 Fixed Analytics popup only showing up once

This commit is contained in:
Mawoka
2023-07-02 20:30:24 +02:00
parent 99232b442d
commit 06ecef24d5
2 changed files with 60 additions and 53 deletions
+1 -3
View File
@@ -93,9 +93,7 @@ SPDX-License-Identifier: MPL-2.0
<svelte:head> <svelte:head>
<title>ClassQuiz - Dashboard</title> <title>ClassQuiz - Dashboard</title>
</svelte:head> </svelte:head>
{#if analytics_quiz_selected} <Analytics bind:quiz={analytics_quiz_selected} />
<Analytics bind:quiz={analytics_quiz_selected} />
{/if}
<div class="min-h-screen flex flex-col"> <div class="min-h-screen flex flex-col">
{#await getData()} {#await getData()}
<svg class="h-8 w-8 animate-spin mx-auto my-20" viewBox="3 3 18 18"> <svg class="h-8 w-8 animate-spin mx-auto my-20" viewBox="3 3 18 18">
+59 -50
View File
@@ -30,54 +30,63 @@ SPDX-License-Identifier: MPL-2.0
}); });
</script> </script>
<div {#if quiz}
class="fixed w-full h-full top-0 flex bg-black bg-opacity-50 z-50" <div
on:click={on_parent_click} class="fixed w-full h-full top-0 flex bg-black bg-opacity-50 z-50 overflow-scroll"
transition:fade|local={{ duration: 100 }} on:click={on_parent_click}
> transition:fade|local={{ duration: 100 }}
<div class="m-auto bg-white dark:bg-gray-600 rounded shadow-2xl flex p-4 flex-col w-2/3 h-5/6"> >
<h1 class="text-center text-5xl">{$t('words.analytics')}</h1> <div
<section class="flex flex-col gap-2 mt-8"> class="m-auto bg-white dark:bg-gray-600 rounded shadow-2xl flex p-4 flex-col lg:w-2/3 w-11/12 h-5/6"
<h2 class="mx-auto text-2xl">{$t('words.rating')}</h2> >
<table class="w-fit mx-auto"> <h1 class="text-center text-5xl">{$t('words.analytics')}</h1>
<tr class="border-b-2 dark:border-gray-500 text-left border-gray-300"> <section class="flex flex-col gap-2 mt-8">
<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300" <h2 class="mx-auto text-2xl">{$t('words.rating')}</h2>
>{$t('words.like', { count: 2 })}</th <table class="w-fit mx-auto">
> <tr class="border-b-2 dark:border-gray-500 text-left border-gray-300">
<th class="p-1 mx-auto">{$t('words.dislike', { count: 2 })}</th> <th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
</tr> >{$t('words.like', { count: 2 })}</th
<tr class="text-left"> >
<td class="border-r dark:border-gray-500 p-1 border-gray-300">{quiz.likes}</td> <th class="p-1 mx-auto">{$t('words.dislike', { count: 2 })}</th>
<td class="mx-auto p-1">{quiz.dislikes}</td> </tr>
</tr> <tr class="text-left">
</table> <td class="border-r dark:border-gray-500 p-1 border-gray-300"
</section> >{quiz.likes}</td
<section class="flex flex-col gap-2 mt-8"> >
<h2 class="mx-auto text-2xl">{$t('dashboard.views_n_plays')}</h2> <td class="mx-auto p-1">{quiz.dislikes}</td>
<table class="w-fit mx-auto"> </tr>
<tr class="border-b-2 dark:border-gray-500 text-left border-gray-300"> </table>
<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300" </section>
>{$t('words.view', { count: 2 })}</th <section class="flex flex-col gap-2 mt-8">
> <h2 class="mx-auto text-2xl">{$t('dashboard.views_n_plays')}</h2>
<th class="p-1 mx-auto">{$t('words.play', { count: 2 })}</th> <table class="w-fit mx-auto">
</tr> <tr class="border-b-2 dark:border-gray-500 text-left border-gray-300">
<tr class="text-left"> <th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
<td class="border-r dark:border-gray-500 p-1 border-gray-300">{quiz.views}</td> >{$t('words.view', { count: 2 })}</th
<td class="mx-auto p-1">{quiz.plays}</td> >
</tr> <th class="p-1 mx-auto">{$t('words.play', { count: 2 })}</th>
</table> </tr>
</section> <tr class="text-left">
<section class="flex flex-col gap-2 mt-8"> <td class="border-r dark:border-gray-500 p-1 border-gray-300"
<h2 class="mx-auto text-2xl">{$t('words.info')}</h2> >{quiz.views}</td
<p class="mx-auto max-w-[70%] text-center"> >
{$t('dashboard.info_analytics')} <td class="mx-auto p-1">{quiz.plays}</td>
</p> </tr>
</section> </table>
<section class="mt-auto"> </section>
<p class="mt-6 mx-auto max-w-[70%] text-sm dark:text-gray-200 text-center"> <section class="flex flex-col gap-2 mt-8">
Since there's still some space left down here, I guess that I take this opportunity <h2 class="mx-auto text-2xl">{$t('words.info')}</h2>
to thank You for using ClassQuiz! Have a great day and continue using ClassQuiz ;) <p class="mx-auto max-w-[70%] text-center">
</p> {$t('dashboard.info_analytics')}
</section> </p>
</section>
<section class="mt-auto">
<p class="mt-6 mx-auto max-w-[70%] text-sm dark:text-gray-200 text-center">
Since there's still some space left down here, I guess that I take this
opportunity to thank You for using ClassQuiz! Have a great day and continue
using ClassQuiz ;)
</p>
</section>
</div>
</div> </div>
</div> {/if}