Add 7 more indent levels in tree post

pradoslaw · Dec 5, 2024 · 0269e4a · 0269e4a
1 parent 9ae56bc
commit 0269e4a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 26 deletions.
diff --git a/resources/js/components/forum/post.vue b/resources/js/components/forum/post.vue
@@ -540,13 +540,21 @@ export default {
       return this.$props.post.hasNextSibling;
     },
     postIndentCssClasses(): string[] {
-      const post = this.$props.post;
-      if (!post.indent) return [];
-      if (post.indent === 1) return ['indent', 'indent-1'];
-      if (post.indent === 2) return ['indent', 'indent-2'];
-      if (post.indent === 3) return ['indent', 'indent-3'];
-      if (post.indent === 4) return ['indent', 'indent-4'];
-      return ['indent', 'indent-5'];
+      const level = this.$props.post.indent;
+      if (!level) return [];
+      if (level === 1) return ['indent', 'indent-none'];
+      if (level === 2) return ['indent', 'indent-1'];
+      if (level === 3) return ['indent', 'indent-2'];
+      if (level === 4) return ['indent', 'indent-3'];
+      if (level === 5) return ['indent', 'indent-4'];
+      if (level === 6) return ['indent', 'indent-5'];
+      if (level === 7) return ['indent', 'indent-6'];
+      if (level === 8) return ['indent', 'indent-7'];
+      if (level === 9) return ['indent', 'indent-8'];
+      if (level === 10) return ['indent', 'indent-9'];
+      if (level === 11) return ['indent', 'indent-10'];
+      if (level === 12) return ['indent', 'indent-11'];
+      return ['indent', 'indent-12'];
     },
     isChild(): boolean {
       return this.$props.post.indent > 1;

diff --git a/resources/sass/components/forum/_tree_topic.scss b/resources/sass/components/forum/_tree_topic.scss
@@ -1,25 +1,19 @@
 @use "../../../feature/theme/theme" as theme;
 
 .card-post.indent {
-  &.indent-1 {
-    margin-left: 0;
-  }
-
-  &.indent-2 {
-    margin-left: 16px;
-  }
-
-  &.indent-3 {
-    margin-left: 32px;
-  }
-
-  &.indent-4 {
-    margin-left: 48px;
-  }
-
-  &.indent-5 {
-    margin-left: 64px;
-  }
+  &.indent-none {margin-left: 0;}
+  &.indent-1 {margin-left: 16px * 1;}
+  &.indent-2 {margin-left: 16px * 2;}
+  &.indent-3 {margin-left: 16px * 3;}
+  &.indent-4 {margin-left: 16px * 4;}
+  &.indent-5 {margin-left: 16px * 5;}
+  &.indent-6 {margin-left: 16px * 6;}
+  &.indent-7 {margin-left: 16px * 7;}
+  &.indent-8 {margin-left: 16px * 8;}
+  &.indent-9 {margin-left: 16px * 9;}
+  &.indent-10 {margin-left: 16px * 10;}
+  &.indent-11 {margin-left: 16px * 11;}
+  &.indent-12 {margin-left: 16px * 12;}
 }
 
 .post-guiderail {