From 0e665fbecad75aa0b8c0176824455a497d62be6c Mon Sep 17 00:00:00 2001
From: Seania <seania.twix@gmail.com>
Date: Sun, 18 Dec 2022 07:27:48 +0900
Subject: [PATCH] post date enhanced theme

---
 src/lib/components/Article.svelte             | 34 +++---------------
 src/lib/components/Comment.svelte             | 16 ++++-----
 .../community/[id=integer]/+page.svelte       |  1 -
 src/styles/time-tooltip.css                   | 36 +++++++++++++++++++
 4 files changed, 46 insertions(+), 41 deletions(-)
 create mode 100644 src/styles/time-tooltip.css

diff --git a/src/lib/components/Article.svelte b/src/lib/components/Article.svelte
index 221c64d..0e1d1ca 100644
--- 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>
\ No newline at end of file
diff --git a/src/lib/components/Comment.svelte b/src/lib/components/Comment.svelte
index eb65842..bbbe972 100644
--- 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
index 37c4b31..cf7ae64 100644
--- 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
new file mode 100644
index 0000000..999fcb3
--- /dev/null
+++ 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%;
+}
\ No newline at end of file