diff --git a/public/css/style.css b/public/css/style.css
index d34926c..7d25c6d 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -8,18 +8,14 @@
html {height: 100%;}
body {margin: 0; padding: 0; height: 100%;}
-div#map {width: 100%; position: absolute; top: 0; bottom: 50px;}
+div#map {width: 100%; position: absolute; top: 0; bottom: 0px;}
+body.openBox div#map {right: 250px;}
div.infoCard h3 {text-align: center; margin-top: 0;}
div.infoCard img {width: 200px; float: left; margin: 0 10px 5px 0;}
div.header {display: block; position: absolute; top: 0; left: 110px; border-radius: 0 0 5px 5px; z-index: 1000; background-color: #FFF; padding: 5px 10px;}
div.header h1 {display: inline; color: #333; cursor: default;}
-div.header span.mainMenu {display: none;}
-div.header:hover span.mainMenu {display: block;}
div.add {cursor: pointer;}
-div#footer {position: absolute; width: 100%; height: 50px; bottom: 0; padding: 12px 10px 0 10px;;}
-div#footer table{}
-
.form-group .error {display: none;}
.form-group.has-error .error {display: inline-block;}
@@ -33,3 +29,21 @@ div#footer table{}
#routes {margin-bottom: 10px; height: 200px; background-color: #ff9999;}
#routes .route {cursor: pointer; border: solid 1px #999; padding: 2px 5px; margin-bottom: 3px;}
#routes .route span {font-weight: bold; color: red;}
+
+
+div#control {width: 50px; position: absolute; top: 0; right: 0;bottom: 50px; color: white; font-size: 20px; padding-top: 10px;}
+body.openBox div#control {right: 250px;}
+div#control div {background-color: rgba(15, 15, 15, 0.65); border-radius: 8px 0 0 8px; width: auto; padding: 10px; margin-left: 10px; margin-bottom: 8px;}
+div#control div:hover {background-color: #000;}
+div#control div.active {background-color: rgb(255, 162, 0);}
+div#control div.big {font-size: 22px; padding: 14px; margin-left: 0;}
+div#control div._t {border-radius: 8px 0 0 0;border-bottom: solid 1px #666; margin-bottom: 0;}
+div#control div._c {border-radius: 0; border-bottom: solid 1px #666; margin-bottom: 0;}
+div#control div._b {border-radius: 0 0 0 8px;}
+div#control div.space {height: 10px; background-color: transparent; padding: 0;}
+
+
+body.openBox div#box {display: block;}
+div#box {width: 250px; display: none; position: absolute; top: 0; right: 0;bottom: 0px; border-left: 2px solid rgba(45, 45, 45, 0.8); padding: 0 7px;}
+div#box #boxClose {position: absolute; right: 7px; top: 7px; color: #999; font-size: 18px; font-weight: bolder; cursor: pointer;}
+div#box div {display: none;}
\ No newline at end of file
diff --git a/public/js/main.js b/public/js/main.js
index 89ce8c6..18c2fdd 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -57,7 +57,7 @@ function getURLParameter(name) {
* @returns true
*/
function init() {
- myMap = L.map('map').setView([51.505, -0.09], 13);
+ myMap = L.map('map',{zoomControl: false}).setView([51.505, -0.09], 13);
L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
attribution: 'Map data ©
OpenStreetMap contributors,
CC-BY-SA, Imagery ©
Mapbox',
maxZoom: 18
@@ -319,8 +319,8 @@ function showMeOnTheMap()
*/
function activateAddPoint()
{
- $('#addPointButton').toggleClass('btn-success').toggleClass('btn-default');
- if ($('#addPointButton').hasClass('btn-success'))
+ $('#addPointButton').toggleClass('active');
+ if ($('#addPointButton').hasClass('active'))
{
$('#map').css('cursor', 'crosshair');
setStatus(statusHunting)
@@ -604,3 +604,29 @@ function editSetNewCoords()
$('#map').css('cursor', 'crosshair');
setStatus(statusReHunting)
}
+
+function openBox(type)
+{
+ newTab = $('#box'+type).css('display') == 'none';
+
+ if (!newTab)
+ {
+ return closeBox();
+ }
+
+ $('div','#control').removeClass('active');
+ $('div','#box').css('display', 'none');
+
+ $('.boxButton'+type).addClass('active');
+ $('#box'+type).css('display', 'block');
+ $('body').addClass('openBox');
+}
+
+function closeBox()
+{
+ $('body').removeClass('openBox');
+ $('div','#control').removeClass('active');
+ $('div','#box').css('display', 'none');
+
+ return true;
+}