displaying members

This commit is contained in:
Alexandre Bourlier 2018-03-18 20:42:34 +01:00
parent 4359bdfb35
commit 420c68bd6e
4 changed files with 43 additions and 13 deletions

View File

@ -22,19 +22,13 @@
<link rel="import" href="dist/lib/ldp-display/ldp-display.html" /> <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-router.html" />
<link rel="import" href="dist/lib/ldp-display/ldp-calendar.html" />
</head> </head>
<body> <body>
<?php require_once('src/html/menu.html'); ?> <?php require_once('src/html/menu.html'); ?>
<main id="mainContainer" class="container-fluid"> <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/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> </main>
<!--Profil Modal--> <!--Profil Modal-->

View File

@ -3,7 +3,17 @@
<h1>Membres</h1> <h1>Membres</h1>
</div> </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"> <script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (event) { document.addEventListener("DOMContentLoaded", function (event) {

View File

@ -6,13 +6,12 @@
<div id="menu-title" class="navbar-brand">HAPPY APP</div> <div id="menu-title" class="navbar-brand">HAPPY APP</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <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 active" name="members">Membres</ldp-route>
<ldp-route class="nav-item" name="projects">Projets</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="groups">Groupes</ldp-route>
<ldp-route class="nav-item" name="calendar">Agenda</ldp-route> <ldp-route class="nav-item" name="calendar">Agenda</ldp-route>
<ldp-route class="nav-item" name="drive">Drive</ldp-route> <ldp-route class="nav-item" name="drive">Drive</ldp-route>
<!-- <ldp-route name="home">Home</ldp-route> -->
</ldp-router> </ldp-router>
</div> </div>
</nav> </nav>

View File

@ -1,8 +1,35 @@
#profilesList { #profilesList {
display: flex; ldp-display {
flex-wrap: wrap; img {
justify-content: space-evenly; display: block;
max-width: fit-content; }
&, 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 { .miniature {