Ensure the dashboard tabs are styles correctly. Fixes #3824

This commit is contained in:
Murtuza Zabuawala 2018-12-20 09:53:35 +00:00 committed by Dave Page
parent cb880678cc
commit ed01dbd0ef
3 changed files with 27 additions and 9 deletions

View File

@ -65,14 +65,17 @@
<div class="dashboard-tab-container">
<!-- Nav tabs -->
<ul class="nav nav-tabs dashboard-tab-panel" role="tablist">
<li role="presentation" class="active dashboard-tab"><a href="#tab_panel_database_activity"
<li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_database_activity"
class="nav-link active"
aria-controls="tab_database_activity"
role="tab" data-toggle="tab">{{ _('Sessions') }}</a>
</li>
<li role="presentation" class="dashboard-tab"><a href="#tab_panel_database_locks"
<li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_database_locks"
class="nav-link"
aria-controls="tab_database_locks" role="tab"
data-toggle="tab">{{ _('Locks') }}</a></li>
<li role="presentation" class="dashboard-tab"><a href="#tab_panel_database_prepared"
<li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_database_prepared"
class="nav-link"
aria-controls="tab_database_prepared" role="tab"
data-toggle="tab">{{ _('Prepared Transactions') }}</a></li>
</ul>

View File

@ -65,17 +65,21 @@
<div class="dashboard-tab-container">
<!-- Nav tabs -->
<ul class="nav nav-tabs dashboard-tab-panel" role="tablist">
<li role="presentation" class="active dashboard-tab"><a href="#tab_panel_server_activity"
<li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_server_activity"
class="nav-link active"
aria-controls="tab_server_activity"
role="tab" data-toggle="tab">{{ _('Sessions') }}</a>
</li>
<li role="presentation" class="dashboard-tab"><a href="#tab_panel_server_locks"
<li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_server_locks"
class="nav-link"
aria-controls="tab_server_locks" role="tab"
data-toggle="tab">{{ _('Locks') }}</a></li>
<li role="presentation" class="dashboard-tab"><a href="#tab_panel_server_prepared"
<li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_server_prepared"
class="nav-link"
aria-controls="tab_server_prepared" role="tab"
data-toggle="tab">{{ _('Prepared Transactions') }}</a></li>
<li role="presentation" class="dashboard-tab"><a href="#tab_panel_server_config"
<li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_server_config"
class="nav-link"
aria-controls="tab_server_config" role="tab"
data-toggle="tab">{{ _('Configuration') }}</a></li>
</ul>

View File

@ -219,8 +219,11 @@ td.switch-cell > div.bootstrap-switch {
}
}
.nav-tabs>.nav-item>.nav-link.active {
/* If Bootstrap tab is already active then don't show pointer cursor */
.nav-tabs > .nav-item > .nav-link.active {
color: $color-fg;
background-color: $color-fg-inverse;
cursor: default;
}
.bootstrap-datetimepicker-widget td, .bootstrap-datetimepicker-widget th {
@ -257,4 +260,12 @@ td.switch-cell > div.bootstrap-switch {
.bootstrap-datetimepicker-widget thead th {
background-color: $color-fg-inverse;
}
}
.nav-tabs {
background-color: $color-gray-lighter;
}
.nav-tabs > .nav-item > .nav-link:hover:not(.active) {
background-color: $color-gray-white;
}