From 7172ef43b6ab3f6017928aab508e75dacac6a22e Mon Sep 17 00:00:00 2001
From: kaangiray26 <kaangiray26@protonmail.com>
Date: Thu, 29 Jun 2023 14:20:19 +0200
Subject: [PATCH] deploy via script

---
 src/assets/styles.css               |  4 ++++
 src/components/CommentedPost.vue    | 11 ++++++-----
 src/components/Home.vue             | 19 ++++++++++++-------
 src/components/SinglePost.vue       | 22 ++++++++++------------
 src/components/SingleShortPost.vue  |  4 ++--
 src/components/UpvotedSavedPost.vue |  9 +++++----
 6 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/assets/styles.css b/src/assets/styles.css
index 92e104d..b78cf38 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -128,6 +128,10 @@ textarea {
     padding-left: 12px;
 }
 
+.p-similar {
+    padding: 3.25rem;
+}
+
 .invisible {
     visibility: hidden;
 }
diff --git a/src/components/CommentedPost.vue b/src/components/CommentedPost.vue
index 73953a0..981f6af 100644
--- a/src/components/CommentedPost.vue
+++ b/src/components/CommentedPost.vue
@@ -1,13 +1,14 @@
 <template>
     <div class="d-flex">
-        <div class="d-flex square p-1">
-            <img class="cover icon" :src="obj.image" @error="placeholder">
+        <div class="d-flex square p-1 me-1">
+            <img class="cover icon" :src="obj.image" @error="placeholder" loading="lazy">
         </div>
-        <div class="d-flex flex-fill align-items-center">
-            <h6 class="text-break p-1 m-0">{{ obj.title }}</h6>
+        <div class="d-flex flex-column align-items-start p-1 ps-0">
+            <small class="text-muted">{{ obj.author }}</small>
+            <h6 class="text-break m-0">{{ obj.title }}</h6>
         </div>
     </div>
-    <div class="d-flex p-theme border-top">
+    <div class="d-flex p-theme">
         <span v-html="obj.comment" class="text-break"></span>
     </div>
     <div class="d-flex justify-content-around bg-light rounded">
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 4924ea1..3eef276 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -13,9 +13,14 @@
         <ul class="list-group list-group-flush border-0 pt-0">
             <Post :obj="item" />
             <li v-for="post in posts" class="list-group-item border rounded p-0 mt-3">
-                <div class="d-flex flex-column p-theme">
-                    <h6 class="text-break m-0">{{ post.post }}</h6>
-                    <small class="text-muted">{{ get_details(post) }}</small>
+                <div class="d-flex">
+                    <div class="d-flex square p-1 me-1">
+                        <img ref="target" class="cover icon" src="/favicon.svg" loading="lazy">
+                    </div>
+                    <div class="d-flex flex-column align-items-start p-1 ps-0">
+                        <small class="text-muted">{{ get_details(post) }}</small>
+                        <h6 class="text-break m-0">{{ post.post }}</h6>
+                    </div>
                 </div>
                 <div class="d-flex justify-content-around bg-light rounded">
                     <button type="button" class="btn btn-touch bi bi-heart invisible"></button>
@@ -84,12 +89,12 @@ function format_date(dt) {
         hour12: true,
     })
 
-    return `${date_string} ${time_string}`
+    return `🕐 ${date_string} ${time_string}`
 }
 
 function get_details(post) {
     if (sort.value == 'hot') {
-        return `${post.count} pts`
+        return `🚀 ${post.count} pts`
     }
 
     if (sort.value == 'new') {
@@ -97,11 +102,11 @@ function get_details(post) {
     }
 
     if (sort.value == 'top') {
-        return `${post.count} pts`
+        return `🚀 ${post.count} pts`
     }
 
     if (sort.value == 'controversial') {
-        return `${post.count} comments`
+        return `📝 ${post.count} comments`
     }
 }
 
diff --git a/src/components/SinglePost.vue b/src/components/SinglePost.vue
index b0ad2ca..f3dee4a 100644
--- a/src/components/SinglePost.vue
+++ b/src/components/SinglePost.vue
@@ -1,20 +1,18 @@
 <template>
-    <div class="card border-0 theme-shadow rounded">
+    <div class="card border-0">
         <div class="card-body p-0">
-            <div class="border-bottom px-2 py-1">
-                <span class="fw-bold">{{ obj.author }}</span>
+            <div class="d-flex flex-column align-items-start p-3 pb-0">
+                <small class="text-muted">{{ obj.author }}</small>
+                <h6 class="text-break m-0">{{ obj.title }}</h6>
             </div>
-            <div class="px-2 py-1">
-                <span>{{ obj.title }}</span>
+            <div class="d-flex px-3 py-1">
+                <small class="me-2">🚀 {{ points }} pts</small>
+                <small>📝 {{ comments.length }} cts</small>
             </div>
-            <div class="d-flex square">
-                <img class="img-post" :src="obj.image" @error="placeholder">
+            <div class="d-flex square p-3">
+                <img class="img-post rounded theme-shadow" :src="obj.image" @error="placeholder">
             </div>
-            <div class="d-flex justify-content-between bg-dark">
-                <span class="text-light font-monospace ms-2">{{ points }} pts</span>
-                <span class="text-light font-monospace me-2">{{ comments.length }} cts</span>
-            </div>
-            <div class="d-flex justify-content-around bg-light">
+            <div class="d-flex justify-content-around rounded bg-light mx-3 mb-3">
                 <button type="button" class="btn btn-touch bi"
                     :class="{ 'bi-heart-fill': is_upvoted, 'bi-heart': !is_upvoted }" @click="upvote"></button>
                 <button type="button" class="btn btn-touch bi bi-chat"></button>
diff --git a/src/components/SingleShortPost.vue b/src/components/SingleShortPost.vue
index 2528e40..d04386c 100644
--- a/src/components/SingleShortPost.vue
+++ b/src/components/SingleShortPost.vue
@@ -4,9 +4,9 @@
             <div class="d-flex square p-1 me-1">
                 <img ref="target" class="cover icon" :src="obj.image" @error="placeholder" loading="lazy">
             </div>
-            <div class="d-flex flex-column align-items-start">
+            <div class="d-flex flex-column align-items-start p-1 ps-0">
                 <small class="text-muted">{{ obj.author }}</small>
-                <h6 class="text-break p-1 m-0">{{ obj.title }}</h6>
+                <h6 class="text-break m-0">{{ obj.title }}</h6>
             </div>
         </div>
         <div class="d-flex justify-content-around bg-light rounded">
diff --git a/src/components/UpvotedSavedPost.vue b/src/components/UpvotedSavedPost.vue
index 051c017..a121df3 100644
--- a/src/components/UpvotedSavedPost.vue
+++ b/src/components/UpvotedSavedPost.vue
@@ -1,10 +1,11 @@
 <template>
     <div class="d-flex">
-        <div class="d-flex square p-1">
-            <img class="cover icon" :src="obj.image" @error="placeholder">
+        <div class="d-flex square p-1 me-1">
+            <img class="cover icon" :src="obj.image" @error="placeholder" loading="lazy">
         </div>
-        <div class="d-flex flex-fill align-items-center">
-            <h6 class="text-break p-1 m-0">{{ obj.title }}</h6>
+        <div class="d-flex flex-column align-items-start p-1 ps-0">
+            <small class="text-muted">{{ obj.author }}</small>
+            <h6 class="text-break m-0">{{ obj.title }}</h6>
         </div>
     </div>
     <div class="d-flex justify-content-around bg-light rounded">