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

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

@@ -1,18 +1,17 @@
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;
}
position: relative;
z-index: 100;
.sidebar-inner {
position: relative;
margin-top: 69px;
.profile {
padding: 20px;
margin-bottom: 20px;
@@ -59,4 +58,5 @@ body.dashboard {
}
}
}
}
}

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

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

@@ -1,5 +1,6 @@
@if(Auth::check())
<div class="sidebar">
<div class='sidebar-inner'>
<div class="profile">
<div class="avatar pull-left">
<a href="{{ URL::to('settings') }}">
@@ -47,5 +48,6 @@
</a>
</li>
</ul>
</div>
</div>
@endif

80
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,56 +4309,57 @@ 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 {
position: relative;
z-index: 100; }
body.dashboard .sidebar .sidebar-inner {
position: relative;
margin-top: 69px; }
body.dashboard .sidebar .sidebar-inner .profile {
padding: 20px;
margin-bottom: 20px; }
body.dashboard .sidebar .profile .avatar {
body.dashboard .sidebar .sidebar-inner .profile .avatar {
width: 70px; }
body.dashboard .sidebar .profile .avatar img {
body.dashboard .sidebar .sidebar-inner .profile .avatar img {
border-radius: 50%;
width: 60px; }
body.dashboard .sidebar .profile .profile {
body.dashboard .sidebar .sidebar-inner .profile .profile {
color: #d7dadc; }
body.dashboard .sidebar ul {
body.dashboard .sidebar .sidebar-inner ul {
clear: both;
margin: 0;
padding: 0;
list-style: none; }
body.dashboard .sidebar ul li {
body.dashboard .sidebar .sidebar-inner ul li {
font-size: 0.8em; }
body.dashboard .sidebar ul li:last-child {
body.dashboard .sidebar .sidebar-inner ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
body.dashboard .sidebar ul li.active {
body.dashboard .sidebar .sidebar-inner ul li.active {
background: #3e5771; }
body.dashboard .sidebar ul li.active a {
body.dashboard .sidebar .sidebar-inner ul li.active a {
color: #ffffff; }
body.dashboard .sidebar ul li a {
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 ul li a i {
body.dashboard .sidebar .sidebar-inner ul li a i {
padding-right: 10px; }
body.dashboard .sidebar ul li a:hover {
body.dashboard .sidebar .sidebar-inner ul li a:hover {
text-decoration: none; }
body.dashboard .content .row {
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 {
body.dashboard .content .header {
background: #ffffff;
padding: 14px;
width: 100%;

80
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,56 +4309,57 @@ 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 {
position: relative;
z-index: 100; }
body.dashboard .sidebar .sidebar-inner {
position: relative;
margin-top: 69px; }
body.dashboard .sidebar .sidebar-inner .profile {
padding: 20px;
margin-bottom: 20px; }
body.dashboard .sidebar .profile .avatar {
body.dashboard .sidebar .sidebar-inner .profile .avatar {
width: 70px; }
body.dashboard .sidebar .profile .avatar img {
body.dashboard .sidebar .sidebar-inner .profile .avatar img {
border-radius: 50%;
width: 60px; }
body.dashboard .sidebar .profile .profile {
body.dashboard .sidebar .sidebar-inner .profile .profile {
color: #d7dadc; }
body.dashboard .sidebar ul {
body.dashboard .sidebar .sidebar-inner ul {
clear: both;
margin: 0;
padding: 0;
list-style: none; }
body.dashboard .sidebar ul li {
body.dashboard .sidebar .sidebar-inner ul li {
font-size: 0.8em; }
body.dashboard .sidebar ul li:last-child {
body.dashboard .sidebar .sidebar-inner ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
body.dashboard .sidebar ul li.active {
body.dashboard .sidebar .sidebar-inner ul li.active {
background: #3e5771; }
body.dashboard .sidebar ul li.active a {
body.dashboard .sidebar .sidebar-inner ul li.active a {
color: #ffffff; }
body.dashboard .sidebar ul li a {
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 ul li a i {
body.dashboard .sidebar .sidebar-inner ul li a i {
padding-right: 10px; }
body.dashboard .sidebar ul li a:hover {
body.dashboard .sidebar .sidebar-inner ul li a:hover {
text-decoration: none; }
body.dashboard .content .row {
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 {
body.dashboard .content .header {
background: #ffffff;
padding: 14px;
width: 100%;

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"
}