Merge pull request #443 from Xyphyn/more-compact

design: make compact posts even more compact
Xyphyn · Sep 15, 2024 · acd449d · acd449d
2 parents d0c29cd + 368ba6f
commit acd449d
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 93 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.31.3",
+  "version": "1.31.4",
   "devDependencies": {
     "@catdadcode/svelte-adapter-bun": "^0.5.7",
     "@dicebear/core": "^8.0.1",

diff --git a/src/lib/components/lemmy/dropdowns/ViewSelect.svelte b/src/lib/components/lemmy/dropdowns/ViewSelect.svelte
@@ -52,13 +52,4 @@
     />
     {$t('filter.view.compact')}
   </option>
-  <option value="card">
-    <Icon
-      src={Clock}
-      size="16"
-      micro
-      class="text-slate-600 dark:text-zinc-400"
-    />
-    {$t('filter.view.legacy')}
-  </option>
 </Select>
diff --git a/src/lib/components/lemmy/post/Post.svelte b/src/lib/components/lemmy/post/Post.svelte
@@ -82,18 +82,16 @@
 -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<Material
-  element="article"
-  color={view != 'card' ? 'none' : 'distinct'}
-  class="post relative max-w-full min-w-0 w-full cursor-pointer outline-none group
-  {view != 'card' ? 'bg-transparent !border-0' : 'p-5'} {view == 'compact'
-    ? 'py-3 list-type compact-view'
-    : view == 'list'
-      ? 'py-5 list-type'
-      : 'py-5 flex flex-col gap-2'} {$$props.class}"
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div
+  class="post relative max-w-full min-w-0 w-full cursor-pointer outline-none
+  group
+  {$userSettings.leftAlign ? 'left-align' : ''}
+  {view == 'compact' ? 'py-3 list-type compact' : ''}
+  {view == 'list' ? 'py-5 list-type' : ''}
+  {view == 'cozy' ? 'py-5 flex flex-col gap-2' : ''}
+  {$$props.class ?? ''}"
   id={post.post.id.toString()}
-  padding="none"
-  rounding={view == 'card' ? undefined : 'none'}
   on:click={(e) => {
     onClick(e)
   }}
@@ -153,8 +151,8 @@
         bind:post={post.post}
         bind:type
         class="{$userSettings.leftAlign
-          ? 'mr-2'
-          : 'ml-2'} flex-shrink no-list-margin"
+          ? 'mr-3'
+          : 'ml-3'} flex-shrink no-list-margin"
         style="grid-area: media;"
         {view}
       />
@@ -191,27 +189,42 @@
     group-focus:inset-y-0.5 group-focus:-inset-x-4 group-focus:sm:-inset-x-5 group-focus:opacity-100
     duration-150"
   />
-</Material>
+</div>
 
