Новый вариант управления - первая попытка

ground/views/indexTemplate.php

@@ -1,4 +1,47 @@
 <div id="map"></div>
+<div id="control">
+	<div class="glyphicon glyphicon-info-sign boxButtonInfo" title="Информация" onclick="openBox('Info')"></div>
+
+	<div class="glyphicon glyphicon-plus big _t" title="Приблизить" onclick="myMap.zoomIn()"></div>
+	<div class="glyphicon glyphicon-minus big _b" title="Отдалить" onclick="myMap.zoomOut()"></div>
+
+	<div class="glyphicon glyphicon-globe _t boxButtonLayers" onclick="openBox('Layers')" title="Слои карты"></div>
+	<div class="glyphicon glyphicon-flag _b" title="Я на карте" onclick="showMeOnTheMap()"></div>
+	<div class="glyphicon glyphicon-list" title="Маршрут" onclick="$('#myRoutesWindow').hide(200);$('#routeWindow').toggle(200)"></div>
+
+
+	<?php if ($user): ?>
+		<div class="glyphicon glyphicon-map-marker _t" id="addPointButton" title="Добавить точку" onclick="activateAddPoint()"></div>
+		<div class="glyphicon glyphicon-cloud-download _c" onclick="$('#routeWindow').hide(200);$('#myRoutesWindow').toggle(200);" title="Мои маршруты"></div>
+		<div class="glyphicon glyphicon-user _b" onclick="" title="Профиль"></div>
+	<?php else:?>
+		<div class="glyphicon glyphicon-user" id="loginButton" onclick="$('#loginModal').modal('show');" title="Войти для добавления точки"></div>
+	<?php endif;?>
+</div>
+<div id="box">
+	<span id="boxClose" onclick="closeBox();">&times;</span>
+	<div id="boxInfo">
+		<h3>Информация</h3>
+		<a onclick="$('#aboutModal').modal('show');" href="#">О проекте</a><br/>
+		<a onclick="$('#howToUseModal').modal('show');" href="#">Как пользоваться</a><br/>
+		<a onclick="$('#categoriesModal').modal('show');" href="#">Легенда</a><br/>
+		<a href="/page/points">Список точек</a><br/>
+		<br/>
+		<span class="input-group">
+			<input type="text" id="addressField" class="form-control" placeholder="Поиск на карте..." onkeydown="if(event.keyCode == 13) {searchAdderess()}" />
+			<span class="input-group-btn">
+				<button class="btn btn-default" type="button" onclick="searchAdderess()"><span class="glyphicon glyphicon-search"></span></button>
+			</span>
+		</span>
+	</div>
+	<div id="boxLayers">
+		<h3>Карты</h3>
+		Layers
+	</div>
+	<div id="boxUser">
+		<a class="btn btn-default" type="button" href="/index/logout"><span class="glyphicon glyphicon-ban-circle"></span> Выйти</a>
+	</div>
+</div>
 <div id="routeWindow" class="popover fade in">
 	<h3 class="popover-title">Мой маршрут <b id="routeDistance"></b></h3>
 	<div class="popover-content">
@@ -29,38 +72,6 @@
 	</div>
 </div>
 <?php endif; ?>
-<div id="footer">
-    <table width="100%">
-        <tr>
-            <td width="30%">
-                <div class="input-group">
-                    <input type="text" id="addressField" class="form-control" placeholder="Поиск на карте..." onkeydown="if(event.keyCode == 13) {searchAdderess()}" />
-                    <span class="input-group-btn">
-                        <button class="btn btn-default" type="button" onclick="searchAdderess()"><span class="glyphicon glyphicon-search"></span></button>
-                    </span>
-                </div>
-            </td>
-            <td>
-                &nbsp;
-            </td>
-            <td>
-                <button class="btn btn-default" type="button" onclick="$('#myRoutesWindow').hide(200);$('#routeWindow').toggle(200)"><span class="glyphicon glyphicon-align-justify"></span> Маршрут</button>
-				<?php if ($user): ?>
-					<button class="btn btn-default" type="button" onclick="$('#routeWindow').hide(200);$('#myRoutesWindow').toggle(200);"><span class="glyphicon glyphicon-cloud-download"></span> Мои маршруты</button>
-				<?php endif; ?>
-                <button class="btn btn-default" type="button" onclick="showMeOnTheMap()"><span class="glyphicon glyphicon-screenshot"></span> Я на карте</button>
-            </td>
-            <td class="text-right">
-				<?php if ($user): ?>
-					<button class="btn btn-default" type="button" id="addPointButton" onclick="activateAddPoint()"><span class="glyphicon glyphicon-plus-sign"></span> Добавить точку</button>
-					<a class="btn btn-default" type="button" href="/index/logout"><span class="glyphicon glyphicon-ban-circle"></span> Выйти</a>
-				<?php else:?>
-					<button class="btn btn-success" type="button" id="loginButton" onclick="$('#loginModal').modal('show');"><span class="glyphicon glyphicon-user"></span> Войти для добавления точки</button>
-				<?php endif;?>
-            </td>
-        </tr>
-    </table>
-</div>
 <?= $user ? '' : self::renderPartial('modals/login.php', null, true) ?>
 <?= $user ? self::renderPartial('modals/addPoint.php', array('categories' => $categories), true) : '' ?>
 <?= self::renderPartial('modals/categories.php', array('categories' => $categories), true) ?>

ground/views/layout.php

@@ -28,15 +28,6 @@
     <body>
         <div class="header">
             <h1>WikiPoints</h1>
-            <span class="mainMenu">
-                <a onclick="$('#aboutModal').modal('show');" href="#">О проекте</a>
-                |
-                <a onclick="$('#howToUseModal').modal('show');" href="#">Как пользоваться</a>
-                |
-                <a onclick="$('#categoriesModal').modal('show');" href="#">Легенда</a>
-				|
-				<a href="/page/points">Список точек</a>
-            </span>
         </div>
         <?= isset($content) && !empty($content) ? $content : 'No content =(' ?>
         <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="Информация о проекте" aria-hidden="true">

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;}

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 &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
         maxZoom: 18
@@ -319,8 +319,8 @@ function showMeOnTheMap()
  */
 function activateAddPoint()
 {
-	$('#addPointButton').toggleClass('btn-success').toggleClass('btn-default');
+	$('#addPointButton').toggleClass('active');
-	if ($('#addPointButton').hasClass('btn-success'))
+	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;
+}