Move dashboard svgs to the root directory and update the dashboard navbar
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 |
168
resources/assets/sass/dashboard.scss
vendored
|
@ -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");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|