From 97bc187735a785b8b04a73f29e1d66566e58c53c Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Fri, 15 Nov 2013 15:22:42 -0500
Subject: [PATCH] Use stacked nav on left to navigate site settings categories

---
 .../templates/site_settings.js.handlebars     | 23 +++++++---
 .../site_settings/setting_bool.js.handlebars  |  4 +-
 .../site_settings/setting_enum.js.handlebars  |  6 +--
 .../setting_string.js.handlebars              |  8 ++--
 .../site_settings_category.js.handlebars      |  3 ++
 .../stylesheets/common/admin/admin_base.scss  | 43 +++++++++++++------
 6 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/app/assets/javascripts/admin/templates/site_settings.js.handlebars b/app/assets/javascripts/admin/templates/site_settings.js.handlebars
index 4b959af389f..f977f126a6d 100644
--- a/app/assets/javascripts/admin/templates/site_settings.js.handlebars
+++ b/app/assets/javascripts/admin/templates/site_settings.js.handlebars
@@ -10,12 +10,21 @@
   </div>
 </div>
 
-<ul class="nav nav-pills site-settings-nav">
-  {{#each category in controller}}
-    <li {{bindAttr class="category.nameKey"}}>{{#link-to 'adminSiteSettingsCategory' category.nameKey class=category.nameKey}}{{category.name}}{{/link-to}}</li>
-  {{/each}}
-</ul>
+<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}}
+          <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>
diff --git a/app/assets/javascripts/admin/templates/site_settings/setting_bool.js.handlebars b/app/assets/javascripts/admin/templates/site_settings/setting_bool.js.handlebars
index 53282604f1d..277c45685d9 100644
--- a/app/assets/javascripts/admin/templates/site_settings/setting_bool.js.handlebars
+++ b/app/assets/javascripts/admin/templates/site_settings/setting_bool.js.handlebars
@@ -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}}
diff --git a/app/assets/javascripts/admin/templates/site_settings/setting_enum.js.handlebars b/app/assets/javascripts/admin/templates/site_settings/setting_enum.js.handlebars
index 710505e110c..3df59e7a4d2 100644
--- a/app/assets/javascripts/admin/templates/site_settings/setting_enum.js.handlebars
+++ b/app/assets/javascripts/admin/templates/site_settings/setting_enum.js.handlebars
@@ -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>
diff --git a/app/assets/javascripts/admin/templates/site_settings/setting_string.js.handlebars b/app/assets/javascripts/admin/templates/site_settings/setting_string.js.handlebars
index 647644cf9a1..5a21052e926 100644
--- a/app/assets/javascripts/admin/templates/site_settings/setting_string.js.handlebars
+++ b/app/assets/javascripts/admin/templates/site_settings/setting_string.js.handlebars
@@ -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>
diff --git a/app/assets/javascripts/admin/templates/site_settings_category.js.handlebars b/app/assets/javascripts/admin/templates/site_settings_category.js.handlebars
index 3b126410287..b6e49e65c63 100644
--- a/app/assets/javascripts/admin/templates/site_settings_category.js.handlebars
+++ b/app/assets/javascripts/admin/templates/site_settings_category.js.handlebars
@@ -1 +1,4 @@
+<h2>{{name}}</h2>
+<hr/>
+
 {{collection contentBinding="filteredContent" classNames="form-horizontal settings" itemViewClass="Discourse.SiteSettingView"}}
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index cdd6d537d7e..7b4ececf741 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -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;
-
-    &.required, &.basic {
-      margin-bottom: 20px; // so nothing floats underneath these ones
-    }
-
-    > a {
-      font-size: 13px;
-      &.required, &.basic {
-        font-size: 16px;
-      }
-    }
+  width: 200px;
+  margin-top: 33px;
+  li a.active {
+    color: $white;
+    background-color: $nav-stacked-background-color-active;
   }
 }
 
+.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 {