windowed UI take 2
Iris Lightshard nilix@nilfm.cc
3 files changed,
97 insertions(+),
45 deletions(-)
M
static/admin.js
→
static/admin.js
@@ -135,19 +135,12 @@
if (adminUsrInput && adminPassInput) { adminToken = await getAdminToken(adminUsrInput.value, adminPassInput.value); if (adminToken) { - adminWrapper.style.display="block"; + adminWrapper.style.display="inline"; getTables(); adminZone.style.display = "block"; } else { setErr("Incorrect credentials"); } - } -} - -function showAdminModal(show) { - const modal = document.getElementById("admin_modal") - if (modal) { - modal.style.display = show ? "block" : "none"; } }
M
static/index.html
→
static/index.html
@@ -7,23 +7,25 @@ <meta name="viewport" content="width=device-width" />
<link href="./style.css" rel="stylesheet" /> </head> <body> + <div id="map"></div> <div id="errWrapper" style='display:none'><button id="closeErr" onclick="closeErr()">x</button><div id="errDiv"></div></div> <nav> + <section id="user_section"> + <details class="ui_win"><summary>identity</summary> <label for="name_entry">username</label> <input id="name_entry" onblur="saveName()"> - <button id="goto_table" onclick="showAdminModal(false);showTableModal(true)">Join Table</button> - <button id="admin_login" onclick="showTableModal(false);showAdminModal(true)">Admin Login</button> - </nav> - <form id="table_modal" onsubmit="return false" style="display:none;"> + </details><br/> + + <details class="ui_win"><summary>goto</summary> + <form id="table_modal" onsubmit="return false"> <label>table.name<br><input id="input_table_name"></label><br> <label>table.passcode<br><input id="input_table_pass"></label><br> - <button type="submit" id="table_join" onclick="dial();showTableModal(false);">Join</button> + <button type="submit" id="table_join" onclick="dial();">Join</button> </form> - <form id="admin_modal" onsubmit="return false" style="display:none;"> - <label>pass<input type="password" id="input_admin_pass"></label> - <button type="submit" id="admin_login" onclick="doLogin();showAdminModal(false)">login</button> - </form> - <main id="tabletop" style="display:none;"> + </details><br/> + + + <details class="ui_win"><summary>dice</summary> <select id="num_dice"> <option>1</option> <option>2</option>@@ -57,10 +59,19 @@ <option>20</option>
</select> <input id="dice_note"><button id="dice_submit" onclick="rollDice()">Roll</button> <div id="dice_log"></div> - <div id="aux"></div> - <div id="map"></div> - </main> - <details id="adminWrapper" style="display:none;"><summary>admin</summary> + </details><br/> + + <details class="ui_win"><summary>status</summary><pre id="aux"></pre></details><br/> + </section> + <section id="admin_section"> + <details class="ui_win admin_win"><summary>admin</summary> + <form id="admin_modal" onsubmit="return false"> + <label>pass<input type="password" id="input_admin_pass"></label> + <button type="submit" id="admin_login" onclick="doLogin();">login</button> + </form> + </details> + <br/> + <details id="adminWrapper" class="ui_win admin_win" style="display:none;"><summary>table</summary> <button onclick="setTableCreateFormVisible(true)">New Table</button> <form onsubmit="return false" id="createTableForm" style="display:none;"> <input id="newTableName"/>@@ -70,7 +81,9 @@ <button onclick="setTableCreateFormVisible(false)">Cancel</button>
</form> </div> <div id="adminZone"></div> - </details> + </details><br/> + </section> +</nav> </body> <script src="./util.js" type="text/javascript"></script> <script src="./socket.js" type="text/javascript"></script>
M
static/style.css
→
static/style.css
@@ -11,12 +11,6 @@ background: url('./bg.png');
background-repeat: repeat; } -nav, #table_modal, #admin_modal { - color: #fff; - background: #000; - padding: 0.5em; -} - label { font-size: 80%; }@@ -30,6 +24,10 @@ }
input:active, input:focus, select:active, select:focus { border: solid 1px cyan; +} + +ul { + margin: 2em; } button {@@ -80,23 +78,71 @@ border-bottom: solid 1px gray;
} #aux { - display: block; - background: #fff; - color: #000; - height: auto; - width: auto; - border: solid 1px dimgray; + +} + +pre { + font-size: 125%; + background: #222; + color: #93a1a1; +} + +#auxMsgZone { + width: 100%; + color: #fff; + background: #002b36; + padding:0.2em; } #adminWrapper { - position: fixed; - top: 2em; - right: 0; - padding: 1em; - border: solid 1px #fff; - background: rgba(0,0,0,0.8); - color: #fff; - box-sizing: border-box; - max-height: calc(100vh - 4em); - overflow-y: auto; +} + +.ui_win { + text-align: left; + position: relative; + margin: 2em; + background: rgba(0,0,0,0.7); + color: #eee; + display: inline; + height: min-content; + z-index:1; + padding: 0.25em; + border: 2px solid dimgray;; +} + +.ui_win:hover, .ui_win:active { + border: 2px solid #1f9b92; +} + +.ui_win * { + margin: 0.25em; +} + +.ui_win a { + color: #1f9b92; +} + +.ui_win a:hover, ui_win a:active { + color: #ff; +} + +.admin_section { + text-align: right; +} + +.admin_win { + float:right; +} + + +#map { + position:fixed; + width:100%; + height: 100%; + z-index:0; +} + +nav { + display: grid; + grid-template-columns: 1fr 1fr; }