Member detail page complete

src/html/member.html

@@ -21,22 +21,22 @@
 
   <div id="member-detail" style="display: none">
     <ldp-display 
+      id="member-info" 
       set-name="firstname, name-separator, lastname"
       value-name-separator="&nbsp;"
-      set-location="city, city-separator, country"
-      value-city-separator=",&nbsp;"
-      data-fields="avatar, name, location, email, number"
+      data-fields="avatar, name, cell, email, number"
       widget-avatar="ldp-display-img"
+      widget-cell="ldp-display-cell"
       widget-email="ldp-display-mailto"
       widget-number="ldp-display-tel"
       bind-resources
     ></ldp-display>
 
-    <span>Skills here</span>
-    <!--<ldp-display -->
-    <!--id="member-skills" -->
-    <!--id-suffix="skills"-->
-    <!--bind-resources-->
-    <!-- ></ldp-display>-->
+    <h2 class="section skills">Compétences</h2>
+    <ldp-display 
+      id="member-skills" 
+      id-suffix="skills"
+      bind-resources
+      ></ldp-display>
   </div>
 </div>

src/html/members.html

@@ -3,6 +3,13 @@
     get template() {
       return `<div name="${this.name}">${this.value.city} - ${this.value.country}</div>`;
     }
+
+    render() {
+      store.get(this.value).then( (value) => {
+        this._value = value;
+        this.innerHTML = this.template;
+      });
+    }
   }
   customElements.define("ldp-display-cell", LDPDisplayCell);
 </script>

src/models.py

@@ -49,4 +49,11 @@ class Cell(models.Model):
         return self.name
 
 
+class ChatRoom(models.Model):
+    name = models.CharField(max_length=255, default='')
+    description = models.CharField(max_length=255, default='')
+    members = models.ManyToManyField("Member")
+    administrator = models.ManyToManyField("Member")
 
+    def __str__(self):
+        return self.name

src/scss/_member.scss

@@ -1,3 +1,8 @@
+%detail-section {
+  font-weight:  bold;
+  font-size:    18px;
+}
+
 #member-chat {
   #conversejs {
     margin:   none;
@@ -5,7 +10,7 @@
 }
 
 #profiles-list,
-#member-profile {
+#member-info {
   img {
     display:  block;
   }
@@ -17,9 +22,8 @@
   }
 
   div[name="name"] {
+    @extend %detail-section;
     padding-top:  10px;
-    font-weight:  bold;
-    font-size:    18px;
   }
 
   div[name="name"], 
@@ -28,7 +32,8 @@
   }
 }
 
-#member-profile {
+#member-detail {
+  #member-info {
     ldp-display-mailto,
     ldp-display-tel {
       display:    block;
@@ -55,4 +60,25 @@
         padding-right:    7px;
       }
     }
+  }
+
+  .section {
+    @extend %detail-section;
+    margin-top:  40px;
+  }
+
+  #member-skills {
+    display:      flex;
+    flex-wrap:    wrap;
+
+    ldp-display {
+      display:            block;
+      background-color:   $hd-color; 
+      color:              white;
+      border-radius:      100px;
+      padding:            3px 10px;
+      margin-bottom:      5px;
+      margin-right:       5px;
+    }
+  }
 }

src/scss/_styles.scss

@@ -1,5 +1,6 @@
 * {
   box-sizing:   border-box;
+  font-family:  helvetica;
 }
 
 html, body, #mainContainer {