По какой логике нарисовать линии для древовидной структуре комментариев?

Question

[Duh]

По какой логике нарисовать линии для древовидную структуры.
Вот пример, VC

Comments

[Михаил Р.]

по какой логике нарисовать линии для древовидную структуры

Что Вы подразумеваете под "логикой"?

[senator]

Михаил Р., наверно он имеет ввиду как это сверстать

[Duh]

Вот есть линия красная, как узнать что эту линию нужно скрыть или показывать? Если уровень вложенности будет 5, то как узнать показывать ту или иную линию?

[Wan-Derer]

haa, линия должна рисоваться ко всем потомкам данной ноды.

Answer 1

[thekunichka]

На самом деле для стилизации и работы такой структуры и JS не нужен. Такое дерево можно нарисовать с помощью ::before элемента. У тебя есть комментарий - в нём лежит ещё один комментарий как ответ на комментарий выше. Вот этому ответу на комментарий рисуешь ::before линию, как это сделать? Создаёшь before блок допустим 30px на 30px, создаёшь этому блоку border-left и border-bottom, делаешь скругление border-bottom-left-radius условно на 20px (там уже как тебе нужно по макету), затем этот before блок с абсолютным позиционированием сдвигаешь за рамки его родителя как тебе нужно

Answer 2

[Vindicar]

Я бы озадачил дочерний коммент рисованием линии. Тогда ты можешь использовать проверку на вложенность для определения наличия линии, и псевдоселектор :last-child чтобы понять, завершать ли линию на этом уровне, или делать ответвление.

Answer 3

[Elvis]

В базе хранится id комментария и id его родителя(ответ на который он дан). На верхнем уровне родитель равен 0. Вытаскиваем из базы все комментарии, группируем по родителю, сортируем по id.

Comments

[Duh]

Это все понятно, в этом нет пробелм. Вот есть линия красная, как узнать что эту линию нужно скрыть или показывать?
Если уровень вложенности будет 5, то как узнать показывать ту или иную линию?

[Elvis]

haa, тогда тут уже нужен тег CSS. Здесь я уже мало чем смогу помочь.

[pddev]

haa , Если это не с CSS делается, то вы ведь знаете, что это последний элемент на данном уровне вложенности - значит линию продлевать не нужно.