Friend bar responsive

assets/css/components/friends/friendsBar.css

@@ -4,38 +4,86 @@
  * @author Pierre HUBERT
  */
 
-#friendsList {
+/**
-	position: fixed;
+ * For computers / tablets (any size)
-	right: 0px;
+ */
-	border-left: 1px black solid;
+@media screen and (min-width: 513px)  {
-	z-index: 999;
-	background-color: #fff3ff80;
-	top: 0px;
-	height: 100%;
-	padding-top: 50px;
 
-	/**
+	#friendsList {
-	width: 50px;
+		position: fixed;
-	font-size: 70%;
+		right: 0px;
-	transition: width 1s;
+		border-left: 1px black solid;
-	*/
+		z-index: 999;
-
+		top: 0px;
-	width: 230px;
+		height: 100%;
-	transition: right 1s;
+		padding-top: 50px;
-	right: -175px;
+	}
 }
 
-#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;
+	 * Hide friend button toggle
-	font-size: 100%;
+	 */
-	padding: 10px;
+	.friendToggleButton {
-	padding-top: 50px;
+		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;
 }

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
 				 */

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;

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;
+	}
+
 }

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
 	 * 

assets/js/user/userLogin.js

@@ -64,8 +64,8 @@ ComunicWeb.user.userLogin = {
                     ComunicWeb.user.userLogin.__userLogin = false;
                     ComunicWeb.user.loginTokens.deleteLoginTokens();
                     
-                    //Refresh the page
+                    //Restart the application
-                    location.href = document.location;
+                    ComunicWeb.common.system.restart();
                 }
 
                 //Perform next action