bugfixing: add plot toggle back to mobile

This commit is contained in:
MuslemRahimi 2024-06-13 20:26:39 +02:00
parent 5d1da5cf96
commit b04645ec9d
3 changed files with 109 additions and 110 deletions

View File

@ -460,10 +460,10 @@ $: {
<div class="flex flex-row items-center w-full justify-end sm:justify-center"> <div class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center">
<label class="hidden sm:inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"> <label class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto">
<input on:click={toggleMode} type="checkbox" checked={mode} value={mode} class="sr-only peer"> <input on:click={toggleMode} type="checkbox" checked={mode} value={mode} class="sr-only peer">
<div class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"></div> <div class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"></div>
{#if mode} {#if mode}
@ -486,6 +486,7 @@ $: {
</label> </label>
<label for="exportDataModal" class="ml-3 mr-2 sm:mr-0 cursor-pointer bg-[#202020] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md"> <label for="exportDataModal" class="ml-3 mr-2 sm:mr-0 cursor-pointer bg-[#202020] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<span class="m-auto mr-0.5 text-white text-sm">Export</span> <span class="m-auto mr-0.5 text-white text-sm">Export</span>
@ -495,7 +496,6 @@ $: {
</div> </div>
<ul class="text-[0.8rem] font-medium text-center w-56 pt-3 sm:w-56 mb-5 flex justify-center sm:justify-end items-center ml-auto"> <ul class="text-[0.8rem] font-medium text-center w-56 pt-3 sm:w-56 mb-5 flex justify-center sm:justify-end items-center ml-auto">
<li class="w-full"> <li class="w-full">
<label on:click={() => filterRule = 'annual'} class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule === 'annual' ? 'bg-[#3C74D4]' : 'bg-[#2A303C]'} font-semibold border-r border-gray-600" aria-current="page"> <label on:click={() => filterRule = 'annual'} class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule === 'annual' ? 'bg-[#3C74D4]' : 'bg-[#2A303C]'} font-semibold border-r border-gray-600" aria-current="page">
@ -517,7 +517,6 @@ $: {
</li> </li>
</ul> </ul>
{#if mode} {#if mode}
<div class="w-full max-w-3xl"> <div class="w-full max-w-3xl">
<div class="relative"> <div class="relative">

View File

@ -423,10 +423,11 @@ $: {
<div class="flex flex-row items-center w-full justify-end sm:justify-center">
<div class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center">
<label class="hidden sm:inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"> <label class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto">
<input on:click={toggleMode} type="checkbox" checked={mode} value={mode} class="sr-only peer"> <input on:click={toggleMode} type="checkbox" checked={mode} value={mode} class="sr-only peer">
<div class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"></div> <div class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"></div>
{#if mode} {#if mode}

View File

@ -396,10 +396,11 @@ $: {
<div class="flex flex-row items-center w-full justify-end sm:justify-center">
<div class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center">
<label class="hidden sm:inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"> <label class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto">
<input on:click={toggleMode} type="checkbox" checked={mode} value={mode} class="sr-only peer"> <input on:click={toggleMode} type="checkbox" checked={mode} value={mode} class="sr-only peer">
<div class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"></div> <div class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"></div>
{#if mode} {#if mode}
@ -430,10 +431,8 @@ $: {
</div> </div>
</label> </label>
</div> </div>
<ul class="text-[0.8rem] font-medium text-center w-56 pt-3 sm:w-56 mb-5 flex justify-center sm:justify-end items-center ml-auto"> <ul class="text-[0.8rem] font-medium text-center w-56 pt-3 sm:w-56 mb-5 flex justify-center sm:justify-end items-center ml-auto">
<li class="w-full"> <li class="w-full">
<label on:click={() => filterRule = 'annual'} class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule === 'annual' ? 'bg-[#3C74D4]' : 'bg-[#2A303C]'} font-semibold border-r border-gray-600" aria-current="page"> <label on:click={() => filterRule = 'annual'} class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule === 'annual' ? 'bg-[#3C74D4]' : 'bg-[#2A303C]'} font-semibold border-r border-gray-600" aria-current="page">