summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--public/common/client.css113
-rw-r--r--public/common/client.js46
-rw-r--r--public/common/columbia.css4
-rw-r--r--public/style.css3
-rw-r--r--views/head.pug1
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", "<div style='height:1px'></div>")
+
+document.querySelector("header").insertAdjacentHTML("beforeend", "<div id='actions'>")
+document.querySelector("header").insertAdjacentHTML("beforeend", "<div id='prompt'>")
+
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")