fix tabs plugins - refs #2681

assets/css/base.css

@@ -2667,17 +2667,6 @@ input.liteoption {
     border: 1px solid #E1E1E0;
 }
 
-.row_selected {
-    border-color: #478ced #1f6fe2 #1f6fe2;
-    background-color: #FFFFCC;
-    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFCC), to(#FFFFCC));
-    background-image: -webkit-linear-gradient(top, #FFFFCC, #FFFFCC);
-    background-image: -moz-linear-gradient(top, #FFFFCC, #FFFFCC);
-    background-image: -ms-linear-gradient(top, #FFFFCC, #FFFFCC);
-    background-image: -o-linear-gradient(top, #FFFFCC, #FFFFCC);
-    background-image: linear-gradient(top, #FFFFCC, #FFFFCC);
-    box-shadow: 0 1px 0 transparent;
-}
 
 .data_table_exercise_result, .data_table_exercise_result_left {
     border-collapse: collapse;
@@ -5601,29 +5590,6 @@ div#chat-remote-video video {
     background: #EEEEEE;
 }
 
-.ui-tabs .ui-widget-header {
-    background: none;
-    border: none;
-    border-radius: 0;
-    border-bottom-color: #dedede;
-}
-
-.ui-tabs.ui-widget-content {
-    border: none;
-}
-
-.ui-tabs .ui-state-default, .ui-tabs .ui-widget-content .ui-state-default, .ui-tabs .ui-widget-header .ui-state-default {
-    background: #fff;
-}
-
-.ui-tabs .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
-    border-color: #dedede;
-}
-
-.ui-tabs .ui-widget-content a.btn-success {
-    color: #fff;
-}
-
 .ui-priority-secondary,
 .ui-widget-content .ui-priority-secondary,
 .ui-widget-header .ui-priority-secondary {

assets/css/scss/_base.scss

@@ -1086,4 +1086,8 @@ footer {
       margin-bottom: 10px;
     }
   }
+}
+/*** PLUGINS ***/
+.row_selected {
+  background-color: #FFFFCC;
 }

assets/js/app.js

@@ -253,7 +253,7 @@ $(function() {
     $('.tab_wrapper .nav a').on('click', function (e) {
         e.preventDefault()
         $(this).tab('show')
-    })
+    });
 
     // Fixes bug when loading links inside a tab.
     $('.tab_wrapper .tab-pane a').unbind();

main/admin/settings.php

@@ -430,30 +430,28 @@ if (!empty($_GET['category'])) {
                     echo Display::return_message(get_lang('DashboardPluginsUpdatedSuccessfully'), 'confirmation');
                 }
             }
-            echo '<script>
-                $(function(){
-                    $("#tabs").tabs();
-                });
-                </script>';
-            echo '<div id="tabs">';
-            echo '<ul>';
-            echo '<li><a href="#tabs-1">'.get_lang('Plugins').'</a></li>';
-            echo '<li><a href="#tabs-2">'.get_lang('DashboardPlugins').'</a></li>';
-            echo '<li><a href="#tabs-3">'.get_lang('ConfigureExtensions').'</a></li>';
+
+            echo '<div class="tab_wrapper">';
+            echo '<ul class="nav nav-tabs" id="tabs" role="tablist">';
+            echo '<li class="nav-item"><a id="plugin-tab-1" class="nav-link active" href="#tab1" aria-controls="tab1" aria-selected="true">'.get_lang('Plugins').'</a></li>';
+            echo '<li class="nav-item"><a id="plugin-tab-2" class="nav-link" href="#tab2" aria-controls="tab2" aria-selected="false">'.get_lang('DashboardPlugins').'</a></li>';
+            echo '<li class="nav-item"><a id="plugin-tab-3" class="nav-link" href="#tab3" aria-controls="tab3" aria-selected="false">'.get_lang('ConfigureExtensions').'</a></li>';
             echo '</ul>';
 
-            echo '<div id="tabs-1">';
+            echo '<div class="tab-content" id="tabs-content">';
+            echo '<div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="plugin-tab-1">';
             handlePlugins();
             echo '</div>';
 
-            echo '<div id="tabs-2">';
+            echo '<div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="plugin-tab-2">';
             DashboardManager::handle_dashboard_plugins();
             echo '</div>';
 
-            echo '<div id="tabs-3">';
+            echo '<div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="plugin-tab-3">';
             handleExtensions();
             echo '</div>';
             echo '</div>';
+            echo '</div>';
             break;
         case 'Stylesheets':
             // Displaying the extensions: Stylesheets.