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
app/assets/sass/partials/_base.scss
+4
View File
@@ -4,4 +4,8 @@ body.dashboard {
font-size: $base-font-size; font-size: $base-font-size;
letter-spacing: $base-letter-spacing; letter-spacing: $base-letter-spacing;
background: $base-background-color; background: $base-background-color;
display: table;
width: 100%;
height: 100%;
table-layout: fixed;
} }
app/assets/sass/partials/_content.scss
+6 -1
View File
@@ -1,5 +1,10 @@
body.dashboard { body.dashboard {
.content { .content {
padding-top: 69px;
position: relative;
display: table-cell;
vertical-align: top;
width: 100%;
.row { .row {
margin: 10px 0; margin: 10px 0;
} }
@@ -21,4 +26,4 @@ body.dashboard {
} }
} }
} }
} }
app/assets/sass/partials/_sidebar.scss
+47 -47
View File
@@ -1,59 +1,59 @@
body.dashboard { body.dashboard {
.sidebar { .sidebar {
height: 100%; display: table-cell;
position: fixed; vertical-align: top;
z-index: 998;
width: $sidebar-normal-width; width: $sidebar-normal-width;
background: $sidebar-background-color; background: $sidebar-background-color;
transition: margin $sidebar-transition-speed; position: relative;
@media #{$screen-sm-max} { z-index: 100;
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;
li { .sidebar-inner {
font-size: 0.8em; position: relative;
&:last-child {
border-bottom: $sidebar-border-color; margin-top: 69px;
}
&.active { .profile {
background: lighten($sidebar-background-color, 10%); padding: 20px;
a { margin-bottom: 20px;
color: $sidebar-text-active-color; .avatar {
width: 70px;
img {
border-radius: 50%;
width: 60px;
} }
} }
a { .profile {
display: block;
padding: 15px;
border-top: $sidebar-border-color;
color: $sidebar-text-color; 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 { &.active {
text-decoration: none; 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;
}
} }
} }
} }
app/assets/sass/partials/_wrapper.scss
+4 -22
View File
@@ -1,26 +1,8 @@
body.dashboard { body.dashboard {
.wrapper { .wrapper {
width: 100%; width: 100%;
position: absolute; display: table;
top: 0; height: 100%;
bottom: 0; table-layout: fixed;
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;
}
}
}
} }
} }
app/views/layout/dashboard.blade.php
+1 -1
View File
@@ -15,7 +15,7 @@
<body class="dashboard"> <body class="dashboard">
@include('partials.dashboard.nav') @include('partials.dashboard.nav')
<div class="wrapper active"> <div class="wrapper">
@include('partials.dashboard.sidebar') @include('partials.dashboard.sidebar')
<div class="content"> <div class="content">
@yield('content') @yield('content')
app/views/partials/dashboard/sidebar.blade.php
+47 -45
View File
@@ -1,51 +1,53 @@
@if(Auth::check()) @if(Auth::check())
<div class="sidebar"> <div class="sidebar">
<div class="profile"> <div class='sidebar-inner'>
<div class="avatar pull-left"> <div class="profile">
<a href="{{ URL::to('settings') }}"> <div class="avatar pull-left">
<img src="{{ Auth::user()->gravatar }}" alt=""> <a href="{{ URL::to('settings') }}">
</a> <img src="{{ Auth::user()->gravatar }}" alt="">
</div> </a>
<div class="profile pull-left"> </div>
<div class="username">{{ Auth::user()->username }}</div> <div class="profile pull-left">
<div class="username">{{ Auth::user()->username }}</div>
</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> </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> </div>
@endif @endif
public/build/css/all-da2b21cb.css → public/build/css/all-145c0b5a.css
+68 -78
View File
@@ -4259,28 +4259,17 @@ body.dashboard {
font-weight: 300; font-weight: 300;
font-size: 16px; font-size: 16px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
background: #f5f5f5; } background: #f5f5f5;
display: table;
width: 100%;
height: 100%;
table-layout: fixed; }
body.dashboard .wrapper { body.dashboard .wrapper {
width: 100%; width: 100%;
position: absolute; display: table;
top: 0; height: 100%;
bottom: 0; table-layout: fixed; }
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; }
}
body.dashboard .navbar { body.dashboard .navbar {
z-index: 999; z-index: 999;
@@ -4320,68 +4309,69 @@ body.dashboard .navbar {
line-height: 35px; } line-height: 35px; }
body.dashboard .sidebar { body.dashboard .sidebar {
height: 100%; display: table-cell;
position: fixed; vertical-align: top;
z-index: 998;
width: 250px; width: 250px;
background: #2c3e50; background: #2c3e50;
-webkit-transition: margin 0.2s; position: relative;
transition: margin 0.2s; } z-index: 100; }
@media (max-width: 991px) { body.dashboard .sidebar .sidebar-inner {
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; position: relative;
top: -4px; } margin-top: 69px; }
body.dashboard .content .header input { body.dashboard .sidebar .sidebar-inner .profile {
width: 20%; } 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 { body {
color: #333333; color: #333333;
public/build/css/all.css
+68 -78
View File
@@ -4259,28 +4259,17 @@ body.dashboard {
font-weight: 300; font-weight: 300;
font-size: 16px; font-size: 16px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
background: #f5f5f5; } background: #f5f5f5;
display: table;
width: 100%;
height: 100%;
table-layout: fixed; }
body.dashboard .wrapper { body.dashboard .wrapper {
width: 100%; width: 100%;
position: absolute; display: table;
top: 0; height: 100%;
bottom: 0; table-layout: fixed; }
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; }
}
body.dashboard .navbar { body.dashboard .navbar {
z-index: 999; z-index: 999;
@@ -4320,68 +4309,69 @@ body.dashboard .navbar {
line-height: 35px; } line-height: 35px; }
body.dashboard .sidebar { body.dashboard .sidebar {
height: 100%; display: table-cell;
position: fixed; vertical-align: top;
z-index: 998;
width: 250px; width: 250px;
background: #2c3e50; background: #2c3e50;
-webkit-transition: margin 0.2s; position: relative;
transition: margin 0.2s; } z-index: 100; }
@media (max-width: 991px) { body.dashboard .sidebar .sidebar-inner {
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; position: relative;
top: -4px; } margin-top: 69px; }
body.dashboard .content .header input { body.dashboard .sidebar .sidebar-inner .profile {
width: 20%; } 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 { body {
color: #333333; color: #333333;
public/build/rev-manifest.json
+1 -1
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" "js/all.js": "js/all-d8f5640f.js"
} }