Ver código fonte

Improve Skill Wheel - refs #7883

Angel Fernando Quiroz Campos 9 anos atrás
pai
commit
d0e802a94f

+ 5 - 147
app/Resources/public/css/base.css

@@ -2650,18 +2650,6 @@ form .formw .freeze {
   margin-top: 1em;
   background-color: #FFFFFF;
 }
-.skill-options .legend .title-skill,
-.skill-options .saved_profiles .title-skill
-{
-  color: #666655;
-  padding-bottom: 1em;
-  font-size: 16px;
-}
-.skill-options .skill-profile .title-skill{
-  color: #666655;
-  padding-bottom: .5em;
-  font-size: 18px;
-}
 .skill-options .skill-home{
   margin-top: 1em;
   margin-bottom: 1em;
@@ -2673,42 +2661,11 @@ form .formw .freeze {
   padding-right: 0;
   width: 100%;
 }
-.skill-options .accordion-heading {
-  border-bottom: 0px none;
-  background: #3FA5C3;
-}
-.skill-options .accordion-heading a{
-  color: #FFFFFF;
-}
-.skill-options .button-skill{
-  margin-top: 1em;
-}
-.skill-options .form-search .holder{
-  padding-left: .5em;
-  padding-right: .5em;
-}
 .skill-options .accordion-inner {
   padding: 9px 15px;
   /*border: 1px solid #dadada;*/
   background-color: #FFFFFF;
 }
-.skill-options .items_save{
-  margin-top: .5em;
-  margin-bottom: .5em;
-  display: inline-block;
-  height: auto !important;
-  clear: both;
-  width: 100%;
-}
-.skill-options .accordion-group {
-  margin-bottom: 2px;
-  border: 1px solid #3FA5C3;
-  border-radius: 4px;
-}
-.skill-options .accordion-inner {
-  padding: 9px 15px;
-  border-top: 1px solid #3FA5C3;
-}
 .skill-options .load_wheel{
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
@@ -2718,11 +2675,6 @@ form .formw .freeze {
   padding:1px 5px 2px;
   color:#333;
 }
-.skill-options .skill-items{
-  padding-bottom: 1em;
-  margin-bottom: .5em;
-  margin-top: .5em;
-}
 .skill-options .skill-winner{
   list-style: none;
   margin: 0;
@@ -2738,91 +2690,20 @@ form .formw .freeze {
   padding-left: 1.5em;
   padding-bottom: 1em;
 }
-.skill-options .skill-profile{
-  width: 100%;
-  display: block;
-  border: 1px solid #CCC;
-  border-radius: 10px;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  margin-top: 1em;
-  background-color: #FFFFFF;
-  padding-top: .5em;
-  padding-bottom: .5em;
-  margin-bottom: 1em;
-}
-.skill-options .section-info-skill{
-  display: inline-block;
-  padding-top: .5em;
-  padding-bottom: .5em;
-  width: 100%;
-  clear: both;
-}
-.skill-options .skill-profile .avatar{
-  display: block;
-  width: auto;
-  text-align: center;
-}
-.skill-options .skill-profile .info-user{
-  display: block;
-  width: auto;
-  margin-left: 1em;
-  padding: 1em;
-}
-.skill-options .button-skill{
-  margin-bottom: .5em;
-}
 .search-skill ul.holder li.bit-input input{
   width: 100%;
 }
-.page-items-profile{
-  padding: .5em;
-}
-.page-items-profile .title-skill{
-  margin-bottom: .5em;
-  font-size: 18px;
-  color: #333333;
-  margin-top: .5em;
-}
-.page-items-profile .block-items{
-  display: block;
-  width: 22.5%;
-  margin:10px;
-  float: left;
-}
-.page-items-profile .award-items{
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  font-size: 12px;
-}
-.page-items-profile .number-skill{
-  background-color: #FFFFFF;
-  padding-top: .5em;
-  padding-bottom: .5em;
-  padding-left: .5em;
-  margin-bottom: 1em;
-  font-size: 12px;
-  border: 1px solid #cccccc;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-.page-items-profile .block-items .border-items{
-  background-color: #ffffff;
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  border-radius: 10px;
-  border: 1px solid #cccccc;
+.skill-legend-basic {
+  color: #31A354;
 }
 .skill-legend-add{
-  background-color: #F89406;
+  color: #F89406;
 }
 .skill-legend-search{
-  background-color: #B94A48;
+  color: #B94A48;
 }
 .skill-legend-badges{
-  background-color: #3A87AD;
+  color: #3A87AD;
 }
 .page-skill .panel-heading a{
   color: #ffffff;
@@ -2830,41 +2711,18 @@ form .formw .freeze {
 .page-skill .btn-default{
   background-color: #F6F6F6;
 }
-.page-skill .text, .page-skill #saved_profiles h4{
-  font-size: 12px;
-}
 .page-skill .btn-default:hover {
   background-color: #E6E6E6;
 }
 .page-skill #skill_info{
   font-size: 12px;
 }
-.page-skill .items_save .holder_simple{
-  padding: 0;
-}
 .page-skill #skill_wheel tspan{
   font-size: 12px;
 }
 .page-skill .holder_simple li.bit-box a{
   color: #8A6D3B;
 }
-.page-items-profile .items-info{
-  padding:1em;
-}
-.page-items-profile .info-profile{
-  margin-top: 1em;
-  margin-bottom: .5em;
-}
-.page-items-profile .items-info .avatar-profile{
-  text-align: center;
-  background: #FFFFFF;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-  padding-bottom: 5px;
-  padding-top: 5px;
-  border: 1px solid #cccccc;
-}
 .skill_partition {
   cursor: pointer;
   stroke: #000000;

+ 9 - 0
main/inc/lib/skill.lib.php

@@ -582,6 +582,15 @@ class Skill extends Model
 
         $result = Database::query($sql);
         $users  = Database::store_result($result, 'ASSOC');
+
+        foreach ($users as &$user) {
+            if (!$user['icon']) {
+                continue;
+            }
+
+            $user['icon_small'] = sprintf("badges/%s-small.png", sha1($user['name']));
+        }
+
         return $users;
     }
 

+ 43 - 50
main/template/default/skill/profile.tpl

@@ -28,62 +28,55 @@
 
 {% if order_user_list is not null %}
     {% for count, user_list in order_user_list %}
-        <div class="page-items-profile">
-            <div class="row">
-                <div class="col-md-12">
-                    <h4 class="title-skill">
-                        {% if count == total_search_skills %}
-                            {{ "CompleteMatch"|get_lang }}
+        <div class="row">
+            <div class="col-md-12">
+                <h4 class="page-header">
+                    {% if count == total_search_skills %}
+                        {{ "CompleteMatch"|get_lang }}
+                    {% else %}
+                        {% if (total_search_skills - count) == 1 %}
+                            {{ "MissingOneStepToMatch"|get_lang }}
                         {% else %}
-                            {% if (total_search_skills - count) == 1 %}
-                                {{ "MissingOneStepToMatch"|get_lang }}
-                            {% else %}
-                                {{ "MissingXStepsToMatch"|get_lang | format(total_search_skills - count)}}                        
-                            {% endif %}
+                            {{ "MissingXStepsToMatch"|get_lang | format(total_search_skills - count)}}                        
                         {% endif %}
-                    </h4>
-                </div>
+                    {% endif %}
+                </h4>
             </div>
+        </div>
 
-            <div class="row">
-                {% for user in user_list %}
-                    <div class="block-items">
-                        <div class="border-items">
-                            <div class="items-info">
-                                <div class="avatar-profile">
-                                    <img width="96px" src="{{user.user.avatar}}" />
-                                </div>
-                                <div class="info-profile">
-                                    <h5><a href="{{ _p.web_main }}social/profile.php?u={{ user['user'].user_id }}">{{ user['user'].complete_name }} </a></h5>
-                                    <p class="text">{{ 'User' | get_lang }}: {{user['user'].username}} </p>
-                                </div>
-                                <div class="number-skill">{{ "Skills"|get_lang }} {{ user.total_found_skills }} / {{ total_search_skills }}</div>
-                                <div class="skill-user-items">
-                                    <ul class="award-items">
-                                        {% for skill_data in user.skills %}
-                                            <li>
-                                                {% if skill_list[skill_data.skill_id].name is not null %}
-                                                    {% if skill_data.found %}
-                                                        <img src="{{ _p.web }}main/img/icons/22/badges.png" alt="{{ skill_list[skill_data.skill_id].name }}" title="{{ skill_list[skill_data.skill_id].name }}" />{{ skill_list[skill_data.skill_id].name }}
-                                                    {% else %}
-                                                        <img src="{{ _p.web }}main/img/icons/22/badges-default.png" alt="{{ skill_list[skill_data.skill_id].name }}" title="{{ skill_list[skill_data.skill_id].name }}" />{{ skill_list[skill_data.skill_id].name }}
-                                                    {% endif %}
-
-                                                {% else %}
-                                                    {{ "SkillNotFound"|get_lang }}
-                                                {% endif %}
-                                                {# if $skill_data.found
-                                                "IHaveThisSkill"|get_lang
-                                                #}
-                                            </li>
-                                        {% endfor %}
-                                    </ul>
-                                </div>
-                            </div>
+        <div class="row">
+            {% for user in user_list %}
+                <div class="col-sm-4 col-lg-3">
+                    <div class="panel panel-default">
+                        <div class="panel-body">
+                            <img width="96" src="{{ user.user.avatar }}" class="center-block">
+                            <h3 class="text-center">
+                                <a href="{{ _p.web_main }}social/profile.php?u={{ user['user'].user_id }}" target="_blank">
+                                    {{ user['user'].complete_name_with_username }}
+                                </a>
+                            </h3>
+                            <p class="lead text-center">{{ "AchievedSkills"|get_lang }} {{ user.total_found_skills }} / {{ total_search_skills }}</p>
                         </div>
+                        <ul class="list-group">
+                            {% for skill_data in user.skills %}
+                                <li class="list-group-item {{ skill_data.found ? '' : 'text-muted' }}">
+                                    {% if skill_list[skill_data.skill_id].icon %}
+                                        <img src="{{ _p.web_upload ~ skill_list[skill_data.skill_id].icon_small }}" width="22" height="22" alt="{{ skill_list[skill_data.skill_id].name }}">
+                                    {% else %}
+                                        <img src="{{ 'badges.png'|icon(22) }}" width="22" height="22" alt="{{ skill_list[skill_data.skill_id].name }}">
+                                    {% endif %}
+
+                                    {% if skill_data.found %}
+                                        <b>{{ skill_list[skill_data.skill_id].name }}</b>
+                                    {% else %}
+                                        {{ skill_list[skill_data.skill_id].name }}
+                                    {% endif %}
+                                </li>
+                            {% endfor %}
+                        </ul>
                     </div>
-                {% endfor %}
-            </div>
+                </div>
+            {% endfor %}
         </div>
     {% endfor %}
 {% else %}

+ 2 - 2
main/template/default/skill/profile_item.tpl

@@ -1,5 +1,5 @@
 {% if profiles is not null %}
-          <h4 class="title-skill">{{ "SkillProfiles"|get_lang }}</h4>
+          <h5 class="title-skill">{{ "SkillProfiles"|get_lang }}</h5>
         <div class="items_save">
             <ul class="holder_simple">
             {%for profile in profiles %}
@@ -10,4 +10,4 @@
             {% endfor %}
             </ul>
         </div>
-{% endif %}
+{% endif %}

+ 70 - 91
main/template/default/skill/skill_wheel.tpl

@@ -241,7 +241,7 @@
         });
 
         /* URL link when searching skills */
-        $("#skill_search").on("click", "a.load_root", function () {
+        $("a.load_root").on("click", function () {
             skill_id = $(this).attr('rel');
             skill_to_load_from_get = 0;
             load_nodes(skill_id, main_depth);
@@ -337,7 +337,7 @@
             cache: false,
             filter_case: false,
             filter_hide: true,
-            complete_text: "{{ 'StartToType' | get_lang }}",
+            complete_text: "{{ 'EnterTheSkillNameToSearch' | get_lang }}",
             firstselected: true,
             //onremove: "testme",
             onselect: "check_skills_sidebar",
@@ -357,20 +357,12 @@
         }
 
         /* change background color */
-        $("#celestial").click(function () {
-            $("#page-back").css("background", "#A9E2F3");
-        });
-        $("#white").click(function () {
-            $("#page-back").css("background", "#FFFFFF");
-        });
-        $("#black").click(function () {
-            $("#page-back").css("background", "#000000");
-        });
-        $("#lead").click(function () {
-            $("#page-back").css("background", "#848484");
-        });
-        $("#light-yellow").click(function () {
-            $("#page-back").css("background", "#F7F8E0");
+        $('#skill-change-background-options li a').on('click', function (e) {
+            e.preventDefault();
+
+            var newBackgroundColor = $(this).data('color') || '#FFF';
+
+            $("#page-back").css("background", newBackgroundColor);
         });
 
         /* Generated random colour */
@@ -457,105 +449,92 @@
 <div id="page-back" class="page-skill">
     <div class="container-fluid">
         <div class="row">
-
             <div class="col-md-3 skill-options">
                 <div class="skill-home">
                     <a class="btn btn-large btn-block btn-success" href="{{ _p.web }}user_portal.php">
                         <i class="fa fa-home"></i> {{ "ReturnToCourseList"|get_lang }}
                     </a>
                 </div>
-                <!-- ACCORDION -->
-                <div class="panel-group" id="accordion2">
-                    <div class="panel panel-primary">
-                        <div class="panel-heading">
-                            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
-                                {{ 'SkillsSearch' | get_lang }}
-                            </a>
+                <div class="panel panel-primary">
+                    <div class="panel-body">
+                        <div class="search-skill">
+                            <p class="text">{{ 'EnterTheSkillNameToSearch' | get_lang }}</p>
+                            <form id="skill_search" class="form-search">
+                                <select id="skill_id" name="skill_id" /></select>
+                                <ul id="skill_holder" class="holder_simple border"></ul>
+                            </form>
                         </div>
-                        <div id="collapseOne" class="panel-collapse collapse">
-                            <div class="panel-body">
-                                <!-- SEARCH -->
-                                <div class="search-skill">
-                                    <p class="text">{{ 'EnterTheSkillNameToSearch' | get_lang }}</p>
-                                    <form id="skill_search" class="form-search">
-                                        <select id="skill_id" name="skill_id" /></select>
-                                        <div class="button-skill">
-                                            <a class="btn btn-block btn-default load_root" rel="0" href="#">
-                                                <i class="fa fa-eye"></i> {{ "ViewSkillsWheel"|get_lang }}
-                                            </a>
-                                            <!-- <a id="clear_selection" class="btn btn-danger">{{ "Clear"|get_lang }}</a> -->
-                                        </div>
-                                        <ul id="skill_holder" class="holder_simple border"></ul>
-                                    </form>
-                                </div>
-                                <!-- END SEARCH -->
-                            </div>
+                        <div class="search-profile-skill">
+                            <p class="text">{{ 'WhatSkillsAreYouLookingFor'|get_lang }}</p>
+                            <ul id="profile_search" class="holder holder_simple"></ul>
+                            <form id="search_profile_form" class="form-search">
+                                <button class="btn btn-default btn-block" type="submit">
+                                    <i class="fa fa-search"></i> {{ "SearchProfileMatches"|get_lang }}
+                                </button>
+                            </form>
+                            <p class="text">{{ 'IsThisWhatYouWereLookingFor'|get_lang }}</p>
+                            <form id="save_profile_form_button" class="form-search">
+                                <button class="btn btn-default btn-block" type="submit">
+                                    <i class="fa fa-floppy-o"></i> {{ "SaveThisSearch"|get_lang }}
+                                </button>
+                            </form>
                         </div>
-                    </div>
-                    <div class="panel panel-primary">
-                        <div class="panel-heading">
-                            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
-                                {{ 'ProfileSearch'|get_lang }}
+                        <div id="saved_profiles" class="clearfix"></div>
+                        
+                        <p class="clearfix">
+                            <a class="btn btn-block btn-default load_root" rel="0" href="#">
+                                <i class="fa fa-eye"></i> {{ "ViewSkillsWheel"|get_lang }}
                             </a>
-                        </div>
-                        <div id="collapseTwo" class="panel-collapse collapse">
-                            <div class="panel-body">
-                                <!-- SEARCH PROFILE -->
-                                <div class="search-profile-skill">
-
-                                    <p class="text">{{ 'WhatSkillsAreYouLookingFor'|get_lang }}</p>
-                                    <ul id="profile_search" class="holder holder_simple"></ul>
-                                    <form id="search_profile_form" class="form-search">
-                                        <button class="btn btn-default btn-block" type="submit">
-                                            <i class="fa fa-search"></i> {{ "SearchProfileMatches"|get_lang }}
-                                        </button>
-                                    </form>
-                                    <p class="text">{{ 'IsThisWhatYouWereLookingFor'|get_lang }}</p>
-                                    <form id="save_profile_form_button" class="form-search">
-                                        <button class="btn btn-default btn-block" type="submit">
-                                            <i class="fa fa-floppy-o"></i> {{ "SaveThisSearch"|get_lang }}
-                                        </button>
-                                    </form>
-                                </div>
-                                <!-- END SEARCH PROFILE-->
-                                <div id="saved_profiles"></div>
-                            </div>
-                        </div>
+                        </p>
                     </div>
+                </div>
+                <div class="panel-group" id="wheel-second-accordion" role="tablist" aria-multiselectable="true">
                     <div class="panel panel-primary">
-                        <div class="panel-heading">
-                            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
-                                {{ 'DisplayOptions' | get_lang }}
-                            </a>
+                        <div class="panel-heading" role="tab" id="wheel-legend-heading">
+                            <h4 class="panel-title">
+                                <a role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-legend-collapse" aria-expanded="true" aria-controls="wheel-legend-collapse">
+                                    {{ "Legend"|get_lang }}
+                                </a>
+                            </h4>
                         </div>
-                        <div id="collapseThree" class="panel-collapse collapse">
+                        <div id="wheel-legend-collapse" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="wheel-legend-heading">
                             <div class="panel-body">
-                                <p class="text">{{ 'ChooseABackgroundColor' | get_lang }}</p>
-                                <ul>
-                                    <li><a href="#" id="white">{{ 'White' | get_lang }}</a></li>
-                                    <li><a href="#" id="black">{{ 'Black' | get_lang }}</a></li>
-                                    <li><a href="#" id="celestial">{{ 'LightBlue' }}</a></li>
-                                    <li><a href="#" id="lead">{{ 'Gray' | get_lang }}</a></li>
-                                    <li><a href="#" id="light-yellow">{{ 'Corn' | get_lang }}</a></li>
+                                <ul class="fa-ul">
+                                    <li>
+                                        <i class="fa fa-li fa-square skill-legend-basic"></i> {{ "BasicSkills"|get_lang }}
+                                    </li>
+                                    <li>
+                                        <i class="fa fa-li fa-square skill-legend-add"></i> {{ "SkillsYouCanLearn"|get_lang }}
+                                    </li>
+                                    <li>
+                                        <i class="fa fa-li fa-square skill-legend-search"></i> {{ "SkillsSearchedFor"|get_lang }}
+                                    </li>
                                 </ul>
                             </div>
                         </div>
                     </div>
                     <div class="panel panel-primary">
-                        <div class="panel-heading">
-                            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
-                                {{ "Legend"|get_lang }}
-                            </a>
+                        <div class="panel-heading" role="tab" id="wheel-display-heading">
+                            <h4 class="panel-title">
+                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-display-collapse" aria-expanded="false" aria-controls="wheel-display-collapse">
+                                    {{ 'DisplayOptions' | get_lang }}
+                                </a>
+                            </h4>
                         </div>
-                        <div id="collapseFour" class="panel-collapse collapse">
+                        <div id="wheel-display-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="wheel-display-heading">
                             <div class="panel-body">
-                                <p class="text"><span class="skill-legend-add">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsYouCanLearn"|get_lang }}</p>
-                                <p class="text"><span class="skill-legend-search">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsSearchedFor"|get_lang }}</p>
+                                <p>{{ 'ChooseABackgroundColor' | get_lang }}</p>
+                                <ul class="list-unstyled" id="skill-change-background-options">
+                                    <li><a href="#" data-color="#FFFFFF">{{ 'White' | get_lang }}</a></li>
+                                    <li><a href="#" data-color="#000000">{{ 'Black' | get_lang }}</a></li>
+                                    <li><a href="#" data-color="#A9E2F3">{{ 'LightBlue' }}</a></li>
+                                    <li><a href="#" data-color="#848484">{{ 'Gray' | get_lang }}</a></li>
+                                    <li><a href="#" data-color="#F7F8E0">{{ 'Corn' | get_lang }}</a></li>
+                                </ul>
                             </div>
                         </div>
                     </div>
                 </div>
-                <!-- END ACCORDEON -->
             </div>
             <div id="wheel_container" class="col-md-9">
                 <div id="skill_wheel">

+ 76 - 71
main/template/default/skill/skill_wheel_student.tpl

@@ -87,7 +87,7 @@
         });
 
         /* URL link when searching skills */
-        $("#skill_search").on("click", "a.load_root", function () {
+        $("a.load_root").on("click", function () {
             skill_id = $(this).attr('rel');
             skill_to_load_from_get = 0;
             load_nodes(skill_id, main_depth);
@@ -112,20 +112,12 @@
         });
 
         /* change background color */
-        $("#celestial").click(function () {
-            $("#page-back").css("background", "#A9E2F3");
-        });
-        $("#white").click(function () {
-            $("#page-back").css("background", "#FFFFFF");
-        });
-        $("#black").click(function () {
-            $("#page-back").css("background", "#000000");
-        });
-        $("#lead").click(function () {
-            $("#page-back").css("background", "#848484");
-        });
-        $("#light-yellow").click(function () {
-            $("#page-back").css("background", "#F7F8E0");
+        $('#skill-change-background-options li a').on('click', function (e) {
+            e.preventDefault();
+
+            var newBackgroundColor = $(this).data('color') || '#FFF';
+
+            $("#page-back").css("background", newBackgroundColor);
         });
 
         /* Wheel skill popup form */
@@ -135,7 +127,7 @@
             cache: false,
             filter_case: false,
             filter_hide: true,
-            complete_text: "{{ 'StartToType' | get_lang }}",
+            complete_text: "{{ 'EnterTheSkillNameToSearch'|get_lang }}",
             firstselected: true,
             //onremove: "testme",
             onselect: "check_skills_sidebar",
@@ -155,33 +147,35 @@
     <div class="container-fluid">
         <div class="row">
             <div class="col-md-3 skill-options">
-                <div class="skill-home">
+                <p class="skill-home">
                     <a class="btn btn-large btn-block btn-success" href="{{ _p.web }}user_portal.php">
                         <i class="fa fa-home"></i> {{ "ReturnToCourseList"|get_lang }}
                     </a>
-                </div>
-                <div class="skill-profile">
-                    <div class="avatar">
-                        <img width="100px" src="{{ user_info.avatar }}" style="text-align: center">
-                    </div>
-                    <div class="info-user">
-                        <h4 class="title-skill">{{ user_info.complete_name }}</h4>
-                        <p>
-                            <a href="{{ _p.web_main }}social/skills_ranking.php" class="btn btn-default btn-block" target="_blank">{{ 'YourSkillRankingX' | get_lang | format(ranking) }}</a>
+                </p>
+                <div class="panel panel-default">
+                    <div class="panel-body">
+                        <figure class="text-center">
+                            <img width="100px" src="{{ user_info.avatar }}" class="center-block">
+                            <figcaption class="lead">{{ user_info.complete_name }}</figcaption>
+                        </figure>
+                        <p class="text-center">
+                            <a href="{{ _p.web_main }}social/skills_ranking.php" class="btn btn-default" target="_blank">{{ 'YourSkillRankingX'|get_lang|format(ranking) }}</a>
                         </p>
-                        {% if skills is not empty %}
-                            {% for skill in skills %}
-                                {% if skill.icon is empty %}
-                                    <img src="{{ 'badges.png' | icon(32) }}" width="32" height="32" alt="{{ skill.name }}" title="{{ skill.name }}">
-                                {% else %}
-                                    <img src="{{ skill.web_icon_thumb_path }}" width="32" height="32" alt="{{ skill.name }}" title="{{ skill.name }}">
-                                {% endif %}
-                            {% endfor %}
-                        {% endif %}
+                        <div class="text-center">
+                            {% if skills is not empty %}
+                                {% for skill in skills %}
+                                    {% if skill.icon is empty %}
+                                        <img src="{{ 'badges.png'|icon(32) }}" width="32" height="32" alt="{{ skill.name }}" title="{{ skill.name }}">
+                                    {% else %}
+                                        <img src="{{ skill.web_icon_thumb_path }}" width="32" height="32" alt="{{ skill.name }}" title="{{ skill.name }}">
+                                    {% endif %}
+                                {% endfor %}
+                            {% endif %}
 
-                        {% for i in 1..(9 - ranking) %}
-                            <img src="{{ 'badges-default.png' | icon(32) }}" width="32" height="32">
-                        {% endfor %}
+                            {% for i in 1..(5 - ranking) %}
+                                <img src="{{ 'badges-default.png'|icon(32) }}" width="32" height="32">
+                            {% endfor %}
+                        </div>
                     </div>
                 </div>
 
@@ -190,65 +184,76 @@
                     <div class="panel panel-primary">
                         <div class="panel-heading">
                             <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
-                                {{ 'GetNewSkills' | get_lang }}
+                                {{ 'GetNewSkills'|get_lang }}
                             </a>
                         </div>
                         <div id="collapseTwo" class="panel-collapse collapse">
                             <div class="panel-body">
                                 <!-- SEARCH -->
                                 <div class="search-skill">
-                                    <p class="text">{{ 'EnterTheSkillNameToSearch' | get_lang }}</p>
+                                    <h5 class="page-header">{{ 'SkillsSearch'|get_lang }}</h5>
                                     <form id="skill_search" class="form-search">
                                         <select id="skill_id" name="skill_id" /></select>
-                                        <div class="button-skill">
-                                            <a class="btn btn-default btn-block load_root" rel="0" href="#">
-                                                <i class="fa fa-eye"></i> {{ "ViewSkillsWheel"|get_lang }}
-                                            </a>
-                                            <!-- <a id="clear_selection" class="btn btn-danger">{{ "Clear"|get_lang }}</a> -->
-                                        </div>
-                                        <ul id="skill_holder" class="holder_simple"></ul>
+                                        <ul id="skill_holder" class="holder_simple clearfix"></ul>
                                     </form>
                                 </div>
                                 <!-- END SEARCH -->
                                 <!-- INFO SKILL -->
-                                <div class="section-info-skill">
-                                    <p class="text">{{ 'SkillInfo'|get_lang }}</p>
-                                    <div id="skill_info"></div>
-                                </div>
+                                <h5 class="page-header">{{ 'SkillInfo'|get_lang }}</h5>
+                                <div id="skill_info"></div>
                                 <!-- END INFO SKILL -->
+                                <p>
+                                    <a class="btn btn-default btn-block load_root" rel="0" href="#">
+                                        <i class="fa fa-eye"></i> {{ "ViewSkillsWheel"|get_lang }}
+                                    </a>
+                                </p>
                             </div>
                         </div>
                     </div>
+                </div>
+                <div class="panel-group" id="wheel-second-accordion" role="tablist" aria-multiselectable="true">
                     <div class="panel panel-primary">
-                        <div class="panel-heading">
-                            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
-                                {{ 'DisplayOptions' | get_lang }}
-                            </a>
+                        <div class="panel-heading" role="tab" id="wheel-legend-heading">
+                            <h4 class="panel-title">
+                                <a role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-legend-collapse" aria-expanded="true" aria-controls="wheel-legend-collapse">
+                                    {{ "Legend"|get_lang }}
+                                </a>
+                            </h4>
                         </div>
-                        <div id="collapseThree" class="panel-collapse collapse">
+                        <div id="wheel-legend-collapse" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="wheel-legend-heading">
                             <div class="panel-body">
-                                <p class="text">{{ 'ChooseABackgroundColor' | get_lang }}</p>
-                                <ul>
-                                    <li><a href="#" id="white">{{ 'White' | get_lang }}</a></li>
-                                    <li><a href="#" id="black">{{ 'Black' | get_lang }}</a></li>
-                                    <li><a href="#" id="celestial">{{ 'LightBlue' }}</a></li>
-                                    <li><a href="#" id="lead">{{ 'Gray' | get_lang }}</a></li>
-                                    <li><a href="#" id="light-yellow">{{ 'Corn' | get_lang }}</a></li>
+                                <ul class="fa-ul">
+                                    <li>
+                                        <i class="fa fa-li fa-square skill-legend-badges"></i> {{ "SkillsYouAcquired"|get_lang }}
+                                    </li>
+                                    <li>
+                                        <i class="fa fa-li fa-square skill-legend-add"></i> {{ "SkillsYouCanLearn"|get_lang }}
+                                    </li>
+                                    <li>
+                                        <i class="fa fa-li fa-square skill-legend-search"></i> {{ "SkillsSearchedFor"|get_lang }}
+                                    </li>
                                 </ul>
                             </div>
                         </div>
                     </div>
                     <div class="panel panel-primary">
-                        <div class="panel-heading">
-                            <a   data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
-                                {{ "Legend"|get_lang }}
-                            </a>
+                        <div class="panel-heading" role="tab" id="wheel-display-heading">
+                            <h4 class="panel-title">
+                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-display-collapse" aria-expanded="false" aria-controls="wheel-display-collapse">
+                                    {{ 'DisplayOptions'|get_lang }}
+                                </a>
+                            </h4>
                         </div>
-                        <div id="collapseFour" class="panel-collapse collapse">
+                        <div id="wheel-display-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="wheel-display-heading">
                             <div class="panel-body">
-                                <p class="text"><span class="skill-legend-badges">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsYouAcquired"|get_lang }}</p>
-                                <p class="text"><span class="skill-legend-add">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsYouCanLearn"|get_lang }}</p>
-                                <p class="text"><span class="skill-legend-search">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsSearchedFor"|get_lang }}</p>
+                                <p>{{ 'ChooseABackgroundColor'|get_lang }}</p>
+                                <ul class="list-unstyled" id="skill-change-background-options">
+                                    <li><a href="#" data-color="#FFFFFF">{{ 'White'|get_lang }}</a></li>
+                                    <li><a href="#" data-color="#000000">{{ 'Black'|get_lang }}</a></li>
+                                    <li><a href="#" data-color="#A9E2F3">{{ 'LightBlue' }}</a></li>
+                                    <li><a href="#" data-color="#848484">{{ 'Gray'|get_lang }}</a></li>
+                                    <li><a href="#" data-color="#F7F8E0">{{ 'Corn'|get_lang }}</a></li>
+                                </ul>
                             </div>
                         </div>
                     </div>