diff --git a/bower.json b/bower.json
index f691ced..bcfadf7 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,9 +27,9 @@
"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",
- "leaflet.editable": "^1.1.0"
+ "leaflet-sidebar-v2": "nrenner/leaflet-sidebar-v2#dev",
+ "leaflet.editable": "^1.1.0",
+ "codemirror": "^5.35.0"
},
"overrides": {
"leaflet": {
@@ -103,7 +103,6 @@
}
},
"resolutions": {
- "leaflet": "^1.3.1",
- "leaflet-sidebar": "master"
+ "leaflet": "^1.3.1"
}
}
diff --git a/css/style.css b/css/style.css
index ee650d5..0b64efc 100644
--- a/css/style.css
+++ b/css/style.css
@@ -10,13 +10,17 @@ body, #content {
z-index: 1;
}
-.flexcolumn {
+.flexcolumn,
+.leaflet-sidebar-pane.active,
+.dataTables_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 */
+.dataTables_wrapper,
+.dataTables_scroll,
+.dataTables_scrollBody,
+table.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;
@@ -117,7 +133,7 @@ footer {
}
/* track messages (data tab) */
-#tab_data, #profile_upload {
+#tab_data, .CodeMirror {
font-size: x-small;
}
@@ -209,6 +225,11 @@ https://css-tricks.com/svg-line-animation-works/
* DataTables
*/
+table.dataTable {
+ /* avoid getting centered and header misaligned with flex row (sidebar) */
+ margin: 0;
+}
+
table.dataTable.mini thead th,
table.dataTable.mini thead td {
padding: 3px 13px 3px 2px;
@@ -270,3 +291,36 @@ table.dataTable.display tbody tr.even:hover {
.leaflet-tooltip-right:before {
border-right-color: inherit;
}
+
+/*
+ * leaflet-sidebar-v2
+ */
+
+.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%;
+}
+
+/* layers control as sidebar tab */
+#layers-control-wrapper label {
+ display: block;
+ 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;
+}
+
+
+/*
+ * CodeMirror
+ */
+
+.CodeMirror {
+ height: 100%;
+ border: 1px solid #ddd;
+}
diff --git a/gulpfile.js b/gulpfile.js
index 1db27e4..f491563 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -138,7 +138,7 @@ gulp.task('log', function() {
gulp.task('inject', function () {
var target = gulp.src('index.html');
- var sources = gulp.src(paths.scripts, { base: '.', read: false });
+ var sources = gulp.src(paths.scripts.concat(paths.styles), { base: '.', read: false });
return target.pipe(inject(sources, { relative: true }))
.pipe(gulp.dest('.'));
diff --git a/index.html b/index.html
index 96eda76..023205e 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,9 @@
BRouter web client
+
+