-<style>
-  :global(.list-type) {
+<style lang="postcss">
+  .list-type {
     display: grid;
-    grid-template-areas: var(
-      --template-areas,
-      'meta media' 'title media' 'body media' 'embed embed' 'actions actions'
-    );
+    grid-template-areas: 'meta media' 'title media' 'body media' 'embed embed' 'actions actions';
+    grid-template-columns: minmax(0, 1fr) auto;
     width: 100%;
     height: 100%;
-    grid-template-columns: var(--template-columns, 1fr auto);
   }
 
-  :global(.compact-view > *:not(.no-list-margin):not(:first-child)) {
+  /* Swap media/item positions */
+  .list-type.left-align {
+    grid-template-areas: 'media meta' 'media title' 'media body' 'embed embed' 'actions actions';
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  /* Has media on the right for all of them */
+  @media (min-width: 480px) {
+    .list-type.compact {
+      grid-template-areas: 'meta media' 'title media' 'body media' 'embed media' 'actions media';
+    }
+  }
+
+  /* Swap above again */
+  @media (min-width: 480px) {
+    .list-type.compact.left-align {
+      grid-template-areas: 'media meta' 'media title' 'media body' 'media embed' 'media actions';
+    }
+  }
+
+  :global(.compact > *:not(.no-list-margin):not(:first-child)) {
     margin-top: 0.3rem;
   }
 
-  :global(
-      .list-type:not(.compact-view) > *:not(.no-list-margin):not(:first-child)
-    ) {
+  :global(.list-type:not(.compact) > *:not(.no-list-margin):not(:first-child)) {
     margin-top: 0.5rem;
   }
 </style>
diff --git a/src/lib/components/lemmy/post/PostActions.svelte b/src/lib/components/lemmy/post/PostActions.svelte
@@ -80,8 +80,8 @@
 
   let localShare = false
 
-  $: buttonHeight = view == 'compact' ? 'h-[30px]' : 'h-8'
-  $: buttonSquare = view == 'compact' ? 'w-[30px] h-[30px]' : 'w-8 h-8'
+  $: buttonHeight = view == 'compact' ? 'h-7' : 'h-8'
+  $: buttonSquare = view == 'compact' ? 'w-7 h-7' : 'w-8 h-8'
 </script>
 
 {#if editing}

diff --git a/src/lib/components/lemmy/post/PostMeta.svelte b/src/lib/components/lemmy/post/PostMeta.svelte
@@ -115,6 +115,7 @@
   class="grid w-full meta {community
     ? 'grid-rows-2'
     : 'grid-rows-1'} text-xs min-w-0 max-w-full"
+  class:compact={view == 'compact'}
   style={$$props.style ?? ''}
 >
   {#if showCommunity && community && subscribed}
@@ -126,7 +127,7 @@
       >
         <Avatar
           url={community.icon}
-          width={32}
+          width={view == 'compact' ? 24 : 32}
           alt={community.name}
           class="group-hover/community:ring-2 transition-all ring-offset-1 ring-primary-900 dark:ring-primary-100"
         />
@@ -145,42 +146,44 @@
     <CommunityLink
       {community}
       style="grid-area: community;"
-      class="flex-shrink self-end"
+      class="flex-shrink"
     />
   {/if}
-  <span
-    class="text-slate-600 dark:text-zinc-400 flex flex-row gap-2 items-center self-start"
-    style="grid-area: stats;"
-  >
-    {#if user}
-      <address class="contents not-italic">
-        <UserLink avatarSize={20} {user} avatar={!showCommunity}>
-          <svelte:fragment slot="badges">
-            {#if badges.moderator}
-              <ShieldIcon filled width={14} class="text-green-500" />
-            {/if}
-            {#if badges.admin}
-              <ShieldIcon filled width={14} class="text-red-500" />
-            {/if}
-          </svelte:fragment>
-        </UserLink>
-      </address>
-    {/if}
-    {#if published}
-      <RelativeDate date={published} class="flex-shrink-0" />
-    {/if}
-    {#if edited}
-      <div
-        title={$t('post.meta.lastEdited', {
-          default: formatRelativeDate(publishedToDate(edited), {
-            style: 'long',
-          }),
-        })}
-      >
-        <Icon src={Pencil} micro size="14" />
-      </div>
-    {/if}
-  </span>
+  {#if view != 'compact'}
+    <span
+      class="text-slate-600 dark:text-zinc-400 flex flex-row gap-2 items-center self-start"
+      style="grid-area: stats;"
+    >
+      {#if user}
+        <address class="contents not-italic">
+          <UserLink avatarSize={20} {user} avatar={!showCommunity}>
+            <svelte:fragment slot="badges">
+              {#if badges.moderator}
+                <ShieldIcon filled width={14} class="text-green-500" />
+              {/if}
+              {#if badges.admin}
+                <ShieldIcon filled width={14} class="text-red-500" />
+              {/if}
+            </svelte:fragment>
+          </UserLink>
+        </address>
+      {/if}
+      {#if published}
+        <RelativeDate date={published} class="flex-shrink-0" />
+      {/if}
+      {#if edited}
+        <div
+          title={$t('post.meta.lastEdited', {
+            default: formatRelativeDate(publishedToDate(edited), {
+              style: 'long',
+            }),
+          })}
+        >
+          <Icon src={Pencil} micro size="14" />
+        </div>
+      {/if}
+    </span>
+  {/if}
   <div
     class="flex flex-row justify-end items-center self-center flex-wrap gap-2 [&>*]:flex-shrink-0 badges ml-2"
     style="grid-area: badges;"
@@ -293,6 +296,12 @@
     grid-template-columns: max-content minmax(0, auto) auto;
   }
 
+  .meta.compact {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+  }
+
   :global(.badge-tag-color) {
     background-color: var(--tag-color) !important;
   }

diff --git a/src/lib/components/lemmy/post/feed/PostFeed.svelte b/src/lib/components/lemmy/post/feed/PostFeed.svelte
@@ -23,14 +23,6 @@
   class="flex flex-col list-none {$userSettings.view == 'card'
     ? 'gap-3 md:gap-4'
     : 'divide-y'} divide-slate-200 dark:divide-zinc-800"
-  style={$userSettings.leftAlign
-    ? `--template-areas: 
-'media meta'
-'media title'
-'media body'
-'embed embed'
-'actions actions'; --template-columns: auto 1fr;`
-    : ``}
 >
   {#if posts?.length == 0}
     <div class="h-full grid place-items-center">

diff --git a/src/lib/components/lemmy/post/feed/VirtualFeed.svelte b/src/lib/components/lemmy/post/feed/VirtualFeed.svelte
@@ -214,14 +214,6 @@
   class="flex flex-col list-none {$userSettings.view == 'card'
     ? 'gap-3 md:gap-4'
     : 'divide-y'} divide-slate-200 dark:divide-zinc-800"
-  style={$userSettings.leftAlign
-    ? `--template-areas: 
-'media meta'
-'media title'
-'media body'
-'embed embed'
-'actions actions'; --template-columns: auto 1fr;`
-    : ``}
 >
   {#if posts?.length == 0}
     <div class="h-full grid place-items-center">

diff --git a/src/lib/components/lemmy/post/link/PostLink.svelte b/src/lib/components/lemmy/post/link/PostLink.svelte
@@ -31,7 +31,7 @@
     color="distinct"
     class="flex flex-col-reverse sm:flex-row
     overflow-hidden gap-4 embed-card z-0 relative
-    dark:border-t-zinc-800 border-opacity-80"
+    dark:border-t-zinc-800 border-opacity-80 max-w-full"
     rounding="xl"
     element="article"
   >
@@ -125,7 +125,7 @@
     </PostLinkSources>
   </div>
 {:else}
-  <div class="flex items-center gap-1">
+  <div class="flex space-x-1">
     <PostLinkSources {url}>
       <Button
         color="ghost"
@@ -147,7 +147,7 @@
       href={url}
       target="_blank"
       class="text-slate-900 dark:text-zinc-300 items-center
-    text-xs overflow-hidden max-w-full block"
+    text-xs overflow-hidden max-w-full block flex-shrink"
       size="sm"
       color="ghost"
       rounding="pill"

diff --git a/src/lib/components/lemmy/post/media/PostMediaCompact.svelte b/src/lib/components/lemmy/post/media/PostMediaCompact.svelte
@@ -70,8 +70,9 @@
       />
       {#if type != 'image'}
         <div
-          class="absolute w-7 h-7 bottom-0 left-0 m-2 rounded-lg text-slate-800 dark:text-zinc-200
-          backdrop-blur-sm bg-[#ffffff]/75 dark:bg-black/75 grid place-items-center"
+          class="absolute w-8 h-8 bottom-0 left-0 m-1 rounded-xl text-slate-800 dark:text-zinc-200
+          backdrop-blur-sm bg-slate-25/75 dark:bg-zinc-900/75 border border-slate-200/75 dark:border-zinc-700/75
+          grid place-items-center"
         >
           <Icon src={type == 'iframe' ? VideoCamera : Link} micro size="16" />
         </div>