From e9021bde2910be5649a91c9291312d66d834edf4 Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Mon, 29 Apr 2019 12:06:42 -0600
Subject: [PATCH] Flattened replies: Avoid subtree/sibling confusion

So far the most confusing aspect of the flattened single replies is when
there are sibling comments on the same level. For example, if a comment
has 2 replies (A and B) and A has one reply (C), the flattening would
put all of A, B, and C on the same indentation level as A C B. This was
confusing and made it hard to recognize where a subtree ended and it
went back to sibling comments.

This change makes it so that the flattening will only happen when there
are no siblings. This will reduce how often the flattening is applicable
somewhat, but also eliminates this confusing case entirely.
---
 tildes/scss/modules/_comment.scss | 40 ++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/tildes/scss/modules/_comment.scss b/tildes/scss/modules/_comment.scss
index 5d0a8f3..0ebd03f 100644
--- a/tildes/scss/modules/_comment.scss
+++ b/tildes/scss/modules/_comment.scss
@@ -242,27 +242,33 @@
 
 @mixin flatten-single-replies-above-depth($depth) {
   // Makes it so that comments of the specified depth or greater will not indent
-  // their replies unless there is more than one reply. Instead, it adds text at the
-  // top of the next comment (the single reply) indicating that it's a direct reply to
-  // the above comment.
+  // their replies when they only have one reply *and* they're also the only reply to
+  // their parent (this avoids confusion between subtrees and siblings).
+  // When indenting is avoided, it adds text at the top of the next comment (the single
+  // reply) indicating that it's a direct reply to the above comment.
 
-  // We actually need the selector to check 1 level up from the specified starting
+  // We actually need the selector to check 2 levels up from the specified starting
   // depth because of how we're utilizing nesting.
-  $depth: $depth - 1;
+  @if ($depth < 2) {
+    @error "Starting depth must be at least 2";
+  }
+  $depth: $depth - 2;
 
   .comment[data-comment-depth="#{$depth}"] {
-    .comment[data-comment-replies="1"] {
-      & > .comment-tree-replies {
-        margin-left: -1px;  // compensate for border
-
-        & > .comment-tree-item > .comment > .comment-itself {
-          & > .comment-text::before,
-          & > header > .is-comment-deleted::before,
-          & > header > .is-comment-removed::before {
-            content: "(Reply to above comment)";
-            font-size: 0.6rem;
-            font-style: italic;
-            margin-right: 0.2rem;
+    .comment[data-comment-replies="1"] > .comment-tree-replies > .comment-tree-item {
+      & > .comment[data-comment-replies="1"] {
+        & > .comment-tree-replies {
+          margin-left: -1px;  // compensate for border
+
+          & > .comment-tree-item > .comment > .comment-itself {
+            & > .comment-text::before,
+            & > header > .is-comment-deleted::before,
+            & > header > .is-comment-removed::before {
+              content: "(Reply to above comment)";
+              font-size: 0.6rem;
+              font-style: italic;
+              margin-right: 0.2rem;
+            }
           }
         }
       }