projects / lantea.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: edc2ffa)
switch track and settings menus to drawers
authorRobert Kaiser <kairo@kairo.at>
Sat, 6 Jun 2015 22:45:51 +0000 (00:45 +0200)
committerRobert Kaiser <kairo@kairo.at>
Sat, 6 Jun 2015 22:45:51 +0000 (00:45 +0200)
TODO patch | blob | blame | history
index.html patch | blob | blame | history
js/ui.js patch | blob | blame | history
manifest.appcache patch | blob | blame | history
style/lantea.css patch | blob | blame | history

diff --git a/TODO b/TODO
index ac7b380adc1d357665a333dc03ad2aeb6149ec14..201e3a455a7573f55e459ed068bfa8fbca9c7816 100644 (file)
--- 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 1954af329d6f7d33b16fd3febe65180e487c0af3..45912dbccd28d7fe0e17e3530d1423d20c495873 100644 (file)
--- a/index.html
+++ b/index.html
@@ -18,10 +18,9 @@
 <body id="body">
 <h1>Lantea Map</h1>
 
-<div id="menuArea" class="overlayArea">
-<image src="style/track.svg" id="trackButton" value="Track"
-       onclick="toggleTrackArea();"><br/>
-<fieldset id="trackArea"><legend>Track</legend>
+<div id="trackArea" class="menuDrawer hidden">
+<h2 onclick="toggleTrackArea();">
+<image src="style/track.svg" alt=""> Track</h2>
 <p id="trackData"><span id="trackLength">0</span> km,
 <span id="trackDuration">0</span> min</p>
 <input type="button" id="saveTrackButton" value="Save"
@@ -38,10 +37,11 @@
 <input type="checkbox" id="centerCheckbox"
        onchange="setCentering(this);">
 <label for="centerCheckbox">Center Map</label><br/>
-</fieldset>
-<image src="style/settings.svg" id="settingsButton" alt="Settings"
-       onclick="toggleSettings();"><br/>
-<fieldset id="settingsArea"><legend>Settings</legend>
+</div>
+
+<div id="settingsArea" class="menuDrawer hidden">
+<h2 onclick="toggleSettings();">
+<image src="style/settings.svg" alt=""> Settings</h2>
 <label for="mapSelector">Map style:</label>
 <select id="mapSelector" onchange="setMapStyle();">
 <!-- option value="osm_mapnik">OpenStreetMap (Mapnik)</option -->
@@ -58,7 +58,13 @@
 <input type="password" id="uploadPwd" maxlength="255"
        onchange="setUploadField(this);">
 </div>
-</fieldset>
+</div>
+
+<div id="menuArea" class="overlayArea">
+<image src="style/track.svg" id="trackButton" value="Track"
+       onclick="toggleTrackArea();"><br/>
+<image src="style/settings.svg" id="settingsButton" alt="Settings"
+       onclick="toggleSettings();"><br/>
 </div>
 
 <div id="zoomArea" class="overlayArea">
diff --git a/js/ui.js b/js/ui.js
index 5e4869c5d2862128f7a1cbd12bd4985d69e5333e..fbc8f3d289c01cbdc6354bc89e16422bdaa4806b 100644 (file)
--- 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 1a54413e2ca643fa810aeb1483932496b6790a6d..b2f611408c6f9125148c225d91877658a077eda7 100644 (file)
--- 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 051088cd5381c0ba4cd45acfc8390c42fedf5f32..19b8af0338f1f34dd8e6cdbf3f85ec6d1148a261 100644 (file)
--- 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 {
Lantea Maps web app - display maps and record (GPS) tracks