feat: add 'cozy' post style

Xyphyn · Sep 23, 2023 · 1b4bd80 · 1b4bd80
1 parent 771f327
commit 1b4bd80
Show file tree

Hide file tree

Showing 8 changed files with 259 additions and 227 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.9.4",
+  "version": "1.10.0",
   "private": true,
   "scripts": {
     "dev": "vite dev",

diff --git a/src/lib/components/lemmy/ViewSelect.svelte b/src/lib/components/lemmy/ViewSelect.svelte
@@ -9,7 +9,8 @@
     <Icon src={ViewColumns} size="14" mini />
     View
   </span>
-  <option value="list">List</option>
   <option value="card">Cards</option>
+  <option value="cozy">Cozy</option>
+  <option value="list">List</option>
   <option value="compact">Compact</option>
 </Select>
diff --git a/src/lib/components/lemmy/comment/CommentItem.svelte b/src/lib/components/lemmy/comment/CommentItem.svelte
@@ -11,9 +11,9 @@
 </script>
 
 <Material
-  class="flex flex-col flex-1 gap-1 {view == 'list' || view == 'compact'
+  class="flex flex-col flex-1 gap-1 {view != 'card'
     ? '!bg-transparent !border-0 rounded-none'
-    : 'p-5'} {view == 'list' ? 'py-5' : view == 'compact' ? 'py-4' : ''}"
+    : 'p-5'} {view == 'list' ? 'py-5' : view == 'compact' ? 'py-4' : 'py-5'}"
   color="distinct"
   padding="none"
 >

diff --git a/src/lib/components/lemmy/post/Post.svelte b/src/lib/components/lemmy/post/Post.svelte
@@ -15,7 +15,7 @@
   export let post: PostView
   export let actions: boolean = true
   export let hideCommunity = false
-  export let view: 'card' | 'list' | 'compact' = $userSettings.view
+  export let view = $userSettings.view
 
   let loaded = false
 </script>
@@ -24,13 +24,15 @@
   color="distinct"
   padding="none"
   class="relative max-w-full min-w-0 w-full group
-  {view == 'list' || view == 'compact'
-    ? '!bg-transparent !border-0'
-    : 'p-5'} {view == 'list' ? 'py-5' : view == 'compact' ? 'py-4' : ''}"
+  {view != 'card' ? '!bg-transparent !border-0' : 'p-5'} {view == 'compact'
+    ? 'py-4'
+    : view == 'list'
+    ? 'py-5'
+    : 'py-5'}"
 >
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  {#if view == 'list'}
+  {#if view == 'list' || view == 'cozy'}
     <div
       class="absolute -inset-x-2 md:-inset-x-4 inset-y-2 scale-95 opacity-0 bg-slate-50 dark:bg-zinc-900
     -z-10 rounded-xl group-hover:opacity-100 group-hover:scale-100 transition-all"
@@ -67,7 +69,7 @@
         </a>
       </div>
       {#if isImage(post.post.url)}
-        {#if view == 'card'}
+        {#if view == 'card' || view == 'cozy'}
           <!--disabled preloads here since most people will hover over every image while scrolling-->
           <svelte:component
             this={$userSettings.expandImages ? ExpandableImage : Empty}
@@ -77,12 +79,15 @@
             <svelte:element
               this={$userSettings.expandImages ? 'div' : 'a'}
               href={postLink(post.post)}
-              class="self-stretch overflow-hidden z-10 relative bg-slate-200 dark:bg-zinc-800 rounded-md max-w-full"
+              class="self-stretch overflow-hidden z-10 relative {loaded
+                ? ''
+                : 'bg-slate-200 dark:bg-zinc-800'} rounded-md max-w-full"
               data-sveltekit-preload-data="off"
               aria-label={post.post.name}
             >
               <picture
-                class="flex justify-center rounded-md overflow-hidden max-h-[min(min-content, 50vh,500px)] w-full max-w-full"
+                class="flex justify-center rounded-xl
+                 overflow-hidden w-[50vh] h-auto max-w-full"
               >
                 <source
                   srcset={bestImageURL(post.post, false, 512)}

diff --git a/src/lib/components/lemmy/post/PostFeed.svelte b/src/lib/components/lemmy/post/PostFeed.svelte
@@ -14,8 +14,7 @@
   class="flex flex-col {$userSettings.view == 'card'
     ? 'gap-3 md:gap-4'
     : ''} divide-slate-200 dark:divide-zinc-800 z-[5]"
-  class:divide-y={$userSettings.view == 'compact' ||
-    $userSettings.view == 'list'}
+  class:divide-y={$userSettings.view != 'card'}
 >
   {#if posts.length == 0}
     <div class="h-full grid place-items-center">

diff --git a/src/lib/components/ui/SectionTitle.svelte b/src/lib/components/ui/SectionTitle.svelte
@@ -1,5 +1,6 @@
 <span
-  class="text-sm font-bold text-slate-600 dark:text-zinc-400 {$$props.class} "
+  {...$$restProps}
+  class="text-sm font-bold text-slate-600 dark:text-zinc-400 {$$props.class}"
 >
   <slot />
 </span>
diff --git a/src/lib/settings.ts b/src/lib/settings.ts
@@ -5,6 +5,8 @@ import { env } from '$env/dynamic/public'
 console.log('Using the following default settings from the environment:')
 console.log(env)
 
+export type View = 'card' | 'cozy' | 'list' | 'compact'
+
 export const SSR_ENABLED = env.PUBLIC_SSR_ENABLED?.toLowerCase() == 'true'
 
 // Returns a proper boolean or null.  Used to set boolean values from env var strings while allowing nullish coalescing to set default values.
@@ -29,7 +31,7 @@ interface Settings {
   // deprecated
   showCompactPosts: boolean
 
-  view: 'card' | 'list' | 'compact'
+  view: View
 
   defaultSort: {
     sort: SortType
@@ -97,7 +99,7 @@ export const defaultSettings: Settings = {
   modlogCardView: toBool(env.PUBLIC_MODLOG_CARD_VIEW) ?? undefined,
   debugInfo: false,
   expandImages: true,
-  view: 'list',
+  view: 'cozy',
   font: 'system',
   leftAlign: false,
   hidePhoton: toBool(env.PUBLIC_REMOVE_CREDIT) ?? false,