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>
</div> </div>
<ul class="nav nav-pills site-settings-nav"> <div class="site-settings-nav pull-left">
{{#each category in controller}} <ul class="nav nav-stacked">
<li {{bindAttr class="category.nameKey"}}>{{#link-to 'adminSiteSettingsCategory' category.nameKey class=category.nameKey}}{{category.name}}{{/link-to}}</li> {{#each category in controller}}
{{/each}} <li {{bindAttr class="category.nameKey"}}>
</ul> {{#link-to 'adminSiteSettingsCategory' category.nameKey class=category.nameKey}}
{{category.name}}
<span class='icon-chevron-right'></span>
{{/link-to}}
</li>
{{/each}}
</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> <h3>{{unbound setting}}</h3>
</div> </div>
<div class="span11"> <div class="setting-value">
<label> <label>
{{view Ember.Checkbox checkedBinding="enabled" value="true"}} {{view Ember.Checkbox checkedBinding="enabled" value="true"}}
{{unbound description}} {{unbound description}}

View file

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

View file

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

View file

@ -1 +1,4 @@
<h2>{{name}}</h2>
<hr/>
{{collection contentBinding="filteredContent" classNames="form-horizontal settings" itemViewClass="Discourse.SiteSettingView"}} {{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 { .site-settings-nav {
li { width: 200px;
background-color: grayscale($nav-pills-background-color-hover); margin-top: 33px;
margin-bottom: 5px; li a.active {
color: $white;
&.required, &.basic { background-color: $nav-stacked-background-color-active;
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 { .settings {
.setting { .setting {
padding-bottom: 20px; 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 { .desc {
padding-top: 3px; padding-top: 3px;
color: darken($white, 40%); color: darken($white, 40%);
@ -184,6 +195,10 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
color: darken($yellow, 20%); color: darken($yellow, 20%);
} }
} }
.input-setting-string {
width: 404px;
}
} }
section.details { section.details {