UX: Various admin class and structure improvements for styling

app/assets/javascripts/admin/components/admin-nav.js.es6

@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  tagName: ''
+})

app/assets/javascripts/admin/controllers/admin.js.es6

@@ -1,5 +1,20 @@
+import computed from 'ember-addons/ember-computed-decorators';
+
 export default Ember.Controller.extend({
-  showBadges: function() {
-    return this.get('currentUser.admin') && this.siteSettings.enable_badges;
-  }.property()
+  application: Ember.inject.controller(),
+
+  @computed
+  showBadges() {
+    return this.currentUser.get('admin') && this.siteSettings.enable_badges;
+  },
+
+  @computed('application.currentPath')
+  adminContentsClassName(currentPath) {
+    return currentPath.split('.').filter(segment => {
+      return segment !== 'index' &&
+        segment !== 'loading' &&
+        segment !== 'show' &&
+        segment !== 'admin';
+    }).map(Ember.String.dasherize).join(' ');
+  }
 });

app/assets/javascripts/admin/templates/admin.hbs

@@ -27,7 +27,7 @@
       </ul>
 
       <div class='boxed white admin-content'>
-        <div class='admin-contents'>
+        <div class='admin-contents {{adminContentsClassName}}'>
           {{outlet}}
         </div>
       </div>

app/assets/javascripts/admin/templates/api.hbs

@@ -1,10 +1,8 @@
-<div class="api">
-  {{#admin-nav}}
-    {{nav-item route='adminApiKeys' label='admin.api.title'}}
-    {{nav-item route='adminWebHooks' label='admin.web_hooks.title'}}
-  {{/admin-nav}}
+{{#admin-nav}}
+  {{nav-item route='adminApiKeys' label='admin.api.title'}}
+  {{nav-item route='adminWebHooks' label='admin.web_hooks.title'}}
+{{/admin-nav}}
 
-  <div class="admin-container">
-    {{outlet}}
-  </div>
+<div class="admin-container">
+  {{outlet}}
 </div>

app/assets/javascripts/admin/templates/customize.hbs

@@ -1,16 +1,14 @@
-<div class='customize'>
-  {{#admin-nav}}
-    {{nav-item route='adminCustomizeThemes' label='admin.customize.theme.title'}}
-    {{nav-item route='adminCustomize.colors' label='admin.customize.colors.title'}}
-    {{nav-item route='adminSiteText' label='admin.site_text.title'}}
-    {{nav-item route='adminCustomizeEmailTemplates' label='admin.customize.email_templates.title'}}
-    {{nav-item route='adminUserFields' label='admin.user_fields.title'}}
-    {{nav-item route='adminEmojis' label='admin.emoji.title'}}
-    {{nav-item route='adminPermalinks' label='admin.permalink.title'}}
-    {{nav-item route='adminEmbedding' label='admin.embedding.title'}}
-  {{/admin-nav}}
+{{#admin-nav}}
+  {{nav-item route='adminCustomizeThemes' label='admin.customize.theme.title'}}
+  {{nav-item route='adminCustomize.colors' label='admin.customize.colors.title'}}
+  {{nav-item route='adminSiteText' label='admin.site_text.title'}}
+  {{nav-item route='adminCustomizeEmailTemplates' label='admin.customize.email_templates.title'}}
+  {{nav-item route='adminUserFields' label='admin.user_fields.title'}}
+  {{nav-item route='adminEmojis' label='admin.emoji.title'}}
+  {{nav-item route='adminPermalinks' label='admin.permalink.title'}}
+  {{nav-item route='adminEmbedding' label='admin.embedding.title'}}
+{{/admin-nav}}
 
-  <div class="admin-container">
-    {{outlet}}
-  </div>
+<div class="admin-container">
+  {{outlet}}
 </div>