Fix social user block

app/Resources/public/css/base.css

@@ -4592,6 +4592,9 @@ i.size-32.icon-new-work{
 .social-avatar{
   text-align: center;
 }
+.social-avatar .user-details {
+    font-size: 12px;
+}
 .social-avatar .img-profile{
   margin-bottom: 5px;
   padding-left: 50px;
@@ -4606,34 +4609,6 @@ i.size-32.icon-new-work{
   display: inline-block;
   margin: auto;
 }
-.social-avatar .lastname{
-  font-size: 14px;
-  font-weight: bold;
-  color: #4d4d4d;
-  margin-bottom: 5px;
-}
-.social-avatar .firstname{
-  font-size: 14px;
-  font-weight: bold;
-  color: #4d4d4d;
-  margin-bottom: 0px;
-}
-.social-avatar .social-avatar-vcard{
-  font-size: 12px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  color: #666666;  
-}
-.social-avatar .social-avatar-email,
-.social-avatar .social-avatar-chat{
-  font-size: 12px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  color: #666666;
-}
-.social-avatar .social-avatar-chat{
-  margin-bottom: 15px;
-}
 .social-avatar .edit-profile{
   margin-top: 15px;
   margin-bottom: 15px;

main/template/default/social/user_block.tpl

@@ -1,41 +1,44 @@
 <div class="social-avatar">
     <div class="panel panel-default">
         {{ social_avatar_block }}
-        <div class="social-avatar-name">
-            <p class="firstname">{{ user.firstname }}</p>
-            <p class="lastname">{{ user.lastname }}</p>
-        </div>
-        <div class="social-avatar-email">
-            <a href="{{ _p.web }}main/messages/new_message.php">
-                <img src="{{ "instant_message.png" | icon }}" alt="{{ "Email" | get_lang }}">
-                {{ user.email}}
-            </a>
-        </div>
-        <div class="social-avatar-vcard">
-            <a href="{{ vcard_user_link }}">
-                <img src="{{ "vcard.png" | icon(22) }}" alt="{{ "UserInfo" | get_lang }}">
-            </a>
-        </div>
-        {% if chat_enabled == 1 %}
-            {% if user.user_is_online_in_chat != 0 %}
-            <div class="social-avatar-chat">
-                <a onclick="javascript:chatWith('{{ user.id }}', '{{ user.complete_name }}', '{{ user.user_is_online }}','{{ user.avatar_small }}')" href="javascript:void(0);">
-                <img src="{{ "online.png" | icon }}" alt="{{ "Online" | get_lang }}">
-                {{ "Chat" | get_lang }} ({{ "Online" | get_lang }})
+        <p class="lead">
+            {{ user.firstname }}<br>{{ user.lastname }}
+        </p>
+        <ul class="list-unstyled user-details">
+            <li>
+                <a href="{{ vcard_user_link }}">
+                    <img src="{{ "vcard.png" | icon(22) }}" alt="{{ "UserInfo" | get_lang }}">
+                    {{ "UserInfo" | get_lang }}
                 </a>
-            </div>
-            {% else %}
-            <div class="social-avatar-chat">
-                <img src="{{ "offline.png" | icon }}" alt="{{ "Online" | get_lang }}">
-                {{ "Chat" | get_lang }} ({{ "Offline" | get_lang }})
-            </div>
+            </li>
+            <li>
+                <a href="{{ _p.web }}main/messages/new_message.php">
+                    <img src="{{ "instant_message.png" | icon }}" alt="{{ "Email" | get_lang }}">
+                    {{ user.email}}
+                </a>
+            </li>
+            {% if chat_enabled == 1 %}
+                <li>
+                    {% if user.user_is_online_in_chat != 0 %}
+                        <a onclick="javascript:chatWith('{{ user.id }}', '{{ user.complete_name }}', '{{ user.user_is_online }}','{{ user.avatar_small }}')" href="javascript:void(0);">
+                            <img src="{{ "online.png" | icon }}" alt="{{ "Online" | get_lang }}">
+                            {{ "Chat" | get_lang }} ({{ "Online" | get_lang }})
+                        </a>
+                    {% else %}
+                        <img src="{{ "offline.png" | icon }}" alt="{{ "Online" | get_lang }}">
+                        {{ "Chat" | get_lang }} ({{ "Offline" | get_lang }})
+                    {% endif %}
+                </li>
             {% endif %}
-        {% endif %}
+        </ul>
+
         {% if not profile_edition_link is empty %}
-            <a class="btn btn-default" href="{{ profile_edition_link }}">
-                <i class="fa fa-edit"></i>
-                {{ "EditProfile" | get_lang }}
-            </a>
+            <p>
+                <a class="btn btn-default btn-sm" href="{{ profile_edition_link }}">
+                    <i class="fa fa-edit"></i>
+                    {{ "EditProfile" | get_lang }}
+                </a>
+            </p>
         {% endif %}
     </div>
 </div>