UX: More consistent category setting layout

app/assets/javascripts/discourse/templates/components/edit-category-settings.hbs

@@ -1,9 +1,10 @@
 {{#if showPositionInput}}
   <section class='field position-fields'>
-    <label>
+    <label for="category-position">
       {{i18n 'category.position'}}
-      {{text-field value=category.position class="position-input" type="number"}}
     </label>
+          {{text-field value=category.position id="category-position" class="position-input" type="number"}}
+
   </section>
 {{/if}}
 
@@ -16,10 +17,10 @@
 
 <section class='field'>
   <div class="control-group">
-    <label>
+    <label for="topic-auto-close">
       {{i18n 'topic.auto_close.label'}}
-      {{text-field value=category.auto_close_hours type="number"}}
     </label>
+          {{text-field value=category.auto_close_hours id="topic-auto-close" type="number"}}
 
     <label>
       {{input type="checkbox" checked=category.auto_close_based_on_last_post}}
@@ -53,59 +54,62 @@
 
 {{#if showSubcategoryListStyle}}
   <section class="field subcategory-list-style-field">
-    <label>
+    <label for="subcategory-list-style">
       {{i18n "category.subcategory_list_style"}}
-      {{combo-box valueAttribute="value" content=availableSubcategoryListStyles value=category.subcategory_list_style}}
     </label>
+          {{combo-box valueAttribute="value" id="subcategory-list-style" content=availableSubcategoryListStyles value=category.subcategory_list_style}}
+
   </section>
 {{/if}}
 
 <section class="field default-view-field">
-  <label>
+  <label for="category-default-view">
     {{i18n "category.default_view"}}
   </label>
   <div class="controls">
-    {{combo-box valueAttribute="value" content=availableViews value=category.default_view}}
+    {{combo-box valueAttribute="value" id="category-default-view" content=availableViews value=category.default_view}}
   </div>
 </section>
 
 <section class="field default-top-period-field">
-  <label>
+  <label for="category-default-period">
     {{i18n "category.default_top_period"}}
   </label>
   <div class="controls">
-    {{combo-box valueAttribute="value" content=availableTopPeriods value=category.default_top_period}}
+    {{combo-box valueAttribute="value" id="category-default-period" content=availableTopPeriods value=category.default_top_period}}
   </div>
 </section>
 
 <section class="field">
-  <label>
+  <label for="category-sort-order">
     {{i18n "category.sort_order"}}
   </label>
   <div class="controls">
-  {{combo-box valueAttribute="value" content=availableSorts value=category.sort_order none="category.sort_options.default"}}
+  {{combo-box valueAttribute="value" id="category-sort-order" content=availableSorts value=category.sort_order none="category.sort_options.default"}}
   {{#unless isDefaultSortOrder}}
-    {{combo-box castBoolean=true valueAttribute="value" content=sortAscendingOptions value=category.sort_ascending none="category.sort_options.default"}}
+    {{combo-box castBoolean=true valueAttribute="value" id="category-sort-order" content=sortAscendingOptions value=category.sort_ascending none="category.sort_options.default"}}
   {{/unless}}
     </div>
 </section>
 
 <section class="field">
-  <label>
+  <label for="category-number-featured-topics">
     {{#if category.parent_category_id}}
       {{i18n "category.subcategory_num_featured_topics"}}
     {{else}}
       {{i18n "category.num_featured_topics"}}
     {{/if}}
-    {{text-field value=category.num_featured_topics type="number"}}
   </label>
+      {{text-field value=category.num_featured_topics id="category-number-featured-topics" type="number"}}
+
 </section>
 
 <section class="field">
-  <label>
+  <label for="category-number-daily-bump">
     {{i18n "category.num_auto_bump_daily"}}
-    {{text-field value=category.custom_fields.num_auto_bump_daily type="number"}}
   </label>
+      {{text-field value=category.custom_fields.num_auto_bump_daily id="category-number-daily-bump" type="number"}}
+
 </section>
 
 <section class="field">
@@ -142,11 +146,12 @@
     </section>
 
     <section class='field'>
-      <label>
+      <label for="category-email-in">
         {{d-icon "envelope-o"}}
         {{i18n 'category.email_in'}}
-        {{text-field class="email-in" value=category.email_in}}
       </label>
+              {{text-field id="category-email-in" class="email-in" value=category.email_in}}
+
     </section>
 
     <section class='field'>
@@ -161,10 +166,11 @@
 
 {{#if siteSettings.tagging_enabled}}
   <section class='field minimum-required-tags'>
-    <label>
+    <label for="category-minimum-tags">
       {{i18n 'category.minimum_required_tags'}}
-      {{text-field value=category.minimum_required_tags type="number"}}
     </label>
+          {{text-field value=category.minimum_required_tags id="category-minimum-tags" type="number"}}
+
   </section>
 {{/if}}
 

app/assets/javascripts/discourse/templates/components/edit-category-tags.hbs

@@ -1,11 +1,14 @@
 <section class="field">
-  <p>{{i18n 'category.tags_allowed_tags'}}</p>
+  <label for="category-allowed-tags">{{i18n 'category.tags_allowed_tags'}}</label>
   {{tag-chooser
+    id="category-allowed-tags"
     filterPlaceholder="category.tags_placeholder"
     tags=category.allowed_tags
     everyTag=true
     unlimitedTagCount=true}}
-
-  <p>{{i18n 'category.tags_allowed_tag_groups'}}</p>
-  {{tag-group-chooser tagGroups=category.allowed_tag_groups}}
+    </section>
+
+<section class="field">
+  <label for="category-allowed-tag-groups">{{i18n 'category.tags_allowed_tag_groups'}}</label>
+  {{tag-group-chooser id="category-allowed-tag-groups" tagGroups=category.allowed_tag_groups}}
 </section>

app/assets/stylesheets/common/base/modal.scss

@@ -202,11 +202,7 @@
       width: 99%;
       height: 80px;
     }
-    label {
-      color: $primary;
-    }
     p {
-      color: darken($primary, 40%);
       font-size: $font-0;
     }
     .archetype-option {
@@ -270,8 +266,10 @@
   }
 
   section.field {
-    margin-bottom: 20px;
+    padding: 0.25em 0;
+    margin-bottom: 5px;
   }
+
   section.field .field-item {
     display: inline-block;
     margin-right: 10px;
@@ -370,24 +368,16 @@
 }
 
 .edit-category-modal {
-  input[type="number"] {
-    min-width: 15em;
-    margin-bottom: 0;
-    position: relative;
-    left: 2%;
-    margin-right: 4%;
+  input:not([type="checkbox"]),
+  .controls {
+    display: block;
+    margin-bottom: 0.5em;
   }
 
   .subcategory-list-style-field {
     margin-left: 16px;
   }
 
-  .edit-category-tab-settings {
-    section.field {
-      margin-bottom: 10px;
-    }
-  }
-
   .disable_info_wrap {
     position: relative;
     display: inline-block;
@@ -415,7 +405,7 @@
 
   section.minimum-required-tags {
     input[type="number"] {
-      width: 50px;
+      width: 5em;
     }
   }