From 48f652b768fcfa1b8b3d2ab7938c9f80ae10f50b Mon Sep 17 00:00:00 2001 From: James Brooks Date: Sat, 13 Dec 2014 13:08:18 +0000 Subject: [PATCH] Sidebar is better, but not responsive yet --- app/assets/sass/partials/_base.scss | 4 + app/assets/sass/partials/_content.scss | 7 +- app/assets/sass/partials/_sidebar.scss | 94 +++++------ app/assets/sass/partials/_wrapper.scss | 26 +--- app/views/layout/dashboard.blade.php | 2 +- .../partials/dashboard/sidebar.blade.php | 92 +++++------ .../{all-da2b21cb.css => all-145c0b5a.css} | 146 ++++++++---------- public/build/css/all.css | 146 ++++++++---------- public/build/rev-manifest.json | 2 +- 9 files changed, 246 insertions(+), 273 deletions(-) rename public/build/css/{all-da2b21cb.css => all-145c0b5a.css} (98%) diff --git a/app/assets/sass/partials/_base.scss b/app/assets/sass/partials/_base.scss index 1bea01d1..16d9e349 100644 --- a/app/assets/sass/partials/_base.scss +++ b/app/assets/sass/partials/_base.scss @@ -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; } diff --git a/app/assets/sass/partials/_content.scss b/app/assets/sass/partials/_content.scss index 9281bddc..deb0677f 100644 --- a/app/assets/sass/partials/_content.scss +++ b/app/assets/sass/partials/_content.scss @@ -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 { } } } -} \ No newline at end of file +} diff --git a/app/assets/sass/partials/_sidebar.scss b/app/assets/sass/partials/_sidebar.scss index 7f310740..c8fa35e2 100644 --- a/app/assets/sass/partials/_sidebar.scss +++ b/app/assets/sass/partials/_sidebar.scss @@ -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; + } } } } diff --git a/app/assets/sass/partials/_wrapper.scss b/app/assets/sass/partials/_wrapper.scss index 1c441acc..87e6dcd9 100644 --- a/app/assets/sass/partials/_wrapper.scss +++ b/app/assets/sass/partials/_wrapper.scss @@ -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; } -} \ No newline at end of file +} diff --git a/app/views/layout/dashboard.blade.php b/app/views/layout/dashboard.blade.php index 12f3b57a..5e0f21e1 100644 --- a/app/views/layout/dashboard.blade.php +++ b/app/views/layout/dashboard.blade.php @@ -15,7 +15,7 @@ @include('partials.dashboard.nav') -
+
@include('partials.dashboard.sidebar')
@yield('content') diff --git a/app/views/partials/dashboard/sidebar.blade.php b/app/views/partials/dashboard/sidebar.blade.php index 22641cc2..8bc35e0c 100644 --- a/app/views/partials/dashboard/sidebar.blade.php +++ b/app/views/partials/dashboard/sidebar.blade.php @@ -1,51 +1,53 @@ @if(Auth::check())
-
-
- - - -
-
-
{{ Auth::user()->username }}
+
+
+
+ + + +
+
+
{{ Auth::user()->username }}
+
+
-
@endif diff --git a/public/build/css/all-da2b21cb.css b/public/build/css/all-145c0b5a.css similarity index 98% rename from public/build/css/all-da2b21cb.css rename to public/build/css/all-145c0b5a.css index 5b1265bd..159f2b50 100644 --- a/public/build/css/all-da2b21cb.css +++ b/public/build/css/all-145c0b5a.css @@ -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; diff --git a/public/build/css/all.css b/public/build/css/all.css index 5b1265bd..159f2b50 100644 --- a/public/build/css/all.css +++ b/public/build/css/all.css @@ -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; diff --git a/public/build/rev-manifest.json b/public/build/rev-manifest.json index 8c072adf..4ea80726 100644 --- a/public/build/rev-manifest.json +++ b/public/build/rev-manifest.json @@ -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" } \ No newline at end of file