html css tree vertical alignment (using flex, row, flex-start)-CodePudding

This is a django html, css and very minimal or no JS question of a Tree display using nested UL/LI

(so far) have found out already the work of displaying tree vertical/horizontal is done,
(current issue) aim is to display a dynamic tree or static tree using nested UL in multiple format or options for the end-users with different options (they may choose for easier visualization) like vertical tree, horizontal tree and goal on the left side or right side. so far those are achieved
currently the issue in working on the following to display vertically aligned horizontal tree with flex, and unable to succeed with the display as the wrap of the one tree path is making some impact on the next connectors (still trying to figure out which css selector and associated property will help to clear the gap)

Please find the attached screen shot and also the code

Latest Results Screenshot enter image description here

CSS code:

<style>
    body {
        padding-top: 10px;
    }
    
    .tree {
        list-style: none;
    }
    
    .tree,
    .tree * {
        margin: 0;
    }
    
    .tree li {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        position: relative;
        padding-left: 2vw;
    }
    
    .tree li::before {
        content: '';
        position: absolute;
        align-items: center;
        left: 0;
        top: 10%;
        border-top: 4px solid rgb(42, 165, 97);
        width: 2vw;
    }
    /* ========================================================= */
    
    .tree li::after {
        content: '';
        position: absolute;
        align-items: flex-start;
        left: 0;
        top:10%;
        margin-bottom: 2px;
    }
    
    .tree li:not(:only-child):after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 10%;
        margin-top: 0px;
        margin-bottom: 2px;
        border-left: 3px solid rgb(172, 206, 20);
    }
  
    /* ========================================================= */
    
    .tree li:last-of-type::after {
        height: 50%;
        top: 0;
    }
    
    .tree li:first-of-type::after {
        height: 50%;
        bottom: 0;
    }
    
    .tree li:not(:first-of-type):not(:last-of-type)::after {
        height: 100%;
    }
    
    .tree ul,
    .tree ol {
        padding-left: 2vw;
        position: relative;
    }
    
    .tree ul:not(:empty)::before,
    .tree ol:not(:empty)::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8%;
        border-top: 4px solid red;
        width: 2vw;
    }
    
    
    .tree span {
        border: 1px solid;
        text-align: center;
        padding: 0.33em 0.66em;
        background-color: yellow;
        color: blue;
    }
    
    .tree>li {
        padding-left: 0;
    }
    
    .tree>li::before,
    .tree>li::after {
        display: none;
    }
    
    ol,
    ul {
        counter-reset: section;
    }
    
    li span::before {
        counter-increment: section;
        /* content: counters(section, ".") " "; */
        font-family: monospace;
    }
    
    body {
        /* display: flex; */
        justify-content: center;
        align-items: center;
        height: 100%;
    }

CodePudding user response：

finally working to a basic draft version: enter image description here

still has to test with different dynamic options and also create a smooth alignment between the lines.

CodePudding user response：

Currently this is the working copy, still some more - pending fixes - please find the code and screenshot

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    body {
    padding-top: 10px;
    }

    .tree {
    list-style: none;
    }

    .tree,
    .tree * {
    margin: 0;
    }

    .tree li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    padding-left: 2vw;
    padding-bottom: 2vh;
    }
    .tree li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 5%;
    margin-top: 2px;

    }




    .tree li::before {
    content: '';
    position: absolute;
    align-items: center;
    left: 2px;
    top: 1%;
    margin-left: -2px;
    margin-right: -20px;
    border-top: 5px solid red;
    width: 2vw;
    }




    .tree li:not(:last-of-type)::before {
    content: '';
    position: absolute;
    align-items: center;
    left: -2px;
    margin-left: -3px;
    top: 2%;
    border-top: 2px solid BLUE;
    width: 2vw;
    }
    /* ========================================================= */



    .tree li:not(:only-child):not(:last-of-type)::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0%;
    margin-top: 1px;
    margin-bottom: -4px;
    border-left: 2px solid blue;
    }
    .tree li:not(:only-child):not(:first-of-type):not(:last-of-type)::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0%;
    margin-top: 1px;
    margin-bottom: -4px;
    border-left: 2px solid red;
    }


    .tree li:only-child::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0%;
    margin-top: 1px;
    margin-bottom: -6px;
    border-left: 0px solid grey;
    }
    .tree li:only-child::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2%;
    top: 14%;
    margin-top: 10px;
    margin-bottom: 2px;
    border-left: 0px solid grey;
    }

    .tree li:only-last-child::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5%;
    top: -20%;
    margin-top: 10px;
    margin-bottom: -24px;
    border-left: 10px solid yellow;
    }

    .tree li:only-last-child::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0%;
    top: 5%;
    margin-top: -9px;
    margin-bottom: 20px;
    border-left: 2px solid white;
    }

    /* ========================================================= */

    .tree li:last-of-type::after {
    height: 50%;
    top: 0;            
    }

    .tree li:first-of-type::after {
    height: 50%;
    bottom: 0;           
    }

    .tree li:not(:first-of-type):not(:last-of-type)::after {
    height: 100%;
    }

    .tree ul,
    .tree ol {
    padding-left: 2vw;
    position: relative;
    }

    .tree ul:not(:empty)::before,
    .tree ol:not(:empty)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2%;
    margin-bottom: -2px;
    border-top: 2px solid blue;
    width: 2vw;
    }



    .tree span {
    border: 1px solid;
    text-align: center;
    padding: 0.33em 0.66em;
    background-color: yellow;
    color: blue;
    }

    .tree>li {
    padding-left: 0;
    }

    .tree>li::before,
    .tree>li::after {
    display: none;
    }

    ol,
    ul {
    counter-reset: section;
    }

    li span::before {
    counter-increment: section;
    /* content: counters(section, ".") " "; */
    font-family: monospace;
    }

    body {
    /* display: flex; */
    justify-content: center;
    align-items: center;
    height: 100%;
    }







    </style>
    </head>
    <body>
    <ul >
    <li><span>Main</span>


    </li>

    </ul>
    <ul >
    <li>
    <span>BACKLOG</span>
    <ul>
    <li><span>Level1</span>

    <ul>
    <li><span>Level1.1</span>
    <ul>
    <li><span>Level1.2.1</span>

    <ul>
    <li><span>Level1.2.1.1</span></li>
    <li><span>Level1.2.1.2</span></li>
    </ul>
    </li>
    <li><span>Level1.2.2</span></li>
    </ul>

    </li>
    <li><span>Level1.2</span>
    <ul>
    <li><span>Level1.2.1</span>

    <ul>
    <li><span>Level1.2.1.1</span></li>
    <li><span>Level1.2.1.2</span>

    <ul>
    <li><span>Level1.2.1.2.1</span></li>
    <li><span>Level1.2.1.2.2</span></li>
    <li><span>Level1.2.1.2.3</span></li>
    </ul>
    </li>
    <li><span>Level1.2.1.3</span></li>
    </ul>
    </li>
    <li><span>Level1.2.2</span>


    <ul>
    <li><span>Level1.2.2.1</span></li>
    <li><span>Level1.2.2.2</span></li>
    <li><span>Level1.2.2.3</span></li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>



    </body>
    </html>

Screenshot