From 204a3e7e0d4da97c54fa3eb1c9a7408a30e77764 Mon Sep 17 00:00:00 2001 From: Pierre Date: Sat, 3 Jun 2017 15:41:04 +0200 Subject: [PATCH] Friend bar responsive --- assets/css/components/friends/friendsBar.css | 101 +++++++++++++----- assets/js/common/functionsSchema.js | 5 + assets/js/common/system.js | 2 +- assets/js/components/friends/friendsBar.js | 26 +++++ assets/js/components/menuBar/authenticated.js | 27 +++++ assets/js/user/userLogin.js | 4 +- 6 files changed, 136 insertions(+), 29 deletions(-) diff --git a/assets/css/components/friends/friendsBar.css b/assets/css/components/friends/friendsBar.css index 00106ba5..cc8cd49b 100644 --- a/assets/css/components/friends/friendsBar.css +++ b/assets/css/components/friends/friendsBar.css @@ -4,38 +4,86 @@ * @author Pierre HUBERT */ -#friendsList { - position: fixed; - right: 0px; - border-left: 1px black solid; - z-index: 999; - background-color: #fff3ff80; - top: 0px; - height: 100%; - padding-top: 50px; +/** + * For computers / tablets (any size) + */ +@media screen and (min-width: 513px) { - /** - width: 50px; - font-size: 70%; - transition: width 1s; - */ - - width: 230px; - transition: right 1s; - right: -175px; + #friendsList { + position: fixed; + right: 0px; + border-left: 1px black solid; + z-index: 999; + top: 0px; + height: 100%; + padding-top: 50px; + } } -#friendsList:hover { - background-color: #ffffff; +/** + * For big screens + */ +@media screen and (min-width: 1200px) { + + #friendsList { + width: 230px; + transition: right 1s; + right: -175px; + background-color: #fff3ff80; + display: block !important; + } + + #friendsList:hover { + background-color: #ffffff; + right: 0px; + } /** - width: 230px; - font-size: 100%; - padding: 10px; - padding-top: 50px; - */ + * Hide friend button toggle + */ + .friendToggleButton { + display: none !important; + } - right: 0px; +} + +/** + * For small screens / tablets + */ +@media screen and (max-width: 1200px) and (min-width: 513px) { + #friendsList { + right: 0px; + background-color: #ffffff; + } +} + +/** + * Common to small screen / tablets / smartphones + */ +@media screen and (max-width: 1200px) { + #friendsList { + display: none; + } + + #friendsList.visible-bar { + display: block; + } +} + +/** + * Very small computers / tablets / smartphones + */ +@media screen and (max-width: 513px) { + #friendsList { + background-color: #ffffff; + padding-top: 50px; + position: fixed; + height: 100%; + width: 100%; + top: 0px; + left: 0px; + overflow: auto; + } } #friendsList td { @@ -52,4 +100,5 @@ #friendsList .statusRow { width: 48px; + text-align: center; } \ No newline at end of file diff --git a/assets/js/common/functionsSchema.js b/assets/js/common/functionsSchema.js index d8bbeacc..61ccceda 100644 --- a/assets/js/common/functionsSchema.js +++ b/assets/js/common/functionsSchema.js @@ -409,6 +409,11 @@ var ComunicWeb = { */ addDropdown: function(navbarElem){}, + /** + * Add user friends toggle button + */ + addFriendListButton: function(navbarElem){}, + /** * Add user name element */ diff --git a/assets/js/common/system.js b/assets/js/common/system.js index d6f69646..caca48de 100644 --- a/assets/js/common/system.js +++ b/assets/js/common/system.js @@ -56,7 +56,7 @@ ComunicWeb.common.system = { */ var autoRefresh = setInterval((function(){ ComunicWeb.user.userLogin.refreshLoginState(); - }), 15000); + }), 20000); //Sucess return true; diff --git a/assets/js/components/friends/friendsBar.js b/assets/js/components/friends/friendsBar.js index ca55e146..7694d5f9 100644 --- a/assets/js/components/friends/friendsBar.js +++ b/assets/js/components/friends/friendsBar.js @@ -138,4 +138,30 @@ ComunicWeb.components.friends.bar = { }); }); }, + + /** + * Toogle show / hide friends bar + * + * @return {Boolean} True for a success + */ + toggleShowHide: function(){ + //Get friends list element + var friendListElem = byId("friendsList"); + + //Log action + ComunicWeb.debug.logMessage("Toggle friends list"); + + //Check current bar state + if(friendListElem.className == ""){ + //Show the bar + friendListElem.className = "visible-bar"; + } + else + //Hide the bar + friendListElem.className = ""; + + //Success + return true; + } + } \ No newline at end of file diff --git a/assets/js/components/menuBar/authenticated.js b/assets/js/components/menuBar/authenticated.js index da0f56b6..9667535c 100644 --- a/assets/js/components/menuBar/authenticated.js +++ b/assets/js/components/menuBar/authenticated.js @@ -32,6 +32,9 @@ ComunicWeb.components.menuBar.authenticated = { //Add user name this.addUserName(navbarRightElemList); + //Add friends list button + this.addFriendListButton(navbarRightElemList); + //Add dropdown menu this.addDropdown(navbarRightElemList); @@ -79,6 +82,30 @@ ComunicWeb.components.menuBar.authenticated = { return dropdownContent; }, + /** + * Add friendsList toggle button + * + * @param {HTMLElement} navbarElem The target navbarlist element + * @return {HTMLElement} The button element + */ + addFriendListButton: function(navbarElem){ + //Create button + var friendButton = createElem("li", navbarElem); + friendButton.className = "friendToggleButton"; + + //Create link + var friendButtonLink = createElem("a", friendButton); + var friendIcon = createElem("i", friendButtonLink); + friendIcon.className = "fa fa-users"; + + //Makes link live + friendButtonLink.onclick = function(){ + ComunicWeb.components.friends.bar.toggleShowHide(); + }; + + return friendButtonLink; + }, + /** * Add user name element * diff --git a/assets/js/user/userLogin.js b/assets/js/user/userLogin.js index 09a20c28..e76f5c2b 100644 --- a/assets/js/user/userLogin.js +++ b/assets/js/user/userLogin.js @@ -64,8 +64,8 @@ ComunicWeb.user.userLogin = { ComunicWeb.user.userLogin.__userLogin = false; ComunicWeb.user.loginTokens.deleteLoginTokens(); - //Refresh the page - location.href = document.location; + //Restart the application + ComunicWeb.common.system.restart(); } //Perform next action