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

Improve mobile gallery styling

Browse Source
This commit is contained in:
ZXY101
2023-09-25 14:48:33 +02:00
parent f06823e4e3
commit 53f5a48d3e
4 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,7 @@
<div class="sm:block flex-col flex"> <div class="sm:block flex-col flex">
<Button outline color="red" class="float-right" on:click={onClear}>Clear catalog</Button> <Button outline color="red" class="float-right" on:click={onClear}>Clear catalog</Button>
</div> </div>
<div class="flex flex-row gap-5 flex-wrap"> <div class="flex sm:flex-row flex-col gap-5 flex-wrap justify-center sm:justify-start">
{#each $catalog as { id, manga } (id)} {#each $catalog as { id, manga } (id)}
<CatalogItem {manga} /> <CatalogItem {manga} />
{/each} {/each}

2
src/lib/components/CatalogItem.svelte
View File

@@ -10,7 +10,7 @@
</script> </script>
<a href={volumeName} on:click={onClick}> <a href={volumeName} on:click={onClick}>
<div class="flex flex-col gap-[5px] text-center"> <div class="flex flex-col gap-[5px] text-center items-center">
{mokuroData.title} {mokuroData.title}
{#if files} {#if files}
<img <img

4
src/lib/components/VolumeItem.svelte
View File

@@ -12,13 +12,13 @@
</script> </script>
<a href={`${$page.params.manga}/${volumeName}`} on:click={onClick}> <a href={`${$page.params.manga}/${volumeName}`} on:click={onClick}>
<div class="flex flex-col gap-[5px] text-center"> <div class="flex flex-col gap-[5px] text-center items-center">
{volumeName} {volumeName}
{#if files} {#if files}
<img <img
src={URL.createObjectURL(Object.values(files)[0])} src={URL.createObjectURL(Object.values(files)[0])}
alt="img" alt="img"
class="object-contain w-[250px] h-[350px] bg-black border-gray-900 border" class="object-contain sm:w-[250px] h-[350px] bg-black border-gray-900 border"
/> />
{/if} {/if}
</div> </div>

2
src/routes/[manga]/+page.svelte
View File

@@ -38,7 +38,7 @@
<div class="sm:block flex-col flex"> <div class="sm:block flex-col flex">
<Button outline color="red" class="float-right" on:click={onDelete}>Delete manga</Button> <Button outline color="red" class="float-right" on:click={onDelete}>Delete manga</Button>
</div> </div>
<div class="flex flex-row gap-5 flex-wrap"> <div class="flex sm:flex-row flex-col justify-center sm:justify-start gap-5 flex-wrap">
{#if manga} {#if manga}
{#each manga as volume} {#each manga as volume}
<VolumeItem {volume} /> <VolumeItem {volume} />