Merge branch 'vershwal-fix4599'

css/80_app.css

@@ -1774,7 +1774,7 @@ input[type=number] {
     content: "";
     display: block;
     position: absolute;
-    background:#ccc;
+    background: #ccc;
     height: 11px;
     width: 1px;
     left: 0;
@@ -2384,7 +2384,7 @@ div.full-screen > button:hover {
 
 .map-controls {
     right: 0;
-    top: 70px;
+    top: 132px;
     width: 40px;
     position: fixed;
     z-index: 100;
@@ -2410,27 +2410,46 @@ div.full-screen > button:hover {
 }
 
 /* Zoomer */
-
-.zoombuttons button.zoom-in {
+.zoombuttons > button.zoom-in {
     border-radius: 4px 0 0 0;
 }
-[dir='rtl'] .zoombuttons button.zoom-in {
+[dir='rtl'] .zoombuttons > button.zoom-in {
     border-radius: 0 4px 0 0;
 }
 
-/* Background / Map Data Settings */
+/* Geolocator */
+.geolocate-control {
+    margin-bottom: 10px;
+}
+.geolocate-control > button {
+    border-radius: 0 0 0 4px;
+}
+[dir='rtl'] .geolocate-control > button {
+    border-radius: 0 0 4px 0;
+}
+
+/* Pane Buttons */
+.help-control > button {
+    border-radius: 0 0 0 4px;
+}
+[dir='rtl'] .help-control > button {
+    border-radius: 0 0 4px 0;
+}
 
 .map-data-control button {
     border-radius: 0;
 }
 
-.background-control button {
+.background-control > button {
     border-radius: 4px 0 0 0;
 }
-[dir='rtl'] .background-control button {
+[dir='rtl'] .background-control > button {
     border-radius: 0 4px 0 0;
 }
 
+
+/* Background / Map Data Settings */
+
 .map-data-control,
 .background-control {
     position: relative;
@@ -2704,51 +2723,59 @@ div.full-screen > button:hover {
     border-radius: 3px 0 0 3px;
 }
 
-.map-data-control .map-overlay,
-.background-control .map-overlay,
-.help-control .map-overlay {
+/* Side panes */
+
+.map-data-control .map-pane,
+.background-control .map-pane,
+.help-control .map-pane {
     z-index: -1;
 }
 
-/* Geolocator */
-
-.geolocate-control {
-    margin-bottom: 10px;
-}
-
-.geolocate-control button {
-    border-radius: 0 0 0 4px;
-}
-[dir='rtl'] .geolocate-control button {
-    border-radius: 0 0 4px 0;
-}
-
-.map-overlay.content {
+.map-pane {
     position: fixed;
     top: 60px;
     bottom: 30px;
-    padding: 20px 50px 20px 20px;
     right: 0;
-    overflow: auto;
+    overflow: hidden;
 }
-[dir='rtl'] .map-overlay.content {
-    padding: 20px 20px 20px 50px;
+[dir='rtl'] .map-pane {
     left: 0;
     right: auto !important;
 }
 
-.map-overlay.content > div {
+.pane-heading {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    border-bottom: 1px solid #ccc;
+}
+
+.pane-heading h2 {
+    margin: 15px 20px;
+}
+
+.pane-heading button {
+    width: 40px;
+    height: 61px;
+    border-radius: 0;
+}
+
+.pane-content {
+    height: 100%;
+    padding: 10px 50px 20px 20px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+[dir='rtl'] .pane-content {
+    padding: 10px 20px 20px 50px;
+}
+
+.pane-content > div {
     padding-bottom: 15px;
 }
 
 /* Help */
 
-.help-control button {
-    border-radius: 0 0 0 4px;
-}
-[dir='rtl'] .help-control button {
-    border-radius: 0 0 4px 0;
-}
 
 .help-wrap p {
     font-size: 15px;
@@ -3878,7 +3905,7 @@ svg.mouseclick use.right {
 .tooltip {
     position: absolute;
     display: none;
-    color:#333;
+    color: #333;
     font-size: 12px;
 }
 
@@ -4032,33 +4059,33 @@ svg.mouseclick use.right {
 /* Exceptions for tooltip layouts */
 
 /* make tooltips in panels dark */
-.map-overlay .tooltip.top .tooltip-arrow,
+.map-pane .tooltip.top .tooltip-arrow,
 .entity-editor-pane .tooltip.top .tooltip-arrow,
 .warning-section .tooltip.top .tooltip-arrow {
     border-top-color: #000;
 }
 
-.map-overlay .tooltip.bottom .tooltip-arrow,
+.map-pane .tooltip.bottom .tooltip-arrow,
 .entity-editor-pane .tooltip.bottom .tooltip-arrow,
 .warning-section .tooltip.bottom .tooltip-arrow {
     border-bottom-color: #000;
 }
 
-.map-overlay .tooltip.left .tooltip-arrow,
+.map-pane .tooltip.left .tooltip-arrow,
 .entity-editor-pane .tooltip.left .tooltip-arrow,
 .warning-section .tooltip.left .tooltip-arrow {
     border-left-color: #000;
 }
 
-.map-overlay .tooltip.right .tooltip-arrow,
+.map-pane .tooltip.right .tooltip-arrow,
 .entity-editor-pane .tooltip.right .tooltip-arrow,
 .warning-section .tooltip.right .tooltip-arrow {
     border-right-color: #000;
 }
 
-.map-overlay .tooltip-inner,
-.map-overlay .tooltip-heading,
-.map-overlay .keyhint-wrap,
+.map-pane .tooltip-inner,
+.map-pane .tooltip-heading,
+.map-pane .keyhint-wrap,
 .entity-editor-pane .tooltip-inner,
 .warning-section .tooltip-inner {
     background: #000;

modules/ui/background.js

@@ -336,7 +336,7 @@ export function uiBackground(context) {
 
         var pane = selection
             .append('div')
-            .attr('class', 'fillL map-overlay col3 content hide');
+            .attr('class', 'fillL map-pane col4 hide');
 
         var paneTooltip = tooltip()
             .placement((textDirection === 'rtl') ? 'right' : 'left')
@@ -350,12 +350,27 @@ export function uiBackground(context) {
             .call(svgIcon('#icon-layers', 'light'))
             .call(paneTooltip);
 
-        pane
+
+        var heading = pane
+            .append('div')
+            .attr('class', 'pane-heading');
+
+        heading
             .append('h2')
             .text(t('background.title'));
 
+        heading
+            .append('button')
+            .on('click', function() { uiBackground.hidePane(); })
+            .call(svgIcon('#icon-close'));
+
+
+        var content = pane
+            .append('div')
+            .attr('class', 'pane-content');
+
         // background list
-        pane
+        content
             .append('div')
             .attr('class', 'background-background-list-container')
             .call(uiDisclosure(context, 'background_list', true)
@@ -364,7 +379,7 @@ export function uiBackground(context) {
             );
 
         // overlay list
-        pane
+        content
             .append('div')
             .attr('class', 'background-overlay-list-container')
             .call(uiDisclosure(context, 'overlay_list', true)
@@ -373,12 +388,12 @@ export function uiBackground(context) {
             );
 
         // display options
-        _displayOptionsContainer = pane
+        _displayOptionsContainer = content
             .append('div')
             .attr('class', 'background-display-options');
 
         // offset controls
-        _offsetContainer = pane
+        _offsetContainer = content
             .append('div')
             .attr('class', 'background-offset');
 

modules/ui/help.js

@@ -369,20 +369,41 @@ export function uiHelp(context) {
 
 
         var pane = selection.append('div')
-            .attr('class', 'help-wrap map-overlay fillL col6 content hide');
+            .attr('class', 'help-wrap map-pane fillL col6 hide');
+
         var tooltipBehavior = tooltip()
             .placement((textDirection === 'rtl') ? 'right' : 'left')
             .html(true)
             .title(uiTooltipHtml(t('help.title'), key));
+
         var button = selection.append('button')
             .attr('tabindex', -1)
             .on('click', togglePane)
             .call(svgIcon('#icon-help', 'light'))
             .call(tooltipBehavior);
+
         var shown = false;
 
 
-        var toc = pane
+        var heading = pane
+            .append('div')
+            .attr('class', 'pane-heading');
+
+        var doctitle = heading
+            .append('h2')
+            .text(t('help.title'));
+
+        heading
+            .append('button')
+            .on('click', function() { uiHelp.hidePane(); })
+            .call(svgIcon('#icon-close'));
+
+
+        var content = pane
+            .append('div')
+            .attr('class', 'pane-content');
+
+        var toc = content
             .append('ul')
             .attr('class', 'toc');
 
@@ -426,19 +447,15 @@ export function uiHelp(context) {
             .text(t('splash.walkthrough'));
 
 
-        var content = pane
+        var helpContent = content
             .append('div')
             .attr('class', 'left-content');
 
-        var doctitle = content
-            .append('h2')
-            .text(t('help.title'));
-
-        var body = content
+        var body = helpContent
             .append('div')
             .attr('class', 'body');
 
-        var nav = content
+        var nav = helpContent
             .append('div')
             .attr('class', 'nav');
 

modules/ui/map_data.js

@@ -442,7 +442,7 @@ export function uiMapData(context) {
 
         var pane = selection
             .append('div')
-            .attr('class', 'fillL map-overlay col3 content hide');
+            .attr('class', 'fillL map-pane col4 hide');
 
         var paneTooltip = tooltip()
             .placement((textDirection === 'rtl') ? 'right' : 'left')
@@ -457,13 +457,26 @@ export function uiMapData(context) {
             .call(paneTooltip);
 
 
-        pane
+        var heading = pane
+            .append('div')
+            .attr('class', 'pane-heading');
+
+        heading
             .append('h2')
             .text(t('map_data.title'));
 
+        heading
+            .append('button')
+            .on('click', function() { uiMapData.hidePane(); })
+            .call(svgIcon('#icon-close'));
+
+
+        var content = pane
+            .append('div')
+            .attr('class', 'pane-content');
 
         // data layers
-        pane
+        content
             .append('div')
             .attr('class', 'map-data-data-layers')
             .call(uiDisclosure(context, 'data_layers', true)
@@ -472,7 +485,7 @@ export function uiMapData(context) {
             );
 
         // area fills
-        pane
+        content
             .append('div')
             .attr('class', 'map-data-area-fills')
             .call(uiDisclosure(context, 'fill_area', false)
@@ -481,7 +494,7 @@ export function uiMapData(context) {
             );
 
         // feature filters
-        pane
+        content
             .append('div')
             .attr('class', 'map-data-feature-filters')
             .call(uiDisclosure(context, 'map_features', false)