panel layout: structure panels with header/article/footer and add disconnect button on pubsub panel

src/sidebar/panel.css

-body {
-    padding: 0.5rem 1rem;
-}
-
 div.panel.disabled{
     display: none;
 }
 
 div.panel.enabled{
-    display: block;
+    display: grid;
+    min-height: 100vh;
+    grid-template-rows: [main-start] 2rem [content-start] 1fr [content-end] 3rem [main-end];
+    grid-gap: 1rem;
+    padding: 0.5rem 1rem;
+}
+
+.panel > header {
+    grid-row-start: main-start;
+    grid-row-end: content-start;
+}
+
+
+.panel header h1 {
+    margin: 0;
+}
+
+.panel > article {
+    grid-row-start: content-start;
+    grid-row-end: content-end;
+}
+
+.panel > footer {
+    grid-row-start: content-end;
+    grid-row-end: main-end;
 }
 
 .features {
@@ -25,27 +45,27 @@ div.panel.enabled{
     grid-column: 1;
 }
 
-#firstrunpanel > object {
+#firstrunpanel object {
     width: 100%;
     height: 72vh;
     padding:0;
     margin:0;
 }
 
-#infopanel {
+#infopanel article {
     width: 100%;
     padding: 0.5rem;
     margin:0.5rem auto;
-    vertical-align: middle;
+    vertical-align: top;
     border: 1px #0670cc solid;
     border-radius: 0.5rem;
 }
 
-#errorpanel {
+#errorpanel article {
     width: 100%;
     padding: 0.5rem;
     margin:0.5rem auto;
-    vertical-align: middle;
+    vertical-align: top;
     border: 1px red solid;
     border-radius: 0.5rem;
 }

src/sidebar/panel.html

@@ -17,49 +17,79 @@
         <div id="pubsubpanel" class="panel disabled"></div>
 
         <script id="firstrunpanel-tmpl" type="x-tmpl-mustache">
-            <h1>{{first-run-welcome}}</h1>
-            <p>{{first-run-configure}}</p>
-            <object
-                data="../options/options.html">
-            </object>
+            <header>
+                <h1>{{first-run-welcome}}</h1>
+            </header>
+
+            <article>
+                <p>{{first-run-configure}}</p>
+                <object
+                    data="../options/options.html">
+                </object>
+            </article>
+
+            <footer>
+            </footer>
         </script>
 
         <script id="connectpanel-tmpl" type="x-tmpl-mustache">
-            <p>{{disconnected-text}}</p>
-            <p>
-                <button
-                    class="connectClient browser-style">
-                    {{connect-back-button}}
-                </button>
-            </p>
+            <header>
+            </header>
+
+            <article>
+                <p>{{disconnected-text}}</p>
+                <p>
+                    <button
+                        class="connectClient browser-style">
+                        {{connect-back-button}}
+                    </button>
+                </p>
+            </article>
+
+            <footer>
+            </footer>
         </script>
 
         <script id="pubsubpanel-tmpl" type="x-tmpl-mustache">
-            <h1>{{pubsub-title}}</h1>
-            <form
-                id='explore'
-                class="browser-style">
-
-                <label
-                    class="browser-style-label"
-                    for="exploreServer">
-                    {{pubsub-explore-server}}
-                </label>
-
-                <input
-                    id="exploreServer"
-                    type="text"
-                    placeholder="{{pubsub-explore-placeholder}}">
-                </input>
+            <header>
+                <h1>{{pubsub-title}}</h1>
+            </header>
 
+            <article>
+                <p>
+                    <form
+                        id='explore'
+                        class="browser-style">
+
+                        <label
+                            class="browser-style-label"
+                            for="exploreServer">
+                            {{pubsub-explore-server}}
+                        </label>
+
+                        <input
+                            id="exploreServer"
+                            type="text"
+                            placeholder="{{pubsub-explore-placeholder}}">
+                        </input>
+
+                        <button
+                            type="send"
+                            class="browser-style">
+                            {{pubsub-explore-button}}
+                        </button>
+                    </form>
+                </p>
+
+                <div id="xmppNet"></div>
+            </article>
+
+            <footer>
                 <button
-                    type="send"
-                    class="browser-style">
-                    {{pubsub-explore-button}}
+                    class="disconnectClient browser-style" >
+                    {{disconnect-label}}
                 </button>
-            </form>
-
-            <div id="xmppNet"></div>
+            </footer>
         </script>
 
         <script id="xmppNet-tmpl" type="x-tmpl-mustache">

src/sidebar/panel.js

@@ -31,14 +31,14 @@ function displayConnect(response) {
 }
 
 function clientConnected(response) {
-    panel['info'].className = 'panel disabled'
-    panel['firstrun'].className = 'panel disabled'
-    panel['connect'].className = 'panel disabled'
+    panel['info'].className = 'panel disabled';
+    panel['firstrun'].className = 'panel disabled';
+    panel['connect'].className = 'panel disabled';
     panel['pubsub'].className = 'panel disabled';
 
     if (response.step == 'initialized') {
         panel['info'].className = 'panel enabled';
-        panel['info'].innerHTML = 'Client initiated connection with server. Waiting for authentication…'
+        panel['info'].innerHTML = Mustache.render('<header><h1>Information</h1><article>Client initiated connection with server. Waiting for authentication…</article>', {});
         checkConnection();
     }
     else if (response.connected == true) {