Created action contener in friends list

assets/css/components/friends/listModal.css

@@ -11,16 +11,14 @@
 	margin: 5px;
 }
 
-.personnal-friends-list .friend a,
 .friends-list-ro .friend a {
 	color: white;
 }
-.personnal-friends-list .friend a:hover,
+
 .friends-list-ro .friend a:hover {
 	color: #001F3F;
 }
 
-.personnal-friends-list .friend img,
 .friends-list-ro .friend img {
 	margin: auto 10px auto auto;
 	max-width: 40px;
@@ -29,7 +27,6 @@
 	visibility: visible;
 }
 
-.personnal-friends-list .friend .friends-name,
 .friends-list-ro .friend .friends-name {
 	display: inline-block;
 	white-space: normal;
@@ -37,12 +34,3 @@
 	text-align: left;
 	vertical-align: middle;
 }
-
-.personnal-friends-list .friend {
-	margin-bottom: 10px;
-}
-
-.personnal-friends-list .friend .friends-name {
-	width: 200px;
-	max-width: 200px;
-}

assets/css/components/friends/ui.css

@@ -0,0 +1,46 @@
+/**
+ * Friends list script file
+ *
+ * @author Pierre HUBERT
+ */
+
+.personnal-friends-list .friend a,
+.friends-list-ro .friend a {
+	color: white;
+}
+.personnal-friends-list .friend a:hover,
+.friends-list-ro .friend a:hover {
+	color: #001F3F;
+}
+
+.personnal-friends-list .friend img,
+.friends-list-ro .friend img {
+	margin: auto 10px auto auto;
+	max-width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	visibility: visible;
+}
+
+.personnal-friends-list .friend .friends-name,
+.friends-list-ro .friend .friends-name {
+	display: inline-block;
+	white-space: normal;
+	max-width: 100px;
+	text-align: left;
+	vertical-align: middle;
+}
+
+.personnal-friends-list .friend {
+	margin-bottom: 10px;
+}
+
+.personnal-friends-list .friend .friends-name {
+	width: 200px;
+	max-width: 200px;
+}
+
+.personnal-friends-list .friend .friends-actions {
+	display: inline-block;
+	width: 250px;
+}

assets/js/components/friends/ui.js

@@ -62,13 +62,20 @@ ComunicWeb.components.friends.ui = {
 
 		}
 
+		//Create actions area
+		var actionsOnFriendArea = createElem2({
+			appendTo: friendContener, 
+			type: "div",
+			class: "friends-actions"
+		});
+
 		//Check if the friendship has been accepted or not
 		if(friend.accepted == 0){
 
 			//Offer the user to accept or reject friendship request
 			//Reject
 			var rejectRequestBtn = createElem2({
-				appendTo: friendContener,
+				appendTo: actionsOnFriendArea,
 				type: "input",
 				elemType: "button",
 				class: "btn btn-danger",
@@ -76,18 +83,18 @@ ComunicWeb.components.friends.ui = {
 			});
 			rejectRequestBtn.setAttribute("data-accept-request", "false");
 			
-			add_space(friendContener);
+			add_space(actionsOnFriendArea);
 
 			//Accept
 			var acceptRequestBtn = createElem2({
-				appendTo: friendContener,
+				appendTo: actionsOnFriendArea,
 				type: "button",
 				class: "btn btn-success",
 				innerHTML: "Accepter"
 			});
 			acceptRequestBtn.setAttribute("data-accept-request", "true");
 
-			add_space(friendContener);
+			add_space(actionsOnFriendArea);
 
 			//Make the buttons lives
 			var respond = function(){
@@ -125,7 +132,7 @@ ComunicWeb.components.friends.ui = {
 
 			//Display following state
 			var followButton = createElem2({
-				appendTo: friendContener,
+				appendTo: actionsOnFriendArea,
 				type: "button",
 				class: "btn btn-primary"
 			});
@@ -139,7 +146,7 @@ ComunicWeb.components.friends.ui = {
 				followButton.setAttribute("data-set-following", "false");
 			}
 
-			add_space(friendContener);
+			add_space(actionsOnFriendArea);
 
 			//Check if the user can post text on user page
 			followButton.onclick = function(){

system/config/dev.config.php

@@ -123,6 +123,7 @@ class Dev {
 			//Friendbar stylesheet
 			"css/components/friends/friendsBar.css",
 			"css/components/friends/listModal.css",
+			"css/components/friends/ui.css",
 			
 			//Conversations stylesheet
 			"css/components/conversations/manager.css",