From 443ca9c03e8e308565f6bfffb4ba73e7b4b7ff4f Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Thu, 8 Feb 2018 21:27:24 +0100 Subject: [PATCH 1/8] Replace sidebar with sidebar-v2, restore old flexbox tabs (#90) (WIP) --- bower.json | 14 ++++--- css/style.css | 30 +++++++++++++-- index.html | 60 ++++++++++++++++------------- js/control/Itinerary.js | 2 +- js/control/Profile.js | 4 -- js/control/Tabs.js | 47 ---------------------- js/control/TrackMessages.js | 3 ++ js/index.js | 35 +++++------------ js/plugin/Sidebar.js | 77 +++++++++++++++++++++++++++++++++++++ 9 files changed, 160 insertions(+), 112 deletions(-) delete mode 100644 js/control/Tabs.js create mode 100644 js/plugin/Sidebar.js diff --git a/bower.json b/bower.json index f691ced..d2b8e85 100644 --- a/bower.json +++ b/bower.json @@ -16,7 +16,7 @@ "async": "~0.9.2", "d3": "~3.5.5", "bootstrap": "4.0.0-alpha.5", - "DataTables": "~1.10.13", + "DataTables": "~1.10.16", "leaflet.elevation": "MrMufflon/Leaflet.Elevation#master", "leaflet-control-geocoder": "~1.5.8", "Leaflet.EasyButton": "*", @@ -27,8 +27,7 @@ "leaflet.locatecontrol": "^0.60.0", "font-awesome": "^4.7.0", "bootstrap-select": "hugdx/bootstrap-select#patch-1", - "leaflet-sidebar": "Turbo87/leaflet-sidebar#master", - "autosize": "^3.0.20", + "sidebar-v2": "~0.4.0", "leaflet.editable": "^1.1.0" }, "overrides": { @@ -100,10 +99,15 @@ "jquery": "*", "bootstrap": "*" } + }, + "sidebar-v2": { + "main": [ + "css/leaflet-sidebar.css", + "js/leaflet-sidebar.js" + ] } }, "resolutions": { - "leaflet": "^1.3.1", - "leaflet-sidebar": "master" + "leaflet": "^1.3.1" } } diff --git a/css/style.css b/css/style.css index ee650d5..2f26fd5 100644 --- a/css/style.css +++ b/css/style.css @@ -10,13 +10,17 @@ body, #content { z-index: 1; } -.flexcolumn { +.flexcolumn, +.sidebar-pane.active, +#datatable_wrapper, +.dataTables_scroll, +.dataTables_scrollBody { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; - + flex-flow: column; } @@ -30,7 +34,7 @@ body, #content { flex-direction: row; } -#content { +.flexgrow { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; @@ -38,6 +42,18 @@ body, #content { flex: 1; } +/* 'auto' (1 1 auto) instead of '1' (1 1 0) needed for DataTables tab in Firefox */ +#datatable_wrapper, +.dataTables_scroll, +.dataTables_scrollBody, +#datatable { + -webkit-box-flex: auto; + -moz-box-flex: auto; + -webkit-flex: auto; + -ms-flex: auto; + flex: auto; +} + footer { -webkit-box-flex: none; -moz-box-flex: none; @@ -270,3 +286,11 @@ table.dataTable.display tbody tr.even:hover { .leaflet-tooltip-right:before { border-right-color: inherit; } + +/* + * sidebar-v2 + */ + +.sidebar-pane { + height: 100%; +} diff --git a/index.html b/index.html index 96eda76..7b94575 100644 --- a/index.html +++ b/index.html @@ -164,36 +164,47 @@ -
-
+
+ diff --git a/js/control/Layers.js b/js/control/Layers.js index 359df0b..f955172 100644 --- a/js/control/Layers.js +++ b/js/control/Layers.js @@ -59,16 +59,9 @@ BR.Layers = L.Class.extend({ } }); - addLayer = L.easyButton( - 'fa-plus-square', - function () { - $('#custom_layers').modal(); - }, - 'Add or remove custom layers', - { - position: 'topright' - } - ).addTo(map); + L.DomUtil.get('custom_layers_button').onclick = function () { + $('#custom_layers').modal(); + }; }, _remove: function(evt) { From 3acd1171b1247964e0d4db0618fc865532991937 Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Sat, 3 Mar 2018 12:13:10 +0100 Subject: [PATCH 4/8] 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 --- bower.json | 8 +--- css/style.css | 14 +++++-- index.html | 87 +++++++++++++++++++++++--------------------- js/index.js | 2 +- js/plugin/Sidebar.js | 8 ++++ 5 files changed, 66 insertions(+), 53 deletions(-) diff --git a/bower.json b/bower.json index d2b8e85..d87c023 100644 --- a/bower.json +++ b/bower.json @@ -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": { diff --git a/css/style.css b/css/style.css index 4ef7553..85f804d 100644 --- a/css/style.css +++ b/css/style.css @@ -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; +} diff --git a/index.html b/index.html index c179166..6103c41 100644 --- a/index.html +++ b/index.html @@ -165,55 +165,58 @@
-