post date enhanced theme

SeaniaTwix · Dec 17, 2022 · 0e665fb · 0e665fb
1 parent 2c80b50
commit 0e665fb
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 41 deletions.
diff --git a/src/lib/components/Article.svelte b/src/lib/components/Article.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import '@root/styles/time-tooltip.css';
+
   import View from 'svelte-material-icons/Eye.svelte';
   import Plus from 'svelte-material-icons/Plus.svelte';
   import Edit from 'svelte-material-icons/Pencil.svelte';
@@ -249,9 +251,9 @@
       <div class="flex flex-col md:flex-col">
         <span class="w-max"><View size="1rem"/> {article.views ?? 1}</span>
 
-        <div class="__time-tooltip" time="작성 시간: {timeFullFormat(article.createdAt)}">
+        <div class="__time-tooltip before:bg-zinc-200 dark:before:bg-gray-700 dark:before:text-white" time="작성 시간: {timeFullFormat(article.createdAt)}">
           <button class="w-full text-right" data-tooltip-target="tooltip-time-specific" type="button">
-            <time class="text-zinc-500 dark:text-zinc-300 text-sm">
+            <time class="text-zinc-500 dark:text-zinc-300 text-sm" datetime="{(new Date(article.createdAt)).toUTCString()}">
               {timeAgo.format(new Date(article.createdAt))}
             </time>
           </button>
@@ -361,32 +363,4 @@
       aspect-ratio: 1/1;
     }
   }
-
-  .__time-tooltip {
-    position: relative;
-  }
-
-  .__time-tooltip::before {
-    content: "\2003" attr(time);
-    text-indent: -1rem;
-    display: inline-block;
-    position: absolute;
-    bottom: 50%;
-    background: #222F3E;
-    color: #FFFFFF;
-    padding: 0.5rem;
-    border-radius: 0.5rem;
-    opacity: 0;
-    transition: 0.3s;
-    overflow: hidden;
-    max-width: 50%;
-    pointer-events: none;
-    min-width: max-content;
-    right: calc(100% - 3rem);
-  }
-
-  .__time-tooltip:hover::before {
-    opacity: 1;
-    bottom: 100%;
-  }
 </style>
diff --git a/src/lib/components/Comment.svelte b/src/lib/components/Comment.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import '@root/styles/time-tooltip.css';
   import CircleAvatar from '$lib/components/CircleAvatar.svelte';
   import type {IComment} from '$lib/types/comment';
   import type {IUser} from '$lib/types/user';
@@ -267,7 +268,7 @@
          class:invisible={comment.deleted}
          class="rounded-md p-2 min-h-[8rem] divide-y divide-dotted hover:ring-2 outline-amber-400 ring-offset-2 {selected ? 'ring-sky-400 dark:ring-sky-600' : 'ring-sky-400/50 dark:ring-sky-600/80'} dark:ring-offset-gray-600">
       <div class="space-y-4">
-        <div class="flex justify-between ml-2" class:mb-3={!showInfo}>
+        <div class="flex justify-between items-center ml-2" class:mb-3={!showInfo}>
           <div class="flex space-x-2 pt-1 flex-col md:flex-row lg:flex-row">
             <div prevent-reply class="flex space-x-2 hover:cursor-pointer group items-center">
 
@@ -285,18 +286,13 @@
               {/if}
             </div>
           </div>
-          <div>
-            <button data-tooltip-target="tooltip-comment-time-specific-{comment._key}" type="button">
-              <time class="text-zinc-500 dark:text-zinc-300 text-sm">
+
+          <div class="__time-tooltip" time="작성 시간: {timeFullFormat(comment.createdAt)}">
+            <button class="w-full text-right" data-tooltip-target="tooltip-time-specific" type="button">
+              <time class="text-zinc-500 dark:text-zinc-300 text-sm" datetime="{(new Date(comment.createdAt)).toUTCString()}">
                 {timeAgo.format(new Date(comment.createdAt))}
               </time>
             </button>
-
-            <div id="tooltip-comment-time-specific-{comment._key}" role="tooltip"
-                 class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700">
-              작성 시간: {timeFullFormat(comment.createdAt)}
-              <div class="tooltip-arrow" data-popper-arrow></div>
-            </div>
           </div>
         </div>
         {#if showInfo}

diff --git a/src/routes/community/[id=integer]/+page.svelte b/src/routes/community/[id=integer]/+page.svelte
@@ -17,7 +17,6 @@
   import Cookies from 'js-cookie';
   import type {PageData} from './$types';
   import {ArticleItemDto} from '$lib/types/dto/article-item.dto';
-  import ky from 'ky-universal';
   import {client} from '$lib/auth/user/client.js';
   import type {UI} from '@root/app';
 

diff --git a/src/styles/time-tooltip.css b/src/styles/time-tooltip.css
@@ -0,0 +1,36 @@
+.__time-tooltip {
+  position: relative;
+}
+
+.__time-tooltip::before {
+  background: rgb(243 244 246);
+  color: black;
+}
+
+.dark .__time-tooltip::before {
+  background: rgb(31 41 55);
+  color: rgb(228 228 231);
+}
+
+.__time-tooltip::before {
+  content: "\2003" attr(time);
+  text-indent: -1rem;
+  display: inline-block;
+  position: absolute;
+  top: 100%;
+  margin-top: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  opacity: 0;
+  transition: 0.3s;
+  overflow: hidden;
+  max-width: 50%;
+  pointer-events: none;
+  min-width: max-content;
+  right: calc(100% - 3rem);
+}
+
+.__time-tooltip:hover::before {
+  opacity: 1;
+  top: 100%;
+}