Question

I’m trying to make a recursive directory display in html using json data from a node.js server and using it as the rendering context for a dustjs-linkedin template. The data contains a structure like the following:

{
  "isDirectory": true,
  "path": "",
  "name": "",
  "files": [
    {
      "name": "Light House.jpg",
      "filename": "Light%20House.jpg",
      "path": "/Light%20House.jpg",
      "bytes": 561276,
      "date": "2012-07-25T16:30:45.094Z",
      "prettyDate": "Jul 25 2012 11:30:45",
      "type": "image/jpeg",
      "size": "548.1 kB",
      "indent": 15,
      "id": "file0"
    },
    {
      "isDirectory": true,
      "path": "/folder0",
      "name": "folder0",
      "files": [
        {
          "name": "Desert.jpg",
          "filename": "Desert.jpg",
          "path": "/folder0/Desert.jpg",
          "bytes": 845941,
          "date": "2012-07-25T16:30:41.301Z",
          "prettyDate": "Jul 25 2012 11:30:41",
          "type": "image/jpeg",
          "size": "826.1 kB",
          "indent": 30,
          "id": "file0_0"
        }
      ],
      "id": "file0_0",
      "indent": 15,
      "bytes": 845941,
      "date": "2012-07-25T16:30:41.301Z",
      "prettyDate": "Jul 25 2012 11:30:41",
      "size": "826.1 kB"
    },
    {
      "isDirectory": true,
      "path": "/folder1",
      "name": "folder1",
      "files": [
        {
          "name": "Jellyfish.jpg",
          "filename": "Jellyfish.jpg",
          "path": "/folder1/Jellyfish.jpg",
          "bytes": 775702,
          "date": "2012-07-25T16:30:41.266Z",
          "prettyDate": "Jul 25 2012 11:30:41",
          "type": "image/jpeg",
          "size": "757.5 kB",
          "indent": 30,
          "id": "file0_1"
        }
      ],
      "id": "file0_1",
      "indent": 15,
      "bytes": 775702,
      "date": "2012-07-25T16:30:41.266Z",
      "prettyDate": "Jul 25 2012 11:30:41",
      "size": "757.5 kB"
    },
    {
      "isDirectory": true,
      "path": "/folder2",
      "name": "folder2",
      "files": [
        {
          "name": "Koala.jpg",
          "filename": "Koala.jpg",
          "path": "/folder2/Koala.jpg",
          "bytes": 780831,
          "date": "2012-07-25T16:30:41.384Z",
          "prettyDate": "Jul 25 2012 11:30:41",
          "type": "image/jpeg",
          "size": "762.5 kB",
          "indent": 30,
          "id": "file0_2"
        }
      ],
      "id": "file0_2",
      "indent": 15,
      "bytes": 780831,
      "date": "2012-07-25T16:30:41.384Z",
      "prettyDate": "Jul 25 2012 11:30:41",
      "size": "762.5 kB"
    },
    {
      "isDirectory": true,
      "path": "/folder3",
      "name": "folder3",
      "files": [
        {
          "name": "Penguins.jpg",
          "filename": "Penguins.jpg",
          "path": "/folder3/Penguins.jpg",
          "bytes": 777835,
          "date": "2012-07-25T20:42:31.170Z",
          "prettyDate": "Jul 25 2012 15:42:31",
          "type": "image/jpeg",
          "size": "759.6 kB",
          "indent": 30,
          "id": "file0_4"
        }
      ],
      "id": "file0_4",
      "indent": 15,
      "bytes": 777835,
      "date": "2012-07-25T20:42:31.170Z",
      "prettyDate": "Jul 25 2012 15:42:31",
      "size": "759.6 kB"
    }
  ],
  "id": "file0",
  "indent": 0,
  "bytes": 3741585,
  "date": "2012-07-25T20:42:31.170Z",
  "prettyDate": "Jul 25 2012 15:42:31",
  "size": "3.6 MB"
}

And the template for rendering as of now is this:

<!-- views/directory.dust -->
<!-- note that {.parentId} is equal to "file0" initially -->
{?.isDirectory}
<div class="collapse file-stats {parentId}" data-toggle="collapse" data-target="[class*={.id}]" style="font-size:15px">
    <div class="file-name">
        <div style="display:inline-block;width:{.indent}px"></div>
        <i class="icon-folder-open"></i> 
        {.name}
    </div>
    <div class="file-size">
        {.size}
    </div>
    <div class="file-date">
        {.prettyDate}
    </div>
</div>
{#.isDirectory parentId=.id}
    {#files}
        {>"views/directory.dust"/}
    {/files}
{/.isDirectory}
{:else}
<div class="collapse file-stats {.id}" style="font-size:15px">
    <div class="file-name">
        <div style="display:inline-block;width:{.indent}px"></div>
        <i class="icon-file"></i> 
        {.name}
    </div>
    <div class="file-size">
        {.size}
    </div>
    <div class="file-date">
        {.prettyDate}
    </div>
    <!--<span class="btn-group">
        <a class="btn btn-mini" href="/projects/{uri}/downloads/{.path}">
            <i class="icon-download"></i>
        </a>
        <button class="btn btn-mini" onclick="settings('/projects/{uri}/update/{.path}', '{.filename}', '{.path}')">
            <i class="icon-edit"></i>
        </button>
    </span>
    <a class="btn btn-mini btn-danger pull-right" href="/projects/{uri}/remove/{.path}">
        <i class="icon-trash"></i>
    </a>
    <div class="clearfix"></div>-->
</div>
{/.isDirectory}

The problem is that as of now, the collapse plugin for bootstrap does not work with a display:table-row element, so I’m looking for a way of making the html output vertically align the elements of the classes file-name, file-size, and file-date while indenting the folder / file icons for each file its respective amount. I realize this is a rather specific question, so I will be open to any suggestions to rethinking the way I’m doing this (except I will not change view engines or the platform I’m using obviously).

Edit

I’d like to point out that the way this renders as of now, everything in my last paragraph I mentioned works great except the collapse plugin. I might also point out that all the css I’m using to get the vertical-alignment to work is in here:

.files {
    display:table;
}

.file-stats {
    display:table-row;
}

.file-name, .file-size, .file-date {
    padding: 0px 4px 0px 4px;
}

.file-name {
    display:table-cell;
    overflow: hidden;
    text-overflow:ellipsis;
}

.file-size {
    display:table-cell;
    overflow: hidden;
    text-overflow:ellipsis;
}

.file-date {
    display:table-cell;
    overflow: hidden;
    text-overflow:ellipsis;
}

Answer 1

Use display:inline-block with a placeholder to vertically align elements without using display:table-row. To handle the recursive indentation, replacing div class="collapse" with blockquote class="collapse" might work.