Fix minimap position (close #6167)

Flexbox panes and info panels to prevent overlap (close #4733)
2026-03-31 01:09:22 +02:00 · 2019-04-15 11:50:54 -07:00
parent 28db597e8f
commit 6bdf6c5127
7 changed files with 127 additions and 197 deletions
--- a/css/60_photos.css
+++ b/css/60_photos.css
@@ -1,7 +1,7 @@
 /* photo viewer div */
 #photoviewer {
    position: absolute;
-    bottom: 40px;
+    bottom: 10px;
    left: 10px;
    width: 330px;
    height: 250px;
--- a/css/80_app.css
+++ b/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,7 +3821,7 @@ img.tile-debug {
 .map-in-map {
    position: absolute;
    overflow: hidden;
-    top: 60px;
+    top: 10px;
    width: 200px;
    height: 150px;
    z-index: 5;
@@ -3828,6 +3829,12 @@ img.tile-debug {
    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;
--- a/modules/ui/background.js
+++ b/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'));


--- a/modules/ui/help.js
+++ b/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'));


--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -1,6 +1,7 @@
 import {
    event as d3_event,
-    select as d3_select
+    select as d3_select,
+    selectAll as d3_selectAll
 } from 'd3-selection';

 import { t, textDirection } from '../util/locale';
@@ -220,9 +221,13 @@ export function uiInit(context) {
        }


+        var overMap = content
+            .append('div')
+            .attr('class', 'over-map');
+
        // Add panes
        // This should happen after map is initialized, as some require surface()
-        var panes = content
+        var panes = overMap
            .append('div')
            .attr('class', 'map-panes');

@@ -232,15 +237,15 @@ export function uiInit(context) {
            .call(issues.renderPane)
            .call(help.renderPane);

-
        // Add absolutely-positioned elements that sit on top of the map
        // This should happen after the map is ready (center/zoom)
-        content
+        overMap
            .call(uiMapInMap(context))
            .call(uiInfo(context))
            .call(uiNotice(context));

-        content
+
+        overMap
            .append('div')
            .attr('id', 'photoviewer')
            .classed('al', true)       // 'al'=left,  'ar'=right
@@ -410,6 +415,49 @@ export function uiInit(context) {
        }
    };

+    ui.togglePanes = function(showPane) {
+        var shownPanes = d3_selectAll('.map-pane.shown');
+
+        shownPanes
+            .classed('shown', false);
+
+        d3_selectAll('.map-control button')
+            .classed('active', false);
+
+        if (showPane) {
+            shownPanes
+                .style('display', 'none')
+                .style('right', '-500px');
+
+            d3_selectAll('.' + showPane.attr('pane') + '-control button')
+                .classed('active', true);
+
+            showPane
+                .classed('shown', true)
+                .style('display', 'block');
+            if (shownPanes.empty()) {
+                showPane
+                    .style('display', 'block')
+                    .style('right', '-500px')
+                    .transition()
+                    .duration(200)
+                    .style('right', '0px');
+            } else {
+                showPane
+                    .style('right', '0px');
+            }
+        } else {
+            shownPanes
+                .style('display', 'block')
+                .style('right', '0px')
+                .transition()
+                .duration(200)
+                .style('right', '-500px')
+                .on('end', function() {
+                    d3_select(this).style('display', 'none');
+                });
+        }
+    };

    return ui;
 }
--- a/modules/ui/issues.js
+++ b/modules/ui/issues.js
@@ -7,10 +7,7 @@ import { svgIcon } from '../svg';
 import { t, textDirection } from '../util/locale';
 import { tooltip } from '../util/tooltip';
 import { modeSelect } from '../modes';
-import { uiBackground } from './background';
 import { uiDisclosure } from './disclosure';
-import { uiHelp } from './help';
-import { uiMapData } from './map_data';
 import { uiTooltipHtml } from './tooltipHtml';
 import { utilHighlightEntities } from '../util';

@@ -22,7 +19,6 @@ export function uiIssues(context) {
    var _rulesList = d3_select(null);
    var _pane = d3_select(null);
    var _toggleButton = d3_select(null);
-    var _shown = false;

    context.validator().on('reload.issues_pane', update);

@@ -345,46 +341,14 @@ export function uiIssues(context) {
        .html(true)
        .title(uiTooltipHtml(t('issues.title'), key));

-    uiIssues.hidePane = function() {
-        uiIssues.setVisible(false);
-    };
+    function hidePane() {
+        context.ui().togglePanes();
+    }

    uiIssues.togglePane = function() {
        if (d3_event) d3_event.preventDefault();
        paneTooltip.hide(_toggleButton);
-        uiIssues.setVisible(!_toggleButton.classed('active'));
-    };
-
-    uiIssues.setVisible = function(show) {
-        if (show !== _shown) {
-            _toggleButton.classed('active', show);
-            _shown = show;
-
-            if (show) {
-                uiBackground.hidePane();
-                uiHelp.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');
-                    });
-            }
-        }
+        context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
    };

    uiIssues.renderToggleButton = function(selection) {
@@ -403,7 +367,8 @@ export function uiIssues(context) {

        _pane = selection
            .append('div')
-            .attr('class', 'fillL map-pane issues-pane hide');
+            .attr('class', 'fillL map-pane issues-pane hide')
+            .attr('pane', 'map-issues');

        var heading = _pane
            .append('div')
@@ -415,7 +380,7 @@ export function uiIssues(context) {

        heading
            .append('button')
-            .on('click', uiIssues.hidePane)
+            .on('click', hidePane)
            .call(svgIcon('#iD-icon-close'));

        var content = _pane
--- a/modules/ui/map_data.js
+++ b/modules/ui/map_data.js
@@ -8,10 +8,7 @@ import { t, textDirection } from '../util/locale';
 import { tooltip } from '../util/tooltip';
 import { geoExtent } from '../geo';
 import { modeBrowse } from '../modes';
-import { uiBackground } from './background';
 import { uiDisclosure } from './disclosure';
-import { uiHelp } from './help';
-import { uiIssues } from './issues';
 import { uiSettingsCustomData } from './settings/custom_data';
 import { uiTooltipHtml } from './tooltipHtml';

@@ -28,7 +25,6 @@ export function uiMapData(context) {
    var _pane = d3_select(null), _toggleButton = d3_select(null);

    var _fillSelected = context.storage('area-fill') || 'partial';
-    var _shown = false;
    var _dataLayerContainer = d3_select(null);
    var _photoOverlayContainer = d3_select(null);
    var _fillList = d3_select(null);
@@ -731,46 +727,14 @@ export function uiMapData(context) {
        .html(true)
        .title(uiTooltipHtml(t('map_data.description'), key));

-    uiMapData.hidePane = function() {
-        uiMapData.setVisible(false);
-    };
+    function hidePane() {
+        context.ui().togglePanes();
+    }

    uiMapData.togglePane = function() {
        if (d3_event) d3_event.preventDefault();
        paneTooltip.hide(_toggleButton);
-        uiMapData.setVisible(!_toggleButton.classed('active'));
-    };
-
-    uiMapData.setVisible = function(show) {
-        if (show !== _shown) {
-            _toggleButton.classed('active', show);
-            _shown = show;
-
-            if (show) {
-                uiBackground.hidePane();
-                uiHelp.hidePane();
-                uiIssues.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');
-                    });
-            }
-        }
+        context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
    };

    uiMapData.renderToggleButton = function(selection) {
@@ -788,7 +752,8 @@ export function uiMapData(context) {

        _pane = selection
            .append('div')
-            .attr('class', 'fillL map-pane map-data-pane hide');
+            .attr('class', 'fillL map-pane map-data-pane hide')
+            .attr('pane', 'map-data');

        var heading = _pane
            .append('div')
@@ -800,7 +765,7 @@ export function uiMapData(context) {

        heading
            .append('button')
-            .on('click', uiMapData.hidePane)
+            .on('click', hidePane)
            .call(svgIcon('#iD-icon-close'));