Commit 923d3ba9 authored by Adrien Dorsaz's avatar Adrien Dorsaz

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

parent 8b01ab28
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;
}
......
......@@ -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">
......
......@@ -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) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment