Fix minimap position (close #6167)

Flexbox panes and info panels to prevent overlap (close #4733)

css/60_photos.css

@@ -1,7 +1,7 @@
 /* photo viewer div */
 #photoviewer {
     position: absolute;
-    bottom: 40px;
+    bottom: 10px;
     left: 10px;
     width: 330px;
     height: 250px;

css/80_app.css

@@ -3210,9 +3210,10 @@ div.full-screen > button:hover {
 .background-pane .layer-list button {
     float: right;
     height: 100%;
-    width: 10%;
     border-left: 1px solid #ccc;
     border-radius: 0;
+    padding-left: 4px;
+    padding-right: 4px;
 }
 [dir='rtl'] .map-data-pane .layer-list button,
 [dir='rtl'] .background-pane .layer-list button {
@@ -3569,21 +3570,21 @@ ul.issue-fix-list button {
 
 /* Side Panes - Background / Map Data / Help
 ------------------------------------------------------- */
+.map-panes {
+    flex: 0 1 auto;
+    position: relative;
+    height: 100%;
+}
 .map-pane {
-    position: absolute;
-    top: 71px;
-    bottom: 30px;
-    right: 0;
+    position: relative;
+    top: 0;
     width: 100%;
-    max-width: 400px;
-    min-width: 180px;
-    padding-bottom: 50px;
+    height: 100%;
+    padding-bottom: 60px;
     overflow: hidden;
     z-index: 10;
-}
-[dir='rtl'] .map-pane {
-    left: 0;
-    right: auto !important;
+    max-width: 400px;
+    min-width: 300px;
 }
 
 .map-pane.help-wrap {
@@ -3820,14 +3821,20 @@ img.tile-debug {
 .map-in-map {
     position: absolute;
     overflow: hidden;
-    top: 60px;
+    top: 10px;
     width: 200px;
     height: 150px;
     z-index: 5;
     background: #000;
     border: #aaa 1px solid;
     box-shadow: 0 0 2em black;
 }
+[dir='ltr'] .map-in-map {
+    left: 10px;
+}
+[dir='rtl'] .map-in-map {
+    right: 10px;
+}
 
 .map-in-map-tiles {
     transform-origin: 0 0;
@@ -3912,36 +3919,48 @@ img.tile-debug {
 }
 
 
+.over-map {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 71px;
+    bottom: 30px;
+    pointer-events: none;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: flex-end;
+}
+.over-map > * {
+    pointer-events: auto;
+}
+
 /* Information Panels
 ------------------------------------------------------- */
 .info-panels {
     display: flex;
     flex-flow: row-reverse wrap-reverse;
-    position: absolute;
     z-index: 1;
-    right: 0;
-    bottom: 30px;
     -ms-user-select: element;
 }
 
-.info-panels h1,
-.info-panels h2,
-.info-panels h3,
-.info-panels h4,
-.info-panels h5 {
+.panel-container h1,
+.panel-container h2,
+.panel-container h3,
+.panel-container h4,
+.panel-container h5 {
     display: inline-block;
     margin-bottom: 0;
 }
 
-.info-panels h1,
-.info-panels h2,
-.info-panels h3 {
+.panel-container h1,
+.panel-container h2,
+.panel-container h3 {
     color: #ff8;
 }
 
 .panel-container {
     flex: 0 0 auto;
-    margin: 2px 0 0 2px;
+    margin: 0 2px 2px 0;
     border-radius: 4px;
     border: 1px solid rgba(0, 0, 0, 0.75);
     padding-bottom: 10px;
@@ -4838,7 +4857,7 @@ svg.mouseclick use.right {
 ------------------------------------------------------- */
 .notice {
     position: absolute;
-    top: 45px;
+    top: 15px;
     left: 0;
     right: 0;
     text-align: center;

modules/ui/background.js

@@ -16,9 +16,6 @@ import { uiBackgroundDisplayOptions } from './background_display_options';
 import { uiBackgroundOffset } from './background_offset';
 import { uiCmd } from './cmd';
 import { uiDisclosure } from './disclosure';
-import { uiHelp } from './help';
-import { uiIssues } from './issues';
-import { uiMapData } from './map_data';
 import { uiMapInMap } from './map_in_map';
 import { uiSettingsCustomBackground } from './settings/custom_background';
 import { uiTooltipHtml } from './tooltipHtml';
@@ -33,7 +30,6 @@ export function uiBackground(context) {
 
     var _customSource = context.background().findSource('custom');
     var _previousBackground = context.background().findSource(context.storage('background-last-used-toggle'));
-    var _shown = false;
 
     var _backgroundList = d3_select(null);
     var _overlayList = d3_select(null);
@@ -318,44 +314,12 @@ export function uiBackground(context) {
     uiBackground.togglePane = function() {
         if (d3_event) d3_event.preventDefault();
         paneTooltip.hide(_toggleButton);
-        uiBackground.setVisible(!_toggleButton.classed('active'));
+        context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
     };
 
-    uiBackground.hidePane = function() {
-        uiBackground.setVisible(false);
-    };
-
-    uiBackground.setVisible = function(show) {
-        if (show !== _shown) {
-            _toggleButton.classed('active', show);
-            _shown = show;
-
-            if (show) {
-                uiHelp.hidePane();
-                uiIssues.hidePane();
-                uiMapData.hidePane();
-                update();
-
-                _pane
-                    .style('display', 'block')
-                    .style('right', '-300px')
-                    .transition()
-                    .duration(200)
-                    .style('right', '0px');
-
-            } else {
-                _pane
-                    .style('display', 'block')
-                    .style('right', '0px')
-                    .transition()
-                    .duration(200)
-                    .style('right', '-300px')
-                    .on('end', function() {
-                        d3_select(this).style('display', 'none');
-                    });
-            }
-        }
-    };
+    function hidePane() {
+        context.ui().togglePanes();
+    }
 
     uiBackground.renderToggleButton = function(selection) {
 
@@ -371,7 +335,8 @@ export function uiBackground(context) {
 
         _pane = selection
             .append('div')
-            .attr('class', 'fillL map-pane background-pane hide');
+            .attr('class', 'fillL map-pane background-pane hide')
+            .attr('pane', 'background');
 
 
         var heading = _pane
@@ -384,7 +349,7 @@ export function uiBackground(context) {
 
         heading
             .append('button')
-            .on('click', uiBackground.hidePane)
+            .on('click', hidePane)
             .call(svgIcon('#iD-icon-close'));
 
 

modules/ui/help.js

@@ -6,10 +6,7 @@ import {
 import marked from 'marked';
 import { svgIcon } from '../svg';
 import { uiCmd } from './cmd';
-import { uiBackground } from './background';
 import { uiIntro } from './intro';
-import { uiMapData } from './map_data';
-import { uiIssues } from './issues';
 import { uiShortcuts } from './shortcuts';
 import { uiTooltipHtml } from './tooltipHtml';
 
@@ -22,8 +19,6 @@ export function uiHelp(context) {
 
     var _pane = d3_select(null), _toggleButton = d3_select(null);
 
-    var _shown = false;
-
     var docKeys = [
         ['help', [
             'welcome',
@@ -291,42 +286,14 @@ export function uiHelp(context) {
         .html(true)
         .title(uiTooltipHtml(t('help.title'), key));
 
-    uiHelp.hidePane = function() {
-        uiHelp.setVisible(false);
-    };
+    function hidePane() {
+        context.ui().togglePanes();
+    }
 
     uiHelp.togglePane = function() {
         if (d3_event) d3_event.preventDefault();
         paneTooltip.hide(_toggleButton);
-        uiHelp.setVisible(!_toggleButton.classed('active'));
-    };
-
-    uiHelp.setVisible = function(show) {
-        if (show !== _shown) {
-            _toggleButton.classed('active', show);
-            _shown = show;
-
-            if (show) {
-                uiBackground.hidePane();
-                uiIssues.hidePane();
-                uiMapData.hidePane();
-
-                _pane.style('display', 'block')
-                    .style('right', '-500px')
-                    .transition()
-                    .duration(200)
-                    .style('right', '0px');
-
-            } else {
-                _pane.style('right', '0px')
-                    .transition()
-                    .duration(200)
-                    .style('right', '-500px')
-                    .on('end', function() {
-                        d3_select(this).style('display', 'none');
-                    });
-            }
-        }
+        context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
     };
 
     uiHelp.renderToggleButton = function(selection) {
@@ -409,7 +376,8 @@ export function uiHelp(context) {
 
 
         _pane = selection.append('div')
-            .attr('class', 'help-wrap map-pane fillL hide');
+            .attr('class', 'help-wrap map-pane fillL hide')
+            .attr('pane', 'help');
 
         var heading = _pane
             .append('div')
@@ -421,7 +389,7 @@ export function uiHelp(context) {
 
         heading
             .append('button')
-            .on('click', uiHelp.hidePane)
+            .on('click', hidePane)
             .call(svgIcon('#iD-icon-close'));