Add fold chevron and vertical gutter

pradoslaw · Nov 4, 2024 · 3bee8b7 · 3bee8b7
1 parent add3bc8
commit 3bee8b7
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 13 deletions.
diff --git 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
@@ -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">