LP: Fix navigation toolbar titles + UI see BT#18048

chamilo · Nov 17, 2020 · ee89874 · ee89874
1 parent 3ecaec2
commit ee89874
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 14 deletions.
diff --git a/main/template/default/learnpath/menubar.tpl b/main/template/default/learnpath/menubar.tpl
@@ -3,30 +3,38 @@
         .c-menu-left {
             top: 50% !important;
         }
+        .menu-button a{
+            text-underline: none !important;
+        }
     </style>
 {% endif %}
 <nav id="btn-menu-float" class="c-menu-{{ menu_location }}">
     <div class="circle {{ show_toolbar_by_default == 1 ? 'open' : '' }}">
         {% if show_left_column == 1 %}
-            <a href="#" title = "{{ 'Expand'|get_lang }}" id="lp-view-expand-toggle"
-               class="icon-toolbar expand" role="button">
-                {% if lp_mode == 'embedframe' %}
-                    <span class="fa fa-compress" aria-hidden="true"></span>
-                    <span class="sr-only">{{ 'Expand'|get_lang }}</span>
-                {% else %}
-                    <span class="fa fa-expand" aria-hidden="true"></span>
-                    <span class="sr-only">{{ 'Expand'|get_lang }}</span>
-                {% endif %}
+            {% set label = "Collapse" | get_lang %}
+            {% set icon_expand = "fa-compress" %}
+            {% if lp_mode == 'embedframe' %}
+                {% set label = "Expand" | get_lang %}
+                {% set icon_expand = "fa-collapse" %}
+            {% endif %}
+            <a href="#"
+               id="lp-view-expand-toggle"
+               class="icon-toolbar expand"
+               role="button"
+               title="{{ label }}"
+            >
+                <span class="fa {{ icon_expand }}" aria-hidden="true"></span>
+                <span class="sr-only"></span>
             </a>
         {% endif %}
         <a id="home-course"
-           title = "{{ 'Home'|get_lang }}"
+           title="{{ 'Home'|get_lang }}"
            href="{{ button_home_url }}"
            class="icon-toolbar" target="_self"
            onclick="javascript: window.parent.API.save_asset();">
             <em class="fa fa-home"></em> <span class="hidden-xs hidden-sm"></span>
         </a>
         {{ navigation_bar }}
     </div>
-    <a class="menu-button fa fa-bars icons" href="#"></a>
+    <a title="{{ 'Options'|get_lang }}" class="menu-button fa fa-bars icons" href="#"></a>
 </nav>
diff --git a/main/template/default/learnpath/view.tpl b/main/template/default/learnpath/view.tpl
@@ -211,9 +211,13 @@
 </div>
 
 <script>
-    document.querySelector('.menu-button').onclick = function(e) {
-        e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
-    }
+    // document.querySelector('.menu-button').onclick = function(e) {
+    //     e.preventDefault();
+    //     document.querySelector('.circle').classList.toggle('open', function() {
+    //         console.log('topo');
+    //     });
+    //     $('.menu-button').css('background', '#00829C');
+    // }
     var LPViewUtils = {
         setHeightLPToc: function () {
             var scormInfoHeight = $('#scorm-info').outerHeight(true);
@@ -224,6 +228,16 @@
     };
 
     $(function() {
+        $('.menu-button').on('click', function() {
+            $('.circle').toggleClass('open');
+            if ($('.circle').hasClass('open')) {
+                $('.menu-button').css('background', '#00829C');
+                $('.menu-button').css('color', '#fff');
+            } else {
+                $('.menu-button').css('background', '#fff');
+                $('.menu-button').css('color', '#000');
+            }
+        });
         if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
             // Fix an issue where you cannot scroll below first screen in
             // learning paths on Apple devices