Created project view

src/html/member.html

@@ -3,7 +3,7 @@
     <ldp-route name="member-chat">
       <i class="fa fa-comment-o" aria-hidden="true"></i>
     </ldp-route>
-    <ldp-route name="member-profile">
+    <ldp-route name="member-detail">
       <i class="fa fa-user" aria-hidden="true"></i>
     </ldp-route>
   </ldp-router>
@@ -19,22 +19,24 @@
     data-room-jid="anonymous@conference.nomnom.im">
   </hd-chat-window>
 
-  <ldp-display 
+  <div id="member-detail" style="display: none">
-    id="member-profile" 
+    <ldp-display 
-    set-name="firstname, name-separator, lastname"
+      set-name="firstname, name-separator, lastname"
-    value-name-separator="&nbsp;"
+      value-name-separator="&nbsp;"
-    set-location="city, city-separator, country"
+      set-location="city, city-separator, country"
-    value-city-separator=",&nbsp;"
+      value-city-separator=",&nbsp;"
-    data-fields="avatar, name, location, email, number"
+      data-fields="avatar, name, location, email, number"
-    widget-avatar="ldp-display-img"
+      widget-avatar="ldp-display-img"
-    widget-email="ldp-display-mailto"
+      widget-email="ldp-display-mailto"
-    widget-number="ldp-display-tel"
+      widget-number="ldp-display-tel"
-    bind-resources
+      bind-resources
-  ></ldp-display>
+    ></ldp-display>
 
+    <span>Skills here</span>
     <!--<ldp-display -->
     <!--id="member-skills" -->
     <!--id-suffix="skills"-->
     <!--bind-resources-->
-    <!--></ldp-display>-->
+    <!-- ></ldp-display>-->
+  </div>
 </div>

src/html/menu.html

@@ -16,6 +16,7 @@
       <ldp-route class="nav-item d-none" name="member" id-prefix="http://localhost:8000/members/">
         Membre
       </ldp-route>
+
       <ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch text-center text-md-left" name="projects">
         <i class="fa fa-tasks" aria-hidden="true"></i>
         <span class="d-none d-md-inline"> Projets</span>
@@ -23,6 +24,7 @@
       <ldp-route class="nav-item d-none" name="project" id-prefix="http://localhost:8000/projects/">
         Projet
       </ldp-route>
+
       <ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch text-center text-md-left" name="groups">
         <i class="fa fa-comments" aria-hidden="true"></i>
         <span class="d-none d-md-inline"> Groupes</span>

src/html/project.html

@@ -1,33 +1,35 @@
-<div id="project" style="display: none">
+<div id="project" class="view-with-vertical-menu" style="display: none">
-  <div class="page-header">
+  <ldp-router id="project-page-router" class="vertical-menu border-left" default-route="profile-chat">
-    <h1>Project</h1>
+    <ldp-route name="project-chat">
-  </div>
+      <i class="fa fa-comment-o" aria-hidden="true"></i>
+    </ldp-route>
+    <ldp-route name="project-detail">
+      <i class="fa fa-user" aria-hidden="true"></i>
+    </ldp-route>
+  </ldp-router>
 
-  <ldp-display 
+  <hd-chat-window
-    id="projectTitle" 
+    id="project-chat" 
-    set-label="number, label-separator, name"
+    data-authentication="anonymous"
-    value-label-separator="&nbsp;-&nbsp;"
+    data-auto-login="true"
-    data-fields="label" 
+    data-bosh-service-url="https://conversejs.org/http-bind/"
-    bind-resource
+    data-debug="false"
-  ></ldp-display>
+    data-jid="nomnom.im"
+    data-locales-url="http://hd-app.local/dist/lib/xmpp-chat-component/node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json",
+    data-room-jid="anonymous@conference.nomnom.im">
+  </hd-chat-window>
 
