From 123b314299fa2aca307823c3ccec6139a4282e74 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sun, 7 Jun 2015 00:45:51 +0200 Subject: [PATCH] switch track and settings menus to drawers --- TODO | 2 +- index.html | 24 +++++++++++++--------- js/ui.js | 14 ++++++------- manifest.appcache | 2 +- style/lantea.css | 51 +++++++++++++++++++++++++++++++++++++---------- 5 files changed, 65 insertions(+), 28 deletions(-) diff --git a/TODO b/TODO index ac7b380..201e3a4 100644 --- a/TODO +++ b/TODO @@ -8,7 +8,7 @@ Required: *** Feature to download all maps up to a certain resolution for some area around the current point * Improve texture cleaning algorithm * UI improvements (non-map): -** Change general/track settings to drawer style +** Override native style of buttons etc. in drawers with a more app-y look ** Show a notification when we are loading tiles or saved data ** Display movement speed ** Display location accuracy diff --git a/index.html b/index.html index 1954af3..45912db 100644 --- a/index.html +++ b/index.html @@ -18,10 +18,9 @@

Lantea Map

- + + - + + +
diff --git a/js/ui.js b/js/ui.js index 5e4869c..fbc8f3d 100644 --- a/js/ui.js +++ b/js/ui.js @@ -144,7 +144,7 @@ function showUI() { function maybeHideUI() { gUIHideCountdown--; - if (document.getElementById("trackArea").style.display == "block") { + if (!document.getElementById("trackArea").classList.contains("hidden")) { // If track area is visible, update track data. document.getElementById("trackLength").textContent = calcTrackLength().toFixed(1); document.getElementById("trackDuration").textContent = Math.round(calcTrackDuration()/60); @@ -162,23 +162,23 @@ function maybeHideUI() { function toggleTrackArea() { var fs = document.getElementById("trackArea"); - if (fs.style.display != "block") { - fs.style.display = "block"; + if (fs.classList.contains("hidden")) { + fs.classList.remove("hidden"); showUI(); } else { - fs.style.display = "none"; + fs.classList.add("hidden"); } } function toggleSettings() { var fs = document.getElementById("settingsArea"); - if (fs.style.display != "block") { - fs.style.display = "block"; + if (fs.classList.contains("hidden")) { + fs.classList.remove("hidden"); showUI(); } else { - fs.style.display = "none"; + fs.classList.add("hidden"); } } diff --git a/manifest.appcache b/manifest.appcache index 1a54413..b2f6114 100644 --- a/manifest.appcache +++ b/manifest.appcache @@ -1,6 +1,6 @@ CACHE MANIFEST -# 2015-05-01 +# 2015-06-06 index.html manifest.webapp js/map.js diff --git a/style/lantea.css b/style/lantea.css index 051088c..19b8af0 100644 --- a/style/lantea.css +++ b/style/lantea.css @@ -27,7 +27,8 @@ h1 { } #dialogArea:-moz-system-metric(touch-enabled), -.overlayArea:-moz-system-metric(touch-enabled) { +.overlayArea:-moz-system-metric(touch-enabled), +.menuDrawer:-moz-system-metric(touch-enabled) { font-size: 3mozmm; } @@ -35,7 +36,9 @@ h1 { #dialogArea input[type="text"]:-moz-system-metric(touch-enabled), #dialogArea select:-moz-system-metric(touch-enabled), .overlayArea input[type="button"]:-moz-system-metric(touch-enabled), -.overlayArea select:-moz-system-metric(touch-enabled) { +.overlayArea select:-moz-system-metric(touch-enabled), +.menuDrawer input[type="button"]:-moz-system-metric(touch-enabled), +.menuDrawer select:-moz-system-metric(touch-enabled) { font-size: 3mozmm; } @@ -105,19 +108,47 @@ h1 { margin: 2px 0; } -#settingsArea, -#trackArea { - display: none; - background-color: rgba(255, 255, 255, .8); +.menuDrawer { + position: absolute; + top: 0; + bottom: 0; + left: calc(-40ch - 1ch); /* account for padding */ + width: 40ch; + background-color: rgba(15, 15, 15, .9); + color: #CCCCCC; border: 0; - border-radius: 5px; + padding: 0 .5ch; /* account for legend */ + margin: 0; + z-index: 10; + transition-property: left; + transition-duration: 1s; + transition-timing-function: ease; } -#settingsArea > legend, -#trackArea > legend { - display: none; +.menuDrawer:not(.hidden) { + left: 0; +} + +@media screen and (max-width: 330px) { + .menuDrawer { + left: calc(-300px - 1ch); /* account for padding */ + width: 300px; + } +} + +.menuDrawer > h2 { + font-size: 1.2em; + font-weight: bold; + margin: .5em 0; background-color: rgba(255, 255, 255, .8); + color: #404040; border-radius: 3px; + padding: 2px; +} + +.menuDrawer > h2 > img { + vertical-align: text-top; + height: 1.2em; } #trackData { -- 2.43.0