Merge pull request #135 from cachethq/sub-sidebar
Created a sub-level sidebar for the Settings page.
This commit is contained in:
Joe Cohen
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,108 +1,117 @@
|
||||
@extends('layout.dashboard')
|
||||
|
||||
@section('content')
|
||||
<div class="header">
|
||||
<span class="uppercase">
|
||||
<i class="icon ion-gear-a"></i> {{ Lang::get('cachet.dashboard.settings') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<form name='SettingsForm' class='form-vertical' role='form' action='/dashboard/settings' method='POST'>
|
||||
<h4 class="sub-header">Cachet Settings</h4>
|
||||
<fieldset>
|
||||
<div class='row'>
|
||||
<div class='col-xs-12'>
|
||||
<div class='form-group'>
|
||||
<label>Site Name</label>
|
||||
<input type='text' class='form-control' name='app_name' value='{{ Setting::get("app_name") }}' required />
|
||||
</div>
|
||||
</div>
|
||||
</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.
|
||||
@include('partials.dashboard.sidebar-settings')
|
||||
<div class='content-panel'>
|
||||
<div class="header">
|
||||
<span class="uppercase">
|
||||
<i class="icon ion-gear-a"></i> {{ Lang::get('cachet.dashboard.settings') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<form name='SettingsForm' class='form-vertical' role='form' action='/dashboard/settings' method='POST'>
|
||||
<h4 class="sub-header" id='application-setup'>Application Setup</h4>
|
||||
<fieldset>
|
||||
<div class='row'>
|
||||
<div class='col-xs-12'>
|
||||
<div class='form-group'>
|
||||
<label>Site Name</label>
|
||||
<input type='text' class='form-control' name='app_name' value='{{ Setting::get("app_name") }}' required />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<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'>Mail</h4>
|
||||
<fieldset></fieldset> -->
|
||||
<!-- <h4 class="sub-header">Server</h4>
|
||||
<fieldset></fieldset> -->
|
||||
|
||||
<h4 class="sub-header">Theme</h4>
|
||||
<fieldset>
|
||||
<div class='row'>
|
||||
<div class='col-xs-6'>
|
||||
<div class='form-group'>
|
||||
<label>Background Color</label>
|
||||
<input type='text' class='form-control color-code' name='style.background_color' value='{{ Setting::get("style_background_color") }}' />
|
||||
<h4 class="sub-header" id='security'>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 class='col-xs-6'>
|
||||
<div class='form-group'>
|
||||
<label>Text Color</label>
|
||||
<input type='text' class='form-control color-code' name='style.text_color' value='{{ Setting::get("style_text_color") }}' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='col-xs-4'>
|
||||
<div class='form-group'>
|
||||
<label>Success Warning Color</label>
|
||||
<input type='text' class='form-control color-code' name='style.success_warning_color' value='{{ Setting::get("style_success_warning_color") }}' />
|
||||
</div>
|
||||
</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>
|
||||
</fieldset>
|
||||
|
||||
<!-- <h4 class='sub-header'>Mail</h4>
|
||||
<fieldset></fieldset> -->
|
||||
|
||||
<h4 class="sub-header" id='theme'>Theme</h4>
|
||||
<fieldset>
|
||||
<div class='row'>
|
||||
<div class='col-xs-6'>
|
||||
<div class='form-group'>
|
||||
<label>Background Color</label>
|
||||
<input type='text' class='form-control color-code' name='style.background_color' value='{{ Setting::get("style_background_color") }}' />
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-6'>
|
||||
<div class='form-group'>
|
||||
<label>Text Color</label>
|
||||
<input type='text' class='form-control color-code' name='style.text_color' value='{{ Setting::get("style_text_color") }}' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='col-xs-4'>
|
||||
<div class='form-group'>
|
||||
<label>Success Warning Color</label>
|
||||
<input type='text' class='form-control color-code' name='style.success_warning_color' value='{{ Setting::get("style_success_warning_color") }}' />
|
||||
</div>
|
||||
</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='col-xs-12'>
|
||||
<div class='form-group'>
|
||||
<label>Custom Stylesheet</label>
|
||||
<textarea class='form-control' name='stylesheet' rows='10'>{{ Setting::get('stylesheet') }}</textarea>
|
||||
<button type="submit" class="btn btn-success">Save settings</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<button type="submit" class="btn btn-success">Save settings</button>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="wrapper">
|
||||
@include('partials.dashboard.sidebar')
|
||||
<div class="content">
|
||||
@yield('content')
|
||||
@yield('content')
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
9
app/views/partials/dashboard/sidebar-settings.blade.php
Normal file
9
app/views/partials/dashboard/sidebar-settings.blade.php
Normal 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>
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
Reference in New Issue
Block a user