Switch to customized leaflet-sidebar-v2 (WIP)
Based on leaflet-sidebar-v2 fork of sidebar-v2: - Simpler because Leaflet-only - autopan option - seems more active with two contributers Customization for brouter-web in own fork (WIP): - hidden bar when collapsed - flat design to match header/footer - flexbox layout beside map instead of media breakpoints
This commit is contained in:
Norbert Renner
parent
65c0e92096
commit
3acd1171b1
5 changed files with 66 additions and 53 deletions
|
|
@ -27,7 +27,7 @@
|
||||||
"leaflet.locatecontrol": "^0.60.0",
|
"leaflet.locatecontrol": "^0.60.0",
|
||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
"bootstrap-select": "hugdx/bootstrap-select#patch-1",
|
"bootstrap-select": "hugdx/bootstrap-select#patch-1",
|
||||||
"sidebar-v2": "~0.4.0",
|
"leaflet-sidebar-v2": "nrenner/leaflet-sidebar-v2#dev",
|
||||||
"leaflet.editable": "^1.1.0"
|
"leaflet.editable": "^1.1.0"
|
||||||
},
|
},
|
||||||
"overrides": {
|
"overrides": {
|
||||||
|
|
@ -99,12 +99,6 @@
|
||||||
"jquery": "*",
|
"jquery": "*",
|
||||||
"bootstrap": "*"
|
"bootstrap": "*"
|
||||||
}
|
}
|
||||||
},
|
|
||||||
"sidebar-v2": {
|
|
||||||
"main": [
|
|
||||||
"css/leaflet-sidebar.css",
|
|
||||||
"js/leaflet-sidebar.js"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ body, #content {
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexcolumn,
|
.flexcolumn,
|
||||||
.sidebar-pane.active,
|
.leaflet-sidebar-pane.active,
|
||||||
#datatable_wrapper,
|
#datatable_wrapper,
|
||||||
.dataTables_scroll,
|
.dataTables_scroll,
|
||||||
.dataTables_scrollBody {
|
.dataTables_scrollBody {
|
||||||
|
|
@ -288,10 +288,13 @@ table.dataTable.display tbody tr.even:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* sidebar-v2
|
* leaflet-sidebar-v2
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.sidebar-pane {
|
.leaflet-sidebar-pane#tab_profile,
|
||||||
|
.leaflet-sidebar-pane#tab_data {
|
||||||
|
/* Full height for content with inner scrolling,
|
||||||
|
overrides scroll fix for long content in Firefox */
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -301,3 +304,8 @@ table.dataTable.display tbody tr.even:hover {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* hide currently unused bottom tabs container because of touch border artefacts */
|
||||||
|
.leaflet-sidebar-tabs > ul:last-child {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
|
||||||
87
index.html
87
index.html
|
|
@ -165,55 +165,58 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="content" class="flexcolumn flexgrow">
|
<div id="content" class="flexcolumn flexgrow">
|
||||||
<div id="sidebar" class="sidebar collapsed">
|
<div id="sidebarTabs" class="leaflet-sidebar-tabs collapsed">
|
||||||
<div class="sidebar-tabs">
|
<ul role="tablist">
|
||||||
<ul role="tablist">
|
<li><a href="#tab_layers_control" role="tab"><img src="dist/images/layers.png" width="20px"></a></li>
|
||||||
<li><a href="#tab_layers_control" role="tab"><img src="dist/images/layers.png"></a></li>
|
<li hidden><a href="#tab_itinerary" role="tab"><i class="fa fa-map-signs"></i></a></li>
|
||||||
<li hidden><a href="#tab_itinerary" role="tab"><i class="fa fa-map-signs"></i></a></li>
|
<li><a href="#tab_profile" role="tab"><i class="fa fa-wrench"></i></a></li>
|
||||||
<li><a href="#tab_profile" role="tab"><i class="fa fa-wrench"></i></a></li>
|
<li><a href="#tab_data" role="tab"><i class="fa fa-table"></i></a></li>
|
||||||
<li><a href="#tab_data" role="tab"><i class="fa fa-table"></i></a></li>
|
</ul>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="sidebar-content">
|
<div class="leaflet-sidebar-flex-row flexgrow">
|
||||||
|
<div id="map" class="leaflet-sidebar-map"></div>
|
||||||
|
|
||||||
<div class="sidebar-pane" id="tab_layers_control">
|
<div id="sidebar" class="leaflet-sidebar collapsed">
|
||||||
<h1 class="sidebar-header">Layers<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
|
|
||||||
<div id="layers-control-wrapper"></div>
|
<div class="leaflet-sidebar-content">
|
||||||
<div class="leaflet-control-layers-separator"></div>
|
<div class="leaflet-sidebar-pane" id="tab_layers_control">
|
||||||
<div>
|
<h1 class="leaflet-sidebar-header">Layers<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
|
||||||
<button type="button" id="custom_layers_button" class="btn btn-sm pull-right" title="Add or remove custom layers"><span class="fa fa-plus-square"></span> Customize layers</button>
|
<div id="layers-control-wrapper"></div>
|
||||||
</div>
|
<div class="leaflet-control-layers-separator"></div>
|
||||||
</div>
|
<div>
|
||||||
|
<button type="button" id="custom_layers_button" class="btn btn-sm pull-right" title="Add or remove custom layers"><span class="fa fa-plus-square"></span> Custom layers</button>
|
||||||
<div class="sidebar-pane" id="tab_profile">
|
|
||||||
<h1 class="sidebar-header">Custom routing profile<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
|
|
||||||
<form class="flexcolumn flexgrow">
|
|
||||||
<textarea class="form-control flexgrow" id="profile_upload" spellcheck="false" wrap="off" placeholder="Write your custom profile here."></textarea>
|
|
||||||
<div id="profile_message"></div>
|
|
||||||
<div class="form-group" id="profile_buttons">
|
|
||||||
<button id="clear" type="button" class="btn btn-sm"><span class="fa fa-eraser"></span> Clear</button>
|
|
||||||
<button id="upload" type="button" class="btn btn-sm" data-uploading-text="Uploading…"><span class="fa fa-cloud-upload"></span> Upload</button>
|
|
||||||
<a href="http://brouter.de/brouter/costfunctions.html" target="_blank" class="btn btn-sm btn-info pull-right"><span class="fa fa-question"></span> Help</a>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sidebar-pane" id="tab_data">
|
|
||||||
<h1 class="sidebar-header">Data<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
|
|
||||||
<table id="datatable" class="table mini cell-border hover stripe"></table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sidebar-pane" id="tab_itinerary">
|
|
||||||
<h1 class="sidebar-header">Itinerary<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
|
|
||||||
<div id="itinerary">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<div class="leaflet-sidebar-pane" id="tab_profile">
|
||||||
|
<h1 class="leaflet-sidebar-header">Custom routing profile<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
|
||||||
|
<form class="flexcolumn flexgrow">
|
||||||
|
<textarea class="form-control flexgrow" id="profile_upload" spellcheck="false" wrap="off" placeholder="Write your custom profile here."></textarea>
|
||||||
|
<div id="profile_message"></div>
|
||||||
|
<div class="form-group" id="profile_buttons">
|
||||||
|
<button id="clear" type="button" class="btn btn-sm"><span class="fa fa-eraser"></span> Clear</button>
|
||||||
|
<button id="upload" type="button" class="btn btn-sm" data-uploading-text="Uploading…"><span class="fa fa-cloud-upload"></span> Upload</button>
|
||||||
|
<a href="http://brouter.de/brouter/costfunctions.html" target="_blank" class="btn btn-sm btn-info pull-right"><span class="fa fa-question"></span> Help</a>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="leaflet-sidebar-pane" id="tab_data">
|
||||||
|
<h1 class="leaflet-sidebar-header">Data<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
|
||||||
|
<table id="datatable" class="table mini cell-border hover stripe"></table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="leaflet-sidebar-pane" id="tab_itinerary">
|
||||||
|
<h1 class="leaflet-sidebar-header">Itinerary<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
|
||||||
|
<div id="itinerary">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="map" class="sidebar-map"></div>
|
|
||||||
|
|
||||||
<div id="message"></div>
|
<div id="message"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -219,7 +219,7 @@
|
||||||
|
|
||||||
trackMessages.onAdd(map);
|
trackMessages.onAdd(map);
|
||||||
|
|
||||||
sidebar = BR.sidebar('sidebar', {
|
sidebar = BR.sidebar({
|
||||||
listeningTabs: {
|
listeningTabs: {
|
||||||
'tab_data': trackMessages
|
'tab_data': trackMessages
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,9 @@ BR.Sidebar = L.Control.Sidebar.extend({
|
||||||
|
|
||||||
options: {
|
options: {
|
||||||
position: 'right',
|
position: 'right',
|
||||||
|
container: 'sidebar',
|
||||||
|
tabContainer: 'sidebarTabs',
|
||||||
|
autopan: false,
|
||||||
|
|
||||||
// Tabs to be notified when shown or hidden
|
// Tabs to be notified when shown or hidden
|
||||||
// (tab div id -> object implementing show/hide methods)
|
// (tab div id -> object implementing show/hide methods)
|
||||||
|
|
@ -23,6 +26,11 @@ BR.Sidebar = L.Control.Sidebar.extend({
|
||||||
|
|
||||||
this._rememberTabState();
|
this._rememberTabState();
|
||||||
|
|
||||||
|
if (L.Browser.touch && BR.Browser.touchScreenDetectable && !BR.Browser.touchScreen) {
|
||||||
|
L.DomUtil.removeClass(this._container, 'leaflet-touch');
|
||||||
|
L.DomUtil.removeClass(this._tabContainer, 'leaflet-touch');
|
||||||
|
}
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue