ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Switch to customized leaflet-sidebar-v2 (WIP)

Browse source 
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 2018-03-03 12:13:10 +01:00
parent 65c0e92096
commit 3acd1171b1
5 changed files with 66 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

8
bower.json
View file

@ -27,7 +27,7 @@
"leaflet.locatecontrol": "^0.60.0",
"font-awesome": "^4.7.0",
"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"
},
"overrides": {
@ -99,12 +99,6 @@
"jquery": "*",
"bootstrap": "*"
}
},
"sidebar-v2": {
"main": [
"css/leaflet-sidebar.css",
"js/leaflet-sidebar.js"
]
}
},
"resolutions": {

14
css/style.css
View file

@ -11,7 +11,7 @@ body, #content {
}
.flexcolumn,
.sidebar-pane.active,
.leaflet-sidebar-pane.active,
#datatable_wrapper,
.dataTables_scroll,
.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%;
}
@ -301,3 +304,8 @@ table.dataTable.display tbody tr.even:hover {
font-size: 0.9rem;
line-height: normal;
}
/* hide currently unused bottom tabs container because of touch border artefacts */
.leaflet-sidebar-tabs > ul:last-child {
display: none;
}

95
index.html
View file

@ -165,54 +165,57 @@
</div>
<div id="content" class="flexcolumn flexgrow">
<div id="sidebar" class="sidebar collapsed">
<div class="sidebar-tabs">
<ul role="tablist">
<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><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>
</ul>
</div>
<div class="sidebar-content">
<div class="sidebar-pane" id="tab_layers_control">
<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-control-layers-separator"></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> Customize layers</button>
</div>
</div>
<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>
</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 id="sidebarTabs" class="leaflet-sidebar-tabs collapsed">
<ul role="tablist">
<li><a href="#tab_layers_control" role="tab"><img src="dist/images/layers.png" width="20px"></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_data" role="tab"><i class="fa fa-table"></i></a></li>
</ul>
</div>
<div id="map" class="sidebar-map"></div>
<div class="leaflet-sidebar-flex-row flexgrow">
<div id="map" class="leaflet-sidebar-map"></div>
<div id="sidebar" class="leaflet-sidebar collapsed">
<div class="leaflet-sidebar-content">
<div class="leaflet-sidebar-pane" id="tab_layers_control">
<h1 class="leaflet-sidebar-header">Layers<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
<div id="layers-control-wrapper"></div>
<div class="leaflet-control-layers-separator"></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>
</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 id="message"></div>
</div>

2
js/index.js
View file

@ -219,7 +219,7 @@
trackMessages.onAdd(map);
sidebar = BR.sidebar('sidebar', {
sidebar = BR.sidebar({
listeningTabs: {
'tab_data': trackMessages
}

8
js/plugin/Sidebar.js
View file

@ -3,6 +3,9 @@ BR.Sidebar = L.Control.Sidebar.extend({
options: {
position: 'right',
container: 'sidebar',
tabContainer: 'sidebarTabs',
autopan: false,
// Tabs to be notified when shown or hidden
// (tab div id -> object implementing show/hide methods)
@ -23,6 +26,11 @@ BR.Sidebar = L.Control.Sidebar.extend({
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;
},