Project list responsive

src/html/projects.html

@@ -1,8 +1,25 @@
+<script>
+  class LDPDisplayClient extends LDPWidget {
+    get template() {
+      return `<img name="${this.name}" src="${this.value.logo}"/>`;
+    }
+
+    render() {
+      store.get(this.value).then( (value) => {
+        this._value = value;
+        this.innerHTML = this.template;
+      });
+    }
+  }
+  customElements.define("ldp-display-client", LDPDisplayClient);
+</script>
+
 <div id="projects" style="display: none">
   <ldp-display 
     id="projects-list" 
     data-src="http://localhost:8000/projects/"
-    data-fields="number, name" 
+    data-fields="number, client, name" 
+    widget-client="ldp-display-client"
     search-fields="number, name"
     next="project"
   ></ldp-display>

src/scss/_mixins.scss

@@ -55,7 +55,7 @@
 }
 
 %td {
-  padding: .75rem;
+  padding: .65rem;
   vertical-align: top;
   border-top: 1px solid #dee2e6;
 }

src/scss/_projects.scss

@@ -2,15 +2,29 @@
   #projects-list {
     display:          flex;
     flex-direction:   column;
+    margin-top:       40px;
 
     ldp-display {
       @extend %td;
+      cursor:           pointer;
       display:          flex;
+      align-items:      center;
+      height:           65px;
+
+      &:hover {
+        font-weight:  bold;
+      }
 
       ldp-display-div[name="number"] {
         width:  50px;
       }
 
+      ldp-display-client[name="client"] {
+        &, img {
+          width:        50px;
+        }
+      }
+
       ldp-display-div[name="name"] {
         width:  150px;
       }