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-edit: #87823e;
$c-dashboard-delete: #87483e; $c-dashboard-delete: #87483e;
// Sizes
$navbar-height: 50px;
// //
// Main Dashboard Styles // Main Dashboard Styles
// //
@ -37,21 +34,23 @@ body {
} }
.navbar { .navbar {
margin-bottom: $grid-gutter-width;
border: 0; border: 0;
background-color: $c-dashboard-dark; background-color: $c-dashboard-dark;
@include media-breakpoint-down(md) {
padding-right: 8px;
padding-left: 8px;
}
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
margin-bottom: 0px; margin-bottom: 0px;
} }
&-header {
height: $navbar-height;
}
&-brand { &-brand {
@include font-sans-bold;
overflow: hidden; overflow: hidden;
max-width: calc(100vw - 60px); max-width: calc(100vw - 60px);
font-weight: bold;
white-space: nowrap; white-space: nowrap;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
@ -59,65 +58,37 @@ body {
} }
} }
#spark-navbar-collapse { &-toggler {
position: absolute;
top: 3px;
right: 0px;
border: 0; border: 0;
box-shadow: none;
.dropdown { @include media-breakpoint-up(md) {
.dropdown-toggle .caret { top: 10px;
margin-left: 4px;
} }
&.open .dropdown-toggle {
background-color: darken($c-dashboard-dark, 5%);
color: $c-dashboard-light;
} }
.dropdown-menu { .dropdown-menu {
top: calc(100% - 1px); padding: 0px;
right: -1px; border-top-right-radius: 0;
background-color: $c-dashboard-dark; border-top-left-radius: 0;
> li > a:hover, > li > a:focus { @include media-breakpoint-up(lg) {
background-color: transparent; top: 45px;
} }
> li > a { @include media-breakpoint-down(md) {
&, &:hover, &:focus { border-bottom-right-radius: 0;
color: #fff; border-bottom-left-radius: 0;
}
}
}
}
} }
.navbar-brand, .navbar-default .navbar-nav > li > a, .navbar-nav > li > a { .dropdown-item {
&, &:hover, &:focus { @include media-breakpoint-down(md) {
color: $c-dashboard-light; 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; color: $c-text-light;
font-size: 14px; font-size: 14px;
transition: background-color 100ms; 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 { &.vertical-margin {
margin-top: 3px; margin-top: 3px;
@ -296,27 +277,46 @@ body {
&.btn-warning { &.btn-warning {
border-color: darken($c-dashboard-edit, 10%); border-color: darken($c-dashboard-edit, 10%);
background-color: $c-dashboard-edit; 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 { &.btn-danger {
border-color: darken($c-dashboard-delete, 10%); border-color: darken($c-dashboard-delete, 10%);
background-color: $c-dashboard-delete; 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 { &.btn-secondary {
border-color: darken($c-dashboard-light, 10%); border-color: darken($c-dashboard-light, 10%);
background-color: $c-dashboard-light; background-color: $c-dashboard-light;
color: $c-text; 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; } &:focus {
&, &:hover, &:focus { text-decoration: none; } background-color: lighten($c-dashboard-light, 5%);
}
}
&.btn-link {
color: $c-dashboard-light;
}
} }
.view-table-container { .view-table-container {
@ -743,82 +743,82 @@ body {
} }
&.fa-arrows-alt:after { &.fa-arrows-alt:after {
background-image: url("/img/dashboard/fa/arrows-alt.svg"); background-image: url("/img/dashboard/arrows-alt.svg");
} }
&.fa-bold:after { &.fa-bold:after {
background-image: url("/img/dashboard/fa/bold.svg"); background-image: url("/img/dashboard/bold.svg");
} }
&.fa-code:after { &.fa-code:after {
background-image: url("/img/dashboard/fa/code.svg"); background-image: url("/img/dashboard/code.svg");
} }
&.fa-columns:after { &.fa-columns:after {
background-image: url("/img/dashboard/fa/columns.svg"); background-image: url("/img/dashboard/columns.svg");
} }
&.fa-eraser:after { &.fa-eraser:after {
background-image: url("/img/dashboard/fa/eraser.svg"); background-image: url("/img/dashboard/eraser.svg");
} }
&.fa-eye:after { &.fa-eye:after {
background-image: url("/img/dashboard/fa/eye.svg"); background-image: url("/img/dashboard/eye.svg");
} }
&.fa-header:after { &.fa-header:after {
background-image: url("/img/dashboard/fa/header.svg"); background-image: url("/img/dashboard/header.svg");
} }
&.fa-italic:after { &.fa-italic:after {
background-image: url("/img/dashboard/fa/italic.svg"); background-image: url("/img/dashboard/italic.svg");
} }
&.fa-link:after { &.fa-link:after {
background-image: url("/img/dashboard/fa/link.svg"); background-image: url("/img/dashboard/link.svg");
} }
&.fa-list-ol:after { &.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 { &.fa-list-ul:after {
background-image: url("/img/dashboard/fa/list-ul.svg"); background-image: url("/img/dashboard/list-ul.svg");
} }
&.fa-minus:after { &.fa-minus:after {
background-image: url("/img/dashboard/fa/minus.svg"); background-image: url("/img/dashboard/minus.svg");
} }
&.fa-picture-o:after { &.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 { &.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 { &.fa-quote-left:after {
background-image: url("/img/dashboard/fa/quote-left.svg"); background-image: url("/img/dashboard/quote-left.svg");
} }
&.fa-repeat:after { &.fa-repeat:after {
background-image: url("/img/dashboard/fa/repeat.svg"); background-image: url("/img/dashboard/repeat.svg");
} }
&.fa-star:after { &.fa-star:after {
background-image: url("/img/dashboard/fa/star.svg"); background-image: url("/img/dashboard/star.svg");
} }
&.fa-strikethrough:after { &.fa-strikethrough:after {
background-image: url("/img/dashboard/fa/strikethrough.svg"); background-image: url("/img/dashboard/strikethrough.svg");
} }
&.fa-table:after { &.fa-table:after {
background-image: url("/img/dashboard/fa/table.svg"); background-image: url("/img/dashboard/table.svg");
} }
&.fa-undo:after { &.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"> <nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid"> @set('current_page', preg_replace([ '/^.*\/dashboard\/?/', '/\/.*/' ], [ '', '' ], Request::url()))
<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>
<a class="navbar-brand" href="{{ url('/dashboard') }}"> <a class="navbar-brand" href="{{ url('/dashboard') }}">
{{ env('APP_NAME') }} Dashboard {{ env('APP_NAME') }} Dashboard
</a> </a>
</div>
<div id="spark-navbar-collapse" class="navbar-collapse collapse"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dashboard-navbar" aria-controls="dashboard-navbar" aria-expanded="false" aria-label="Toggle navigation">
<ul class="nav navbar-nav navbar-right"> <span class="navbar-toggler-icon"></span>
</button>
<div id="dashboard-navbar" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
@if (Auth::guest()) @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)) @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 @endif
@else @else
@foreach(App\Models\DashboardMenu::$menu as $menu_item) @foreach(App\Models\DashboardMenu::$menu as $menu_item)
@if(is_array($menu_item[1])) @if(is_array($menu_item[1]))
<li class="dropdown"> <li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <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> {{ $menu_item[0] }} <span class="caret"></span>
</a> </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) @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 @endforeach
</ul> </div>
</li> </li>
@else @else
<li class="nav-item"> <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] }} {{ $menu_item[0] }}
</a> </a>
</li> </li>
@endif @endif
@endforeach @endforeach
<li class="dropdown"> <li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <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> {{ Auth::user()->name }} <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu" role="menu"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="user-dropdown">
<li><a href="{{ url('/logout') }}">Logout</a></li> <a class="dropdown-item" href="{{ url('/logout') }}">Logout</a>
</ul> </div>
</li> </li>
@endif @endif
</ul> </ul>
</div> </div>
</div>
</nav> </nav>