Move dashboard svgs to the root directory and update the dashboard navbar
Kevin MacMartin
|
Before Width: | Height: | Size: 759 B After Width: | Height: | Size: 759 B |
|
Before Width: | Height: | Size: 758 B After Width: | Height: | Size: 758 B |
|
Before Width: | Height: | Size: 620 B After Width: | Height: | Size: 620 B |
|
Before Width: | Height: | Size: 240 B After Width: | Height: | Size: 240 B |
|
Before Width: | Height: | Size: 416 B After Width: | Height: | Size: 416 B |
|
Before Width: | Height: | Size: 702 B After Width: | Height: | Size: 702 B |
|
Before Width: | Height: | Size: 583 B After Width: | Height: | Size: 583 B |
|
Before Width: | Height: | Size: 450 B After Width: | Height: | Size: 450 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 652 B After Width: | Height: | Size: 652 B |
|
Before Width: | Height: | Size: 194 B After Width: | Height: | Size: 194 B |
|
Before Width: | Height: | Size: 491 B After Width: | Height: | Size: 491 B |
|
Before Width: | Height: | Size: 829 B After Width: | Height: | Size: 829 B |
|
Before Width: | Height: | Size: 451 B After Width: | Height: | Size: 451 B |
|
Before Width: | Height: | Size: 651 B After Width: | Height: | Size: 651 B |
|
Before Width: | Height: | Size: 336 B After Width: | Height: | Size: 336 B |
|
Before Width: | Height: | Size: 823 B After Width: | Height: | Size: 823 B |
|
Before Width: | Height: | Size: 283 B After Width: | Height: | Size: 283 B |
|
Before Width: | Height: | Size: 619 B After Width: | Height: | Size: 619 B |
178
resources/assets/sass/dashboard.scss
vendored
|
|
@ -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,64 +58,36 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
#spark-navbar-collapse {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
||||
.dropdown {
|
||||
.dropdown-toggle .caret {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&.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;
|
||||
|
||||
> li > a:hover, > li > a:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
> li > a {
|
||||
&, &:hover, &:focus {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand, .navbar-default .navbar-nav > li > a, .navbar-nav > li > a {
|
||||
&, &:hover, &:focus {
|
||||
color: $c-dashboard-light;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
&-toggler {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 8px;
|
||||
margin: 0px;
|
||||
top: 3px;
|
||||
right: 0px;
|
||||
border: 0;
|
||||
|
||||
&, &:hover, &:focus {
|
||||
background-color: transparent;
|
||||
@include media-breakpoint-up(md) {
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
padding: 0px;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
top: 45px;
|
||||
}
|
||||
|
||||
.icon-bar {
|
||||
width: 27px;
|
||||
height: 4px;
|
||||
background-color: $c-dashboard-light;
|
||||
transition: background-color 100ms;
|
||||
@include media-breakpoint-down(md) {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&:hover .icon-bar {
|
||||
background-color: darken($c-dashboard-dark, 15%);
|
||||
.dropdown-item {
|
||||
@include media-breakpoint-down(md) {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: lighten($c-dashboard-light, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-link { color: $c-dashboard-light; }
|
||||
&, &:hover, &:focus { text-decoration: none; }
|
||||
&.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");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<a class="navbar-brand" href="{{ url('/dashboard') }}">
|
||||
{{ env('APP_NAME') }} Dashboard
|
||||
</a>
|
||||
|
||||
<div id="spark-navbar-collapse" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
@if (Auth::guest())
|
||||
<li><a href="{{ url('/login') }}">Login</a></li>
|
||||
<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>
|
||||
|
||||
@if(env('REGISTRATION', false))
|
||||
<li><a 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">
|
||||
{{ $menu_item[0] }} <span class="caret"></span>
|
||||
</a>
|
||||
<div id="dashboard-navbar" class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
@if (Auth::guest())
|
||||
<li class="nav-item"><a class="nav-link" href="{{ url('/login') }}">Login</a></li>
|
||||
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@foreach($menu_item[1] as $submenu_item)
|
||||
<li><a href="{{ url('/dashboard/' . $submenu_item[1]) }}">{{ $submenu_item[0] }}</a></li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</li>
|
||||
@else
|
||||
<li class="nav-item">
|
||||
<a 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">
|
||||
{{ Auth::user()->name }} <span class="caret"></span>
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="{{ url('/logout') }}">Logout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
@if(env('REGISTRATION', false))
|
||||
<li class="nav-item"><a class="nav-link" href="{{ url('/register') }}">Register</a></li>
|
||||
@endif
|
||||
</ul>
|
||||
</div>
|
||||
@else
|
||||
@foreach(App\Models\DashboardMenu::$menu as $menu_item)
|
||||
@if(is_array($menu_item[1]))
|
||||
<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>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="menu-dropdown">
|
||||
@foreach($menu_item[1] as $submenu_item)
|
||||
<a class="dropdown-item" href="{{ url('/dashboard/' . $submenu_item[1]) }}">{{ $submenu_item[0] }}</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</li>
|
||||
@else
|
||||
<li class="nav-item">
|
||||
<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="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>
|
||||
|
||||
<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>
|
||||
</nav>
|
||||
|
|
|
|||