Project detail page done

src/html/project.html

@@ -21,15 +21,24 @@
 
   <div id="project-detail" style="display: none">
     <ldp-display 
-      id="project-detail" 
+      id="project-info" 
-      set-label="project, number, label-separator, name"
+      set-label="name, before-num, number, after-num"
-      value-project="Projet n°"
+      value-before-num="&nbsp;(n°"
-      value-label-separator="&nbsp;:&nbsp;"
+      value-after-num=")"
-      data-fields="label" 
+      data-fields="label, client" 
+      widget-client="ldp-display-client"
       bind-resources
     ></ldp-display>
 
-    <div>Client description here</div>
+    <h2 class="section team">L'équipe</h2>
-    <div>Team here</div>
+    <ldp-display 
+      id="project-team" 
+      id-suffix="team"
+      set-name="firstname, name-separator, lastname"
+      value-name-separator="&nbsp;"
+      data-fields="avatar, name"
+      widget-avatar="ldp-display-img"
+      bind-resources
+    ></ldp-display>
   </div>
 </div>

src/models.py

@@ -26,6 +26,7 @@ class Project(models.Model):
     name = models.CharField(max_length=255, default='')
     number = models.PositiveIntegerField(default='0')
     client = models.OneToOneField("Client")
+    team = models.ManyToManyField("Member")
 
     def __str__(self):
         return self.name
@@ -53,7 +54,7 @@ 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")
+    owner = models.ForeignKey("Member", related_name="owned_chatrooms")
 
     def __str__(self):
         return self.name

src/scss/_member.scss

@@ -17,8 +17,6 @@
 
   &, img {
     width:      100%;
-    max-width:  320px;
-    min-width:  100%;
   }
 
   div[name="name"] {

src/scss/_project.scss

@@ -1,9 +1,54 @@
-#project-detail {
+#project {
-  display:      block;
+  #project-detail {
-  padding-top:  10px;
+    #project-info {
+      display:      block;
+      padding-top:  10px;
 
-  div[name="label"] {
+      div[name="label"] {
-    display:      flex;
+        display:      flex;
-    font-weight:  bold;
+        font-weight:  bold;
+      }
+
+      &, img {
+        width:      100%;
+      }
+    }
+
+    #project-team {
+      ldp-display {
+        display:        flex;
+        align-items:    center;
+        margin-bottom:  10px;
+
+        img {
+          width:          50px;
+          border-radius:  100px;
+        }
+
+        div[name="name"] {
+          display:      flex;
+          margin-left:  10px;
+        }
+      }
+    }
+  }
+
+  .section {
+    @extend %detail-section;
+    margin-top:  40px;
+  }
+}
+
+@media (min-width: $sm-with) {
+  #project {
+    #project-detail {
+      #project-info {
+        ldp-display-client {
+          display:  block;
+          float:    right;
+          width:    300px;
+        }
+      }
+    }
   }
 }

src/scss/_projects.scss

@@ -12,7 +12,8 @@
       height:           65px;
 
       &:hover {
-        font-weight:  bold;
+        background-color:   $hd-color-faded;
+        color:              white;
       }
 
       ldp-display-div[name="number"] {
@@ -20,7 +21,10 @@
       }
 
       ldp-display-client[name="client"] {
-        &, img {
+        display:      block;
+        width:        70px;
+
+        img {
           width:        50px;
         }
       }

src/scss/_variables.scss

@@ -1,4 +1,5 @@
 $hd-color: rgb(253, 200, 21);
+$hd-color-faded: rgba(253, 200, 21, 0.8);
 $twitter-color: #1DA1F2;
 
 $menu-height:           46px;