From 1d91858db25517ec0c63f8417a72b8f918b35842 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sun, 22 May 2022 19:05:44 +0200 Subject: Responsive layout for mobile screens. New battle dialog for block games without tables. --- public/common/columbia.css | 105 ++++++++++++++++++++++++--------------------- public/common/play.css | 80 ++++++++++++++++++++++++++++++---- public/common/play.js | 2 +- 3 files changed, 129 insertions(+), 58 deletions(-) diff --git a/public/common/columbia.css b/public/common/columbia.css index 1a646b6..78bb61c 100644 --- a/public/common/columbia.css +++ b/public/common/columbia.css @@ -2,56 +2,55 @@ #battle { position: absolute; - left: 100px; - top: 100px; + min-width: 450px; + left: 10px; + top: 55px; z-index: 50; - border-collapse: collapse; - border: 1px solid black; - background-color: white; box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); - visibility: hidden; -} - -#battle.show { - visibility: visible; -} - -#battle th { - padding: 0; + background-color: white; border: 1px solid black; + display: none; } -#battle td { - padding: 0; - border: 1px solid black; - vertical-align: top; +#battle.show { + display: block; } #battle_header { - font-weight: bold; - height: 2em; - line-height: 2em; + padding: 2px 8px; + line-height: 24px; + min-height: 24px; font-weight: bold; user-select: none; cursor: move; + text-align: center; + border-bottom: 1px solid black; + overflow: hidden; } #battle_message { - font-weight: normal; - height: 2em; - line-height: 2em; - padding: 0 8px; + padding: 2px 8px; + line-height: 24px; + min-height: 24px; + text-align: center; + border-top: 1px solid black; } -#FA, #FB, #FC, #FD, #FF, #FR, #EA, #EB, #EC, #ED, #EF, #ER { +#FC, #FF, #FR, #EC, #EF, #ER { display: flex; flex-wrap: wrap; justify-content: center; - margin: 10px; + padding: 15px; + gap: 5px +} + +#FR, #ER { + padding: 10px 15px; + min-height: 10px; } -.battle_separator { - height: 15px; +#FR .battle_menu_list, #ER .battle_menu_list { + display: none; } .battle_menu .block { @@ -63,24 +62,19 @@ } .battle_menu .action { + display: none; width: 20px; height: 20px; border-radius: 5px; padding: 3px; - display: none; } .battle_menu_list { + display: flex; + flex-wrap: wrap; + justify-content: center; margin-top: 5px; min-height: 26px; - width: 80px; - text-align: center; - font-size: 1px; - line-height: 1px; -} - -.battle_reserves .battle_menu_list { - display: none; } .battle_menu .action:hover { background-color: red; } @@ -88,13 +82,28 @@ .battle_menu .action.withdraw:hover { background-color: #eee; } .battle_menu .action.pass:hover { background-color: gray; } -.battle_menu.fire .action.fire { display: inline; } -.battle_menu.retreat .action.retreat { display: inline; } -.battle_menu.pass .action.pass { display: inline; } -.battle_menu.charge .action.charge { display: inline; } -.battle_menu.treachery .action.treachery { display: inline; } -.battle_menu.harry .action.harry { display: inline; } -.battle_menu.withdraw .action.withdraw { display: inline; } -.battle_menu.storm .action.storm { display: inline; } -.battle_menu.sally .action.sally { display: inline; } -.battle_menu.hit .action.hit { display: inline; } +.battle_menu.fire .action.fire { display: block; } +.battle_menu.retreat .action.retreat { display: block; } +.battle_menu.pass .action.pass { display: block; } +.battle_menu.charge .action.charge { display: block; } +.battle_menu.treachery .action.treachery { display: block; } +.battle_menu.harry .action.harry { display: block; } +.battle_menu.withdraw .action.withdraw { display: block; } +.battle_menu.storm .action.storm { display: block; } +.battle_menu.sally .action.sally { display: block; } +.battle_menu.hit .action.hit { display: block; } + +/* MOBILE PHONE LAYOUT */ + +@media (max-width: 500px) { + #battle { + position: static; + grid-column: 1; + grid-row: 3; + min-width: auto !important; + box-shadow: none; + border-top: none; + border-left: none; + border-right: none; + } +} diff --git a/public/common/play.css b/public/common/play.css index 61f1aa3..c19ea6c 100644 --- a/public/common/play.css +++ b/public/common/play.css @@ -35,7 +35,6 @@ button { box-sizing: border-box; font-size: 16px; height: 28px; - margin: 0; padding: 1px 12px 1px 12px; background-color: gainsboro; border: 2px solid; @@ -74,9 +73,16 @@ header { grid-column: 1/3; grid-row: 1; display: flex; + flex-wrap: wrap; align-items: center; border-bottom: 1px solid black; background-color: gainsboro; + padding-right: 10px; +} + +#toolbar { + display: flex; + flex-wrap: wrap; } header.disconnected { @@ -137,7 +143,7 @@ aside { } footer { - position:absolute; + position: fixed; z-index: 500; bottom: 0; background-color: white; @@ -209,24 +215,31 @@ footer { filter: invert(100%); } -header button { - margin: 0 10px; +header #actions { + display: flex; + flex-wrap: wrap; + justify-content: end; + gap: 10px; + padding-left: 10px; + margin: 5px 0; } header .replay { - margin: 0 10px; display: flex; + flex-wrap: wrap; + justify-content: end; + padding-left: 10px; + margin: 5px 0; } header .replay button { - margin: 0; + margin-right: 0; } #prompt { - margin: 0 20px; + padding-left: 20px; font-size: 18px; - flex: 1 1 0; - width: 0; + flex: 1 1 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -350,3 +363,52 @@ header .replay button { padding: 5px; font-size: 1rem; } + +/* MOBILE PHONE LAYOUT */ + +@media (max-width: 500px) { + body { + width: 100%; + height: auto; + grid-template-columns: 1fr; + grid-template-rows: min-content; + overflow-x: clip; + overflow-y: auto; + } + footer { width: 100%; background-color: rgba(255,255,255,0.5) } + header { display: block; } + #prompt { padding-left: 10px; display: block; white-space: normal; } + + #chat_window { + position: static; + grid-column: 1; + grid-row: 2; + display: none; + width: auto; + box-shadow: none; + border-top: none; + } + #chat_window.show { + display: block; + } + + /* game specific dialogs in rows 3-9 */ + + main { + grid-column: 1; + grid-row: 10; + } + aside { + grid-column: 1; + grid-row: 11; + width: auto !important; + border-left: none; + border-top: 1px solid black; + } + #log { + height: 50vh; + } + #replay_button, #rematch_button { + display: inline-block; + } +} diff --git a/public/common/play.js b/public/common/play.js index a106bcd..d8e4ee1 100644 --- a/public/common/play.js +++ b/public/common/play.js @@ -144,7 +144,7 @@ function init_chat() { chat_button.className = "icon_button"; chat_button.innerHTML = ''; chat_button.addEventListener("click", toggle_chat); - document.querySelector("header").insertBefore(chat_button, document.getElementById("prompt")); + document.querySelector("#toolbar").appendChild(chat_button); chat = { is_visible: false, -- cgit v1.2.3