Update the JS to better render the chatroom config form.

Other small tweaks as well.

converse.js

@@ -3186,22 +3186,25 @@
 
             renderConfigurationForm: function (stanza) {
                 var $form = this.$el.find('form.chatroom-form'),
+                    $fieldset = $form.children('fieldset:first'),
                     $stanza = $(stanza),
                     $fields = $stanza.find('field'),
                     title = $stanza.find('title').text(),
                     instructions = $stanza.find('instructions').text();
-                $form.find('span.spinner').remove();
-                $form.append($('<legend>').text(title));
+                $fieldset.find('span.spinner').remove();
+                $fieldset.append($('<legend>').text(title));
                 if (instructions && instructions !== title) {
-                    $form.append($('<p class="instructions">').text(instructions));
+                    $fieldset.append($('<p class="instructions">').text(instructions));
                 }
                 _.each($fields, function (field) {
-                    $form.append(utils.xForm2webForm($(field), $stanza));
+                    $fieldset.append(utils.xForm2webForm($(field), $stanza));
                 });
-                $form.append('<input type="submit" class="pure-button button-primary" value="'+__('Save')+'"/>');
-                $form.append('<input type="button" class="pure-button button-cancel" value="'+__('Cancel')+'"/>');
+                $form.append('<fieldset></fieldset>');
+                $fieldset = $form.children('fieldset:last');
+                $fieldset.append('<input type="submit" class="pure-button button-primary" value="'+__('Save')+'"/>');
+                $fieldset.append('<input type="button" class="pure-button button-cancel" value="'+__('Cancel')+'"/>');
+                $fieldset.find('input[type=button]').on('click', this.cancelConfiguration.bind(this));
                 $form.on('submit', this.saveConfiguration.bind(this));
-                $form.find('input[type=button]').on('click', this.cancelConfiguration.bind(this));
             },
 
             sendConfiguration: function(config, onSuccess, onError) {

css/converse.css

@@ -1183,14 +1183,15 @@
     #conversejs form.pure-form.converse-form input[type=button],
     #conversejs form.pure-form.converse-form input[type=submit] {
       padding-left: 1em;
-      padding-right: 1em; }
+      padding-right: 1em;
+      margin-right: 1em; }
     #conversejs form.pure-form.converse-form input.error {
       border: 1px solid red;
       color: #818479; }
     #conversejs form.pure-form.converse-form .form-help {
       color: gray;
       font-size: 85%;
-      padding-top: 5px; }
+      padding-top: 0.5em; }
       #conversejs form.pure-form.converse-form .form-help:hover {
         color: #818479; }
   #conversejs .chat-textarea-chatbox-selected {
@@ -1922,37 +1923,37 @@
         position: absolute; }
   #conversejs .chatroom .chat-textarea {
     border-bottom-right-radius: 0; }
-  #conversejs .chatroom .invited-contact {
-    margin: -1px 0 0 -1px;
-    width: 100px;
-    border: 1px solid #999; }
-    #conversejs .chatroom .invited-contact.tt-input {
-      margin: 1px;
-      width: 97px;
-      width: calc(100% - 2px);
-      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; }
-      #conversejs .chatroom .invited-contact.tt-input:focus {
-        border-color: #E76F51; }
-    #conversejs .chatroom .invited-contact.tt-hint {
-      color: transparent; }
-  #conversejs .chatroom .tt-dropdown-menu {
-    margin: 0 1px 0 1px;
-    width: 96px;
-    max-height: 250px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    text-overflow: ellipsis;
-    background: #E76F51;
-    border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 4px; }
-    #conversejs .chatroom .tt-dropdown-menu .tt-suggestion p {
-      color: white;
-      cursor: pointer;
-      font-size: 11px; }
-    #conversejs .chatroom .tt-dropdown-menu .tt-suggestion .tt-highlight {
-      background-color: #D24E2B; }
-    #conversejs .chatroom .tt-dropdown-menu .tt-suggestion p:hover {
-      background-color: #FF977C; }
+  #conversejs .chatroom .room-invite {
+    margin: 0.3em; }
+    #conversejs .chatroom .room-invite .invited-contact {
+      margin: -1px 0 0 -1px;
+      width: 100px;
+      border: 1px solid #999; }
+      #conversejs .chatroom .room-invite .invited-contact.tt-input {
+        width: 100%;
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; }
+        #conversejs .chatroom .room-invite .invited-contact.tt-input:focus {
+          border-color: #E76F51; }
+      #conversejs .chatroom .room-invite .invited-contact.tt-hint {
+        color: transparent;
+        background-color: white; }
+    #conversejs .chatroom .room-invite .tt-dropdown-menu {
+      width: 96%;
+      max-height: 250px;
+      background: #E76F51;
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
+      overflow-y: auto; }
+      #conversejs .chatroom .room-invite .tt-dropdown-menu .tt-suggestion p {
+        color: white;
+        cursor: pointer;
+        font-size: 11px;
+        text-overflow: ellipsis;
+        overflow-x: hidden; }
+        #conversejs .chatroom .room-invite .tt-dropdown-menu .tt-suggestion p:hover {
+          background-color: #FF977C; }
+      #conversejs .chatroom .room-invite .tt-dropdown-menu .tt-suggestion .tt-highlight {
+        background-color: #D24E2B; }
 
 #conversejs #minimized-chats {
   border-top-left-radius: 4px;

