From 49386210486f2a7d3a9b5801285dbe0e74f058de Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Wed, 16 Aug 2017 09:39:13 +0200
Subject: [PATCH] Nicer CSS and markup for room configuration forms.

---
 css/converse.css                 | 17 +++++++++++++++--
 css/inverse.css                  | 24 ++++++++++++++++++------
 sass/_core.scss                  | 12 +++++++++++-
 sass/inverse/_core.scss          |  9 ++++-----
 src/templates/form_checkbox.html |  4 ++--
 src/templates/form_input.html    |  8 +++-----
 src/templates/form_select.html   |  6 ++++--
 7 files changed, 57 insertions(+), 23 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index ca5e1023d..e736d4309 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -1360,10 +1360,23 @@
     padding: 1em; }
     #converse-embedded-chat form.pure-form.converse-form legend,
     #conversejs form.pure-form.converse-form legend {
-      color: #777; }
+      color: #777;
+      font-size: 125%; }
+    #converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
+    #conversejs form.pure-form.converse-form input[type=checkbox] {
+      display: block; }
+    #converse-embedded-chat form.pure-form.converse-form select,
+    #converse-embedded-chat form.pure-form.converse-form input[type=password],
+    #converse-embedded-chat form.pure-form.converse-form input[type=number],
+    #converse-embedded-chat form.pure-form.converse-form input[type=text],
+    #conversejs form.pure-form.converse-form select,
+    #conversejs form.pure-form.converse-form input[type=password],
+    #conversejs form.pure-form.converse-form input[type=number],
+    #conversejs form.pure-form.converse-form input[type=text] {
+      min-width: 50%; }
     #converse-embedded-chat form.pure-form.converse-form label,
     #conversejs form.pure-form.converse-form label {
-      margin-top: 1em;
+      margin: 1em 0;
       font-size: 16px; }
     #converse-embedded-chat form.pure-form.converse-form input[type=text],
     #converse-embedded-chat form.pure-form.converse-form input[type=password],
diff --git a/css/inverse.css b/css/inverse.css
index 35ac7e761..7e45330b4 100644
--- a/css/inverse.css
+++ b/css/inverse.css
@@ -1360,10 +1360,23 @@
     padding: 1em; }
     #converse-embedded-chat form.pure-form.converse-form legend,
     #conversejs form.pure-form.converse-form legend {
-      color: #777; }
+      color: #777;
+      font-size: 125%; }
+    #converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
+    #conversejs form.pure-form.converse-form input[type=checkbox] {
+      display: block; }
+    #converse-embedded-chat form.pure-form.converse-form select,
+    #converse-embedded-chat form.pure-form.converse-form input[type=password],
+    #converse-embedded-chat form.pure-form.converse-form input[type=number],
+    #converse-embedded-chat form.pure-form.converse-form input[type=text],
+    #conversejs form.pure-form.converse-form select,
+    #conversejs form.pure-form.converse-form input[type=password],
+    #conversejs form.pure-form.converse-form input[type=number],
+    #conversejs form.pure-form.converse-form input[type=text] {
+      min-width: 50%; }
     #converse-embedded-chat form.pure-form.converse-form label,
     #conversejs form.pure-form.converse-form label {
-      margin-top: 1em;
+      margin: 1em 0;
       font-size: 18px; }
     #converse-embedded-chat form.pure-form.converse-form input[type=text],
     #converse-embedded-chat form.pure-form.converse-form input[type=password],
@@ -1445,10 +1458,9 @@ body {
   height: 100vh; }
   #conversejs form.pure-form.converse-form {
     margin: 1em; }
-    #conversejs form.pure-form.converse-form legend {
-      color: #777; }
-    #conversejs form.pure-form.converse-form label {
-      margin-top: 1em; }
+    #conversejs form.pure-form.converse-form input[type=checkbox] {
+      margin-left: 1em;
+      display: inline; }
     #conversejs form.pure-form.converse-form input[type=text],
     #conversejs form.pure-form.converse-form input[type=password],
     #conversejs form.pure-form.converse-form input[type=number],
diff --git a/sass/_core.scss b/sass/_core.scss
index f658ced30..881c3b339 100644
--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -194,9 +194,19 @@
             padding: 1em;
             legend {
                 color: $text-color;
+                font-size: 125%;
+            }
+            input[type=checkbox] {
+                display: block;
+            }
+            select,
+            input[type=password],
+            input[type=number],
+            input[type=text] {
+                min-width: 50%;
             }
             label {
-                margin-top: 1em;
+                margin: 1em 0;
                 font-size: $font-size-large;
             }
             input[type=text],
diff --git a/sass/inverse/_core.scss b/sass/inverse/_core.scss
index e5752498e..d0cc2e171 100644
--- a/sass/inverse/_core.scss
+++ b/sass/inverse/_core.scss
@@ -39,11 +39,10 @@ body {
     form {
         &.pure-form.converse-form {
             margin: 1em;
-            legend {
-                color: $text-color;
-            }
-            label {
-                margin-top: 1em;
+
+            input[type=checkbox] {
+                margin-left: 1em;
+                display: inline;
             }
             input[type=text],
             input[type=password],
diff --git a/src/templates/form_checkbox.html b/src/templates/form_checkbox.html
index 655e7a90b..b2020ab28 100644
--- a/src/templates/form_checkbox.html
+++ b/src/templates/form_checkbox.html
@@ -1,2 +1,2 @@
-<label>{{{label}}}</label>
-<input name="{{{name}}}" type="{{{type}}}" {{{checked}}}>
+<label class="checkbox" for="{{{name}}}">{{{label}}}<input name="{{{name}}}" type="{{{type}}}" {{{checked}}}></label>
+
diff --git a/src/templates/form_input.html b/src/templates/form_input.html
index ffd0b79a1..afac78df6 100644
--- a/src/templates/form_input.html
+++ b/src/templates/form_input.html
@@ -1,8 +1,6 @@
-{[ if (label) { ]}
 <label>
     {{{label}}}
+    <input name="{{{name}}}" type="{{{type}}}" 
+        {[ if (value) { ]} value="{{{value}}}" {[ } ]}
+        {[ if (required) { ]} class="required" {[ } ]} >
 </label>
-{[ } ]}
-<input name="{{{name}}}" type="{{{type}}}" 
-    {[ if (value) { ]} value="{{{value}}}" {[ } ]}
-    {[ if (required) { ]} class="required" {[ } ]} >
diff --git a/src/templates/form_select.html b/src/templates/form_select.html
index b52831095..1128280a6 100644
--- a/src/templates/form_select.html
+++ b/src/templates/form_select.html
@@ -1,2 +1,4 @@
-<label>{{{label}}}</label>
-<select name="{{{name}}}"  {[ if (multiple) { ]} multiple="multiple" {[ } ]}>{{options}}</select>
+<label>
+    {{{label}}}
+    <select name="{{{name}}}"  {[ if (multiple) { ]} multiple="multiple" {[ } ]}>{{options}}</select>
+</label>