diff --git a/assets/css/common/global.css b/assets/css/common/global.css index 7adb583e..bcef7c8e 100644 --- a/assets/css/common/global.css +++ b/assets/css/common/global.css @@ -35,4 +35,13 @@ a, .cursor-pointer { .sceditor-iframe-body { padding: 5px; padding-bottom: 0px; +} + +/** + * Adapt menu bar to small screens + */ +@media screen and (max-width: 767px) { + #pageTarget { + margin-top: 50px; + } } \ No newline at end of file diff --git a/assets/css/components/sidebar.css b/assets/css/components/sidebar.css index f241898e..f5e45aea 100644 --- a/assets/css/components/sidebar.css +++ b/assets/css/components/sidebar.css @@ -4,8 +4,43 @@ * @author Pierre HUBERT */ -.sidebar-menu.memberships-list img { +.main-sidebar > .sidebar { + display: flex; + flex-direction: column; + position: absolute; + height: 100%; +} + +body.sidebar-collapse .main-sidebar > .sidebar { + position: unset; +} + + +body.sidebar-collapse .main-sidebar > .sidebar .hide-on-collapse { + display: none; +} + +.main-sidebar .intermediate-label { + color: #c3c3c3; + padding: 10px 25px 0px 15px; + font-size: 12px; +} + +.main-sidebar .memberships-list { + flex: 2; + overflow: hidden; +} + +body.sidebar-collapse .memberships-list { + overflow: unset; +} + +.main-sidebar .memberships-list img { width: 20px; margin-right: 10px; margin-left: -4px; +} + +.main-sidebar .recents-conversations-list { + flex: 1; } \ No newline at end of file diff --git a/assets/js/components/sidebar/main.js b/assets/js/components/sidebar/main.js index d6981c9c..cd480611 100644 --- a/assets/js/components/sidebar/main.js +++ b/assets/js/components/sidebar/main.js @@ -25,7 +25,7 @@ ComunicWeb.components.sideBar.main = { var userPanel = createElem2({ appendTo: section, type: "div", - class: "user-panel" + class: "user-panel hidden-xs" }); getUserInfo(userID(), function(info){ @@ -104,15 +104,36 @@ ComunicWeb.components.sideBar.main = { openPage("search?q=" + searchForm.getElementsByTagName("input")[0].value); }); - // User memberships + createElem2({ + appendTo: section, + type: "div", + class: "intermediate-label hide-on-collapse", + innerHTML: "FRIENDS & GROUPS" + }); let userMemberships = createElem2({ appendTo: section, - type: "ul", - class: "sidebar-menu memberships-list" + type: "div", + class: "memberships-list" }); this.refreshMemberships(userMemberships); + + + // Recent conversations + createElem2({ + appendTo: section, + type: "div", + class: "intermediate-label hide-on-collapse", + innerHTML: "CONVERSATIONS" + }); + let conversationsList = createElem2({ + appendTo: section, + type: "ul", + class: "sidebar-menu recents-conversations-list hide-on-collapse", + innerHTML: "
  • TO COME
  • " + }); + }, /** @@ -125,8 +146,6 @@ ComunicWeb.components.sideBar.main = { () => notify("Could not refresh your memberships!", "error"), (m, u, g) => this.applyMemberships(target, m, u, g) ); - - }, /** @@ -142,13 +161,24 @@ ComunicWeb.components.sideBar.main = { // Empty liste target.innerHTML = ""; + let friendsTarget = createElem2({ + appendTo: target, + type: "ul", + class: "sidebar-menu" + }); + memberships.forEach(e => { if(e.type == "friend") - this.applyFriend(target, e.friend, users["user-"+e.friend.ID_friend]); + this.applyFriend(friendsTarget, e.friend, users["user-"+e.friend.ID_friend]); if(e.type == "group") - this.applyGroup(target, groups[e.id], e.last_activity); + this.applyGroup(friendsTarget, groups[e.id], e.last_activity); + }); + + $(friendsTarget).slimscroll({ + flex: 2, + height: "100%" }); },