From 8e2271a306f77f253774d5fec6e254be1a3dd137 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Fri, 20 Oct 2023 18:59:25 +0200 Subject: More mobile layout improvements. --- public/common/client.css | 113 +++++++++++++++++++++++++-------------------- public/common/client.js | 46 ++++++++++++++---- public/common/columbia.css | 4 ++ public/style.css | 3 +- views/head.pug | 1 + 5 files changed, 106 insertions(+), 61 deletions(-) diff --git a/public/common/client.css b/public/common/client.css index e24ef6d..afd1024 100644 --- a/public/common/client.css +++ b/public/common/client.css @@ -1,16 +1,21 @@ /* COMMON GRID LAYOUT */ :root { - --font-normal: "Source Serif", "Georgia", "Noto Emoji", "Dingbats", serif; - --font-small: "Source Serif SmText", "Georgia", "Noto Emoji", "Dingbats", serif; - --font-widget: "Source Sans", "Verdana", "Noto Emoji", "Dingbats", sans-serif; + --font-normal: "Source Serif", "Circled Numbers", "Georgia", "Noto Emoji", "Dingbats", serif; + --font-small: "Source Serif SmText", "Circled Numbers", "Georgia", "Noto Emoji", "Dingbats", serif; + --font-widget: "Source Sans", "Circled Numbers", "Verdana", "Noto Emoji", "Dingbats", sans-serif; } html { image-rendering: -webkit-optimize-contrast; /* try to fix chromium's terrible image rescaling */ + image-rendering: high-quality; -webkit-tap-highlight-color: transparent; /* disable blue flashes when tapping on chrome mobile */ } +summary::-webkit-details-marker { + display: none; +} + html, button, input, select, textarea { font-family: var(--font-widget); font-size: 16px; @@ -43,30 +48,28 @@ body.Observer .resign { /* BUTTON */ button { - box-sizing: border-box; - font-size: 16px; - height: 28px; - padding: 1px 12px 1px 12px; - background-color: gainsboro; - border: 2px solid; - outline: 1px solid black; + flex: 0 0 auto; white-space: nowrap; - color: black; -} -button:disabled { - color: gray; - border-color: gainsboro; - outline-color: gray; -} + padding: 1px 10px; + vertical-align: middle; + border: 2px solid; -button:enabled { + background-color: gainsboro; border-color: white darkgray darkgray white; + color: black; + outline: 1px solid black; } button:enabled:active:hover { border-color: darkgray white white darkgray; - padding: 2px 11px 0px 13px; + padding: 2px 9px 0px 11px; +} + +button:disabled { + color: gray; + border-color: gainsboro; + outline-color: gray; } /* MAIN GRID */ @@ -97,6 +100,7 @@ body { } main { + user-select: none; position: relative; grid-column: 1; grid-row: 2/4; @@ -158,13 +162,9 @@ footer { /* HEADER */ header { + user-select: none; grid-column: 1/3; grid-row: 1; - display: flex; - flex-wrap: wrap; - justify-content: right; - align-items: center; - gap: 0 8px; border-bottom: 1px solid black; background-color: gainsboro; } @@ -191,44 +191,61 @@ header.replay { } #prompt { - flex: 1 1 300px; - padding-left: 4px; + box-sizing: border-box; + min-width: 300px; font-size: 18px; - line-height: 18px; - padding: 4px 0 4px 4px; + line-height: 22px; + text-overflow: ellipsis; white-space: nowrap; overflow: hidden; + + margin-top: 11px; + margin-bottom: 5px; + padding: 0 8px; } #prompt:hover { white-space: normal; } -#actions, #viewpoint_panel { +#toolbar { + float: left; display: flex; - justify-content: end; - align-items: center; + flex-wrap: wrap; } #actions { + user-select: none; + float: right; + min-width: 100px; + + display: flex; + justify-content: end; + align-items: center; flex-wrap: wrap; - align-content: space-between; - padding: 4px 8px; + + min-height: 32px; + padding: 6px 7px; gap: 8px; } -/* TOOLBAR & MENUS */ - -#toolbar { - display: flex; - user-select: none; +@media (pointer: coarse) { + #toolbar { gap: 8px; } + #actions { gap: 12px 8px; } } -details summary::-webkit-details-marker { - display: none; +@media (max-width: 400px) { + #toolbar, #actions { + float: none; + } + #prompt { + margin-top: 0; + } } +/* MENUS AND ICONS */ + details menu { display: block; min-width: 140px; @@ -410,6 +427,11 @@ menu li:hover img { margin: 0 auto; } +#map { + position: relative; + margin: 0 auto; +} + #mapwrap.fit { max-width: 100%; } @@ -601,17 +623,6 @@ menu li:hover img { } } -@media (max-width: 600px) { - header { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: min-content minmax(36px, auto) auto; - } - #toolbar { grid-column: 1; grid-row: 1 } - #actions { grid-column: 1; grid-row: 2 } - #prompt { grid-column: 1; grid-row: 3 } -} - @media (max-width: 400px) { body { grid-template-columns: 1fr; diff --git a/public/common/client.js b/public/common/client.js index 1c0892d..d911ecc 100644 --- a/public/common/client.js +++ b/public/common/client.js @@ -1,5 +1,7 @@ "use strict" +/* global on_update, on_replay, on_log */ + // TODO: hide more functions and globals in anonymous function scope let params = { @@ -715,10 +717,15 @@ function init_replay() { /* MAIN MENU */ +/* avoid margin collapse at bottom of main */ +document.querySelector("main").insertAdjacentHTML("beforeend", "
") + +document.querySelector("header").insertAdjacentHTML("beforeend", "
") +document.querySelector("header").insertAdjacentHTML("beforeend", "
") + add_icon_button(0, "chat_button", "chat-bubble", toggle_chat).classList.add("hide") add_icon_button(0, "zoom_button", "magnifying-glass", () => toggle_zoom()) add_icon_button(0, "log_button", "scroll-quill", toggle_log) -add_icon_button(0, "fullscreen_button", "expand", toggle_fullscreen) function add_main_menu_separator() { let popup = document.querySelector("#toolbar details menu") @@ -770,10 +777,21 @@ for (let node of document.querySelectorAll("#toolbar > details > menu")) { } function toggle_fullscreen() { + // Safari on iPhone doesn't support Fullscreen + if (typeof document.documentElement.requestFullscreen !== "function") + return + if (document.fullscreenElement) document.exitFullscreen() else document.documentElement.requestFullscreen() + + event.preventDefault() +} + +if ("ontouchstart" in window) { + document.querySelector("header").ondblclick = toggle_fullscreen + document.querySelector("main").ondblclick = toggle_fullscreen } /* SNAPSHOT VIEW */ @@ -892,8 +910,13 @@ var update_layout = function () {} const mapwrap = document.getElementById("mapwrap") const map = document.getElementById("map") || e_inner.querySelector("div") - const map_w = mapwrap ? mapwrap.clientWidth : map.clientWidth - const map_h = mapwrap ? mapwrap.clientHeight : map.clientHeight + var map_w = mapwrap ? mapwrap.clientWidth : map.clientWidth + var map_h = mapwrap ? mapwrap.clientHeight : map.clientHeight + + if (e_scroll.dataset.mapHeight) + map_h = Number(e_scroll.dataset.mapHeight) + if (e_scroll.dataset.mapWidth) + map_w = Number(e_scroll.dataset.mapWidth) console.log("INIT MAP", map, map_w, map_h, window.devicePixelRatio) @@ -961,7 +984,7 @@ var update_layout = function () {} } } let win_w = e_scroll.clientWidth - let win_h = e_scroll.clientHeight + let win_h = e_scroll.offsetHeight let min_z = Math.min(MIN_ZOOM, win_w / map_w, win_h / map_h) zoom_to(min_z) } else { @@ -985,23 +1008,28 @@ var update_layout = function () {} mapwrap.style.width = null mapwrap.style.height = null if (mapwrap.classList.contains("fit")) { - let { width: gw, height: gh } = main.getBoundingClientRect() - let { width: ww, height: wh } = mapwrap.getBoundingClientRect() - let { width: cw, height: ch } = map.getBoundingClientRect() - let scale = Math.min(ww / cw, gh / ch) + let cw = map.clientWidth + let ch = map.clientHeight + let scale = Math.min( + main.clientWidth / cw, + main.offsetHeight / ch + ) if (scale < 1) { map.style.transform = "scale(" + scale + ")" mapwrap.style.width = (cw * scale) + "px" mapwrap.style.height = (ch * scale) + "px" } } + update_transform_resize() } } function disable_map_fit() { if (mapwrap && mapwrap.classList.contains("fit")) { mapwrap.classList.remove("fit") - update_map_fit() + map.style.transform = null + mapwrap.style.width = null + mapwrap.style.height = null } } diff --git a/public/common/columbia.css b/public/common/columbia.css index 030e079..36e34af 100644 --- a/public/common/columbia.css +++ b/public/common/columbia.css @@ -12,6 +12,10 @@ display: none; } +#battle .block { + position: static; +} + #battle.show { display: block; } diff --git a/public/style.css b/public/style.css index 15c44ab..4603522 100644 --- a/public/style.css +++ b/public/style.css @@ -94,7 +94,7 @@ input:focus, textarea:focus { outline: 2px solid var(--color-focus); } -select:focus, button:focus { +button:focus, select:focus { box-shadow: 0 0 0 3px var(--color-focus); } @@ -111,6 +111,7 @@ button, select { background-color: gainsboro; border-color: white darkgray darkgray white; + color: var(--color-black); outline: 1px solid var(--color-black); } diff --git a/views/head.pug b/views/head.pug index 8b3f25b..77ab73b 100644 --- a/views/head.pug +++ b/views/head.pug @@ -1,6 +1,7 @@ //- vim:ts=4:sw=4: meta(name="viewport" content="width=device-width,initial-scale=1") +meta(name="theme-color" content="#444") link(rel="icon" type="image/svg+xml" href="/favicon.svg") link(rel="stylesheet" href="/fonts/fonts.css") link(rel="stylesheet" href="/style.css") -- cgit v1.2.3