sudacode/mokuro-reader
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Attempt to fix mobile styling

Browse Source
This commit is contained in:
ZXY101
2023-09-14 16:38:45 +02:00
parent a3c69b0219
commit 8e4c105f6c
4 changed files with 24 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/lib/components/Catalog.svelte
View File

@@ -12,31 +12,21 @@
{#if $catalog}
{#if $catalog.length > 0}
<Button outline color="red" class="float-right" on:click={onClear}>Clear catalog</Button>
<div class="container">
{#each $catalog as { id, manga } (id)}
<CatalogItem {manga} />
{/each}
<div class="flex flex-col gap-5">
<div class="sm:block flex-col flex">
<Button outline color="red" class="float-right" on:click={onClear}>Clear catalog</Button>
</div>
<div class="flex flex-row gap-5 flex-wrap">
{#each $catalog as { id, manga } (id)}
<CatalogItem {manga} />
{/each}
</div>
</div>
{:else}
<div class="empty-state">
<div class="text-center p-20">
<p>Your catalog is currently empty.</p>
</div>
{/if}
{:else}
<p>Loading...</p>
{/if}
<style>
.container {
display: flex;
flex-direction: row;
gap: 20px;
flex-wrap: wrap;
}
.empty-state {
text-align: center;
padding: 20px;
}
</style>