-  <div id="projectDiv" style="display: none;">
+  <div id="project-detail" style="display: none">
-    <div class="container-fluid" id="projectContainer">
+    <ldp-display 
-      <div class="row">
+      id="project-detail" 
-      
+      set-label="project, number, label-separator, name"
-      <div class="col-md-9" id="projectLeftCol">
+      value-project="Projet n°"
-        <div class="chat-box">
+      value-label-separator="&nbsp;:&nbsp;"
-          <img src=".\img\chat_image.PNG" alt="Chat box">
+      data-fields="label" 
-        </div>
+      bind-resources
-      </div>
+    ></ldp-display>
-        
+
-      <div class="col-md-3" id="projectRightCol">
+    <div>Client description here</div>
-        <ldp-display id="projectDetail" data-fields="right-panel" set-right-panel="quotation-div, income-div, nextBill" set-quotation-div="quotation, euro" set-income-div="income, euro" value-euro="&#160€"></ldp-display>
+    <div>Team here</div>
-        <button id="projectDivBackButton" type="button" class="btn btn-primary">Back</button>
-      </div>
-        
-      <!-- <button id="projectDivBackButton" type="button" class="btn btn-primary"><i class="material-icons">reply</i></button> -->
-      </div>
-    </div>
   </div>
 </div>

src/scss/_members.scss

@@ -18,74 +18,3 @@
     }
   }
 }
-
-.miniature {
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  background-color: #eee;
-  margin: 10px;
-  border: 1px solid #ddd;
-  border-radius: 3px 3px 15px 15px;
-  /* border-radius: 15px 15px 3px 3px; */
-  transition: all .3s;
-}
-
-.miniature:hover {
-  box-shadow: 0 0 12px rgba(51, 51, 51, .2);
-  cursor: pointer;
-}
-
-.miniature .picture {
-  width: 150px;
-  display: block;
-  /* border-radius: 50%; */
-}
-
-.miniature .name {
-  padding-top: 15px;
-  text-align: center;
-  font-size: 20px;
-}
-
-
-/* Profil Modal */
-#profileDiv {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  background-color: rgba(51, 51, 51, 0.8);
-  display: none;
-  justify-content: center;
-  align-items: center;
-  z-index: 1100;
-}
-
-#profileDetail {
-  background-color: white;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 3px 3px 15px 15px;
-}
-
-.profile-content {
-  padding: 10px;
-  text-align: center;
-}
-
-.profile-content ldp-display-div {
-  display: flex;
-  flex-direction: column;
-}
-
-#profileDetail .picture {
-  width: 300px;
-  height: 300px;
-  border-radius: 50%;
-}
-
-#profileDetail .name {
-  font-size: 24px;
-  color: aqua;
-}

src/scss/_project.scss

@@ -1,68 +1,9 @@
-#projectLeftCol, #projectRightCol {
+#project-detail {
-    display: flex;
+  display:      block;
+  padding-top:  10px;
+
+  div[name="label"] {
+    display:      flex;
+    font-weight:  bold;
+  }
 }
-
-#projectLeftCol {
-    /* float: left; */
-    padding-left: 0;
-}
-
-#projectRightCol {
-    /* float: right; */
-    /* padding: 0; */
-    border: 1px solid;
-}
-
-#projectTitle {
-    display: block;
-    max-width: fit-content;
-    /* pourquoi de la marge à droite ? */
-}
-
-#projectTitle>ldp-display-div {
-    font-size: 2.5rem;
-    line-height: 1.1;
-    font-weight: 400;
-    margin-bottom: 20px;
-    font-family: 'Righteous', cursive;
-    display: inline-block;
-    position: relative
-}
-
-/* Fait office de "text-decoration-line: underline" */
-/* #projectTitle>.title::after { */
-#projectTitle>ldp-display-div::after {
-    content: "";
-    background: #292A2B;
-    position: absolute;
-    bottom: 2px;
-    width: 100%;
-    height: 4px;
-}
-
-#projectDetail .income-div, #projectDetail .quotation-div {
-    display: flex;
-}
-
-.chat-box {
-    border: 1px solid #FCC721;
-    width: inherit;
-    /* max-width: 1000px; */
-    display: flex;
-    overflow: hidden;
-}
-
-#projectDivBackButton {
-    height: fit-content;
-}
-
-
-/* TEST */
-
-/* #projectDetail .project-title {
-    background-color: plum;
-}
-
-#projectDetail .right-panel {
-    background-color: chartreuse;
-} */

src/scss/main.scss

@@ -12,5 +12,5 @@
 @import "member";
 @import "groupsList";
 @import "project";
-@import "projects-list";
+@import "projects";
 @import "dashboard";