Mobile phone interface rework.

* Redesign responsive layout.

* Pan & Zoom with touch (and scroll wheel).

Scale main area using transforms and scroll offsets.

Toggle zoom button scales map on large screens, full main zoom
on small screens.

* Automated standard toolbar buttons (remove from play.html files).

1 files changed, 42 insertions, 3 deletions

diff --git a/NOTES.md b/NOTES.md
index b9dd646..e5771ff 100644
--- a/NOTES.md
+++ b/NOTES.md
@@ -1,18 +1,57 @@
-Icons are sourced from various places:
+# Icons are sourced from various places:
 
 * https://game-icons.net/
 * https://commons.wikimedia.org/wiki/Main_Page
 
-Fonts:
+# Fonts:
 
 * https://github.com/adobe-fonts/source-sans
 * https://github.com/adobe-fonts/source-serif
 * https://www.google.com/get/noto/
 
-Image processing software:
+# Image processing software:
 
 * https://github.com/google/guetzli/
 * https://github.com/mozilla/mozjpeg
 * https://github.com/svg/svgo
 * http://optipng.sourceforge.net/
 * http://potrace.sourceforge.net/
+
+# Mobile responsive design:
+
+* Image resolutions
+
+	Map is 75dpi unless very small.
+	Counters are same dpi as map.
+
+	Cards are 100dpi if text is small.
+	Cards are 75dpi if usually placed on map.
+	If rarely placed on map, keep at 100dpi and scale(0.75).
+
+	@media (min-resolution: 97dpi)
+		Use 2x resolution map and card
+
+	Counters always use @2x resolution if shift-zooming is available.
+
+* Touch screen
+
+	@media (pointer: coarse)
+		increase tiny UI element sizes (for example the replay buttons)
+
+* Screen size thresholds for layout triggers:
+
+	@media (max-width: 400)
+		one-column tabbed mode
+
+	@media (max-width: 800)
+		mobile phone layout
+		two-column tabbed mode (notepad and chat window fill screen)
+		horizontally scroll basic content; use full map width for hands etc
+
+	@media (max-height: 600)
+		mobile phone landscape layout
+		start hiding player names behind tap/hover
+		hide or reduce turn info, role info, and current card
+
+	@media (max-height: 800)
+		small laptop screen