Damillora/Shioriko
1
0
Fork 0
mirror of https://github.com/Damillora/Shioriko.git synced 2025-02-23 17:33:39 +00:00
Code Issues Projects Releases Wiki Activity

fix: post page layouting

Browse Source
This commit is contained in:
Damillora 2025-02-22 17:28:48 +00:00
parent 560006aaa8
commit 374ee82c76
1 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web/app/src/routes/post/[id]/+page.svelte
View File

@ -54,8 +54,8 @@
let imagePercentage = $state("0%"); let imagePercentage = $state("0%");
</script> </script>
<div class="container"> <section class="section">
<section class="section"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column is-one-third"> <div class="column is-one-third">
{#if post} {#if post}
@ -90,9 +90,7 @@
</div> </div>
{/if} {/if}
{:else} {:else}
<div class="skeleton-block"> <div class="skeleton-block"></div>
</div>
{/if} {/if}
</div> </div>
<div class="column box"> <div class="column box">
@ -100,27 +98,33 @@
{#if post.width > 1000 && isOriginal == false} {#if post.width > 1000 && isOriginal == false}
<div class="notification is-info"> <div class="notification is-info">
Resized to {imagePercentage} of the original image. Resized to {imagePercentage} of the original image.
<a onclick="{() => { isOriginal = true; }}" <a
>View original</a onclick={() => {
isOriginal = true;
}}>View original</a
> >
</div> </div>
<figure class="image"> <figure class="image">
<ShiorikoImage alt={post.id} src={post.preview_path} /> <ShiorikoImage
alt={post.id}
src={post.preview_path}
/>
</figure> </figure>
{:else} {:else}
<div class="notification is-primary"> <div class="notification is-primary">
Currently viewing original image. Currently viewing original image.
</div> </div>
<figure class="image"> <figure class="image">
<ShiorikoImage alt={post.id} src={post.image_path} /> <ShiorikoImage
alt={post.id}
src={post.image_path}
/>
</figure> </figure>
{/if} {/if}
{:else} {:else}
<div class="skeleton-block"> <div class="skeleton-block"></div>
</div>
{/if} {/if}
</div> </div>
</div> </div>
</section> </div>
</div> </section>