Bladeren bron

Merge pull request #650 from aragonc/bootstrap

Bootstrap, fix skill css
Yannick Warnier 10 jaren geleden
bovenliggende
commit
0ea61eec5d

+ 57 - 14
main/css/base.css

@@ -3240,16 +3240,13 @@ form .formw .freeze {
   width: 100%;
 }
 .page-items-profile{
-  padding-top: 2em;
-  padding-bottom: 2em;
-  padding-left: 1em;
-  padding-right: 1em;
+  padding: .5em;
 }
 .page-items-profile .title-skill{
-  margin-bottom: 1em;
+  margin-bottom: .5em;
   font-size: 18px;
   color: #333333;
-  margin-top: 1em;
+  margin-top: .5em;
 }
 .page-items-profile .block-items{
   display: block;
@@ -3261,6 +3258,7 @@ form .formw .freeze {
   list-style: none;
   margin: 0;
   padding: 0;
+  font-size: 12px;
 }
 .page-items-profile .number-skill{
   background-color: #FFFFFF;
@@ -3268,18 +3266,52 @@ form .formw .freeze {
   padding-bottom: .5em;
   padding-left: .5em;
   margin-bottom: 1em;
+  font-size: 12px;
   border: 1px solid #cccccc;
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  border-radius: 10px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
 }
 .page-items-profile .block-items .border-items{
-  background-color: #EFEFEF;
+  background-color: #ffffff;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   border: 1px solid #cccccc;
 }
+.skill-legend-add{
+  background-color: #F89406;
+}
+.skill-legend-search{
+  background-color: #B94A48;
+}
+.skill-legend-badges{
+  background-color: #3A87AD;
+}
+.page-skill .panel-heading a{
+  color: #ffffff;
+}
+.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;
 }
@@ -5520,10 +5552,7 @@ ul.holder li.bit-box{
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
 }
-ul.holder li.bit-box a.closebutton{
-  right: 10px;
-  top: 10px;
-}
+
 #file-descrtiption.form-control{
   width: 80%;
 }
