From 96e227c0f3d489d19fabc55e7149f00155e6213d Mon Sep 17 00:00:00 2001
From: Alexandre Bourlier <alexandre@happy-dev.fr>
Date: Thu, 26 Apr 2018 02:36:18 +0200
Subject: [PATCH] Project list responsive

---
 src/html/projects.html  | 19 ++++++++++++++++++-
 src/scss/_mixins.scss   |  2 +-
 src/scss/_projects.scss | 14 ++++++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/html/projects.html b/src/html/projects.html
index 944661e..fe8d8e1 100644
--- a/src/html/projects.html
+++ b/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>
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 808b6e2..5a0da00 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -55,7 +55,7 @@
 }
 
 %td {
-  padding: .75rem;
+  padding: .65rem;
   vertical-align: top;
   border-top: 1px solid #dee2e6;
 }
diff --git a/src/scss/_projects.scss b/src/scss/_projects.scss
index fc363ab..cc82c4d 100644
--- a/src/scss/_projects.scss
+++ b/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;
       }