Improve Skill Wheel - refs #7883

1.10.x
Angel Fernando Quiroz Campos 10 years ago
parent c8bc145b1b
commit d0e802a94f
  1. 152
      app/Resources/public/css/base.css
  2. 9
      main/inc/lib/skill.lib.php
  3. 93
      main/template/default/skill/profile.tpl
  4. 4
      main/template/default/skill/profile_item.tpl
  5. 161
      main/template/default/skill/skill_wheel.tpl
  6. 147
      main/template/default/skill/skill_wheel_student.tpl

@ -2650,18 +2650,6 @@ form .formw .freeze {
margin-top: 1em; margin-top: 1em;
background-color: #FFFFFF; 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{ .skill-options .skill-home{
margin-top: 1em; margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
@ -2673,42 +2661,11 @@ form .formw .freeze {
padding-right: 0; padding-right: 0;
width: 100%; 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 { .skill-options .accordion-inner {
padding: 9px 15px; padding: 9px 15px;
/*border: 1px solid #dadada;*/ /*border: 1px solid #dadada;*/
background-color: #FFFFFF; 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{ .skill-options .load_wheel{
-moz-border-radius:6px; -moz-border-radius:6px;
-webkit-border-radius:6px; -webkit-border-radius:6px;
@ -2718,11 +2675,6 @@ form .formw .freeze {
padding:1px 5px 2px; padding:1px 5px 2px;
color:#333; color:#333;
} }
.skill-options .skill-items{
padding-bottom: 1em;
margin-bottom: .5em;
margin-top: .5em;
}
.skill-options .skill-winner{ .skill-options .skill-winner{
list-style: none; list-style: none;
margin: 0; margin: 0;
@ -2738,91 +2690,20 @@ form .formw .freeze {
padding-left: 1.5em; padding-left: 1.5em;
padding-bottom: 1em; 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{ .search-skill ul.holder li.bit-input input{
width: 100%; width: 100%;
} }
.page-items-profile{ .skill-legend-basic {
padding: .5em; color: #31A354;
}
.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-add{ .skill-legend-add{
background-color: #F89406; color: #F89406;
} }
.skill-legend-search{ .skill-legend-search{
background-color: #B94A48; color: #B94A48;
} }
.skill-legend-badges{ .skill-legend-badges{
background-color: #3A87AD; color: #3A87AD;
} }
.page-skill .panel-heading a{ .page-skill .panel-heading a{
color: #ffffff; color: #ffffff;
@ -2830,41 +2711,18 @@ form .formw .freeze {
.page-skill .btn-default{ .page-skill .btn-default{
background-color: #F6F6F6; background-color: #F6F6F6;
} }
.page-skill .text, .page-skill #saved_profiles h4{
font-size: 12px;
}
.page-skill .btn-default:hover { .page-skill .btn-default:hover {
background-color: #E6E6E6; background-color: #E6E6E6;
} }
.page-skill #skill_info{ .page-skill #skill_info{
font-size: 12px; font-size: 12px;
} }
.page-skill .items_save .holder_simple{
padding: 0;
}
.page-skill #skill_wheel tspan{ .page-skill #skill_wheel tspan{
font-size: 12px; font-size: 12px;
} }
.page-skill .holder_simple li.bit-box a{ .page-skill .holder_simple li.bit-box a{
color: #8A6D3B; 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 { .skill_partition {
cursor: pointer; cursor: pointer;
stroke: #000000; stroke: #000000;

@ -582,6 +582,15 @@ class Skill extends Model
$result = Database::query($sql); $result = Database::query($sql);
$users = Database::store_result($result, 'ASSOC'); $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; return $users;
} }

@ -28,62 +28,55 @@
{% if order_user_list is not null %} {% if order_user_list is not null %}
{% for count, user_list in order_user_list %} {% for count, user_list in order_user_list %}
<div class="page-items-profile"> <div class="row">
<div class="row"> <div class="col-md-12">
<div class="col-md-12"> <h4 class="page-header">
<h4 class="title-skill"> {% if count == total_search_skills %}
{% if count == total_search_skills %} {{ "CompleteMatch"|get_lang }}
{{ "CompleteMatch"|get_lang }} {% else %}
{% if (total_search_skills - count) == 1 %}
{{ "MissingOneStepToMatch"|get_lang }}
{% else %} {% else %}
{% if (total_search_skills - count) == 1 %} {{ "MissingXStepsToMatch"|get_lang | format(total_search_skills - count)}}
{{ "MissingOneStepToMatch"|get_lang }}
{% else %}
{{ "MissingXStepsToMatch"|get_lang | format(total_search_skills - count)}}
{% endif %}
{% endif %} {% endif %}
</h4> {% endif %}
</div> </h4>
</div> </div>
</div>
<div class="row"> <div class="row">
{% for user in user_list %} {% for user in user_list %}
<div class="block-items"> <div class="col-sm-4 col-lg-3">
<div class="border-items"> <div class="panel panel-default">
<div class="items-info"> <div class="panel-body">
<div class="avatar-profile"> <img width="96" src="{{ user.user.avatar }}" class="center-block">
<img width="96px" src="{{user.user.avatar}}" /> <h3 class="text-center">
</div> <a href="{{ _p.web_main }}social/profile.php?u={{ user['user'].user_id }}" target="_blank">
<div class="info-profile"> {{ user['user'].complete_name_with_username }}
<h5><a href="{{ _p.web_main }}social/profile.php?u={{ user['user'].user_id }}">{{ user['user'].complete_name }} </a></h5> </a>
<p class="text">{{ 'User' | get_lang }}: {{user['user'].username}} </p> </h3>
</div> <p class="lead text-center">{{ "AchievedSkills"|get_lang }} {{ user.total_found_skills }} / {{ total_search_skills }}</p>
<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> </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> </div>
{% endfor %} </div>
</div> {% endfor %}
</div> </div>
{% endfor %} {% endfor %}
{% else %} {% else %}

@ -1,5 +1,5 @@
{% if profiles is not null %} {% 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"> <div class="items_save">
<ul class="holder_simple"> <ul class="holder_simple">
{%for profile in profiles %} {%for profile in profiles %}
@ -10,4 +10,4 @@
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
{% endif %} {% endif %}

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

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

Loading…
Cancel
Save