Skip to content

Commit

Permalink
feat: update mono to 0.3.3
Browse files Browse the repository at this point in the history
  • Loading branch information
@Xyphyn
Xyphyn committed Sep 19, 2023
1 parent c60b1b3 commit 9b1ef76
Show file tree
Hide file tree
Showing 7 changed files with 172 additions and 187 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
"@dicebear/initials": "^6.0.4",
"lemmy-js-client": "^0.18.0-rc.2",
"markdown-it": "^13.0.1",
"mono-svelte": "^0.3.2"
"mono-svelte": "^0.3.3"
},
"type": "module"
}
252 changes: 127 additions & 125 deletions src/lib/components/lemmy/post/Post.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,142 +30,144 @@
>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div id={post.post.id.toString()} class="relative flex flex-col gap-2.5">
<div
class="flex {$userSettings.leftAlign
? 'flex-row-reverse'
: 'flex-row'} gap-4 max-w-full w-full"
>
<div
class="absolute -inset-x-2 md:-inset-x-4 inset-y-2 scale-95 opacity-0 bg-slate-100 dark:bg-zinc-900
-z-10 rounded-xl group-hover:opacity-100 group-hover:scale-100 transition-all"
/>
<div
class="flex {$userSettings.leftAlign
? 'flex-row-reverse'
: 'flex-row'} gap-4 max-w-full w-full"
>
<div class="flex flex-col w-full gap-2">
<div class="flex flex-col w-full gap-2">
<div class="flex flex-col w-full gap-2">
<PostMeta
community={hideCommunity ? undefined : post.community}
user={post.creator}
published={new Date(post.post.published + 'Z')}
upvotes={post.counts.upvotes}
downvotes={post.counts.downvotes}
deleted={post.post.deleted}
removed={post.post.removed}
locked={post.post.locked}
featured={post.post.featured_local || post.post.featured_community}
nsfw={post.post.nsfw}
saved={post.saved}
/>
<a
href="/post/{getInstance()}/{post.post.id}"
class="font-medium max-w-full w-full break-words text-base"
style="word-break: break-word;"
class:text-slate-500={post.read && $userSettings.markReadPosts}
class:dark:text-zinc-400={post.read && $userSettings.markReadPosts}
<PostMeta
community={hideCommunity ? undefined : post.community}
user={post.creator}
published={new Date(post.post.published + 'Z')}
upvotes={post.counts.upvotes}
downvotes={post.counts.downvotes}
deleted={post.post.deleted}
removed={post.post.removed}
locked={post.post.locked}
featured={post.post.featured_local || post.post.featured_community}
nsfw={post.post.nsfw}
saved={post.saved}
/>
<a
href="/post/{getInstance()}/{post.post.id}"
class="font-medium max-w-full w-full break-words text-base"
style="word-break: break-word;"
class:text-slate-500={post.read && $userSettings.markReadPosts}
class:dark:text-zinc-400={post.read && $userSettings.markReadPosts}
>
<Markdown source={post.post.name} inline />
</a>
</div>
{#if $userSettings.view == 'card'}
{#if isImage(post.post.url)}
<!--disabled preloads here since most people will hover over every image while scrolling-->
<svelte:component
this={$userSettings.expandImages ? ExpandableImage : Empty}
url={bestImageURL(post.post, false, 2048)}
class="self-start max-w-full"
>
<Markdown source={post.post.name} inline />
</a>
</div>
{#if $userSettings.view == 'card'}
{#if isImage(post.post.url)}
<!--disabled preloads here since most people will hover over every image while scrolling-->
<svelte:component
this={$userSettings.expandImages ? ExpandableImage : Empty}
url={bestImageURL(post.post, false, 2048)}
class="self-start max-w-full"
<svelte:element
this={$userSettings.expandImages ? 'div' : 'a'}
href={postLink(post.post)}
class="self-start overflow-hidden z-10 relative bg-slate-200 dark:bg-zinc-800 rounded-md max-w-full"
data-sveltekit-preload-data="off"
aria-label={post.post.name}
>
<svelte:element
this={$userSettings.expandImages ? 'div' : 'a'}
href={postLink(post.post)}
class="self-start overflow-hidden z-10 relative bg-slate-200 dark:bg-zinc-800 rounded-md max-w-full"
data-sveltekit-preload-data="off"
aria-label={post.post.name}
<picture
class="rounded-md overflow-hidden max-h-[min(50vh,500px)] w-full max-w-full"
>
<picture
class="rounded-md overflow-hidden max-h-[min(50vh,500px)] w-full max-w-full"
>
<source
srcset={bestImageURL(post.post, false, 512)}
media="(max-width: 256px)"
/>
<source
srcset={bestImageURL(post.post, false, 512)}
media="(max-width: 512px)"
/>
<!-- svelte-ignore a11y-missing-attribute -->
<img
src={bestImageURL(post.post, false, 1024)}
loading="lazy"
class="max-w-full w-max object-cover rounded-md max-h-[80vh] h-auto z-30 opacity-0 transition-opacity duration-300"
class:opacity-100={loaded}
width={512}
height={300}
class:blur-3xl={post.post.nsfw && $userSettings.nsfwBlur}
on:load={() => (loaded = true)}
/>
</picture>
</svelte:element>
</svelte:component>
{:else if post.post.url}
<PostLink
url={post.post.url}
thumbnail_url={post.post.thumbnail_url
? `${post.post.thumbnail_url}?format=webp&thumbnail=512`
: undefined}
nsfw={post.post.nsfw}
/>
{/if}
<source
srcset={bestImageURL(post.post, false, 512)}
media="(max-width: 256px)"
/>
<source
srcset={bestImageURL(post.post, false, 512)}
media="(max-width: 512px)"
/>
<!-- svelte-ignore a11y-missing-attribute -->
<img
src={bestImageURL(post.post, false, 1024)}
loading="lazy"
class="max-w-full w-max object-cover rounded-md max-h-[80vh] h-auto z-30 opacity-0 transition-opacity duration-300"
class:opacity-100={loaded}
width={512}
height={300}
class:blur-3xl={post.post.nsfw && $userSettings.nsfwBlur}
on:load={() => (loaded = true)}
/>
</picture>
</svelte:element>
</svelte:component>
{:else if post.post.url}
<PostLink
url={post.post.url}
thumbnail_url={post.post.thumbnail_url
? `${post.post.thumbnail_url}?format=webp&thumbnail=512`
: undefined}
nsfw={post.post.nsfw}
/>
{/if}
{#if post.post.body && !post.post.nsfw && (view == 'list' || view == 'card')}
<div
class="text-sm relative overflow-hidden {view == 'list'
? `text-zinc-600 dark:text-zinc-400 max-h-24`
: 'text-slate-600 dark:text-zinc-400 max-h-48'} paragraph"
>
<Markdown inline source={post.post.body.slice(0, 400)} />
{#if post.post.body.length > (view == 'list' ? 200 : 600)}
<div
class="absolute bottom-0 w-full h-16 bg-gradient-to-b {view ==
'list'
? `dark:from-zinc-950/0 dark:to-zinc-950
{/if}
{#if post.post.body && !post.post.nsfw && (view == 'list' || view == 'card')}
<div
class="text-sm relative overflow-hidden {view == 'list'
? `text-zinc-600 dark:text-zinc-400 max-h-24`
: 'text-slate-600 dark:text-zinc-400 max-h-48'} paragraph"
>
<Markdown inline source={post.post.body.slice(0, 400)} />
{#if post.post.body.length > (view == 'list' ? 200 : 600)}
<div
class="absolute bottom-0 w-full h-16 bg-gradient-to-b {view ==
'list'
? `dark:from-zinc-950/0 dark:to-zinc-950
from-slate-25/0 to-slate-25 transition-all`
: 'dark:from-zinc-900/0 dark:to-zinc-900 from-white/0 to-white'}"
/>
{/if}
</div>
{/if}
</div>
{#if ($userSettings.view == 'list' || $userSettings.view == 'compact') && (post.post.thumbnail_url || isImage(post.post.url))}
<div class="flex-none w-24 h-24">
{#if !$userSettings.expandImages || (post.post.thumbnail_url && !isImage(post.post.url))}
<a href={postLink(post.post)}>
<!-- svelte-ignore a11y-missing-attribute -->
<img
src={bestImageURL(post.post, true)}
loading="lazy"
class="object-cover bg-slate-100 rounded-md h-24 w-24 border border-slate-200 dark:border-zinc-700"
/>
</a>
{:else}
<ExpandableImage url={bestImageURL(post.post, false, 2048)}>
<!-- svelte-ignore a11y-missing-attribute -->
<img
src={bestImageURL(post.post, true)}
loading="lazy"
class="object-cover bg-slate-100 rounded-md h-24 w-24 border border-slate-200 dark:border-zinc-700"
/>
</ExpandableImage>
: 'dark:from-zinc-900/0 dark:to-zinc-900 from-white/0 to-white'}"
/>
{/if}
</div>
{/if}
</div>
{#if actions}
<div class="w-full" class:mt-2={view == 'list'}>
<PostActions
bind:post
on:edit={(e) => {
toast({
content: 'The post was edited successfully.',
type: 'success',
})
}}
/>
{#if ($userSettings.view == 'list' || $userSettings.view == 'compact') && (post.post.thumbnail_url || isImage(post.post.url))}
<div class="flex-none w-24 h-24">
{#if !$userSettings.expandImages || (post.post.thumbnail_url && !isImage(post.post.url))}
<a href={postLink(post.post)}>
<!-- svelte-ignore a11y-missing-attribute -->
<img
src={bestImageURL(post.post, true)}
loading="lazy"
class="object-cover bg-slate-100 rounded-md h-24 w-24 border border-slate-200 dark:border-zinc-700"
/>
</a>
{:else}
<ExpandableImage url={bestImageURL(post.post, false, 2048)}>
<!-- svelte-ignore a11y-missing-attribute -->
<img
src={bestImageURL(post.post, true)}
loading="lazy"
class="object-cover bg-slate-100 rounded-md h-24 w-24 border border-slate-200 dark:border-zinc-700"
/>
</ExpandableImage>
{/if}
</div>
{/if}
</div>
{#if actions}
<div class="w-full" class:mt-2={view == 'list'}>
<PostActions
bind:post
on:edit={(e) => {
toast({
content: 'The post was edited successfully.',
type: 'success',
})
}}
/>
</div>
{/if}
</Material>
7 changes: 3 additions & 4 deletions src/lib/components/lemmy/post/PostActions.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
Bookmark,
BookmarkSlash,
BugAnt,
ChatBubbleOvalLeft,
ChatBubbleOvalLeftEllipsis,
EllipsisHorizontal,
Eye,
Expand Down Expand Up @@ -75,12 +76,10 @@
</Modal>
{/if}

<div class="flex flex-row gap-2 items-center h-8">
<div class="flex flex-row gap-2 items-center h-8 z-10">
<PostVote
post={post.post}
bind:vote={post.my_vote}
bind:upvotes={post.counts.upvotes}
bind:downvotes={post.counts.downvotes}
bind:score={post.counts.score}
/>

Expand All @@ -89,7 +88,7 @@
href="/post/{getInstance()}/{post.post.id}"
class="!text-inherit h-8 px-3"
>
<Icon slot="prefix" src={ChatBubbleOvalLeftEllipsis} mini size="16" />
<Icon slot="prefix" src={ChatBubbleOvalLeft} mini size="14" />
<FormattedNumber number={post.counts.comments} />
</Button>
<div class="ml-auto" />
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/lemmy/post/PostFeed.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<div
class="flex flex-col {$userSettings.view == 'card'
? 'gap-3 md:gap-4'
: ''} divide-slate-200 dark:divide-zinc-800"
: ''} divide-slate-200 dark:divide-zinc-800 z-[5]"
class:divide-y={$userSettings.view == 'compact' ||
$userSettings.view == 'list'}
>
Expand Down
Loading

0 comments on commit 9b1ef76

Please sign in to comment.