Move dashboard svgs to the root directory and update the dashboard navbar

This commit is contained in:
Kevin MacMartin 2018-04-16 12:24:28 -04:00
parent 664ba48e68
commit 1be473a657
22 changed files with 137 additions and 142 deletions

View file

Before

Width:  |  Height:  |  Size: 759 B

After

Width:  |  Height:  |  Size: 759 B

View file

Before

Width:  |  Height:  |  Size: 758 B

After

Width:  |  Height:  |  Size: 758 B

View file

Before

Width:  |  Height:  |  Size: 620 B

After

Width:  |  Height:  |  Size: 620 B

View file

Before

Width:  |  Height:  |  Size: 240 B

After

Width:  |  Height:  |  Size: 240 B

View file

Before

Width:  |  Height:  |  Size: 416 B

After

Width:  |  Height:  |  Size: 416 B

View file

Before

Width:  |  Height:  |  Size: 702 B

After

Width:  |  Height:  |  Size: 702 B

View file

Before

Width:  |  Height:  |  Size: 583 B

After

Width:  |  Height:  |  Size: 583 B

View file

Before

Width:  |  Height:  |  Size: 450 B

After

Width:  |  Height:  |  Size: 450 B

View file

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

Before

Width:  |  Height:  |  Size: 652 B

After

Width:  |  Height:  |  Size: 652 B

View file

Before

Width:  |  Height:  |  Size: 194 B

After

Width:  |  Height:  |  Size: 194 B

View file

Before

Width:  |  Height:  |  Size: 491 B

After

Width:  |  Height:  |  Size: 491 B

View file

Before

Width:  |  Height:  |  Size: 829 B

After

Width:  |  Height:  |  Size: 829 B

View file

Before

Width:  |  Height:  |  Size: 451 B

After

Width:  |  Height:  |  Size: 451 B

View file

Before

Width:  |  Height:  |  Size: 651 B

After

Width:  |  Height:  |  Size: 651 B

View file

Before

Width:  |  Height:  |  Size: 336 B

After

Width:  |  Height:  |  Size: 336 B

View file

Before

Width:  |  Height:  |  Size: 823 B

After

Width:  |  Height:  |  Size: 823 B

View file

Before

Width:  |  Height:  |  Size: 283 B

After

Width:  |  Height:  |  Size: 283 B

View file

Before

Width:  |  Height:  |  Size: 619 B

After

Width:  |  Height:  |  Size: 619 B

View file

