Новые файлы для прошлого коммита; Мои маршруты в правом боксе, а не во всплывайке

ground/views/indexTemplate.php

@@ -13,8 +13,8 @@
 
 	<?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-cloud-download _c boxButtonRoutes" onclick="openBox('Routes')" title="Мои маршруты"></div>
-		<div class="glyphicon glyphicon-user _b" onclick="" title="Профиль"></div>
+		<div class="glyphicon glyphicon-user _b boxButtonUser" onclick="openBox('User')" title="Профиль"></div>
 	<?php else:?>
 		<div class="glyphicon glyphicon-user" id="loginButton" onclick="$('#loginModal').modal('show');" title="Войти для добавления точки"></div>
 	<?php endif;?>
@@ -56,14 +56,9 @@
 		<button class="btn btn-default" onclick="saveRoute()"><span class="glyphicon glyphicon-cloud-upload" title="Сохранить"></span></button>
 		<?php endif; ?>
 	</div>
-	<div id="boxUser">
-		<a class="btn btn-default" type="button" href="/index/logout"><span class="glyphicon glyphicon-ban-circle"></span> Выйти</a>
-	</div>
-</div>
 	<?php if ($user): ?>
-<div id="myRoutesWindow" class="popover fade in" style="display: none; position: absolute; top: 50px; right: 7px; left: auto; max-width: none;">
+	<div id="boxRoutes">
-	<h3 class="popover-title">Мои маршруты</h3>
+		<h3>Мои маршруты</h3>
-	<div class="popover-content">
 		<div id="routes">
 		<?php if ($routes): ?>
 		<?php foreach ($routes as $route) : ?>
@@ -73,10 +68,13 @@
 			У вас пока нет сохраненных маршрутов.
 		<?php endif; ?>
 		</div>
-		<button class="btn btn-default" type="button" onclick="$('#myRoutesWindow').toggle(200)">Скрыть</button>
-	</div>
 	</div>
 	<?php endif; ?>
+	<div id="boxUser">
+		<h3>Профиль</h3>
+		<a class="btn btn-default" type="button" href="/index/logout"><span class="glyphicon glyphicon-ban-circle"></span> Выйти</a>
+	</div>
+</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) ?>

public/css/leaflet-routing-machine.css

@@ -0,0 +1,102 @@
+.leaflet-routing-container {
+    width: 320px;
+    background-color: white;
+    padding-top: 4px;
+}
+
+.leaflet-routing-container h2 {
+    font-size: 14px;
+}
+
+.leaflet-routing-container h3 {
+    font-size: 12px;
+    font-weight: normal;
+}
+
+.leaflet-routing-alt, .leaflet-routing-geocoders {
+    padding: 6px;
+    margin-top: 2px;
+    margin-bottom: 6px;
+    border-bottom: 1px solid #ccc;
+    max-height: 320px;
+    overflow-y: auto;
+    transition: all 0.2s ease;
+}
+
+.leaflet-bar .leaflet-routing-alt:last-child {
+    border-bottom: none;
+}
+
+.leaflet-routing-alt-minimized {
+    color: #888;
+    max-height: 64px;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.leaflet-routing-alt table {
+    border-collapse: collapse;
+}
+
+.leaflet-routing-alt tr:hover {
+    background-color: #eee;
+    cursor: pointer;
+}
+
+.leaflet-routing-alt::-webkit-scrollbar {
+    width: 8px;
+}
+
+.leaflet-routing-alt::-webkit-scrollbar-track {
+    border-radius: 2px;
+    background-color: #eee;
+}
+
+.leaflet-routing-alt::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background-color: #888;
+}
+
+.leaflet-routing-geocoders input {
+    width: 292px;
+    padding: 4px;
+    border: 1px solid #ccc;
+}
+
+.leaflet-routing-geocoders button {
+    font: bold 18px 'Lucida Console', Monaco, monospace;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: white;
+    margin: 0 6px;
+    float: right;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.leaflet-routing-geocoders button:hover {
+    background-color: #eee;
+}
+
+.leaflet-routing-geocoder-result {
+    position: absolute;
+    max-height: 0;
+    overflow: hidden;
+    transition: all 0.5s ease;
+}
+
+.leaflet-routing-geocoder-result table {
+    width: 100%;
+    border: 1px solid #ccc;
+    border-radius: 0 0 4px 4px;
+    background-color: white;
+    cursor: pointer;
+}
+
+.leaflet-routing-geocoder-result-open {
+    max-height: 800px;
+}
+
+.leaflet-routing-geocoder-selected, .leaflet-routing-geocoder-result tr:hover {
+    background-color: #eee;
+}

public/css/style.css

@@ -24,7 +24,7 @@ div.add {cursor: pointer;}
 #wayPoints .wayPoint {cursor: pointer; border: solid 1px #999; padding: 2px 5px; margin-bottom: 3px; background-color: #fff;}
 #wayPoints .wayPoint span {font-weight: bold; color: red;}
 
-#routes {margin-bottom: 10px; height: 200px; background-color: #ff9999;}
+#routes {margin-bottom: 10px; height: 200px;}
 #routes .route {cursor: pointer; border: solid 1px #999; padding: 2px 5px; margin-bottom: 3px;}
 #routes .route span {font-weight: bold; color: red;}
 

public/js/route.js

@@ -78,7 +78,7 @@ function loadRouteJSON(data)
 	response = JSON.parse(data);
 	for (var k in response)
 	{
-		addToRoute(response[k]);
+		addToRoute(response[k], false);
 	}
 
 	return true;
@@ -91,7 +91,7 @@ function loadRouteJSON(data)
  */
 function loadRoute(id)
 {
-	$('#myRoutesWindow').hide(200);
+	openBox('Route')
 
 	$.ajax({
 			url: "/json/route/id/" + id,
@@ -124,13 +124,15 @@ function deleteRoute(id)
  * @param {Integer} id
  * @returns {Boolean}
  */
-function addToRoute(id)
+function addToRoute(id, build)
 {
 	$('#wayPoints').append('<div pointid="' + id + '" class="wayPoint"><span onclick="$(this).parent().remove();buildRoute();">&times;</span> ' + points[id].options.title + '</div>');
 	closePopup();
 	openBox('Route', true);
 
+	if (build !== false)
 		buildRoute();
+
 	return true;
 }