Improve template for social's skills block - refs #7881

app/Resources/public/css/base.css

@@ -4140,40 +4140,23 @@ i.size-32.icon-new-work{
   margin-bottom: 10px;
   margin-top: 10px;
 }
-#skillList .list-badges{
-  list-style: none;
-  padding-left: 8px;
-  margin:0px;
-}
-#skillList .list-badges li{
-  margin-top: 10px;
+#skillList .list-badges .thumbnail{
+  border-color: #bce8f1;
   display: inline-block;
-  width: 120px;
-  margin-right: 5px;
-  font-size: 11px;
-  text-align: center;
-  border: 1px solid #bce8f1;
-  border-radius: 5px;
-  box-sizing: border-box;
+  margin-right: 15px;
+  padding: 0;
   vertical-align: top;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.09);
+  width: 120px;
 }
-#skillList .list-badges li img{
-  height: 100%;
-  max-height: 64px;
-  width: 100%;
-  max-width: 64px;
-  margin-top: 10px;
-  margin-bottom: 10px;
+#skillList .list-badges .thumbnail img{
+  margin-bottom: 4px;
+  margin-top: 4px;
 }
-#skillList .list-badges .badges-name{
+#skillList .list-badges .thumbnail .caption{
   background: #D9EDF7;
-  min-height: 35px;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  color: #31708F;
-  padding-left: 5px;
-  padding-right: 5px;
+}
+#skillList .list-badges .thumbnail .caption p{
+  margin-bottom: 0;
 }
 #skillList .dropdown-menu{
   top: 30px;

main/template/default/social/skills_block.tpl

@@ -29,11 +29,13 @@
         <div id="skillList" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
             <div class="panel-body">
                 {% if skills %}
-                    <ul class="list-badges">
+                    <ul class="list-unstyled list-badges">
                         {% for skill in skills %}
-                            <li>
-                                <img title="{{ skill.name }}" src="{{ skill.icon ? skill.web_icon_thumb_path : 'badges-default.png'|icon(64) }}" width="64" height="64" alt="{{ skill.name }}">
-                                <div class="badges-name">{{ skill.name }}</div>
+                            <li class="thumbnail">
+                                <img title="{{ skill.name }}" class="img-responsive" src="{{ skill.icon ? skill.web_icon_thumb_path : 'badges-default.png'|icon(64) }}" width="64" height="64" alt="{{ skill.name }}">
+                                <div class="caption">
+                                    <p class="text-center">{{ skill.name }}</p>
+                                </div>
                             </li>
                         {% endfor %}
                     </ul>