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,31 +32,53 @@
   }
 }
 
-#member-profile {
-  ldp-display-mailto,
-  ldp-display-tel {
-    display:    block;
+#member-detail {
+  #member-info {
+    ldp-display-mailto,
+    ldp-display-tel {
+      display:    block;
+    }
+
+    a[name="email"],
+    a[name="number"] {
+      &::before {
+        font-family:      FontAwesome;
+        padding-right:    4px;
+        color:            black;
+      }
+    }
+    a[name="email"] {
+      &::before {
+        content:          "\f0e0";
+      }
+    }
+    a[name="number"] {
+      &::before {
+        content:          "\f10b";
+        font-size:        22px;
+        padding-left:     3px;
+        padding-right:    7px;
+      }
+    }
   }
 
-  a[name="email"],
-  a[name="number"] {
-    &::before {
-      font-family:      FontAwesome;
-      padding-right:    4px;
-      color:            black;
-    }
+  .section {
+    @extend %detail-section;
+    margin-top:  40px;
   }
-  a[name="email"] {
-    &::before {
-      content:          "\f0e0";
-    }
-  }
-  a[name="number"] {
-    &::before {
-      content:          "\f10b";
-      font-size:        22px;
-      padding-left:     3px;
-      padding-right:    7px;
+
+  #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;
+  box-sizing:   border-box;
+  font-family:  helvetica;
 }
 
 html, body, #mainContainer {