lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

fix(CardsOverview): table scroll + checkbox posititioning

Browse Source
This commit is contained in:
Philipp Dormann 2023-04-12 20:27:12 +02:00
parent 1ec9556aa6
commit 9c13b2f9e9
Signed by: philipp
GPG Key ID: 3BB9ADD52DCA4314
1 changed files with 51 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/cards/CardsOverview.svelte
View File

@ -167,57 +167,57 @@
<p class="font-bold">{$_("loading-cards")}</p> <p class="font-bold">{$_("loading-cards")}</p>
<p class="text-sm">{$_("this-might-take-a-moment")}</p> <p class="text-sm">{$_("this-might-take-a-moment")}</p>
</div> </div>
{:else if current_cards.length === 0}
<CardsEmptyState />
{:else} {:else}
{#if current_cards.length === 0} <div class="h-12 mt-1">
<CardsEmptyState /> {#if selected.length > 0}
{:else} <button
<div class="h-12 mt-1"> type="button"
{#if selected.length > 0} class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
<button id="options-menu"
type="button" on:click={async () => {
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex" const prom = [];
id="options-menu" for (const card of selectedCards) {
on:click={async () => { prom.push(
const prom = []; RunnerCardService.runnerCardControllerRemove(card.id, true)
for (const card of selectedCards) { );
prom.push( }
RunnerCardService.runnerCardControllerRemove(card.id, true) await Promise.all(prom);
); Toastify({
} text: $_("cards-deleted"),
await Promise.all(prom); duration: 3500,
Toastify({ backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
text: $_("cards-deleted"), }).showToast();
duration: 3500, for (const card of generate_cards) {
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)", current_cards = current_cards.filter((c) => c.id !== card.id);
}).showToast(); }
for (const card of generate_cards) { options.update((options) => ({
current_cards = current_cards.filter((c) => c.id !== card.id); ...options,
} data: current_cards,
options.update((options) => ({ }));
...options, }}
data: current_cards, >
})); {$_("delete-cards")}
}} <svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5"
> >
{$_("delete-cards")} <path
<svg stroke-linecap="round"
xmlns="http://www.w3.org/2000/svg" stroke-linejoin="round"
fill="none" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
viewBox="0 0 24 24" />
stroke-width="1.5" </svg>
stroke="currentColor" </button>
class="w-5 h-5" {/if}
> <GenerateRunnerCards bind:cards_show bind:generate_cards />
<path </div>
stroke-linecap="round" <div class="overflow-x-auto">
stroke-linejoin="round"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
/>
</svg>
</button>
{/if}
<GenerateRunnerCards bind:cards_show bind:generate_cards />
</div>
<table class="w-full"> <table class="w-full">
<thead> <thead>
{#each $table.getHeaderGroups() as headerGroup} {#each $table.getHeaderGroups() as headerGroup}
@ -260,21 +260,7 @@
{/each} {/each}
</tbody> </tbody>
</table> </table>
<TableBottom {table} {selected} /> </div>
{/if} <TableBottom {table} {selected} />
{/if} {/if}
{/if} {/if}
<style>
table tbody {
display: block;
overflow-y: scroll;
}
table thead,
table tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
</style>