@@ -5584,6 +5613,13 @@ ul.holder li.bit-box a.closebutton{
 .total{
   width: 100%;
 }
+.panel-default .panel-heading .btn{
+  top: -25px;
+}
+.panel-default .panel-heading .dropdown-menu{
+  top: 30%;
+}
+
 #touch-button{
   text-decoration: none;
   position: fixed;
@@ -5597,6 +5633,9 @@ ul.holder li.bit-box a.closebutton{
   opacity: 50;
   z-index: 2;
 }
+.search-skill ul.holder_simple{
+  padding: 0;
+}
 .hidden-touch{
   background: url("../img/icons/48/hidden-touch-left.png")center center no-repeat;
 }
@@ -5628,6 +5667,10 @@ ul.holder li.bit-box a.closebutton{
 #multiple-add-session .control-course{
   text-align: center;
 }
+.data_table tr td .form-control{
+  width: 20%;
+  display: inline-block;
+}
 /* CSS Responsive */
 @media (min-width: 1025px) and (max-width: 1200px) {
 .sidebar-scorm{

BIN
main/img/icons/22/badges-default.png


BIN
main/img/icons/22/badges.png


BIN
main/img/icons/32/badges-default.png


BIN
main/img/icons/32/badges.png


+ 3 - 2
main/inc/lib/display.lib.php

@@ -2077,12 +2077,13 @@ class Display
      * @param string $title
      * @param string $footer
      * @param string $style
+     * @param string $extra
      *
      * @return string
      */
-    public static function panel($content, $title = '', $footer = '', $style = '')
+    public static function panel($content, $title = '', $footer = '', $style = '', $extra='')
     {
-        $title = !empty($title) ? '<div class="panel-heading"><h3 class="panel-title">'.$title.'</h3></div>' : '';
+        $title = !empty($title) ? '<div class="panel-heading"><h3 class="panel-title">'.$title.'</h3>'.$extra.'</div>' : '';
         $footer = !empty($footer) ? '<div class="panel-footer">'.$footer.'</div>' : '';
 
         return '

+ 10 - 8
main/social/home.php

@@ -100,30 +100,30 @@ if (api_get_setting('allow_skills_tool') == 'true') {
 
     //$social_skill_block = '<div class="panel panel-default social-skill">';
     //$social_skill_block .= '<div class="panel-heading">' . get_lang('Skills');
-    $content = '<div class="btn-group pull-right">
-                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+    $extra = '<div class="btn-group pull-right">
+                <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
                 <span class="caret"></span></a>
                  <ul class="dropdown-menu">';
     if (api_is_student() || api_is_student_boss() || api_is_drh()) {
-        $content .= '<li>' . Display::url(
+        $extra .= '<li>' . Display::url(
             get_lang('SkillsReport'),
             api_get_path(WEB_CODE_PATH) . 'social/my_skills_report.php'
             ) . '</li>';
     }
 
-    $content .= '<li>' . Display::url(
+    $extra.= '<li>' . Display::url(
         get_lang('SkillsWheel'),
         api_get_path(WEB_CODE_PATH) . 'social/skills_wheel.php'
         ) . '</li>';
 
-    $content .= '<li>' . Display::url(
+    $extra .= '<li>' . Display::url(
         sprintf(get_lang('YourSkillRankingX'), $ranking),
         api_get_path(WEB_CODE_PATH) . 'social/skills_ranking.php'
     ) . '</li>';
 
-    $content .= '</ul></div>';
+    $extra .= '</ul></div>';
 
-    $social_skill_block = Display::panel($content, get_lang('Skills'));
+    $social_skill_block = Display::panel($content, get_lang('Skills'),null,null,$extra);
 
     $lis = '';
     if (!empty($skills)) {
@@ -152,7 +152,9 @@ if (api_get_setting('allow_skills_tool') == 'true') {
         /*$social_skill_block .= '<div class="panel-body">';
         $social_skill_block .= Display::tag('ul', $lis, array('class' => 'list-badges'));
         $social_skill_block .= '</div>';*/
-        $social_skill_block .= Display::panel(Display::tag('ul', $lis, array('class' => 'list-badges')));
+        $content .= Display::tag('ul', $lis, array('class' => 'list-badges'));
+        $social_skill_block = Display::panel($content, get_lang('Skills'),null,null,$extra);
+
     } else {
 
         $social_skill_block .= Display::panel(

+ 4 - 4
main/template/default/skill/profile.tpl

@@ -54,8 +54,8 @@
                                     <img width="96px" src="{{user.user.avatar}}" />
                                 </div>
                                 <div class="info-profile">
-                                    <h4><a href="{{ _p.web_main }}social/profile.php?u={{ user['user'].user_id }}">{{ user['user'].complete_name }} </a></h4>
-                                    <p>{{ 'User' | get_lang }}: {{user['user'].username}} </p>
+                                    <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">
@@ -64,9 +64,9 @@
                                             <li>
                                                 {% if skill_list[skill_data.skill_id].name is not null %}
                                                     {% if skill_data.found %}
-                                                        <img src="{{ _p.web }}main/img/icons/22/award_red_start.png" alt="{{ skill_list[skill_data.skill_id].name }}" title="{{ skill_list[skill_data.skill_id].name }}" />{{ skill_list[skill_data.skill_id].name }}
+                                                        <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/award_green.png" alt="{{ skill_list[skill_data.skill_id].name }}" title="{{ skill_list[skill_data.skill_id].name }}" />{{ skill_list[skill_data.skill_id].name }}
+                                                        <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 %}

+ 18 - 15
main/template/default/skill/skill_wheel.tpl

@@ -471,19 +471,20 @@ $(document).ready(function() {
     }*/
 });
 </script>
-<div id="page-back">
+<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">{{ "ReturnToCourseList"|get_lang }}</a>
+                <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-default">
+            <div class="panel panel-primary">
                 <div class="panel-heading">
                     <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                         {{ 'SkillsSearch' | get_lang }}
@@ -493,11 +494,11 @@ $(document).ready(function() {
                     <div class="panel-body">
                         <!-- SEARCH -->
                         <div class="search-skill">
-                            <p>{{ 'EnterTheSkillNameToSearch' | get_lang }}</p>
+                            <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-default btn-block btn-large btn-danger load_root" rel="0" href="#">{{ "ViewSkillsWheel"|get_lang }}</a>
+                                    <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>
@@ -507,7 +508,7 @@ $(document).ready(function() {
                     </div>
                 </div>
             </div>
-            <div class="panel panel-default">
+            <div class="panel panel-primary">
                 <div class="panel-heading">
                     <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                         {{ 'ProfileSearch'|get_lang }}
@@ -518,14 +519,16 @@ $(document).ready(function() {
                         <!-- SEARCH PROFILE -->
                         <div class="search-profile-skill">
 
-                            <p class="description">{{ 'WhatSkillsAreYouLookingFor'|get_lang }}</p>
+                            <p class="text">{{ 'WhatSkillsAreYouLookingFor'|get_lang }}</p>
                             <ul id="profile_search" class="holder holder_simple"></ul>
                             <form id="search_profile_form" class="form-search">
-                                <input class="btn btn-default btn-block" type="submit" value="{{ "SearchProfileMatches"|get_lang }}">
+
+                                <button class="btn btn-default btn-block" type="submit"><i class="fa fa-search"></i> {{ "SearchProfileMatches"|get_lang }}</button>
                             </form>
-                            <p class="description">{{ 'IsThisWhatYouWereLookingFor'|get_lang }}</p>
+                            <p class="text">{{ 'IsThisWhatYouWereLookingFor'|get_lang }}</p>
                             <form id="save_profile_form_button" class="form-search">
-                                <input class="btn btn-default btn-block" type="submit" value="{{ "SaveThisSearch"|get_lang }}">
+                                <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-->
@@ -533,7 +536,7 @@ $(document).ready(function() {
                     </div>
                 </div>
             </div>
-                <div class="panel panel-default">
+                <div class="panel panel-primary">
                     <div class="panel-heading">
                         <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                             {{ 'DisplayOptions' | get_lang }}
@@ -541,7 +544,7 @@ $(document).ready(function() {
                     </div>
                     <div id="collapseThree" class="panel-collapse collapse">
                         <div class="panel-body">
-                            <p>{{ 'ChooseABackgroundColor' | get_lang }}</p>
+                            <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>
@@ -552,7 +555,7 @@ $(document).ready(function() {
                         </div>
                     </div>
                 </div>
-                <div class="panel panel-default">
+                <div class="panel panel-primary">
                     <div class="panel-heading">
                         <a data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
                             {{ "Legend"|get_lang }}
@@ -560,8 +563,8 @@ $(document).ready(function() {
                     </div>
                     <div id="collapseFour" class="panel-collapse collapse">
                         <div class="panel-body">
-                            <p><span class="label-warning">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsYouCanLearn"|get_lang }}</p>
-                            <p><span class="label-important">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsSearchedFor"|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>
                         </div>
                     </div>
                 </div>

+ 14 - 38
main/template/default/skill/skill_wheel_student.tpl

@@ -262,12 +262,12 @@ $(document).ready(function() {
 });
 
 </script>
-<div id="page-back">
+<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">{{ "ReturnToCourseList"|get_lang }}</a>
+                    <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">
@@ -281,45 +281,21 @@ $(document).ready(function() {
                         {% if mySkills is not empty %}
                             {%for skill in mySkills %}
                                 {% if skill.iconThumb is empty %}
-                                    <img src="{{ 'award_red.png' | icon(22) }}" alt="{{ skill.name }}" title="{{ skill.name }}">
+                                    <img src="{{ 'badges.png' | icon(32) }}" alt="{{ skill.name }}" title="{{ skill.name }}">
                                 {% else %}
                                     <img src="{{ _p.web_data }}{{ skill.iconThumb }}" alt="{{ skill.name }}" title="{{ skill.name }}">
                                 {% endif %}
                             {% endfor %}
                         {% endif %}
                         {% for i in 1..(9 - ranking) %}
-                            <img src="{{ 'award_red_na.png' | icon(22) }}">
+                            <img src="{{ 'badges-default.png' | icon(32) }}">
                         {% endfor %}
                     </div>
                 </div>
 
                 <!-- ACCORDION -->
                 <div class="accordion" id="accordion2">
-                    {% if mySkills is not empty %}
-                        <div class="panel panel-default">
-                            <div class="accordion-heading">
-                                <a   data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
-                                    {{ 'MySkills'|get_lang }}
-                                </a>
-                            </div>
-                            <div id="collapseOne" class="panel-collapse collapse">
-                                <div class="panel-body">
-                                    <!-- MY SKILLS -->
-                                    <div id="my_skills" class="skill-items">
-                                        <ul class="skill-winner">
-                                            {%for skill in mySkills %}
-                                                <li>
-                                                    <a class="" rel="{{ skill.id}}" href="#">{{ skill.name }}</a>
-                                                </li>
-                                            {% endfor %}
-                                        </ul>
-                                    </div>
-                                    <!-- MY SKILLS -->
-                                </div>
-                            </div>
-                        </div>
-                    {% endif %}
-                    <div class="panel panel-default">
+                    <div class="panel panel-primary">
                         <div class="panel-heading">
                             <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                                 {{ 'GetNewSkills' | get_lang }}
@@ -329,11 +305,11 @@ $(document).ready(function() {
                             <div class="panel-body">
                                 <!-- SEARCH -->
                                 <div class="search-skill">
-                                    <p>{{ 'EnterTheSkillNameToSearch' | get_lang }}</p>
+                                    <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-default btn-block btn-large btn-danger load_root" rel="0" href="#">{{ "ViewSkillsWheel"|get_lang }}</a>
+                                            <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>
@@ -342,14 +318,14 @@ $(document).ready(function() {
                                 <!-- END SEARCH -->
                                 <!-- INFO SKILL -->
                                 <div class="section-info-skill">
-                                    <h4 class="title-skill">{{ 'SkillInfo'|get_lang }}</h4>
+                                    <p class="text">{{ 'SkillInfo'|get_lang }}</p>
                                     <div id="skill_info"></div>
                                 </div>
                                 <!-- END INFO SKILL -->
                             </div>
                         </div>
                     </div>
-                    <div class="panel panel-default">
+                    <div class="panel panel-primary">
                         <div class="panel-heading">
                             <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                                 {{ 'DisplayOptions' | get_lang }}
@@ -357,7 +333,7 @@ $(document).ready(function() {
                         </div>
                         <div id="collapseThree" class="panel-collapse collapse">
                             <div class="panel-body">
-                                <p>{{ 'ChooseABackgroundColor' | get_lang }}</p>
+                                <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>
@@ -368,7 +344,7 @@ $(document).ready(function() {
                             </div>
                         </div>
                     </div>
-                    <div class="panel panel-default">
+                    <div class="panel panel-primary">
                         <div class="panel-heading">
                             <a   data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
                                 {{ "Legend"|get_lang }}
@@ -376,9 +352,9 @@ $(document).ready(function() {
                         </div>
                         <div id="collapseFour" class="panel-collapse collapse">
                             <div class="panel-body">
-                                <p><span class="label-info">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsYouAcquired"|get_lang }}</p>
-                                <p><span class="label-warning">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsYouCanLearn"|get_lang }}</p>
-                                <p><span class="label-important">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsSearchedFor"|get_lang }}</p>
+                                <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>
                             </div>
                         </div>
                     </div>