@ -18,9 +18,6 @@ $c-dashboard-light: #f1f1f1;
$c-dashboard-edit: #87823e;
$c-dashboard-delete: #87483e;
// Sizes
$navbar-height: 50px;
//
// Main Dashboard Styles
//
@ -37,21 +34,23 @@ body {
}
.navbar {
margin-bottom: $grid-gutter-width;
border: 0;
background-color: $c-dashboard-dark;
@include media-breakpoint-down(md) {
padding-right: 8px;
padding-left: 8px;
}
@include media-breakpoint-down(sm) {
margin-bottom: 0px;
}
&-header {
height: $navbar-height;
}
&-brand {
@include font-sans-bold;
overflow: hidden;
max-width: calc(100vw - 60px);
font-weight: bold;
white-space: nowrap;
@include media-breakpoint-down(sm) {
@ -59,65 +58,37 @@ body {
}
}
#spark-navbar-collapse {
&-toggler {
position: absolute;
top: 3px;
right: 0px;
border: 0;
box-shadow: none;
.dropdown {
.dropdown-toggle .caret {
margin-left: 4px;
@include media-breakpoint-up(md) {
top: 10px;
}
&.open .dropdown-toggle {
background-color: darken($c-dashboard-dark, 5%);
color: $c-dashboard-light;
}
.dropdown-menu {
top: calc(100% - 1px);
right: -1px;
background-color: $c-dashboard-dark;
padding: 0px;
border-top-right-radius: 0;
border-top-left-radius: 0;
> li > a:hover, > li > a:focus {
background-color: transparent;
@include media-breakpoint-up(lg) {
top: 45px;
}
> li > a {
&, &:hover, &:focus {
color: #fff;
}
}
}
}
@include media-breakpoint-down(md) {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.navbar-brand, .navbar-default .navbar-nav > li > a, .navbar-nav > li > a {
&, &:hover, &:focus {
color: $c-dashboard-light;
.dropdown-item {
@include media-breakpoint-down(md) {
padding-right: 8px;
padding-left: 8px;
}
}
.navbar-toggle {
position: absolute;
top: 6px;
right: 8px;
margin: 0px;
border: 0;
&, &:hover, &:focus {
background-color: transparent;
}
.icon-bar {
width: 27px;
height: 4px;
background-color: $c-dashboard-light;
transition: background-color 100ms;
}
&:hover .icon-bar {
background-color: darken($c-dashboard-dark, 15%);
}
}
}
@ -281,8 +252,18 @@ body {
color: $c-text-light;
font-size: 14px;
transition: background-color 100ms;
&:hover { background-color: darken($c-dashboard-dark, 5%); }
&:focus { background-color: lighten($c-dashboard-dark, 5%); }
&:hover {
background-color: darken($c-dashboard-dark, 5%);
}
&:focus {
background-color: lighten($c-dashboard-dark, 5%);
}
&, &:hover, &:focus {
text-decoration: none;
}
&.vertical-margin {
margin-top: 3px;
@ -296,27 +277,46 @@ body {
&.btn-warning {
border-color: darken($c-dashboard-edit, 10%);
background-color: $c-dashboard-edit;
&:hover { background-color: darken($c-dashboard-edit, 5%); }
&:focus { background-color: lighten($c-dashboard-edit, 5%); }
&:hover {
background-color: darken($c-dashboard-edit, 5%);
}
&:focus {
background-color: lighten($c-dashboard-edit, 5%);
}
}
&.btn-danger {
border-color: darken($c-dashboard-delete, 10%);
background-color: $c-dashboard-delete;
&:hover { background-color: darken($c-dashboard-delete, 5%); }
&:focus { background-color: lighten($c-dashboard-delete, 5%); }
&:hover {
background-color: darken($c-dashboard-delete, 5%);
}
&:focus {
background-color: lighten($c-dashboard-delete, 5%);
}
}
&.btn-secondary {
border-color: darken($c-dashboard-light, 10%);
background-color: $c-dashboard-light;
color: $c-text;
&:hover { background-color: darken($c-dashboard-light, 5%); }
&:focus { background-color: lighten($c-dashboard-light, 5%); }
&:hover {
background-color: darken($c-dashboard-light, 5%);
}
&.btn-link { color: $c-dashboard-light; }
&, &:hover, &:focus { text-decoration: none; }
&:focus {
background-color: lighten($c-dashboard-light, 5%);
}
}
&.btn-link {
color: $c-dashboard-light;
}
}
.view-table-container {
@ -743,82 +743,82 @@ body {
}
&.fa-arrows-alt:after {
background-image: url("/img/dashboard/fa/arrows-alt.svg");
background-image: url("/img/dashboard/arrows-alt.svg");
}
&.fa-bold:after {
background-image: url("/img/dashboard/fa/bold.svg");
background-image: url("/img/dashboard/bold.svg");
}
&.fa-code:after {
background-image: url("/img/dashboard/fa/code.svg");
background-image: url("/img/dashboard/code.svg");
}
&.fa-columns:after {
background-image: url("/img/dashboard/fa/columns.svg");
background-image: url("/img/dashboard/columns.svg");
}
&.fa-eraser:after {
background-image: url("/img/dashboard/fa/eraser.svg");
background-image: url("/img/dashboard/eraser.svg");
}
&.fa-eye:after {
background-image: url("/img/dashboard/fa/eye.svg");
background-image: url("/img/dashboard/eye.svg");
}
&.fa-header:after {
background-image: url("/img/dashboard/fa/header.svg");
background-image: url("/img/dashboard/header.svg");
}
&.fa-italic:after {
background-image: url("/img/dashboard/fa/italic.svg");
background-image: url("/img/dashboard/italic.svg");
}
&.fa-link:after {
background-image: url("/img/dashboard/fa/link.svg");
background-image: url("/img/dashboard/link.svg");
}
&.fa-list-ol:after {
background-image: url("/img/dashboard/fa/list-ol.svg");
background-image: url("/img/dashboard/list-ol.svg");
}
&.fa-list-ul:after {
background-image: url("/img/dashboard/fa/list-ul.svg");
background-image: url("/img/dashboard/list-ul.svg");
}
&.fa-minus:after {
background-image: url("/img/dashboard/fa/minus.svg");
background-image: url("/img/dashboard/minus.svg");
}
&.fa-picture-o:after {
background-image: url("/img/dashboard/fa/picture-o.svg");
background-image: url("/img/dashboard/picture-o.svg");
}
&.fa-question-circle:after {
background-image: url("/img/dashboard/fa/question-circle.svg");
background-image: url("/img/dashboard/question-circle.svg");
}
&.fa-quote-left:after {
background-image: url("/img/dashboard/fa/quote-left.svg");
background-image: url("/img/dashboard/quote-left.svg");
}
&.fa-repeat:after {
background-image: url("/img/dashboard/fa/repeat.svg");
background-image: url("/img/dashboard/repeat.svg");
}
&.fa-star:after {
background-image: url("/img/dashboard/fa/star.svg");
background-image: url("/img/dashboard/star.svg");
}
&.fa-strikethrough:after {
background-image: url("/img/dashboard/fa/strikethrough.svg");
background-image: url("/img/dashboard/strikethrough.svg");
}
&.fa-table:after {
background-image: url("/img/dashboard/fa/table.svg");
background-image: url("/img/dashboard/table.svg");
}
&.fa-undo:after {
background-image: url("/img/dashboard/fa/undo.svg");
background-image: url("/img/dashboard/undo.svg");
}
}

View file

@ -1,60 +1,55 @@
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#spark-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<nav class="navbar navbar-expand-lg navbar-dark">
@set('current_page', preg_replace([ '/^.*\/dashboard\/?/', '/\/.*/' ], [ '', '' ], Request::url()))
<a class="navbar-brand" href="{{ url('/dashboard') }}">
{{ env('APP_NAME') }} Dashboard
</a>
</div>
<div id="spark-navbar-collapse" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dashboard-navbar" aria-controls="dashboard-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="dashboard-navbar" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
@if (Auth::guest())
<li><a href="{{ url('/login') }}">Login</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url('/login') }}">Login</a></li>
@if(env('REGISTRATION', false))
<li><a href="{{ url('/register') }}">Register</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url('/register') }}">Register</a></li>
@endif
@else
@foreach(App\Models\DashboardMenu::$menu as $menu_item)
@if(is_array($menu_item[1]))
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<li class="nav-item dropdown">
<a id="menu-dropdown" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ $menu_item[0] }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="menu-dropdown">
@foreach($menu_item[1] as $submenu_item)
<li><a href="{{ url('/dashboard/' . $submenu_item[1]) }}">{{ $submenu_item[0] }}</a></li>
<a class="dropdown-item" href="{{ url('/dashboard/' . $submenu_item[1]) }}">{{ $submenu_item[0] }}</a>
@endforeach
</ul>
</div>
</li>
@else
<li class="nav-item">
<a href="{{ url('/dashboard/' . $menu_item[1]) }}">
<a class="nav-link {{ $current_page == $menu_item[1] ? 'active' : '' }}" href="{{ url('/dashboard/' . $menu_item[1]) }}">
{{ $menu_item[0] }}
</a>
</li>
@endif
@endforeach
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<li class="nav-item dropdown">
<a id="user-dropdown" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{{ url('/logout') }}">Logout</a></li>
</ul>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="user-dropdown">
<a class="dropdown-item" href="{{ url('/logout') }}">Logout</a>
</div>
</li>
@endif
</ul>
</div>
</div>
</nav>