Edit profile - Connected correctly now (via hack)

index.php

@@ -32,8 +32,10 @@
       <?php require_once('src/html/edit-profile.html'); ?>
       <?php require_once('src/html/projects.html'); ?>
       <?php require_once('src/html/project.html'); ?>
+      <?php require_once('src/html/project-edition.html'); ?>
       <?php require_once('src/html/channels.html'); ?>
       <?php require_once('src/html/channel.html'); ?>
+      <?php require_once('src/html/channel-edition.html'); ?>
       <?php require_once('src/html/search.html'); ?>
     </main>
 

src/html/channel-edition.html

@@ -0,0 +1,7 @@
+<div id="channel-edition" style="display: none">
+  <ldp-form 
+    class="edit-form"
+    data-src="<?php echo $sdn; ?>/channels/1/" 
+    bind-resources
+  ></ldp-form>
+</div>

src/html/dashboard.html

@@ -7,17 +7,20 @@
   <!--</form>-->
 
   <div class="list-condensed">
-    <ldp-router>
+    <ldp-display 
-      <ldp-route name="edit-profile" id-prefix="<?php echo $sdn; ?>/members/">
+      id="to-user-profile"
-        <ldp-display 
+      data-src="<?php echo $sdn; ?>/members/1/" 
-          data-src="<?php echo $sdn; ?>/members/1/" 
+      set-name="firstname, name-separator, lastname"
-          set-name="firstname, name-separator, lastname"
+      value-name-separator="&nbsp;"
-          value-name-separator="&nbsp;"
+      data-fields="avatar, name"
-          data-fields="avatar, name"
+      widget-avatar="ldp-display-img"
-          widget-avatar="ldp-display-img"
+    ></ldp-display>
-          next="edit-profile"
-        ></ldp-display>
-      </ldp-route>
-    </ldp-router>
   </div>
+
+  <script>
+    document.querySelector("#to-user-profile").addEventListener("click", () => {
+      document.getElementById("navbar-router").navigate("member");
+      document.getElementById("member-page-router").navigate("member-detail");
+    });
+  </script>
 </div>

src/html/edit-profile.html

@@ -18,17 +18,16 @@
 </script>
 
 <div id="edit-profile" style="display: none">
-  <!--ldp-form 
-    class="edit-form"
-    data-src="<?php echo $sdn; ?>/members/1/" 
-    bind-resources
-  ></ldp-form-->
-
-  
   <label for="avatar-input">
     <img id="avatar-preview" src="http://cdn.hd-app.local/members/alexandre-bourlier.jpg" style="width: 100%;"/>
   </label>
   <input type="file" id="avatar-input" name="avatar" value="http://cdn.hd-app.local/members/alexandre-bourlier.jpg" />`;
+
+  <ldp-form 
+    class="edit-form"
+    data-src="<?php echo $sdn; ?>/members/1/" 
+    bind-resources
+  ></ldp-form>
 </div>
 
 <div id="crop-modal">

src/html/home.html

@@ -1,5 +0,0 @@
-<div id="home" style="display: none">
-  <div id="logoContainer">
-    <img src="./img/Logo_Happy_Dev.png" alt="Logo Happy Dev">
-  </div>
-</div>

src/html/member.html

@@ -11,23 +11,40 @@
   <div id="member-chat" class="chat-wrapper"></div>
 
   <div id="member-detail" style="display: none">
-    <ldp-display 
+    <div class="section info">
-      id="member-info" 
+      <i class="fa fa-pencil" aria-hidden="true"></i>
-      set-name="firstname, name-separator, lastname"
+      <i class="name fa fa-pencil" aria-hidden="true"></i>
-      value-name-separator="&nbsp;"
-      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>
 
-    <h2 class="section skills">Compétences</h2>
+      <ldp-display 
-    <ldp-display 
+        id="member-info" 
-      id="member-skills" 
+        data-src="<?php echo $sdn; ?>/members/1/" 
-      id-suffix="skills"
+        set-name="firstname, name-separator, lastname"
-      bind-resources
+        value-name-separator="&nbsp;"
+        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>
+    </div>
+
+    <div class="section skills">
+      <i class="fa fa-pencil" aria-hidden="true"></i>
+      <h2>Compétences</h2>
+      <ldp-display 
+        id="member-skills" 
+        id-suffix="skills"
+        bind-resources
+      ></ldp-display>
+    </div>
   </div>
 </div>
+
+<script>
+  document.querySelectorAll("#member-detail .fa-pencil").forEach((el) => {
+    el.addEventListener("click", (e) => {
+      document.getElementById('navbar-router').navigate('edit-profile');
+    });
+  });
+</script>

src/html/menu.html

@@ -17,17 +17,15 @@
         <i class="fa fa-tasks" aria-hidden="true"></i>
         <span class="d-none d-md-inline"> Projets</span>
       </ldp-route>
-      <ldp-route class="nav-item d-none" name="project" id-prefix="<?php echo $sdn; ?>/projects/">
+      <ldp-route class="d-none" name="project" id-prefix="<?php echo $sdn; ?>/projects/"></ldp-route>
-        Projet
+      <ldp-route class="d-none" name="project-edition" id-prefix="<?php echo $sdn; ?>/channels/"></ldp-route>
-      </ldp-route>
 
       <ldp-route class="nav-item pb-2 align-self-stretch text-center text-md-left" name="channels">
         <i class="fa fa-comments" aria-hidden="true"></i>
         <span class="d-none d-md-inline"> Channels</span>
       </ldp-route>
-      <ldp-route class="nav-item d-none" name="channel" id-prefix="<?php echo $sdn; ?>/channels/">
+      <ldp-route class="d-none" name="channel" id-prefix="<?php echo $sdn; ?>/channels/"></ldp-route>
-        channel
+      <ldp-route class="d-none" name="channel-edition" id-prefix="<?php echo $sdn; ?>/channels/"></ldp-route>
-      </ldp-route>
     </div>
 
     <div class="col-2 col-md-1"></div>

src/html/project-edition.html

@@ -0,0 +1,8 @@
+<div id="project-edition" style="display: none">
+  <ldp-form 
+    class="edit-form"
+    data-src="<?php echo $sdn; ?>/projects/1/" 
+    bind-resources
+  ></ldp-form>
+</div>
+

src/scss/_channels.scss

@@ -2,7 +2,6 @@
   #channels-list {
     display:          flex;
     flex-direction:   column;
-    margin-top:       40px;
 
     ldp-display {
       @extend %td;

src/scss/_dashboard.scss

@@ -1,6 +1,5 @@
 #dashboard {
-  #search-help {
+  #to-user-profile {
-    font-style:     italic;
+    cursor:         pointer;
-    padding-left:   5px;
   }
 }

src/scss/_member.scss

@@ -61,8 +61,24 @@
   }
 
   .section {
-    @extend %detail-section;
+    position: relative;
-    margin-top:  40px;
+
+    i {
+      position:     absolute;
+      display:      block;
+      top:          5px;
+      right:        10px;
+      cursor:       pointer;
+
+      &.name {
+        top:    290px;
+      }
+    }
+
+    h2 {
+      @extend %detail-section;
+      margin-top:  40px;
+    }
   }
 
   #member-skills {

src/scss/_projects.scss

@@ -2,7 +2,6 @@
   #projects-list {
     display:          flex;
     flex-direction:   column;
-    margin-top:       40px;
 
     ldp-display {
       @extend %td;