Add tree topic guiderails

pradoslaw · Dec 2, 2024 · 698539d · 698539d
1 parent 8e5b998
commit 698539d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/resources/js/components/forum/post.vue b/resources/js/components/forum/post.vue
@@ -5,6 +5,8 @@
          {'is-deleted': hidden, 'not-read': !post.is_read, 'highlight-flash': highlight, 'post-deleted-collapsed': isCollapsed},
          postIndentCssClasses
        ]">
+    <div class="position-absolute post-guiderail" v-if="isChild">
+    </div>
     <div v-if="post.deleted_at"
          @click="isCollapsed = !isCollapsed"
          class="post-delete card-body text-decoration-none">
@@ -519,6 +521,9 @@ export default {
       if (post.indent === 4) return ['indent', 'indent-4'];
       return ['indent', 'indent-5'];
     },
+    isChild(): boolean {
+      return this.$props.post.indent > 1;
+    },
     postDropdownVisible(): boolean {
       return this.postDropdownItems.length > 0;
     },

diff --git a/resources/sass/components/forum/_tree_topic.scss b/resources/sass/components/forum/_tree_topic.scss
@@ -19,3 +19,15 @@
     margin-left: 48px;
   }
 }
+
+.post-guiderail {
+  height: 100px;
+  left: -10px;
+  width: 10px;
+  top: -24px;
+  border: 2px solid #ddd;
+  border-bottom-left-radius: 6px;
+  border-top: none;
+  border-right: none;
+  z-index: -1;
+}