Use stacked nav on left to navigate site settings categories

This commit is contained in:
Neil Lalonde 2013-11-15 15:22:42 -05:00
parent dfdc618e9a
commit 97bc187735
6 changed files with 57 additions and 30 deletions

View File

@ -10,12 +10,21 @@
</div>
</div>
<ul class="nav nav-pills site-settings-nav">
<div class="site-settings-nav pull-left">
<ul class="nav nav-stacked">
{{#each category in controller}}
<li {{bindAttr class="category.nameKey"}}>{{#link-to 'adminSiteSettingsCategory' category.nameKey class=category.nameKey}}{{category.name}}{{/link-to}}</li>
<li {{bindAttr class="category.nameKey"}}>
{{#link-to 'adminSiteSettingsCategory' category.nameKey class=category.nameKey}}
{{category.name}}
<span class='icon-chevron-right'></span>
{{/link-to}}
</li>
{{/each}}
</ul>
</ul>
</div>
<hr/>
<div class="site-settings-detail pull-left">
{{ outlet }}
</div>
{{ outlet }}
<div class="clearfix"></div>

View File

@ -1,7 +1,7 @@
<div class='span4 offset1'>
<div class='setting-label'>
<h3>{{unbound setting}}</h3>
</div>
<div class="span11">
<div class="setting-value">
<label>
{{view Ember.Checkbox checkedBinding="enabled" value="true"}}
{{unbound description}}

View File

@ -1,12 +1,12 @@
<div class='span4 offset1'>
<div class='setting-label'>
<h3>{{unbound setting}}</h3>
</div>
<div class="span11">
<div class="setting-value">
{{combobox valueAttribute="value" content=validValues value=value none=allowsNone}}
<div class='desc'>{{unbound description}}</div>
</div>
{{#if dirty}}
<div class='span3'>
<div class='setting-controls'>
<button class='btn ok' {{action save this}}><i class='icon-ok'></i></button>
<button class='btn cancel' {{action cancel this}}><i class='icon-remove'></i></button>
</div>

View File

@ -1,12 +1,12 @@
<div class='span4 offset1'>
<div class='setting-label'>
<h3>{{unbound setting}}</h3>
</div>
<div class="span11">
{{textField value=value classNames="input-xxlarge"}}
<div class="setting-value">
{{textField value=value classNames="input-setting-string"}}
<div class='desc'>{{unbound description}}</div>
</div>
{{#if dirty}}
<div class='span3'>
<div class='setting-controls'>
<button class='btn ok' {{action save this}}><i class='icon-ok'></i></button>
<button class='btn cancel' {{action cancel this}}><i class='icon-remove'></i></button>
</div>

View File

@ -1 +1,4 @@
<h2>{{name}}</h2>
<hr/>
{{collection contentBinding="filteredContent" classNames="form-horizontal settings" itemViewClass="Discourse.SiteSettingView"}}

View File

@ -144,26 +144,37 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
}
.site-settings-nav {
li {
background-color: grayscale($nav-pills-background-color-hover);
margin-bottom: 5px;
width: 200px;
margin-top: 33px;
li a.active {
color: $white;
background-color: $nav-stacked-background-color-active;
}
}
&.required, &.basic {
margin-bottom: 20px; // so nothing floats underneath these ones
}
> a {
font-size: 13px;
&.required, &.basic {
font-size: 16px;
}
}
}
.site-settings-detail {
width: 850px;
margin-left: 30px;
}
.settings {
.setting {
padding-bottom: 20px;
.setting-label {
float: left;
width: 196px;
margin-right: 12px;
}
.setting-value {
float: left;
width: 450px;
}
.setting-controls {
float: left;
width: 144px;
}
.desc {
padding-top: 3px;
color: darken($white, 40%);
@ -184,6 +195,10 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
color: darken($yellow, 20%);
}
}
.input-setting-string {
width: 404px;
}
}
section.details {