Turn dir listings into UL, so we can use normal links

.scss-lint.yml

@@ -100,7 +100,7 @@ linters:
 
   NestingDepth:
     enabled: true
-    max_depth: 5
+    max_depth: 7
     ignore_parent_selectors: false
 
   PlaceholderInExtend:
@@ -144,7 +144,7 @@ linters:
     enabled: true
 
   QualifyingElement:
-    enabled: true
+    enabled: false
     allow_element_with_attribute: false
     allow_element_with_class: false
     allow_element_with_id: false

app/components/directory-listing/template.hbs

@@ -1,17 +1,11 @@
-<table>
+<ul class="listing">
-  <thead>
+  {{#each items as |item|}}
-    <tr>
+  <li>
-      <td>Name</td>
+    {{#link-to "index"}}
-      <td>Type</td>
+      <span class="icon">{{item-icon type=item.type}}</span>
-    </tr>
+      <span class="name">{{item.name}}</span>
-  </thead>
+      <span class="type">{{item.type}}</span>
-  <tbody>
+    {{/link-to}}
-    {{#each items as |item|}}
+  </li>
-    <tr>
+  {{/each}}
-      <td class="icon">{{item-icon type=item.type}}</td>
+</ul>
-      <td class="name">{{item.name}}</td>
-      <td class="type">{{item.type}}</td>
-    </tr>
-    {{/each}}
-  </tbody>
-</table>

app/components/item-icon/component.js

@@ -2,12 +2,27 @@ import Component from '@ember/component';
 
 export default Component.extend({
 
+  tagName: 'img',
   classNames: ['item-icon'],
+  attributeBindings: ['src:src'],
 
   type: null,
 
   isFolder: function() {
     return this.get('type') === 'folder';
-  }.property('type')
+  }.property('type'),
+
+  src: function() {
+    let prefix = '/img/file-icons/';
+    let filename;
+
+    if (this.get('isFolder')) {
+      filename = 'folder.svg';
+    } else {
+      filename = 'file.svg';
+    }
+
+    return prefix + filename;
+  }.property()
 
 });

app/components/item-icon/template.hbs

@@ -1,5 +0,0 @@
-{{#if isFolder}}
-  <img src="/img/file-icons/folder.svg">
-{{else}}
-  <img src="/img/file-icons/file.svg">
-{{/if}}

app/styles/components/_directory-listing.scss

@@ -1,40 +1,51 @@
 .directory-listing {
 
-  table {
+  ul.listing {
+    display: block;
     width: 100%;
     margin-bottom: 6rem;
-    border-collapse: collapse;
 
-    thead {
+    li {
-      display: none;
+      display: table;
-    }
+      width: 100%;
-    tbody {
+      border-bottom: 1px solid #ececec;
-      tr {
-        border-bottom: 1px solid #ececec;
 
-        &:first-of-type {
+      &:first-of-type {
-          border-top: 1px solid #ececec;
+        border-top: 1px solid #ececec;
+      }
+
+      &:hover {
+        span {
+          opacity: 0.7;
+          cursor: pointer;
         }
+      }
 
-        &:hover {
+      a {
-          td {
+        display: table-row;
-            opacity: 0.7;
+        text-decoration: none;
-            cursor: pointer;
+        color: $dark-grey-1;
+
+        span {
+          display: table-cell;
+          padding: 1rem 1.5rem;
+
+          &.icon {
+            width: 1rem;
+            padding-right: 0;
+            text-align: center;
+          }
+          &.name {
+            width: 60%;
+          }
+          &.type {
+            width: 40%;
+            color: #aaa;
           }
         }
       }
-      td {
-        padding: 1rem 1.5rem;
-
-        &.icon {
-          width: 1rem;
-          padding-right: 0;
-        }
-        &.type {
-          color: #aaa;
-        }
-      }
     }
+
   }
 
 }

app/styles/components/_item-icon.scss

@@ -1,4 +1,4 @@
-.item-icon {
+ul.listing span.icon {
   text-align: center;
 
   img {

tests/integration/components/directory-listing/component-test.js

@@ -13,6 +13,7 @@ test('it renders directory items', function(assert) {
 
   this.render(hbs`{{directory-listing items=items}}`);
 
-  assert.equal(this.$('table tbody tr:first td:nth-of-type(2)').text(), 'documents');
+  assert.equal(this.$('ul li:nth-of-type(1) span.name').text(), 'documents');
-  assert.equal(this.$('table tbody tr:first td:nth-of-type(3)').text(), 'folder');
+  assert.equal(this.$('ul li:nth-of-type(1) span.type').text(), 'folder');
+  assert.equal(this.$('ul li:nth-of-type(2) span.name').text(), 'public');
 });