gian/phpmyadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert top menu to Bootstrap's navbar component

Browse Source 
Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
This commit is contained in:
Maurício Meneghini Fauth 2020-01-10 23:16:51 -03:00
parent 1155c29e47
commit ac8ecb7faf
11 changed files with 147 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
templates/top_menu.twig
View File

@ -1,16 +1,22 @@
<div id="topmenucontainer" class="menucontainer">
<i class="scrollindicator scrollindicator--left"><a href="#" class="tab"></a></i>
<div class="navigationbar">
<ul id="topmenu" class="resizable-menu">
{% for tab in tabs %}
<li{{ tab.active ? ' class="active"' }}>
<a href="{{ url(tab.route, url_params|merge(tab.args ?? [])) }}" class="tab{{ tab.active ? 'active' }}">
{{ get_icon(tab.icon, tab.text, false, true, 'TabsMode') }}
</a>
</li>
{% endfor %}
<div class="clearfloat"></div>
</ul>
</div>
<i class="scrollindicator scrollindicator--right"><a href="#" class="tab"></a></i>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-label="
{%- trans 'Toggle navigation' %}" aria-controls="navbarNav" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
{% for tab in tabs %}
<li class="nav-item{{ tab.active ? ' active' }}">
<a class="nav-link text-nowrap" href="{{ url(tab.route, url_params|merge(tab.args ?? [])) }}">
{{ get_icon(tab.icon, tab.text, false, true, 'TabsMode') }}
{% if tab.active %}
<span class="sr-only">{% trans %}(current){% notes %}Current page{% endtrans %}</span>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
</nav>
</div>

6
themes/bootstrap/scss/_bootstrap.scss
View File

@ -10,13 +10,13 @@
@import "../../../node_modules/bootstrap/scss/tables";
@import "../../../node_modules/bootstrap/scss/forms";
@import "../../../node_modules/bootstrap/scss/buttons";
//@import "../../../node_modules/bootstrap/scss/transitions";
@import "../../../node_modules/bootstrap/scss/transitions";
//@import "../../../node_modules/bootstrap/scss/dropdown";
//@import "../../../node_modules/bootstrap/scss/button-group";
//@import "../../../node_modules/bootstrap/scss/input-group";
//@import "../../../node_modules/bootstrap/scss/custom-forms";
//@import "../../../node_modules/bootstrap/scss/nav";
//@import "../../../node_modules/bootstrap/scss/navbar";
@import "../../../node_modules/bootstrap/scss/nav";
@import "../../../node_modules/bootstrap/scss/navbar";
@import "../../../node_modules/bootstrap/scss/card";
@import "../../../node_modules/bootstrap/scss/breadcrumb";
//@import "../../../node_modules/bootstrap/scss/pagination";

24
themes/metro/scss/_navbar.scss Normal file
View File

@ -0,0 +1,24 @@
.navbar {
background-color: $th-background;
padding-#{$left}: 20px;
padding-#{$right}: 20px;
}
.navbar-nav .icon {
margin-#{$right}: 0.5em;
vertical-align: -3px;
}
.navbar-nav .nav-item {
padding: 8px 10px;
&.active {
background: #fff;
}
}
.navbar-nav .nav-link {
text-transform: uppercase;
font-family: $font-family-extra-bold;
font-weight: normal;
}

11
themes/metro/scss/_variables.scss
View File

@ -175,6 +175,17 @@ $btn-border-radius: 0;
$btn-line-height: 1;
$btn-padding-x: 0.5rem;
// Navbar
$navbar-padding-y: 0;
$navbar-padding-x: 0;
$navbar-nav-link-padding-x: 0;
$navbar-nav-link-padding-y: 0;
$navbar-light-color: #666;
$navbar-light-hover-color: #333;
$navbar-light-active-color: #666;
$navbar-light-disabled-color: #666;
// Card
$card-border-width: 0;

1
themes/metro/scss/theme.scss
View File

@ -13,6 +13,7 @@
@import "resizable-menu";
@import "icons";
@import "reboot";
@import "navbar";
@import "card";
@import "breadcrumbs";
@import "alert";

34
themes/original/scss/_navbar.scss Normal file
View File

@ -0,0 +1,34 @@
.navbar-nav {
font-weight: bold;
}
.navbar-nav .icon {
vertical-align: middle;
margin-#{$right}: 0.1em;
}
.navbar-nav .nav-item {
border-bottom: 1pt solid black;
&.active .nav-link {
margin: 0;
background-color: $body-bg;
padding: 2px 4px;
}
}
.navbar-nav .nav-link {
margin: 2px 2px 0;
padding: 2px 2px 0;
background-color: $bg-one;
border-color: $bg-two;
border-style: solid;
border-width: 1pt 1pt 0 1pt;
border-radius: 0.4em 0.4em 0 0;
&:hover {
margin: 0;
background-color: $body-bg;
padding: 2px 4px;
}
}

11
themes/original/scss/_variables.scss
View File

@ -63,6 +63,17 @@ $font-family-monospace: monospace;
$font-size-base: 0.82rem;
// Navbar
$navbar-padding-y: 0;
$navbar-padding-x: 0;
$navbar-nav-link-padding-x: 2px;
$navbar-nav-link-padding-y: 2px;
$navbar-light-color: #00f;
$navbar-light-hover-color: #f00;
$navbar-light-active-color: #00f;
$navbar-light-disabled-color: #00f;
// Card
$card-border-radius: 0;

1
themes/original/scss/theme.scss
View File

@ -12,6 +12,7 @@
@import "../../pmahomme/scss/resizable-menu";
@import "icons";
@import "reboot";
@import "navbar";
@import "card";
@import "breadcrumbs";
@import "alert";

32
themes/pmahomme/scss/_navbar.scss Normal file
View File

@ -0,0 +1,32 @@
.navbar.bg-light {
background: linear-gradient(#fff, #dcdcdc);
}
.navbar-nav {
font-weight: bold;
}
.navbar-nav .icon {
margin-#{$right}: 0.5em;
vertical-align: -3px;
}
.navbar-nav .nav-item {
background: linear-gradient(#fff, #dcdcdc);
border-#{$right}: 1px solid #fff;
border-#{$left}: 1px solid #ccc;
border-bottom: 1px solid #ccc;
&:first-child {
border-#{$left}: 0;
}
&:hover {
background: linear-gradient(#fff, #e5e5e5);
}
&.active {
background: #fff;
border-bottom: 0;
}
}

9
themes/pmahomme/scss/_variables.scss
View File

@ -74,6 +74,15 @@ $secondary: #ddd;
$btn-border-radius: 0.85rem;
$btn-line-height: 1.15;
// Navbar
$navbar-padding-y: 0;
$navbar-padding-x: 0;
$navbar-light-color: #235a81;
$navbar-light-hover-color: #235a81;
$navbar-light-active-color: #235a81;
$navbar-light-disabled-color: #235a81;
// Card
$card-border-color: #999;

1
themes/pmahomme/scss/theme.scss
View File

@ -13,6 +13,7 @@
@import "icons";
@import "reboot";
@import "buttons";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "alert";