From 420c68bd6e9e51ff7d37e5696adace3a2cfbd073 Mon Sep 17 00:00:00 2001
From: Alexandre Bourlier <alexandre@happy-dev.fr>
Date: Sun, 18 Mar 2018 20:42:34 +0100
Subject: [PATCH] displaying members

---
 index.php              |  6 ------
 src/html/members.html  | 12 +++++++++++-
 src/html/menu.html     |  3 +--
 src/scss/_members.scss | 35 +++++++++++++++++++++++++++++++----
 4 files changed, 43 insertions(+), 13 deletions(-)
diff --git a/index.php b/index.php
index de32572..bccb250 100644
--- a/index.php
+++ b/index.php
@@ -22,19 +22,13 @@
 
     <link rel="import" href="dist/lib/ldp-display/ldp-display.html" />
     <link rel="import" href="dist/lib/ldp-display/ldp-router.html" />
-    <link rel="import" href="dist/lib/ldp-display/ldp-calendar.html" />
   </head>
 
   <body>
     <?php require_once('src/html/menu.html'); ?>
 
     <main id="mainContainer" class="container-fluid">
-      <?php require_once('src/html/home.html'); ?>
       <?php require_once('src/html/members.html'); ?>
-      <?php require_once('src/html/projects.html'); ?>
-      <?php require_once('src/html/groups.html'); ?>
-      <?php require_once('src/html/calendar.html'); ?>
-      <?php require_once('src/html/drive.html'); ?>
     </main>
 
     <!--Profil Modal-->
diff --git a/src/html/members.html b/src/html/members.html
index 590e71d..8cf324e 100644
--- a/src/html/members.html
+++ b/src/html/members.html
@@ -3,7 +3,17 @@
     <h1>Membres</h1>
   </div>
 
-  <ldp-display id="profilesList" data-src="http://lucky.alwaysdata.net/api/users/" data-fields="miniature" set-miniature="picture, name" widget-picture="ldp-display-img"></ldp-display>
+  <ldp-display 
+    id="profilesList" 
+    data-src="http://localhost:8000/users/" 
+    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"
+    widget-avatar="ldp-display-img"
+    search-fields="city"
+  ></ldp-display>
   
   <script type="text/javascript">
     document.addEventListener("DOMContentLoaded", function (event) {
diff --git a/src/html/menu.html b/src/html/menu.html
index 3df09a0..845cc8e 100644
--- a/src/html/menu.html
+++ b/src/html/menu.html
@@ -6,13 +6,12 @@
   <div id="menu-title" class="navbar-brand">HAPPY APP</div>
 
   <div class="collapse navbar-collapse" id="navbarSupportedContent">
-    <ldp-router class="navbar-nav mr-auto" root="ldp-root" default-route="home">
+    <ldp-router class="navbar-nav mr-auto" root="ldp-root" default-route="members">
       <ldp-route class="nav-item active" name="members">Membres</ldp-route>
       <ldp-route class="nav-item" name="projects">Projets</ldp-route>
       <ldp-route class="nav-item" name="groups">Groupes</ldp-route>
       <ldp-route class="nav-item" name="calendar">Agenda</ldp-route>
       <ldp-route class="nav-item" name="drive">Drive</ldp-route>
-      <!-- <ldp-route name="home">Home</ldp-route> -->
     </ldp-router>
   </div>
 </nav>
diff --git a/src/scss/_members.scss b/src/scss/_members.scss
index b5eca49..06da362 100644
--- a/src/scss/_members.scss
+++ b/src/scss/_members.scss
@@ -1,8 +1,35 @@
 #profilesList {
-  display: flex; 
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  max-width: fit-content;
+  ldp-display {
+    img {
+      display:  block;
+    }
+
+    &, img {
+      width:      100%;
+      max-width:  320px;
+      min-width:  100%;
+    }
+
+    div[name="name"], 
+    div[name="location"] {
+      display:  flex;
+    }
+  }
+}
+
+@media (min-width: 576px) {
+  #profilesList {
+    display:          flex;
+    justify-content:  space-between;
+
+    ldp-display {
+      &, img {
+        width:      250px;
+        max-width:  initial;
+        min-width:  initial;
+      }
+    }
+  }
 }
 
 .miniature {
