Nicer CSS and markup for room configuration forms.

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],

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],

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],

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],

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>
+

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" {[ } ]} >

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>