concise ui

Tarhche · May 26, 2024 · f81a94e · f81a94e
1 parent 83e9357
commit f81a94e
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 19 deletions.
diff --git a/frontend/components/card/large.vue b/frontend/components/card/large.vue
@@ -8,9 +8,9 @@
             <p class="card-text">{{ excerpt }}</p>
             <div>
                 <small class="d-block">
-                    <a class="text-muted" href="./author.html">Favid Rick</a>
+                    <a class="text-muted" href="#">Favid Rick</a>
                 </small>
-                <small class="text-muted">{{ useTime().toAgo(publishedAt) }} &middot; 5 min read</small>
+                <time :datetime="publishedAt" class="text-muted small">{{ useTime().toAgo(publishedAt) }}</time>
             </div>
         </div>
     </div>

diff --git a/frontend/components/card/list/item.vue b/frontend/components/card/list/item.vue
@@ -7,7 +7,6 @@
             <div v-if="tags" class="card-text">
                 <a class="hashtag" :href="`/hashtags/${tag}`" v-for="tag in tags">{{ tag }}</a>
             </div>
-            <small class="text-muted">{{ useTime().toAgo(publishedAt) }}</small>
         </span>
     </li>
 </template>

diff --git a/frontend/components/card/medium.vue b/frontend/components/card/medium.vue
@@ -6,13 +6,15 @@
       </figure>
     </div>
     <div class=" card-body px-1 px-md-3 py-2 py-md-1  col-md-6 col-lg-7 col-xl-8  ">
-        <h2 class="mb-2 h4 fw-bold">
-            <a class="text-dark" :href="href">{{ title }}</a>
-        </h2>
-        <p class="card-text-summary">{{ excerpt }}</p>
-      <div class="card-info d-flex flex-column gap-1 mt-2">
-        <div class="card-text text-muted small">Jake Bittle in SCIENCE</div>
-        <small class="text-muted">{{ useTime().toAgo(publishedAt) }} &middot; 5 min read</small>
+      <h2 class="mb-2 h4 fw-bold">
+        <a class="text-dark" :href="href">{{ title }}</a>
+      </h2>
+      <p class="card-text-summary">{{ excerpt }}</p>
+      <div class="card-info d-flex flex-column">
+        <span class="text-muted small">
+          <span class="fa-regular fa-clock mx-1"></span>
+          <time :datetime="publishedAt">{{ useTime().toAgo(publishedAt) }}</time>
+        </span>
       </div>
     </div>
   </div>

diff --git a/frontend/components/card/small.vue b/frontend/components/card/small.vue
@@ -3,10 +3,10 @@
         <img :style="{height: '100px'}" :src="resolveFileUrl(cover)">
         <div>
             <h2 class="mb-2 h6 fw-bold">
-            <a class="text-dark" :href="href">{{ title }}</a>
+                <a class="text-dark" :href="href">{{ title }}</a>
             </h2>
             <div class="card-text text-muted small">{{ excerpt }}</div>
-            <small class="text-muted"> {{ useTime().toAgo(publishedAt) }} &middot; 5 min read</small>
+            <time :datetime="publishedAt" class="text-muted small">{{ useTime().toAgo(publishedAt) }}</time>
         </div>
     </div>
 </template>

diff --git a/frontend/pages/articles/[uuid].vue b/frontend/pages/articles/[uuid].vue
@@ -3,14 +3,25 @@
     <div class="container">
         <div class="row justify-content-center py-4" >
             <section class="col-md-12 col-lg-8">
+              <h1 class="pb-3">{{ data.title }}</h1>
+              <div class="my-3">
+                <span class="small">
+                  <span class="fa-regular fa-clock"></span>
+                  <span class="mx-1">تاریخ انتشار:</span>
+                  <time class="text-muted" :datetime="data.published_at">{{ useTime().toAgo(data.published_at) }}</time>
+                </span>
+              </div>
               <figure v-if="data.cover">
-                <img class="pb-4 image-zoomable" :src="resolveFileUrl(data.cover)" :alt="data.title">
+                <img class="image-zoomable" :src="resolveFileUrl(data.cover)" :alt="data.title">
+                <figcaption class="alert alert-secondary my-3 text-wrap">
+                  <span class="fa-solid fa-book fa-flip-horizontal fa-xl"></span>
+                  {{ data.excerpt }}
+                </figcaption>
               </figure>
-              <h1 class="pb-4">{{ data.title }}</h1>
-                <article class="article-post" v-html="data.body"></article>
-                <div v-if="data.tags" class="card-text">
-                    <a class="hashtag" :href="`/hashtags/${tag}`" :key="index" v-for="(tag, index) in data.tags">{{ tag }}</a>
-                </div>
+              <article class="article-post" v-html="data.body"></article>
+              <div v-if="data.tags" class="card-text">
+                <a class="hashtag" :href="`/hashtags/${tag}`" :key="index" v-for="(tag, index) in data.tags">{{ tag }}</a>
+              </div>
             </section>
         </div>
     </div>
@@ -41,7 +52,7 @@
 		link: [
 			{ rel: 'canonical', href: `/articles/${uuid}` }
 		]
-    })
+  })
 
 	onMounted(hljs.highlightAll)
 </script>