fix toolbar course navigation - refs BT#7683

app/Resources/public/css/base.css

@@ -5694,6 +5694,38 @@ footer{
     box-shadow: 0 1px 3px #C8C8C8;
     border: 1px solid #e6e6e6;
 }
+#toolnav{
+    position: fixed;
+    left: 0;
+    top: 50px;
+    z-index: 2000;
+}
+#toolnavbox ul{
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+#toolnavbox ul li{
+    height: 40px;
+    
+}
+#toolnavbox ul li a {
+	display: inline-block;
+    margin: 0;
+	color:#fff;
+	padding: 7px;
+	text-decoration: none;
+	-webkit-transition:all 500ms ease;
+	-o-transition:all 500ms ease;
+    transition:all 500ms ease;
+    width: 38px
+}
+#toolnavbox ul li a:hover {
+	padding: 5px 10px;
+}
+.btn-tool{
+    margin-bottom: 2px;
+}
 /* CSS NEW TOP ******************************************************************************/
 /* CSS Responsive */
 @media (min-width: 1025px) and (max-width: 1200px) {

main/inc/lib/course_home.lib.php

@@ -1159,27 +1159,31 @@ class CourseHome
         $navigation_items = self::get_navigation_items(true);
         $course_id = api_get_course_id();
 
-        $html = '<div id="toolnav"> <!-- start of #toolnav -->';
+        $html = '<div id="toolnav">'
+                . '<div class="btn-tool">'
+                . '<a class="btn btn-default" href="javascript: void(0);" id="swap_menu_link" onclick="javascript: swap_menu();">'.Display::returnFontAwesomeIcon('bars').'</a></div>';
         if (api_get_setting('show_navigation_menu') == 'icons') {
             $html .= self::show_navigation_tool_shortcuts($orientation = SHORTCUTS_VERTICAL);
         } else {
             $html .= '<div id="toolnavbox">';
-            $html .= '<div id="toolnavlist"><dl>';
+            $html .= '<ul>';
+            $count = 0;
             foreach ($navigation_items as $key => $navigation_item) {
                 //students can't see the course settings option
+                $count++;
                 if (!api_is_allowed_to_edit() && $key == 'course_settings') {
                     continue;
                 }
-                $html .= '<dd>';
+                $html .= '<li>';
                 $url_item = parse_url($navigation_item['link']);
                 $url_current = parse_url($_SERVER['REQUEST_URI']);
 
                 if (strpos($navigation_item['link'], 'chat') !== false &&
                     api_get_course_setting('allow_open_chat_window', $course_id)
                 ) {
-                    $html .= '<a href="javascript: void(0);" onclick="javascript: window.open(\''.$navigation_item['link'].'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+600+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$navigation_item['target'].'"';
+                    $html .= '<a class="btn btn-default" href="javascript: void(0);" onclick="javascript: window.open(\''.$navigation_item['link'].'\',\'window_chat'.$_SESSION['_cid'].'\',config=\'height=\'+600+\', width=\'+825+\', left=2, top=2, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no\')" target="'.$navigation_item['target'].'"';
                 } else {
-                    $html .= '<a href="'.$navigation_item['link'].'" target="_top" ';
+                    $html .= '<a class="btn btn-default" href="'.$navigation_item['link'].'" target="_top" ';
                 }
 
                 if (stristr($url_item['path'], $url_current['path'])) {
@@ -1189,15 +1193,15 @@ class CourseHome
                 }
                 $html .= ' title="'.$navigation_item['name'].'">';
                 if (api_get_setting('show_navigation_menu') != 'text') {
-                    $html .= '<div align="left"><img src="'.api_get_path(WEB_IMG_PATH).$navigation_item['image'].'" alt="'.$navigation_item['name'].'"/></div>';
+                    $html .= '<div class="pull-left">'.Display::return_icon(substr($navigation_item['image'],0,-3)."png", $navigation_item['name'], array('class'=>'tool-img'), ICON_SIZE_SMALL).'</div>';
                 }
                 if (api_get_setting('show_navigation_menu') != 'icons') {
-                    $html .= $navigation_item['name'];
+                    $html .= '<span class="tool-text-'.$count.'">'.$navigation_item['name'].'</span>';
                 }
                 $html .= '</a>';
-                $html .= '</dd>';
+                $html .= '</li>';
             }
-            $html .= '</dl></div></div>';
+            $html .= '</ul></div>';
         }
         $html .= '</div><!-- end "#toolnav" -->';
 

main/template/default/layout/course_navigation.tpl

@@ -13,6 +13,8 @@
                 if (readCookie('menu_state') == 0) {
                     swap_menu();
                 }
+
+              
             });
             function createCookie(name, value, days) {
                 if (days) {
@@ -35,7 +37,7 @@
                 return null;
             }
             function swap_menu() {
-                toolnavlist_el = document.getElementById('toolnav');
+                toolnavlist_el = document.getElementById('toolnavbox');
                 center_el = document.getElementById('center');
                 swap_menu_link_el = document.getElementById('swap_menu_link');
 
@@ -44,18 +46,17 @@
                     if (center_el) {
                         center_el.style.margin = '0 190px 0 0';
                     }
-                    swap_menu_link_el.innerHTML = '{{'Hide'|get_lang}}';
+                    swap_menu_link_el.innerHTML = '<i class="fa fa-bars" aria-hidden="true"></i>';
                     createCookie('menu_state',1,10);
                 } else {
                     toolnavlist_el.style.display = 'none';
                     if (center_el) {
                         center_el.style.margin = '0 0 0 0';
                     }
-                    swap_menu_link_el.innerHTML = '{{'Show'|get_lang}}';
+                    swap_menu_link_el.innerHTML = '<i class="fa fa-bars" aria-hidden="true"></i>';
                     createCookie('menu_state',0,10);
                 }
             }
-            document.write('<div class="col-md-12 pull-right"> <a class="btn btn-default" href="javascript: void(0);" id="swap_menu_link" onclick="javascript: swap_menu();">{{'Hide'|get_lang}}<\/a></div>');
         </script>
     {{ show_course_navigation_menu }}
     {% endif %}