From 4d0d67cefff209d82fad25ce8a44ad310b986ed0 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Tue, 17 Oct 2023 18:26:13 +0200 Subject: 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). --- NOTES.md | 45 ++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 42 insertions(+), 3 deletions(-) (limited to 'NOTES.md') 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 -- cgit v1.2.3