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

Created a sub-level sidebar for the Settings page.

Browse Source
This commit is contained in:
James Brooks
2014-12-30 11:55:20 +00:00
committed by Graham Campbell
parent e575bec31e
commit 917284b58e
7 changed files with 287 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/sass/partials/_sidebar.scss
+101 -48
View File
@@ -1,18 +1,18 @@
body.dashboard { body.dashboard {
.sidebar { .sidebar {
display: table-cell; display: table-cell;
vertical-align: top; vertical-align: top;
width: $sidebar-normal-width; width: $sidebar-normal-width;
background: $sidebar-background-color; background: $sidebar-background-color;
@include box-shadow($sidebar-border-shadow); @include box-shadow($sidebar-border-shadow);
position: relative; position: relative;
z-index: 999; z-index: 999;
.sidebar-inner { .sidebar-inner {
position: relative; position: relative;
.profile { .profile {
padding: 20px; padding: 20px;
margin-bottom: 0; margin-bottom: 0;
.avatar { .avatar {
width: 70px; width: 70px;
@@ -25,55 +25,57 @@ body.dashboard {
&.username { &.username {
word-break: break-all; word-break: break-all;
color: $sidebar-text-color; color: $sidebar-text-color;
} }
} }
} }
.quick-add-incident { .quick-add-incident {
@extend text-center; @extend text-center;
padding: 10px; padding: 10px;
} }
ul { ul {
clear: both; clear: both;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
li { li {
font-size: $sidebar-text-size; font-size: $sidebar-text-size;
&:last-child { &:last-child {
border-bottom: $sidebar-border-color; border-bottom: $sidebar-border-color;
} }
&.active { &.active {
background: lighten($sidebar-background-color, 10%); background: lighten($sidebar-background-color, 2%);
a { border-top: 1px solid #BED3EA;
color: $sidebar-text-active-color; border-bottom: 1px solid #BED3EA;
} a {
} color: $sidebar-text-active-color;
a { }
display: block; }
padding: 15px; a {
border-top: $sidebar-border-color; display: block;
color: $sidebar-text-color; padding: 15px;
i { border-top: $sidebar-border-color;
color: $sidebar-text-color;
i {
font-size: 18px; font-size: 18px;
min-width: 17px; min-width: 17px;
text-align: center; text-align: center;
position: relative; position: relative;
top: 1px; top: 1px;
} }
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
} }
&.sub-nav-item { &.sub-nav-item {
a { a {
padding-left: 40px; padding-left: 40px;
} }
} }
} }
} }
} }
.bottom-menu-sidebar { .bottom-menu-sidebar {
position: fixed; position: fixed;
bottom: 0; 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;
}
} }
app/views/dashboard/settings.blade.php
+97 -88
View File
@@ -1,108 +1,117 @@
@extends('layout.dashboard') @extends('layout.dashboard')
@section('content') @section('content')
<div class="header"> @include('partials.dashboard.sidebar-settings')
<span class="uppercase"> <div class='content-panel'>
<i class="icon ion-gear-a"></i> {{ Lang::get('cachet.dashboard.settings') }} <div class="header">
</span> <span class="uppercase">
</div> <i class="icon ion-gear-a"></i> {{ Lang::get('cachet.dashboard.settings') }}
<div class="content-wrapper"> </span>
<div class="row"> </div>
<div class="col-sm-12"> <div class="content-wrapper">
<form name='SettingsForm' class='form-vertical' role='form' action='/dashboard/settings' method='POST'> <div class="row">
<h4 class="sub-header">Cachet Settings</h4> <div class="col-sm-12">
<fieldset> <form name='SettingsForm' class='form-vertical' role='form' action='/dashboard/settings' method='POST'>
<div class='row'> <h4 class="sub-header" id='application-setup'>Application Setup</h4>
<div class='col-xs-12'> <fieldset>
<div class='form-group'> <div class='row'>
<label>Site Name</label> <div class='col-xs-12'>
<input type='text' class='form-control' name='app_name' value='{{ Setting::get("app_name") }}' required /> <div class='form-group'>
</div> <label>Site Name</label>
</div> <input type='text' class='form-control' name='app_name' value='{{ Setting::get("app_name") }}' required />
</div>
<div class='row'>
<div class='col-xs-12'>
<div class='form-group'>
<label>Site URL</label>
<input type='text' class='form-control' name='app_domain' value='{{ Setting::get("app_domain") }}' required />
</div>
</div>
</div>
</fieldset>
<!-- <h4 class="sub-header">Server</h4>
<fieldset></fieldset> -->
<h4 class="sub-header">Security</h4>
<fieldset>
<div class='row'>
<div class='col-xs-12'>
<div class='form-group'>
<label>Allowed Domains <em>Comma Seperated</em></label>
<textarea class='form-control' name='allowed_domains' rows='5' placeholder='http://cachet.io, http://cachet.herokuapp.com'>{{ Setting::get('allowed_domains') }}</textarea>
<div class='help-block'>
The domain set above is automatically allowed by default.
</div> </div>
</div> </div>
</div> </div>
</div> <div class='row'>
</fieldset> <div class='col-xs-12'>
<div class='form-group'>
<label>Site URL</label>
<input type='text' class='form-control' name='app_domain' value='{{ Setting::get("app_domain") }}' required />
</div>
</div>
</div>
</fieldset>
<!-- <h4 class='sub-header'>Mail</h4> <!-- <h4 class="sub-header">Server</h4>
<fieldset></fieldset> --> <fieldset></fieldset> -->
<h4 class="sub-header">Theme</h4> <h4 class="sub-header" id='security'>Security</h4>
<fieldset> <fieldset>
<div class='row'> <div class='row'>
<div class='col-xs-6'> <div class='col-xs-12'>
<div class='form-group'> <div class='form-group'>
<label>Background Color</label> <label>Allowed Domains <em>Comma Seperated</em></label>
<input type='text' class='form-control color-code' name='style.background_color' value='{{ Setting::get("style_background_color") }}' /> <textarea class='form-control' name='allowed_domains' rows='5' placeholder='http://cachet.io, http://cachet.herokuapp.com'>{{ Setting::get('allowed_domains') }}</textarea>
<div class='help-block'>
The domain set above is automatically allowed by default.
</div>
</div>
</div> </div>
</div> </div>
<div class='col-xs-6'> </fieldset>
<div class='form-group'>
<label>Text Color</label> <!-- <h4 class='sub-header'>Mail</h4>
<input type='text' class='form-control color-code' name='style.text_color' value='{{ Setting::get("style_text_color") }}' /> <fieldset></fieldset> -->
</div>
</div> <h4 class="sub-header" id='theme'>Theme</h4>
</div> <fieldset>
<div class='row'> <div class='row'>
<div class='col-xs-4'> <div class='col-xs-6'>
<div class='form-group'> <div class='form-group'>
<label>Success Warning Color</label> <label>Background Color</label>
<input type='text' class='form-control color-code' name='style.success_warning_color' value='{{ Setting::get("style_success_warning_color") }}' /> <input type='text' class='form-control color-code' name='style.background_color' value='{{ Setting::get("style_background_color") }}' />
</div> </div>
</div> </div>
<div class='col-xs-4'> <div class='col-xs-6'>
<div class='form-group'> <div class='form-group'>
<label>Error Warning Color</label> <label>Text Color</label>
<input type='text' class='form-control color-code' name='style.error_warning_color' value='{{ Setting::get("style_error_warning_color") }}' /> <input type='text' class='form-control color-code' name='style.text_color' value='{{ Setting::get("style_text_color") }}' />
</div> </div>
</div> </div>
<div class='col-xs-4'> </div>
<div class='form-group'> <div class='row'>
<label>Info Warning Color</label> <div class='col-xs-4'>
<input type='text' class='form-control color-code' name='style.style_info_warning_color' value='{{ Setting::get("style_info_warning_color") }}' /> <div class='form-group'>
</div> <label>Success Warning Color</label>
</div> <input type='text' class='form-control color-code' name='style.success_warning_color' value='{{ Setting::get("style_success_warning_color") }}' />
</div> </div>
</fieldset> </div>
<div class='col-xs-4'>
<div class='form-group'>
<label>Error Warning Color</label>
<input type='text' class='form-control color-code' name='style.error_warning_color' value='{{ Setting::get("style_error_warning_color") }}' />
</div>
</div>
<div class='col-xs-4'>
<div class='form-group'>
<label>Info Warning Color</label>
<input type='text' class='form-control color-code' name='style.style_info_warning_color' value='{{ Setting::get("style_info_warning_color") }}' />
</div>
</div>
</div>
</fieldset>
<h4 class="sub-header" id='stylesheet'>Stylesheet</h4>
<fieldset>
<div class='row'>
<div class='col-xs-12'>
<div class='form-group'>
<label>Custom Stylesheet</label>
<textarea class='form-control' name='stylesheet' rows='10'>{{ Setting::get('stylesheet') }}</textarea>
</div>
</div>
</div>
</fieldset>
<h4 class="sub-header">Stylesheet</h4>
<fieldset>
<div class='row'> <div class='row'>
<div class='col-xs-12'> <div class='col-xs-12'>
<div class='form-group'> <div class='form-group'>
<label>Custom Stylesheet</label> <button type="submit" class="btn btn-success">Save settings</button>
<textarea class='form-control' name='stylesheet' rows='10'>{{ Setting::get('stylesheet') }}</textarea>
</div> </div>
</div> </div>
</div> </div>
</fieldset> </form>
</div>
<button type="submit" class="btn btn-success">Save settings</button>
</form>
</div> </div>
</div> </div>
</div> </div>
app/views/layout/dashboard.blade.php
+1 -1
View File
@@ -6,7 +6,7 @@
<div class="wrapper"> <div class="wrapper">
@include('partials.dashboard.sidebar') @include('partials.dashboard.sidebar')
<div class="content"> <div class="content">
@yield('content') @yield('content')
</div> </div>
</div> </div>
</body> </body>
app/views/partials/dashboard/sidebar-settings.blade.php
+9
View File
@@ -0,0 +1,9 @@
<div class='sub-sidebar'>
<h3>Settings</h3>
<ul class='menu'>
<li><a href='#setup'><i class='ion-gear-b'></i> Application Setup</a></li>
<li><a href='#security'><i class='ion-lock-combination'></i> Security</a></li>
<li><a href='#theme'><i class='ion-paintbrush'></i> Theme</a></li>
<li><a href='#stylesheet'><i class='ion-paintbucket'></i> Stylesheet</a></li>
</ul>
</div>
public/build/css/all-5e690747.css → public/build/css/all-981c832a.css
+39 -1
View File
@@ -4648,7 +4648,9 @@ body.dashboard .sidebar {
body.dashboard .sidebar .sidebar-inner ul li:last-child { body.dashboard .sidebar .sidebar-inner ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.1); } border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
body.dashboard .sidebar .sidebar-inner ul li.active { 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 { body.dashboard .sidebar .sidebar-inner ul li.active a {
color: #333; } color: #333; }
body.dashboard .sidebar .sidebar-inner ul li a { body.dashboard .sidebar .sidebar-inner ul li a {
@@ -4683,6 +4685,42 @@ body.dashboard .sidebar {
text-align: center; text-align: center;
padding: 6px 0; padding: 6px 0;
background: #fff; } 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 { body.dashboard .content {
position: relative; position: relative;
public/build/css/all.css
+39 -1
View File
@@ -4648,7 +4648,9 @@ body.dashboard .sidebar {
body.dashboard .sidebar .sidebar-inner ul li:last-child { body.dashboard .sidebar .sidebar-inner ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.1); } border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
body.dashboard .sidebar .sidebar-inner ul li.active { 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 { body.dashboard .sidebar .sidebar-inner ul li.active a {
color: #333; } color: #333; }
body.dashboard .sidebar .sidebar-inner ul li a { body.dashboard .sidebar .sidebar-inner ul li a {
@@ -4683,6 +4685,42 @@ body.dashboard .sidebar {
text-align: center; text-align: center;
padding: 6px 0; padding: 6px 0;
background: #fff; } 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 { body.dashboard .content {
position: relative; position: relative;
public/build/rev-manifest.json
+1 -1
View File
@@ -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" "js/all.js": "js/all-1604355c.js"
} }