Friends list scrollable and automatically refreshed

assets/css/components/friends/friendsBar.css

@@ -26,7 +26,7 @@
 @media screen and (min-width: 1200px) {
 
 	#friendsList {
-		width: 230px;
+		width: 230px !important;
 		transition: right 1s;
 		right: -175px;
 		background-color: #fff3ff80;
@@ -79,10 +79,9 @@
 		padding-top: 50px;
 		position: fixed;
 		height: 100%;
-		width: 100%;
+		width: 100% !important;
 		top: 0px;
 		left: 0px;
-		overflow: auto;
 	}
 }
 

assets/js/components/friends/friendsBar.js

@@ -61,12 +61,19 @@ ComunicWeb.components.friends.bar = {
 		//Refresh friends list
 		this.refresh(listFriendsElem);
 
+		//Make the friend bar automaticaly refreshed (if the interval wasn't already defined)
+		if(!this.refreshInterval)
+			this.refreshInterval = setInterval(function(){
+				if(byId("friendsList"))
+					ComunicWeb.components.friends.bar.refresh(listFriendsElem);
+			}, 1000);
+
 		//Success
 		return true;
 	},
 
 	/**
-	 * Refresh the listbar
+	 * Refresh the friendbar
 	 * 
 	 * @param {HTMLElement} listFriendsElem The element that contains the list of friens
 	 * @return {Boolean} True for a success
@@ -95,6 +102,9 @@ ComunicWeb.components.friends.bar = {
 			//Get users ID informations
 			ComunicWeb.user.userInfos.getMultipleUsersInfos(usersID, function(usersInfos){
 				
+				//Clean the area
+				listFriendsElem.innerHTML = "";
+
 				//Show each friend
 				for(i in friendsList){
 
@@ -135,6 +145,11 @@ ComunicWeb.components.friends.bar = {
 					}
 				}
 
+				//Enable slimscroll
+				$(listFriendsElem.parentNode.parentNode).slimScroll({
+					height: '100%;'
+				});
+
 			});
 		});
 	},

assets/js/components/searchForm/searchForm.js

@@ -105,7 +105,7 @@ ComunicWeb.components.searchForm = {
 
 				//Enable slimscroll
 				$(menuList).slimScroll({
-					height: '200px',
+					height: '100%'
 				});
 			});
 		});