lucas.mathieu/cachet-docker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sidebar is better, but not responsive yet

Browse Source
This commit is contained in:
James Brooks
2014-12-13 13:08:18 +00:00
parent 5420ff91f7
commit 48f652b768
9 changed files with 246 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/sass/partials/_base.scss
View File

@@ -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;
}

5
app/assets/sass/partials/_content.scss
View File

@@ -1,5 +1,10 @@
body.dashboard {
.content {
padding-top: 69px;
position: relative;
display: table-cell;
vertical-align: top;
width: 100%;
.row {
margin: 10px 0;
}

94
app/assets/sass/partials/_sidebar.scss
View File

@@ -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;
}
}
}
}

24
app/assets/sass/partials/_wrapper.scss
View File

@@ -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;
}
}

2
app/views/layout/dashboard.blade.php
View File

@@ -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')

92
app/views/partials/dashboard/sidebar.blade.php
View File

@@ -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

146
public/build/css/all-da2b21cb.css → public/build/css/all-145c0b5a.css
View File

@@ -4259,28 +4259,17 @@ body.dashboard {
font-weight: 300;
font-size: 16px;
letter-spacing: 0.08em;
background: #f5f5f5; }
background: #f5f5f5;
display: table;
width: 100%;
height: 100%;
table-layout: fixed; }
body.dashboard .wrapper {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
margin-top: 69px; }
@media (min-width: 992px) {
body.dashboard .wrapper .content {
-webkit-transition: margin 0.2s;
transition: margin 0.2s;
margin-left: 250px; }
}
body.dashboard .wrapper.active .sidebar {
margin-left: 0; }
@media (min-width: 550px) {
body.dashboard .wrapper.active .content {
-webkit-transition: margin 0.2s;
transition: margin 0.2s;
margin-left: 250px; }
}
display: table;
height: 100%;
table-layout: fixed; }
body.dashboard .navbar {
z-index: 999;
@@ -4320,68 +4309,69 @@ body.dashboard .navbar {
line-height: 35px; }
body.dashboard .sidebar {
height: 100%;
position: fixed;
z-index: 998;
display: table-cell;
vertical-align: top;
width: 250px;
background: #2c3e50;
-webkit-transition: margin 0.2s;
transition: margin 0.2s; }
@media (max-width: 991px) {
body.dashboard .sidebar {
margin-left: -250px; } }
@media (max-width: 549px) {
body.dashboard .sidebar {
width: 75%;
margin-left: -75%; } }
body.dashboard .sidebar .profile {
padding: 20px;
margin-bottom: 20px; }
body.dashboard .sidebar .profile .avatar {
width: 70px; }
body.dashboard .sidebar .profile .avatar img {
border-radius: 50%;
width: 60px; }
body.dashboard .sidebar .profile .profile {
color: #d7dadc; }
body.dashboard .sidebar ul {
clear: both;
margin: 0;
padding: 0;
list-style: none; }
body.dashboard .sidebar ul li {
font-size: 0.8em; }
body.dashboard .sidebar ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
body.dashboard .sidebar ul li.active {
background: #3e5771; }
body.dashboard .sidebar ul li.active a {
color: #ffffff; }
body.dashboard .sidebar ul li a {
display: block;
padding: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #d7dadc; }
body.dashboard .sidebar ul li a i {
padding-right: 10px; }
body.dashboard .sidebar ul li a:hover {
text-decoration: none; }
body.dashboard .content .row {
margin: 10px 0; }
body.dashboard .content .header {
background: #ffffff;
padding: 14px;
width: 100%;
height: 50px;
font-size: 18px; }
body.dashboard .content .header i {
padding-right: 10px; }
body.dashboard .content .header input, body.dashboard .content .header button, body.dashboard .content .header .btn {
position: relative;
z-index: 100; }
body.dashboard .sidebar .sidebar-inner {
position: relative;
top: -4px; }
body.dashboard .content .header input {
width: 20%; }
margin-top: 69px; }
body.dashboard .sidebar .sidebar-inner .profile {
padding: 20px;
margin-bottom: 20px; }
body.dashboard .sidebar .sidebar-inner .profile .avatar {
width: 70px; }
body.dashboard .sidebar .sidebar-inner .profile .avatar img {
border-radius: 50%;
width: 60px; }
body.dashboard .sidebar .sidebar-inner .profile .profile {
color: #d7dadc; }
body.dashboard .sidebar .sidebar-inner ul {
clear: both;
margin: 0;
padding: 0;
list-style: none; }
body.dashboard .sidebar .sidebar-inner ul li {
font-size: 0.8em; }
body.dashboard .sidebar .sidebar-inner ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
body.dashboard .sidebar .sidebar-inner ul li.active {
background: #3e5771; }
body.dashboard .sidebar .sidebar-inner ul li.active a {
color: #ffffff; }
body.dashboard .sidebar .sidebar-inner ul li a {
display: block;
padding: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #d7dadc; }
body.dashboard .sidebar .sidebar-inner ul li a i {
padding-right: 10px; }
body.dashboard .sidebar .sidebar-inner ul li a:hover {
text-decoration: none; }
body.dashboard .content {
padding-top: 69px;
position: relative;
display: table-cell;
vertical-align: top;
width: 100%; }
body.dashboard .content .row {
margin: 10px 0; }
body.dashboard .content .header {
background: #ffffff;
padding: 14px;
width: 100%;
height: 50px;
font-size: 18px; }
body.dashboard .content .header i {
padding-right: 10px; }
body.dashboard .content .header input, body.dashboard .content .header button, body.dashboard .content .header .btn {
position: relative;
top: -4px; }
body.dashboard .content .header input {
width: 20%; }
body {
color: #333333;

146
public/build/css/all.css
View File

@@ -4259,28 +4259,17 @@ body.dashboard {
font-weight: 300;
font-size: 16px;
letter-spacing: 0.08em;
background: #f5f5f5; }
background: #f5f5f5;
display: table;
width: 100%;
height: 100%;
table-layout: fixed; }
body.dashboard .wrapper {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
margin-top: 69px; }
@media (min-width: 992px) {
body.dashboard .wrapper .content {
-webkit-transition: margin 0.2s;
transition: margin 0.2s;
margin-left: 250px; }
}
body.dashboard .wrapper.active .sidebar {
margin-left: 0; }
@media (min-width: 550px) {
body.dashboard .wrapper.active .content {
-webkit-transition: margin 0.2s;
transition: margin 0.2s;
margin-left: 250px; }
}
display: table;
height: 100%;
table-layout: fixed; }
body.dashboard .navbar {
z-index: 999;
@@ -4320,68 +4309,69 @@ body.dashboard .navbar {
line-height: 35px; }
body.dashboard .sidebar {
height: 100%;
position: fixed;
z-index: 998;
display: table-cell;
vertical-align: top;
width: 250px;
background: #2c3e50;
-webkit-transition: margin 0.2s;
transition: margin 0.2s; }
@media (max-width: 991px) {
body.dashboard .sidebar {
margin-left: -250px; } }
@media (max-width: 549px) {
body.dashboard .sidebar {
width: 75%;
margin-left: -75%; } }
body.dashboard .sidebar .profile {
padding: 20px;
margin-bottom: 20px; }
body.dashboard .sidebar .profile .avatar {
width: 70px; }
body.dashboard .sidebar .profile .avatar img {
border-radius: 50%;
width: 60px; }
body.dashboard .sidebar .profile .profile {
color: #d7dadc; }
body.dashboard .sidebar ul {
clear: both;
margin: 0;
padding: 0;
list-style: none; }
body.dashboard .sidebar ul li {
font-size: 0.8em; }
body.dashboard .sidebar ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
body.dashboard .sidebar ul li.active {
background: #3e5771; }
body.dashboard .sidebar ul li.active a {
color: #ffffff; }
body.dashboard .sidebar ul li a {
display: block;
padding: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #d7dadc; }
body.dashboard .sidebar ul li a i {
padding-right: 10px; }
body.dashboard .sidebar ul li a:hover {
text-decoration: none; }
body.dashboard .content .row {
margin: 10px 0; }
body.dashboard .content .header {
background: #ffffff;
padding: 14px;
width: 100%;
height: 50px;
font-size: 18px; }
body.dashboard .content .header i {
padding-right: 10px; }
body.dashboard .content .header input, body.dashboard .content .header button, body.dashboard .content .header .btn {
position: relative;
z-index: 100; }
body.dashboard .sidebar .sidebar-inner {
position: relative;
top: -4px; }
body.dashboard .content .header input {
width: 20%; }
margin-top: 69px; }
body.dashboard .sidebar .sidebar-inner .profile {
padding: 20px;
margin-bottom: 20px; }
body.dashboard .sidebar .sidebar-inner .profile .avatar {
width: 70px; }
body.dashboard .sidebar .sidebar-inner .profile .avatar img {
border-radius: 50%;
width: 60px; }
body.dashboard .sidebar .sidebar-inner .profile .profile {
color: #d7dadc; }
body.dashboard .sidebar .sidebar-inner ul {
clear: both;
margin: 0;
padding: 0;
list-style: none; }
body.dashboard .sidebar .sidebar-inner ul li {
font-size: 0.8em; }
body.dashboard .sidebar .sidebar-inner ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
body.dashboard .sidebar .sidebar-inner ul li.active {
background: #3e5771; }
body.dashboard .sidebar .sidebar-inner ul li.active a {
color: #ffffff; }
body.dashboard .sidebar .sidebar-inner ul li a {
display: block;
padding: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #d7dadc; }
body.dashboard .sidebar .sidebar-inner ul li a i {
padding-right: 10px; }
body.dashboard .sidebar .sidebar-inner ul li a:hover {
text-decoration: none; }
body.dashboard .content {
padding-top: 69px;
position: relative;
display: table-cell;
vertical-align: top;
width: 100%; }
body.dashboard .content .row {
margin: 10px 0; }
body.dashboard .content .header {
background: #ffffff;
padding: 14px;
width: 100%;
height: 50px;
font-size: 18px; }
body.dashboard .content .header i {
padding-right: 10px; }
body.dashboard .content .header input, body.dashboard .content .header button, body.dashboard .content .header .btn {
position: relative;
top: -4px; }
body.dashboard .content .header input {
width: 20%; }
body {
color: #333333;

2
public/build/rev-manifest.json
View File

@@ -1,4 +1,4 @@
{
"css/all.css": "css/all-da2b21cb.css",
"css/all.css": "css/all-145c0b5a.css",
"js/all.js": "js/all-d8f5640f.js"
}