option to hide menu

README

@@ -2,7 +2,7 @@ This is a simple web viewer for GPS tracks uploaded with mobile client.
 It is designed to work with Android version of great app TrackMe (http://www.luisespinosa.com/trackme_eng.html), 
 but it should be easy to adjust it for other clients (other database tables).
 Interface "look and feel" is based on TrackMe Display (http://forum.xda-developers.com/showthread.php?t=477394).
-It is possible to switch between Google Maps API and OpenLayers API with OpenStreetMap (any other base layer should be easy to add).
+It is possible to switch between Google Maps API and OpenLayers API with OpenStreetMap (any other compatible base layer).
 
 Live demo:
 - http://flaa.fabiszewski.net/phptrackme/
@@ -20,7 +20,7 @@ Features:
 - multiple users
 - user authentication
 - Google Maps API v3
-- OpenLayers 2.13
+- OpenLayers v2
 - ajax 
 - server based configuration
 - user preferences stored in cookies

index.php

@@ -184,6 +184,7 @@ print '
           <a href="javascript:void(0);" onclick="load(\'gpx\',userid,trackid)">gpx</a><br />
         </div>
       </div>
+      <div id="menu-close" onclick="toggleMenu();">»</div>
       <div id="footer"><a target="_blank" href="https://github.com/bfabiszewski/phpTrackme">phpTrackme</a> '.$version.'</div>
     </div>
     <div id="main">

main.css

@@ -76,11 +76,29 @@ select {
 }
 #footer {
   position: fixed;
+  width: 165px;
   bottom:0;
   padding: 10px;  
-  background-color: #666;
+  background-color:rgba(102, 102, 102, 0.9);
   color: lightgray;
 }
+#menu-close {
+  background-color: #666;
+  opacity: 0.9;
+  position: absolute;
+  top: 55px;
+  right: 165px;
+  z-index: 1900;
+  width: 18px;
+  height: 20px;
+  line-height: 18px;
+  text-align: right;
+  font-size: 18px;
+  font-weight: bolder;
+  border-radius: 11px 0 0 11px;
+  cursor: pointer;
+}
+
 #user, #trip, #summary, #export, #other, #units {
   padding-bottom: 10px;
 }

main.js

@@ -80,6 +80,28 @@ function toggleChart(i) {
   }
 }
 
+function toggleMenu(i) { 
+  var emenu = document.getElementById('menu');
+  var emain = document.getElementById('main');
+  var ebutton = document.getElementById('menu-close');
+  if (arguments.length < 1) {
+    if (ebutton.innerHTML == '»') { i = 0 }
+    else { i = 1; }
+  }  
+  if (i==0) {
+    emenu.style.width = '0';
+    emain.style.marginRight = '0';
+    ebutton.style.right = '0';
+    ebutton.innerHTML = '«';
+  }
+  else {
+    emenu.style.width = '165px';
+    emain.style.marginRight = '165px';
+    ebutton.style.right = '165px';
+    ebutton.innerHTML = '»';
+  }  
+}
+
 function getXHR() {
   var xmlhttp = null;
   if (window.XMLHttpRequest) {

trackme.sql

@@ -1,3 +1,9 @@
+-- 
+-- Database layout inherited from TrackMe
+-- Some tables/columns are not used by the viewer at the moment.
+-- Kept for compatibility with old data.
+-- 
+
 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
 SET time_zone = "+00:00";
 CREATE DATABASE IF NOT EXISTS `trackme` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;