CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-02-12 16:52:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the over-map controls and panes scale better to small screens

Browse Source
This commit is contained in:
Quincy Morgan
2020-06-24 13:18:24 -04:00
parent fd9a75f36c
commit f1de29d27b
2 changed files with 66 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
css/80_app.css
View File

@@ -2916,14 +2916,43 @@ input.key-trap {
}
.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;
}
/* Map Controls
------------------------------------------------------- */
.map-controls {
right: 0;
top: 141px;
top: 0;
width: 40px;
position: absolute;
z-index: 100;
bottom: 0;
display: flex;
flex-direction: column;
padding: 5px 0;
pointer-events: none;
}
.map-controls:before {
content: '';
display: inline-block;
pointer-events: none;
width: 40px;
height: 100%;
max-height: 70px;
flex: 0 1 auto;
}
.ideditor[dir='rtl'] .map-controls {
left: 0;
@@ -2935,6 +2964,7 @@ input.key-trap {
width: 40px;
background: rgba(0,0,0,.5);
border-radius: 0;
pointer-events: auto;
}
.map-control > button:not(.disabled):focus,
@@ -3688,11 +3718,13 @@ li.issue-fix-item:not(.actionable) .fix-icon {
flex: 0 1 auto;
position: relative;
height: 100%;
max-width: 100%;
}
.map-pane {
position: relative;
top: 0;
width: 400px;
max-width: 100%;
height: 100%;
padding-bottom: 60px;
overflow: hidden;
@@ -4192,21 +4224,6 @@ 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 {

69
modules/ui/init.js
View File

@@ -146,42 +146,6 @@ export function uiInit(context) {
.attr('dir', 'ltr')
.call(map);
// Map controls
var controls = content
.append('div')
.attr('class', 'map-controls');
controls
.append('div')
.attr('class', 'map-control zoombuttons')
.call(uiZoom(context));
controls
.append('div')
.attr('class', 'map-control zoom-to-selection-control')
.call(uiZoomToSelection(context));
controls
.append('div')
.attr('class', 'map-control geolocate-control')
.call(uiGeolocate(context));
var uiPanes = [
uiPaneBackground(context),
uiPaneMapData(context),
uiPaneIssues(context),
uiPanePreferences(context),
uiPaneHelp(context)
];
uiPanes.forEach(function(pane) {
controls
.append('div')
.attr('class', 'map-control map-pane-control ' + pane.id + '-control')
.call(pane.renderToggleButton);
});
content
.append('div')
.attr('class', 'spinner')
@@ -300,13 +264,46 @@ export function uiInit(context) {
.append('div')
.attr('class', 'over-map');
// Map controls
var controls = overMap
.append('div')
.attr('class', 'map-controls');
controls
.append('div')
.attr('class', 'map-control zoombuttons')
.call(uiZoom(context));
controls
.append('div')
.attr('class', 'map-control zoom-to-selection-control')
.call(uiZoomToSelection(context));
controls
.append('div')
.attr('class', 'map-control geolocate-control')
.call(uiGeolocate(context));
// Add panes
// This should happen after map is initialized, as some require surface()
var panes = overMap
.append('div')
.attr('class', 'map-panes');
var uiPanes = [
uiPaneBackground(context),
uiPaneMapData(context),
uiPaneIssues(context),
uiPanePreferences(context),
uiPaneHelp(context)
];
uiPanes.forEach(function(pane) {
controls
.append('div')
.attr('class', 'map-control map-pane-control ' + pane.id + '-control')
.call(pane.renderToggleButton);
panes
.call(pane.renderPane);
});