mockup/chatroom.html

@@ -84,8 +84,9 @@
                         </fieldset>
                         <fieldset>
                             <input type="submit" class="pure-button button-primary" value="Save">
-                            <input type="button" class="pure-button button-cancel" value="Cancel"></form>
+                            <input type="button" class="pure-button button-cancel" value="Cancel">
                         </fieldset>
+                    </form>
                 </div>
             </div>
         </div>

sass/_chatrooms.scss

@@ -96,45 +96,45 @@
             border-bottom-right-radius: 0;
         }
 
-        .invited-contact {
-            margin: -1px 0 0 -1px;
-            width: 100px;
-            border: 1px solid #999;
-            &.tt-input {
-                margin: 1px;
-                width: 97px;
-                width: calc(100% - 2px);
-                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center;
-                &:focus {
-                    border-color: $chatroom-head-color;
-                }
-            }
-            &.tt-hint {
-                color: transparent;
-            }
-        }
-        .tt-dropdown-menu {
-            margin: 0 1px 0 1px;
-            width: 96px;
-            max-height: 250px;
-            overflow-x: hidden;
-            overflow-y: auto;
-            text-overflow: ellipsis;
-            background: $chatroom-head-color;
-            border-bottom-right-radius: $chatbox-border-radius;
-            border-bottom-left-radius: $chatbox-border-radius;
-
-            .tt-suggestion {
-                p {
-                    color: white;
-                    cursor: pointer;
-                    font-size: 11px;
+        .room-invite {
+            margin: 0.3em;
+            .invited-contact {
+                margin: -1px 0 0 -1px;
+                width: 100px;
+                border: 1px solid #999;
+                &.tt-input {
+                    width: 100%;
+                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center;
+                    &:focus {
+                        border-color: $chatroom-head-color;
+                    }
                 }
-                .tt-highlight {
-                    background-color: #D24E2B;
+                &.tt-hint {
+                    color: transparent;
+                    background-color: white;
                 }
-                p:hover {
-                    background-color: #FF977C;
+            }
+            .tt-dropdown-menu {
+                width: 96%;
+                max-height: 250px;
+                background: $chatroom-head-color;
+                border-bottom-right-radius: $chatbox-border-radius;
+                border-bottom-left-radius: $chatbox-border-radius;
+                overflow-y: auto;
+                .tt-suggestion {
+                    p {
+                        color: white;
+                        cursor: pointer;
+                        font-size: 11px;
+                        text-overflow: ellipsis;
+                        overflow-x: hidden;
+                        &:hover {
+                            background-color: #FF977C;
+                        }
+                    }
+                    .tt-highlight {
+                        background-color: #D24E2B;
+                    }
                 }
             }
         }

sass/_core.scss

@@ -164,6 +164,7 @@
             input[type=submit] {
                 padding-left: 1em;
                 padding-right: 1em;
+                margin-right: 1em;
             }
             input.error {
                 border: 1px solid red;
@@ -172,7 +173,7 @@
             .form-help {
                 color: gray;
                 font-size: 85%;
-                padding-top: 5px;
+                padding-top: 0.5em;
                 &:hover {
                     color: $text-color;
                 }

src/templates/chatroom_form.html

@@ -1,5 +1,7 @@
 <div class="chatroom-form-container">
-    <form class="pure-form converse-form chatroom-form">
-        <span class="spinner centered"/>
+    <form class="pure-form pure-form-stacked converse-form chatroom-form">
+        <fieldset>
+            <span class="spinner centered"/>
+        </fieldset>
     </form>
 </div>