From 3bee8b7b2aff0e4a7e0a638d980b9c182aa68b5c Mon Sep 17 00:00:00 2001
From: Daniel Wilkowski <wilkowski.kontakt@gmail.com>
Date: Mon, 4 Nov 2024 17:59:32 +0100
Subject: [PATCH] Add fold chevron and vertical gutter

---
 resources/js/components/forum/post.vue | 45 +++++++++++++++++++-------
 resources/views/forum/topic.twig       |  2 +-
 2 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/resources/js/components/forum/post.vue b/resources/js/components/forum/post.vue
index eadd80cb1..7daf41a2a 100644
--- a/resources/js/components/forum/post.vue
+++ b/resources/js/components/forum/post.vue
@@ -1,14 +1,29 @@
 <template>
-  <div class="d-flex">
-    <vue-avatar
-      v-if="post.user"
-      :name="post.user.name"
-      :photo="post.user.photo"
-      :is-online="post.user.is_online"
-      :initials="post.user.initials"
-      class="d-block img-thumbnail me-2 flex-shrink-0"
-      style="width:45px; height:45px;"
-    />
+  <div class="d-flex" :style="{'margin-left': nestLevel === 1 ? '52px':'0px'}">
+    <div class="flex-shrink-0">
+      <vue-avatar
+        v-if="post.user"
+        :name="post.user.name"
+        :photo="post.user.photo"
+        :is-online="post.user.is_online"
+        :initials="post.user.initials"
+        class="d-block img-thumbnail me-2"
+        style="width:45px; height:45px; z-index:2;"
+      />
+      <div
+        v-if="nestLevel===0"
+        style="
+          height: 100%; 
+          opacity: 0.4; 
+          margin-left: 22px; 
+          margin-top: -22px; 
+          z-index: 1; 
+          border: 1px solid currentColor; 
+          border-right: none; 
+          border-top: none;
+          border-bottom-left-radius: 8px;
+        "/>
+    </div>
     <div :id="anchor"
          class="card card-post flex-grow-1"
          :class="{'is-deleted': hidden, 'not-read': !post.is_read, 'highlight-flash': highlight, 'post-deleted-collapsed':isCollapsed}">
@@ -112,6 +127,10 @@
       <div :class="{'collapse': isCollapsed}" class="card-footer" v-if="!authorBlocked">
         <div class="d-flex">
           <div v-if="!post.deleted_at">
+            <button type="button" class="btn btn-sm">
+              <i class="fa-light fa-circle-chevron-down me-1"/>
+              6
+            </button>
             <button
               type="button"
               class="btn btn-sm"
@@ -122,9 +141,9 @@
               data-balloon-pos="down"
               data-balloon-break
             >
-              <span class="me-2" v-text="post.score"/>
               <vue-icon name="postVoted" class="text-primary" v-if="post.is_voted"/>
               <vue-icon name="postVote" v-else/>
+              <span class="ms-1 me-1" v-text="post.score"/>
               Doceń
             </button>
 
@@ -194,7 +213,6 @@
       </div>
       <vue-modal ref="delete-modal" @delete="reasonId => deletePost(false, reasonId)" :reasons="reasons"/>
     </div>
-
   </div>
 </template>
 
@@ -255,6 +273,9 @@ export default {
     uploadMimes: {
       type: String,
     },
+    nestLevel: {
+      type: Number,
+    },
   },
   data() {
     return {
diff --git a/resources/views/forum/topic.twig b/resources/views/forum/topic.twig
index 38756a904..f00afb80a 100644
--- a/resources/views/forum/topic.twig
+++ b/resources/views/forum/topic.twig
@@ -134,7 +134,7 @@
           :key="post.id"
           :post="post"
           @reply="reply"
-          :style="{'margin-left': key %2===1? '52px':'0px'}"
+          :nest-level="key % 2"
       ></vue-post>
 
       <div class="page-pagination d-flex mb-3">