From 917284b58ea8f744665106cf7aa2e1ab10dd7496 Mon Sep 17 00:00:00 2001 From: James Brooks Date: Tue, 30 Dec 2014 11:55:20 +0000 Subject: [PATCH] Created a sub-level sidebar for the Settings page. --- app/assets/sass/partials/_sidebar.scss | 149 +++++++++----- app/views/dashboard/settings.blade.php | 185 +++++++++--------- app/views/layout/dashboard.blade.php | 2 +- .../dashboard/sidebar-settings.blade.php | 9 + .../{all-5e690747.css => all-981c832a.css} | 40 +++- public/build/css/all.css | 40 +++- public/build/rev-manifest.json | 2 +- 7 files changed, 287 insertions(+), 140 deletions(-) create mode 100644 app/views/partials/dashboard/sidebar-settings.blade.php rename public/build/css/{all-5e690747.css => all-981c832a.css} (99%) diff --git a/app/assets/sass/partials/_sidebar.scss b/app/assets/sass/partials/_sidebar.scss index b39948dd..a3d79822 100644 --- a/app/assets/sass/partials/_sidebar.scss +++ b/app/assets/sass/partials/_sidebar.scss @@ -1,18 +1,18 @@ body.dashboard { - .sidebar { - display: table-cell; - vertical-align: top; - width: $sidebar-normal-width; - background: $sidebar-background-color; + .sidebar { + display: table-cell; + vertical-align: top; + width: $sidebar-normal-width; + background: $sidebar-background-color; @include box-shadow($sidebar-border-shadow); - position: relative; - z-index: 999; + position: relative; + z-index: 999; - .sidebar-inner { - position: relative; + .sidebar-inner { + position: relative; - .profile { - padding: 20px; + .profile { + padding: 20px; margin-bottom: 0; .avatar { width: 70px; @@ -25,55 +25,57 @@ body.dashboard { &.username { word-break: break-all; color: $sidebar-text-color; - } + } } - } + } .quick-add-incident { @extend text-center; padding: 10px; } - ul { - clear: both; - margin: 0; - padding: 0; - list-style: none; + ul { + clear: both; + margin: 0; + padding: 0; + list-style: none; - li { + li { font-size: $sidebar-text-size; - &:last-child { - border-bottom: $sidebar-border-color; - } - &.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 { + &:last-child { + border-bottom: $sidebar-border-color; + } + &.active { + background: lighten($sidebar-background-color, 2%); + border-top: 1px solid #BED3EA; + border-bottom: 1px solid #BED3EA; + a { + color: $sidebar-text-active-color; + } + } + a { + display: block; + padding: 15px; + border-top: $sidebar-border-color; + color: $sidebar-text-color; + i { font-size: 18px; min-width: 17px; text-align: center; position: relative; top: 1px; - } - &:hover { - text-decoration: none; - } - } + } + &:hover { + text-decoration: none; + } + } - &.sub-nav-item { - a { - padding-left: 40px; - } - } - } - } - } + &.sub-nav-item { + a { + padding-left: 40px; + } + } + } + } + } .bottom-menu-sidebar { position: fixed; bottom: 0; @@ -94,5 +96,56 @@ body.dashboard { } } } - } + } + + .sub-sidebar { + left: 0; + top: 0; + bottom: 0; + position: absolute; + width: 22%; + background: #fcfcfc; + border-right: 1px solid #E8ECF1; + + h3 { + margin: 0; + text-align: center; + font-size: 19px; + padding: 22px 0; + } + + ul.menu { + list-style-type: none; + padding: 0; + margin: 0; + + li { + a { + color: #666; + display: block; + padding: 13px 30px; + font-size: 15px; + transition: all 0.2s linear; + text-decoration: none; + + &.active { + color: #6787DA; + } + + &:hover { + color: #6787DA; + } + } + } + } + } + + .content-panel { + top: 0; + position: relative; + width: 78%; + margin-left: 22%; + padding: 24px 50px; + padding-bottom: 80px; + } } diff --git a/app/views/dashboard/settings.blade.php b/app/views/dashboard/settings.blade.php index 2d4b3771..1388c246 100644 --- a/app/views/dashboard/settings.blade.php +++ b/app/views/dashboard/settings.blade.php @@ -1,108 +1,117 @@ @extends('layout.dashboard') @section('content') -
- - {{ Lang::get('cachet.dashboard.settings') }} - -
-
-
-
-
-

Cachet Settings

-
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- - - -

Security

-
-
-
-
- - -
- The domain set above is automatically allowed by default. + @include('partials.dashboard.sidebar-settings') +
+
+ + {{ Lang::get('cachet.dashboard.settings') }} + +
+
+
+
+ +

Application Setup

+
+
+
+
+ +
-
-
+
+
+
+ + +
+
+
+ - + -

Theme

-
-
-
-
- - +

Security

+
+
+
+
+ + +
+ The domain set above is automatically allowed by default. +
+
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
+ + + + +

Theme

+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ +

Stylesheet

+
+
+
+
+ + +
+
+
+
-

Stylesheet

-
- - +
-
- - -
+ +
diff --git a/app/views/layout/dashboard.blade.php b/app/views/layout/dashboard.blade.php index 46788bad..cca99f2d 100644 --- a/app/views/layout/dashboard.blade.php +++ b/app/views/layout/dashboard.blade.php @@ -6,7 +6,7 @@
@include('partials.dashboard.sidebar')
- @yield('content') + @yield('content')
diff --git a/app/views/partials/dashboard/sidebar-settings.blade.php b/app/views/partials/dashboard/sidebar-settings.blade.php new file mode 100644 index 00000000..f11ec5b2 --- /dev/null +++ b/app/views/partials/dashboard/sidebar-settings.blade.php @@ -0,0 +1,9 @@ +
+

Settings

+ +
diff --git a/public/build/css/all-5e690747.css b/public/build/css/all-981c832a.css similarity index 99% rename from public/build/css/all-5e690747.css rename to public/build/css/all-981c832a.css index e997e024..bd144520 100644 --- a/public/build/css/all-5e690747.css +++ b/public/build/css/all-981c832a.css @@ -4648,7 +4648,9 @@ body.dashboard .sidebar { 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: white; } + background: #f6f8f8; + border-top: 1px solid #BED3EA; + border-bottom: 1px solid #BED3EA; } body.dashboard .sidebar .sidebar-inner ul li.active a { color: #333; } body.dashboard .sidebar .sidebar-inner ul li a { @@ -4683,6 +4685,42 @@ body.dashboard .sidebar { text-align: center; padding: 6px 0; background: #fff; } +body.dashboard .sub-sidebar { + left: 0; + top: 0; + bottom: 0; + position: absolute; + width: 22%; + background: #fcfcfc; + border-right: 1px solid #E8ECF1; } + body.dashboard .sub-sidebar h3 { + margin: 0; + text-align: center; + font-size: 19px; + padding: 22px 0; } + body.dashboard .sub-sidebar ul.menu { + list-style-type: none; + padding: 0; + margin: 0; } + body.dashboard .sub-sidebar ul.menu li a { + color: #666; + display: block; + padding: 13px 30px; + font-size: 15px; + -webkit-transition: all 0.2s linear; + transition: all 0.2s linear; + text-decoration: none; } + body.dashboard .sub-sidebar ul.menu li a.active { + color: #6787DA; } + body.dashboard .sub-sidebar ul.menu li a:hover { + color: #6787DA; } +body.dashboard .content-panel { + top: 0; + position: relative; + width: 78%; + margin-left: 22%; + padding: 24px 50px; + padding-bottom: 80px; } body.dashboard .content { position: relative; diff --git a/public/build/css/all.css b/public/build/css/all.css index e997e024..bd144520 100644 --- a/public/build/css/all.css +++ b/public/build/css/all.css @@ -4648,7 +4648,9 @@ body.dashboard .sidebar { 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: white; } + background: #f6f8f8; + border-top: 1px solid #BED3EA; + border-bottom: 1px solid #BED3EA; } body.dashboard .sidebar .sidebar-inner ul li.active a { color: #333; } body.dashboard .sidebar .sidebar-inner ul li a { @@ -4683,6 +4685,42 @@ body.dashboard .sidebar { text-align: center; padding: 6px 0; background: #fff; } +body.dashboard .sub-sidebar { + left: 0; + top: 0; + bottom: 0; + position: absolute; + width: 22%; + background: #fcfcfc; + border-right: 1px solid #E8ECF1; } + body.dashboard .sub-sidebar h3 { + margin: 0; + text-align: center; + font-size: 19px; + padding: 22px 0; } + body.dashboard .sub-sidebar ul.menu { + list-style-type: none; + padding: 0; + margin: 0; } + body.dashboard .sub-sidebar ul.menu li a { + color: #666; + display: block; + padding: 13px 30px; + font-size: 15px; + -webkit-transition: all 0.2s linear; + transition: all 0.2s linear; + text-decoration: none; } + body.dashboard .sub-sidebar ul.menu li a.active { + color: #6787DA; } + body.dashboard .sub-sidebar ul.menu li a:hover { + color: #6787DA; } +body.dashboard .content-panel { + top: 0; + position: relative; + width: 78%; + margin-left: 22%; + padding: 24px 50px; + padding-bottom: 80px; } body.dashboard .content { position: relative; diff --git a/public/build/rev-manifest.json b/public/build/rev-manifest.json index 38766791..3f9c9969 100644 --- a/public/build/rev-manifest.json +++ b/public/build/rev-manifest.json @@ -1,4 +1,4 @@ { - "css/all.css": "css/all-5e690747.css", + "css/all.css": "css/all-981c832a.css", "js/all.js": "js/all-1604355c.js" } \ No newline at end of file