From 4ca82b9f4da0ea28e9f6d72f094bd10d0c7e97eb Mon Sep 17 00:00:00 2001
From: angusmcleod <angus@mcleod.org.au>
Date: Sat, 13 Feb 2021 12:51:37 +1100
Subject: [PATCH] Style updates (WIP)

See further comments on thepavilion.io
---
 .../wizard-realtime-validations.js.es6        |  2 +
 .../wizard-realtime-validations.hbs           | 82 +++++++++++--------
 assets/stylesheets/common/wizard-admin.scss   |  7 ++
 3 files changed, 56 insertions(+), 35 deletions(-)

diff --git a/assets/javascripts/discourse/components/wizard-realtime-validations.js.es6 b/assets/javascripts/discourse/components/wizard-realtime-validations.js.es6
index 2fd306e6..a75fac64 100644
--- a/assets/javascripts/discourse/components/wizard-realtime-validations.js.es6
+++ b/assets/javascripts/discourse/components/wizard-realtime-validations.js.es6
@@ -4,6 +4,8 @@ import { cloneJSON } from "discourse-common/lib/object";
 import Category from "discourse/models/category";
 
 export default Component.extend({
+  classNames: ['realtime-validations'],
+  
     init(){
         this._super(...arguments);
         if (!this.validations) return;
diff --git a/assets/javascripts/discourse/templates/components/wizard-realtime-validations.hbs b/assets/javascripts/discourse/templates/components/wizard-realtime-validations.hbs
index e993b543..57cf6162 100644
--- a/assets/javascripts/discourse/templates/components/wizard-realtime-validations.hbs
+++ b/assets/javascripts/discourse/templates/components/wizard-realtime-validations.hbs
@@ -1,36 +1,48 @@
-<div>
-    <label>{{i18n 'admin.wizard.field.validations.header'}}</label>
-</div>
-{{#each-in field.validations as |name props|}}
-  <span class="setting-title">
-    {{input type="checkbox" checked=props.status }}
-    {{i18n 'admin.wizard.field.validations.enable' validation_type=(i18n (concat 'admin.wizard.field.validations.' name))}}
-  </span>
-  <div class="validation-container">
-    <div class="validation-section">
-    <span class="setting-label">{{i18n 'admin.wizard.field.validations.categories'}}</span>
-    <div class="setting-value">
-        {{category-selector
-            categories=(get this (concat 'validationBuffer.' name '.categories'))
-            onChange=(action 'updateValidationCategories' name props)
-            class="wizard" }}
-    </div>
-    </div>
-  <div class="validation-section">
-      <span class="setting-label">{{i18n 'admin.wizard.field.validations.date_after'}}</span>
-      <div class="setting-value">
-        {{date-picker-past
-              value=(readonly props.date_after)
-              containerId="date-container"
-              onSelect=(action (mut props.date_after))}}
+<h3>{{i18n 'admin.wizard.field.validations.header'}}</h3>
+
+<ul>
+  {{#each-in field.validations as |name props|}}
+    <li>
+      <span class="setting-title">
+        {{input type="checkbox" checked=props.status }}
+        {{i18n 'admin.wizard.field.validations.enable'
+          validation_type=(i18n (concat 'admin.wizard.field.validations.' name))}}
+      </span>
+      <div class="validation-container">
+        <div class="validation-section">
+          <div class="setting-label">
+            <label>{{i18n 'admin.wizard.field.validations.categories'}}</label>
+          </div>
+          <div class="setting-value">
+            {{category-selector
+                categories=(get this (concat 'validationBuffer.' name '.categories'))
+                onChange=(action 'updateValidationCategories' name props)
+                class="wizard"}}
+          </div>
+        </div>
+        <div class="validation-section">
+          <div class="setting-label">
+            <label>{{i18n 'admin.wizard.field.validations.date_after'}}</label>
+          </div>
+          <div class="setting-value">
+            {{date-picker-past
+                value=(readonly props.date_after)
+                containerId="date-container"
+                onSelect=(action (mut props.date_after))}}
+          </div>
+        </div>
+        <div class="validation-section">
+          <div class="setting-label">
+            <label>{{i18n 'admin.wizard.field.validations.position'}}</label>
+          </div>
+          <div class="setting-value">
+            {{radio-button name=(concat name field.id) value="above" selection=props.position}}
+            {{i18n 'admin.wizard.field.validations.above'}}
+            {{radio-button name=(concat name field.id) value="below" selection=props.position}}
+            {{i18n 'admin.wizard.field.validations.below'}}
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="validation-section">
-      <span class="setting-label">{{i18n 'admin.wizard.field.validations.position'}}</span>
-      <div class="setting-value">
-        {{radio-button name=(concat name field.id) value="above" selection=props.position}} {{i18n 'admin.wizard.field.validations.above'}}
-        {{radio-button name=(concat name field.id) value="below" selection=props.position}} {{i18n 'admin.wizard.field.validations.below'}}
-      </div>
-    </div>
-  </div>
-{{/each-in}}
+    </li>
+  {{/each-in}}
+</ul>
diff --git a/assets/stylesheets/common/wizard-admin.scss b/assets/stylesheets/common/wizard-admin.scss
index 8daf904d..6fead6da 100644
--- a/assets/stylesheets/common/wizard-admin.scss
+++ b/assets/stylesheets/common/wizard-admin.scss
@@ -644,8 +644,15 @@
   }
 }
 
+.realtime-validations ul {
+  list-style: none;
+  margin: 0;
+}
+
 .validation-container {
   display: flex;
+  padding: 1em 0;
+  
   .validation-section {
     width: 250px;
   }