Sidebar is better, but not responsive yet
This commit is contained in:
James Brooks
@@ -4,4 +4,8 @@ body.dashboard {
|
||||
font-size: $base-font-size;
|
||||
letter-spacing: $base-letter-spacing;
|
||||
background: $base-background-color;
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
body.dashboard {
|
||||
.content {
|
||||
padding-top: 69px;
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
.row {
|
||||
margin: 10px 0;
|
||||
}
|
||||
@@ -21,4 +26,4 @@ body.dashboard {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,59 +1,59 @@
|
||||
body.dashboard {
|
||||
.sidebar {
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 998;
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
width: $sidebar-normal-width;
|
||||
background: $sidebar-background-color;
|
||||
transition: margin $sidebar-transition-speed;
|
||||
@media #{$screen-sm-max} {
|
||||
margin-left: -$sidebar-normal-width;
|
||||
}
|
||||
@media #{$screen-xs-max} {
|
||||
width: $sidebar-phone-width;
|
||||
margin-left: -$sidebar-phone-width;
|
||||
}
|
||||
.profile {
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
.avatar {
|
||||
width: 70px;
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
.profile {
|
||||
color: $sidebar-text-color;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
|
||||
li {
|
||||
font-size: 0.8em;
|
||||
&:last-child {
|
||||
border-bottom: $sidebar-border-color;
|
||||
}
|
||||
&.active {
|
||||
background: lighten($sidebar-background-color, 10%);
|
||||
a {
|
||||
color: $sidebar-text-active-color;
|
||||
.sidebar-inner {
|
||||
position: relative;
|
||||
|
||||
margin-top: 69px;
|
||||
|
||||
.profile {
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
.avatar {
|
||||
width: 70px;
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
border-top: $sidebar-border-color;
|
||||
.profile {
|
||||
color: $sidebar-text-color;
|
||||
i {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
font-size: 0.8em;
|
||||
&:last-child {
|
||||
border-bottom: $sidebar-border-color;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
&.active {
|
||||
background: lighten($sidebar-background-color, 10%);
|
||||
a {
|
||||
color: $sidebar-text-active-color;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
border-top: $sidebar-border-color;
|
||||
color: $sidebar-text-color;
|
||||
i {
|
||||
padding-right: 10px;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,26 +1,8 @@
|
||||
body.dashboard {
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin-top: 69px;
|
||||
@media #{$screen-md-min} {
|
||||
.content {
|
||||
transition: margin $sidebar-transition-speed;
|
||||
margin-left: $sidebar-normal-width;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.sidebar {
|
||||
margin-left: 0;
|
||||
}
|
||||
@media #{$screen-sm-min} {
|
||||
.content {
|
||||
transition: margin $sidebar-transition-speed;
|
||||
margin-left: $sidebar-normal-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
display: table;
|
||||
height: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
<body class="dashboard">
|
||||
@include('partials.dashboard.nav')
|
||||
<div class="wrapper active">
|
||||
<div class="wrapper">
|
||||
@include('partials.dashboard.sidebar')
|
||||
<div class="content">
|
||||
@yield('content')
|
||||
|
||||
@@ -1,51 +1,53 @@
|
||||
@if(Auth::check())
|
||||
<div class="sidebar">
|
||||
<div class="profile">
|
||||
<div class="avatar pull-left">
|
||||
<a href="{{ URL::to('settings') }}">
|
||||
<img src="{{ Auth::user()->gravatar }}" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="profile pull-left">
|
||||
<div class="username">{{ Auth::user()->username }}</div>
|
||||
<div class='sidebar-inner'>
|
||||
<div class="profile">
|
||||
<div class="avatar pull-left">
|
||||
<a href="{{ URL::to('settings') }}">
|
||||
<img src="{{ Auth::user()->gravatar }}" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="profile pull-left">
|
||||
<div class="username">{{ Auth::user()->username }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="{{ Request::is('dashboard') ? 'active' : '' }}">
|
||||
<a href="{{ URL::route('dashboard') }}">
|
||||
<i class="fa fa-dashboard"></i> {{ Lang::get('cachet.dashboard.dashboard') }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="{{ Request::is('dashboard/components') ? 'active' : '' }}">
|
||||
<a href="{{ URL::route('dashboard.components') }}">
|
||||
<i class="fa fa-list-ul"></i> {{ Lang::get('cachet.dashboard.components') }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="{{ Request::is('dashboard/incidents') ? 'active' : '' }}">
|
||||
<a href="{{ URL::route('dashboard.incidents') }}">
|
||||
<i class="fa fa-exclamation-triangle"></i> {{ Lang::get('cachet.dashboard.incidents') }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="{{ Request::is('dashboard/metrics') ? 'active' : '' }}">
|
||||
<a href="{{ URL::route('dashboard.metrics') }}">
|
||||
<i class="fa fa-area-chart"></i> {{ Lang::get('cachet.dashboard.metrics') }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="{{ Request::is('dashboard/notifications') ? 'active' : '' }}">
|
||||
<a href="{{ URL::route('dashboard.notifications') }}">
|
||||
<i class="fa fa-envelope"></i> {{ Lang::get('cachet.dashboard.notifications') }}
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li class="{{ Request::is('dashboard/status-page') ? 'active' : '' }}">
|
||||
<a href="{{ URL::route('dashboard.status-page') }}">
|
||||
<i class="fa fa-exclamation-circle"></i> {{ Lang::get('cachet.dashboard.status_page') }}
|
||||
</a>
|
||||
</li> -->
|
||||
<li class="{{ Request::is('dashboard/settings') ? 'active' : '' }}">
|
||||
<a href="{{ URL::route('dashboard.settings') }}">
|
||||
<i class="fa fa-cogs"></i> {{ Lang::get('cachet.dashboard.settings') }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="{{ Request::is('dashboard') ? 'active' : '' }}">
|
||||
<a href="{{ URL::route('dashboard') }}">
|
||||
<i class="fa fa-dashboard"></i> {{ Lang::get('cachet.dashboard.dashboard') }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="{{ Request::is('dashboard/components') ? 'active' : '' }}">
|
||||
<a href="{{ URL::route('dashboard.components') }}">
|
||||
<i class="fa fa-list-ul"></i> {{ Lang::get('cachet.dashboard.components') }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="{{ Request::is('dashboard/incidents') ? 'active' : '' }}">
|
||||
<a href="{{ URL::route('dashboard.incidents') }}">
|
||||
<i class="fa fa-exclamation-triangle"></i> {{ Lang::get('cachet.dashboard.incidents') }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="{{ Request::is('dashboard/metrics') ? 'active' : '' }}">
|
||||
<a href="{{ URL::route('dashboard.metrics') }}">
|
||||
<i class="fa fa-area-chart"></i> {{ Lang::get('cachet.dashboard.metrics') }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="{{ Request::is('dashboard/notifications') ? 'active' : '' }}">
|
||||
<a href="{{ URL::route('dashboard.notifications') }}">
|
||||
<i class="fa fa-envelope"></i> {{ Lang::get('cachet.dashboard.notifications') }}
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li class="{{ Request::is('dashboard/status-page') ? 'active' : '' }}">
|
||||
<a href="{{ URL::route('dashboard.status-page') }}">
|
||||
<i class="fa fa-exclamation-circle"></i> {{ Lang::get('cachet.dashboard.status_page') }}
|
||||
</a>
|
||||
</li> -->
|
||||
<li class="{{ Request::is('dashboard/settings') ? 'active' : '' }}">
|
||||
<a href="{{ URL::route('dashboard.settings') }}">
|
||||
<i class="fa fa-cogs"></i> {{ Lang::get('cachet.dashboard.settings') }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
Reference in New Issue
Block a user