New navigation menu for mobile - refs #2755

app/Resources/public/css/scorm.css

@@ -509,15 +509,77 @@ See https://support.chamilo.org/issues/6976
     text-align: center;
 }
 
-.navegation-bar {
+/** MENU FLOAT **/
+
+.circular-menu {
+    height: auto;
+    left: 0;
+    top: 50px;
+    position: fixed;
+    z-index: 5;
+}
+
+.circle {
+    width: 100%;
+    height: 40px;
+    opacity: 0;
+    margin-top: 0;
+    padding-top: 50px;
+
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    -transform: scale(0);
+
+    -webkit-transition: all 0.4s ease-out;
+    -moz-transition: all 0.4s ease-out;
+    transition: all 0.4s ease-out;
+}
+
+.open.circle {
+    opacity: 1;
+
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -transform: scale(1);
+}
+
+.circle a {
+    text-decoration: none;
+    color: #fff;
     display: block;
-    padding: 0;
-    right: 5px;
-    top: 5px;
+    height: 40px;
+    width: 40px;
+    line-height: 40px;
+    text-align: center;
+    border-radius: 100%;
+    margin-left: 5px;
+}
+
+.circle a:hover {
+    color: #eef;
+}
+
+.menu-button {
     position: absolute;
-    z-index: 9999;
+    top: 5px;
+    left: 5px;
+    text-align: center;
+    border-radius: 50%;
+    display: block;
+    height: 40px;
+    width: 40px;
+    line-height: 18px;
+    padding: 10px;
+    background: #ffffff;
+    font-size: 18px;
+    border: 2px solid #8dcbf3;
+}
+
+.menu-button:hover {
+    background-color: #ffffff;
 }
 
+
 /* LP VIEW COLLAPSE */
 .scorm-collapse .panel:hover {
     box-shadow: 0 3px 1px 0 rgba(20, 23, 28, .1);
@@ -608,7 +670,12 @@ See https://support.chamilo.org/issues/6976
 .scorm_item_normal.scorm_highlight a {
     color: #FFFFFF;
 }
-
+.tab-none-forum{
+    top: 0 !important;
+}
+.circular-menu.none-forum{
+    top: 0 !important;
+}
 /* END LP VIEW COLLAPSE */
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {

main/lp/scorm_api.php

@@ -338,10 +338,11 @@ function LMSInitialize() {
         logit_scorm('LMSInitialize() with params: '+log);
 
         if(olms.lms_item_type == 'sco'){
-            $("#tab-iframe").removeClass("tab-content");
+            $("#tab-iframe").removeClass();
             $("#tab-iframe").addClass("tab-content iframe_"+olms.lms_item_type);
         }
-    if (olms.lms_lp_type == 1 || olms.lms_item_type == 'asset' || olms.lms_item_type == 'document') {
+
+        if (olms.lms_lp_type == 1 || olms.lms_item_type == 'asset' || olms.lms_item_type == 'document') {
             xajax_start_timer();
         }
 
@@ -1757,11 +1758,15 @@ var loadForumThread = function(lpId, lpItemId) {
         var tabForumLink = $('.lp-view-tabs a[href="#lp-view-forum"]'),
             tabForum = tabForumLink.parent();
             $("#navTabs").show();
+            $("#tab-iframe").removeClass("tab-none-forum");
+            $("#btn-menu-float").removeClass("none-forum");
 
         if (forumThreadData.error) {
             tabForumLink.removeAttr('data-toggle');
             tabForum.addClass('disabled');
             $("#navTabs").hide();
+            $("#tab-iframe").addClass("tab-none-forum");
+            $("#btn-menu-float").addClass("none-forum");
             $('#lp-view-forum').html('');
 
             return;

main/template/default/learnpath/view.tpl

@@ -1,4 +1,4 @@
-<div id="learning_path_main" class="{{ is_allowed_to_edit ? 'lp-view-include-breadcrumb' }} {{ lp_mode == 'embedframe' ? 'lp-view-collapsed' }}">
+<div id="learning_path_main" class="{{ is_allowed_to_edit ? 'lp-view-include-breadcrumb' }} {{ lp_mode == 'embedframe' ? 'lp-view-collapsed' : 'lp-view-collapsed' }}">
     {% if show_left_column == 1 %}
     <div id="learning_path_left_zone" class="sidebar-scorm">
         <div class="lp-view-zone-container">
@@ -152,28 +152,6 @@
     {# end left zone #}
     {% endif %}
 
-    <div id="lp_navigation_elem" class="navegation-bar">
-        {% 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 %}
-        </a>
-        {% endif %}
-
-        <a id="home-course"
-            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>
 
     {# Right zone #}
     <div id="learning_path_right_zone" class="{{ show_left_column == 1 ? 'content-scorm' : 'no-right-col' }}">
@@ -196,6 +174,38 @@
                     </ul>
                 </div>
 
+                <nav id="btn-menu-float" class="circular-menu">
+
+                    <div class="circle 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 %}
+                            </a>
+                        {% endif %}
+
+
+                        <a id="home-course"
+                           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>
+
+                </nav>
+
                 <div id="tab-iframe" class="tab-content">
                     <div role="tabpanel" class="tab-pane active" id="lp-view-content">
                         <div id="wrapper-iframe">
@@ -232,6 +242,12 @@
 </div>
 
 <script>
+
+    document.querySelector('.menu-button').onclick = function(e) {
+        e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
+    }
+
+
     var LPViewUtils = {
         setHeightLPToc: function () {
             var scormInfoHeight = $('#scorm-info').outerHeight(true);
@@ -242,6 +258,9 @@
     };
 
     $(document).ready(function () {
+
+
+
         if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
             // Fix an issue where you cannot scroll below first screen in
             // learning paths on Apple devices
@@ -289,11 +308,7 @@
                     $(this).attr('title', '{{ "Collapse" | get_lang }}');
                 }
 
-                if($('#navTabsbar').is(':hidden')){
-                    $('#navTabsbar').show();
-                } else {
-                    $('#navTabsbar').hide();
-                }
+
             });
         {% endif %}