make drawers work again on small screens, show a warning when indexedDB is not loading

diff --git a/index.html b/index.html
index c01c0ac47d31213254e880b0b8208e95a5589e8a..092d7c05709ee53a96ece2f48a1cd215b6ed7cc9 100644 (file)
--- a/index.html
+++ b/index.html
@@ -148,6 +148,10 @@ upload from multiple devices.</p>
 <div id="noGLwarning">
   Unable to initialize WebGL. You need a browser that supports it.
 </div>
+<div id="DBError">
+  Unable to open indexedDB database in your browser. Please make sure you have
+  not disabled access to in-browser storage.
+</div>
 <div id="firstRunIntro">
 <p class="dialogTitle">Welcome to Lantea Maps!</p>
 <p>This web app lets you record GPS tracks of your journeys, which you can

diff --git a/js/ui.js b/js/ui.js
index 92dd488e051e1c185707ccca347a9c8a621ea7bd..0c8af9aeebe0f22c290ad24ae4dc98511c597041 100644 (file)
--- a/js/ui.js
+++ b/js/ui.js
@@ -239,11 +239,15 @@ function initDB(aEvent) {
   request.onerror = function(event) {
     // Errors can be handled here. Error codes explain in:
     // https://developer.mozilla.org/en/IndexedDB/IDBDatabaseException#Constants
-    if (gDebug)
-      console.log("error opening mainDB: " + event.target.errorCode);
+    console.log("error opening mainDB: " + event.target.error);
+    showDBErrorDialog();
+    if (gDebug) {
+      console.log("error code: " + event.target.error.code +
+                  " - name: " + event.target.error.name);
+    }
   };
   request.onsuccess = function(event) {
-    mainDB = request.result;
+    mainDB = event.target.result;
     var throwEv = new CustomEvent("dbinit-done");
     gAction.dispatchEvent(throwEv);
   };
@@ -382,6 +386,16 @@ function showGLWarningDialog() {
   dia.classList.remove("hidden");
 }
 
+function showDBErrorDialog() {
+  var dia = document.getElementById("dialogArea");
+  var areas = dia.children;
+  for (var i = 0; i <= areas.length - 1; i++) {
+    areas[i].style.display = "none";
+  }
+  document.getElementById("DBError").style.display = "block";
+  dia.classList.remove("hidden");
+}
+
 function showFirstRunDialog() {
   var dia = document.getElementById("dialogArea");
   var areas = dia.children;

diff --git a/manifest.appcache b/manifest.appcache
index 8cbeac3cc4f61ec747259277e628c29b71f8f68a..e4fd815de1314473683555191f5383533d3bd8ec 100644 (file)
--- a/manifest.appcache
+++ b/manifest.appcache
@@ -1,6 +1,6 @@
 CACHE MANIFEST
 
-# 2018-01-21
+# 2018-01-22
 index.html
 login.html
 manifest.webapp

diff --git a/style/lantea.css b/style/lantea.css
index dbc28b0810f55ffd3cb5b27ee96f5c31331339dd..16bacfcc11edc4774132d558fb0b6279d4a592d3 100644 (file)
--- a/style/lantea.css
+++ b/style/lantea.css
@@ -183,7 +183,7 @@ h1 {
 
 @media screen and (max-width: 330px) {
   .menuDrawer {
-    left: calc(-300px - 1ch); /* account for padding */
+    transform: translateX(calc(-300px - 1ch)); /* account for padding */
     width: 300px;
   }
 }