diff --git a/dist/lib/ldp-display b/dist/lib/ldp-display
index f5abe21e988caffd13d547438ec6c62bbb1a9340..45b3c7097a270319df06cf008a4413be461f6af0 160000
--- a/dist/lib/ldp-display
+++ b/dist/lib/ldp-display
@@ -1 +1 @@
-Subproject commit f5abe21e988caffd13d547438ec6c62bbb1a9340
+Subproject commit 45b3c7097a270319df06cf008a4413be461f6af0
diff --git a/src/html/member.html b/src/html/member.html
index dabf8d2bcac21019b1aeca4937442a4381923de4..ff61d2e3c446b99a693d8903a130f84558d834d9 100644
--- a/src/html/member.html
+++ b/src/html/member.html
@@ -1,21 +1,34 @@
-<div id="member" style="display: none">
+<div id="member" class="view-with-vertical-menu" style="display: none">
+ <ldp-router id="member-page-router" class="vertical-menu border-left" default-route="member-chat">
+ <ldp-route name="member-chat">
+ <i class="fa fa-comment-o" aria-hidden="true"></i>
+ </ldp-route>
+ <ldp-route name="member-profile">
+ <i class="fa fa-user" aria-hidden="true"></i>
+ </ldp-route>
+ </ldp-router>
+
<hd-chat-window
+ id="member-chat"
data-authentication="anonymous"
data-auto-login="true"
data-bosh-service-url="https://conversejs.org/http-bind/"
- data-debug="true"
+ data-debug="false"
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>
+
<ldp-display
- id="profile"
+ id="member-profile"
set-name="firstname, name-separator, lastname"
value-name-separator=" "
set-location="city, city-separator, country"
value-city-separator=", "
- data-fields="avatar, name, location"
+ data-fields="avatar, name, location, email, number"
widget-avatar="ldp-display-img"
+ widget-email="ldp-display-mailto"
+ widget-number="ldp-display-tel"
bind-resources
></ldp-display>
</div>
diff --git a/src/html/members.html b/src/html/members.html
index 9a4200843a1fe4b3f3be1344a5d1f85dc0153abb..4675dfdd0913e8b415fc23c4395b1f786816efa2 100644
--- a/src/html/members.html
+++ b/src/html/members.html
@@ -1,6 +1,6 @@
<div id="members" class="view" style="display: none">
<ldp-display
- id="profilesList"
+ id="profiles-list"
data-src="http://localhost:8000/members/"
set-name="firstname, name-separator, lastname"
value-name-separator=" "
diff --git a/src/html/menu.html b/src/html/menu.html
index 51c0b470ea1c98c97b5373602231d1bbab8eaa59..ce388b3aca2dc9a9f9dd0039811086ebdc276a3a 100644
--- a/src/html/menu.html
+++ b/src/html/menu.html
@@ -1,9 +1,9 @@
<nav class="navbar bg-white fixed-top border-bottom pb-0 d-md-flex" id="navbar">
<div id="menu-title" class="col-4 col-md-2 pb-2">HAPPY APP</div>
- <ldp-router id="navbar-router" class="navbar-nav d-flex flex-row justify-content-between align-self-end col-8 col-md-10" root="ldp-root" default-route="members">
- <ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch w-25 text-center text-md-left" name="home">
- <i class="fa fa-home" aria-hidden="true"></i>
+ <ldp-router id="navbar-router" class="navbar-nav d-flex flex-row justify-content-between align-self-end col-8 col-md-10" default-route="members">
+ <ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch w-25 text-center text-md-left" name="search">
+ <i class="fa fa-search" aria-hidden="true"></i>
<span class="d-none d-md-inline"> Home</span>
</ldp-route>
<ldp-route class="nav-item pl-4 pr-4 pb-2 active align-self-stretch w-25 text-center text-md-left" name="members">
diff --git a/src/scss/_member.scss b/src/scss/_member.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b2267f520b0b0a453ce459ee59610319bfb8168c
--- /dev/null
+++ b/src/scss/_member.scss
@@ -0,0 +1,58 @@
+#member-chat {
+ #conversejs {
+ margin: none;
+ }
+}
+
+#profiles-list,
+#member-profile {
+ img {
+ display: block;
+ }
+
+ &, img {
+ width: 100%;
+ max-width: 320px;
+ min-width: 100%;
+ }
+
+ div[name="name"] {
+ padding-top: 10px;
+ font-weight: bold;
+ font-size: 18px;
+ }
+
+ div[name="name"],
+ div[name="location"] {
+ display: flex;
+ }
+}
+
+#member-profile {
+ ldp-display-mailto,
+ ldp-display-tel {
+ display: block;
+ }
+
+ a[name="email"],
+ a[name="number"] {
+ &::before {
+ font-family: FontAwesome;
+ padding-right: 4px;
+ color: black;
+ }
+ }
+ a[name="email"] {
+ &::before {
+ content: "\f0e0";
+ }
+ }
+ a[name="number"] {
+ &::before {
+ content: "\f10b";
+ font-size: 22px;
+ padding-left: 3px;
+ padding-right: 7px;
+ }
+ }
+}
diff --git a/src/scss/_members.scss b/src/scss/_members.scss
index 06da362a5ff45994526126dcf2ce765805e22fb0..bb62c2d40cadf0647bab0f4228e496d5c2ed353b 100644
--- a/src/scss/_members.scss
+++ b/src/scss/_members.scss
@@ -1,19 +1,6 @@
-#profilesList {
- ldp-display {
- img {
- display: block;
- }
-
- &, img {
- width: 100%;
- max-width: 320px;
- min-width: 100%;
- }
-
- div[name="name"],
- div[name="location"] {
- display: flex;
- }
+#profiles-list {
+ ldp-form {
+ background-color: #F3F3F3;
}
}
diff --git a/src/scss/_menu.scss b/src/scss/_menu.scss
index bc8332570d5c258ec305b96bfc5c4517a6f7a18c..897ac0f90d5c9e9be2b6e64981888a02bf75d561 100644
--- a/src/scss/_menu.scss
+++ b/src/scss/_menu.scss
@@ -4,7 +4,7 @@
#menu-title {
font-family: bebas;
color: $hd-color;
- font-size: 17px;
+ font-size: $menu-font-size;
}
@@ -19,9 +19,38 @@
text-decoration: underline;
}
ldp-route[active] {
- font-weight: bold;
border-bottom: 2px solid $hd-color;
color: $hd-color;
}
}
}
+
+.vertical-menu {
+ position: fixed;
+ z-index: 9998;
+ top: 0px;
+ bottom: 0px;
+ right: 0px;
+ margin: auto;
+ background-color: white;
+ width: $vertical-menu-width;
+ padding-top: $menu-height;
+ display: flex;
+ flex-direction: column;
+ color: $twitter-color;
+ font-size: $menu-font-size;
+
+ ldp-route {
+ text-align: center;
+ padding: 6px 0px;
+
+ &[active] {
+ border-left: 2px solid $hd-color;
+ color: $hd-color;
+ }
+ }
+}
+
+.view-with-vertical-menu {
+ padding-right: $vertical-menu-width;
+}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index d082666d64ca47df945737c950d3301788bfd39b..d67ceeed9dc86fb0f443169bd1793d8f2f4ca171 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,4 +1,6 @@
$hd-color: rgb(253, 200, 21);
$twitter-color: #1DA1F2;
-$menu-height : 50px;
+$menu-height: 50px;
+$menu-font-size: 17px;
+$vertical-menu-width: 50px;
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 4782211e2c10a879908c97c5c2469ffbb537f235..944ba2f8b7c8d207c2a91e81d1d994749f7724d7 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -4,6 +4,7 @@
@import "home";
@import "menu";
@import "members";
+@import "member";
@import "groupsList";
@import "project";
@import "projectsList";