mirror of
https://github.com/FoggedLens/iD.git
synced 2026-04-21 19:26:41 +02:00
Swap sidebar and map controls
This commit is contained in:
John Firebaugh
+46
-36
@@ -39,6 +39,10 @@ body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.limiter {
|
||||
position: relative;
|
||||
max-width: 1200px;
|
||||
@@ -52,19 +56,13 @@ body {
|
||||
position: absolute;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
right: 33.3333%;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
background: black;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.spinner img {
|
||||
right: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
@@ -550,9 +548,9 @@ button.save.has-count .count::before {
|
||||
.icon.relation.route { background-position: -540px 0;}
|
||||
.icon.relation.multipolygon { background-position: -560px 0;}
|
||||
|
||||
.icon.plus.light,
|
||||
.icon.zoom-in { background-position: -240px -20px;}
|
||||
.icon.zoom-out { background-position: -260px -20px;}
|
||||
.icon.plus.light { background-position: -240px -20px;}
|
||||
.icon.zoom-in { background-position: -240px 0px;}
|
||||
.icon.zoom-out { background-position: -260px 0px;}
|
||||
.icon.inspect.light { background-position: -220px -20px;}
|
||||
.icon.geocode.light { background-position: -280px -20px;}
|
||||
.icon.help.light { background-position: -460px -20px;}
|
||||
@@ -603,7 +601,7 @@ a:hover .icon.out-link { background-position: -500px -14px;}
|
||||
------------------------------------------------------- */
|
||||
|
||||
#bar {
|
||||
position:fixed;
|
||||
position: fixed;
|
||||
padding: 10px;
|
||||
left:0;
|
||||
top:0;
|
||||
@@ -680,7 +678,7 @@ a:hover .icon.out-link { background-position: -500px -14px;}
|
||||
|
||||
#sidebar {
|
||||
position: relative;
|
||||
float: right;
|
||||
float: left;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
@@ -1755,25 +1753,22 @@ img.wiki-image {
|
||||
/* Map Controls */
|
||||
|
||||
.map-controls {
|
||||
left: 0;
|
||||
top: 80px;
|
||||
width: 30px;
|
||||
right: 10px;
|
||||
top: 70px;
|
||||
width: 40px;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.map-control > button {
|
||||
width: 30px;
|
||||
background: rgba(0,0,0,.5);
|
||||
width: 40px;
|
||||
background-color: #FFF;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.map-control > button:hover {
|
||||
background: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
.map-control > button.active:hover {
|
||||
background: #7092ff;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.map-overlay {
|
||||
@@ -1790,21 +1785,32 @@ img.wiki-image {
|
||||
/* Zoomer */
|
||||
|
||||
.zoombuttons button.zoom-in {
|
||||
border-radius:0 4px 0 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
/* Background Settings */
|
||||
|
||||
|
||||
.toggle-list.layer-list {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.background-control button {
|
||||
border-radius:0 4px 0 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
|
||||
.background-control button.active {
|
||||
border-radius: 0;
|
||||
border-radius: 0 4px 0 0;
|
||||
}
|
||||
|
||||
.background-control {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.background-control .map-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.nudge-container {
|
||||
@@ -1941,11 +1947,13 @@ img.wiki-image {
|
||||
|
||||
/* Geocoder */
|
||||
|
||||
.geocode-control form {
|
||||
top:260px;
|
||||
.geocode-control {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.geocode-control form {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
@@ -1954,12 +1962,14 @@ img.wiki-image {
|
||||
}
|
||||
|
||||
.geocode-control div.map-overlay {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: -260px;
|
||||
border-top: 1px solid #CCC;
|
||||
z-index: 100;
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.geocode-control div.map-overlay span {
|
||||
@@ -1979,26 +1989,26 @@ img.wiki-image {
|
||||
|
||||
/* Geolocator */
|
||||
|
||||
.geolocate-control {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.geolocate-control button {
|
||||
border-radius: 0 0 4px 0;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
/* Help */
|
||||
|
||||
.help-control {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.help-control button {
|
||||
border-radius: 0 0 4px 0;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
.help-wrap {
|
||||
position: fixed;
|
||||
top:60px;
|
||||
bottom: 30px;
|
||||
padding: 20px 20px 20px 50px;
|
||||
left: 0;
|
||||
padding: 20px 50px 20px 20px;
|
||||
right: 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
+13
-10
@@ -29,6 +29,9 @@ iD.ui = function(context) {
|
||||
.attr('id', 'map')
|
||||
.call(map);
|
||||
|
||||
var spacer = bar.append('div')
|
||||
.attr('class', 'spacer col4');
|
||||
|
||||
var limiter = bar.append('div')
|
||||
.attr('class', 'limiter');
|
||||
|
||||
@@ -60,18 +63,18 @@ iD.ui = function(context) {
|
||||
var controls = bar.append('div')
|
||||
.attr('class', 'map-controls');
|
||||
|
||||
controls.append('div')
|
||||
.attr('class', 'map-control background-control')
|
||||
.call(iD.ui.Background(context));
|
||||
|
||||
controls.append('div')
|
||||
.attr('class', 'map-control help-control')
|
||||
.call(iD.ui.Help(context));
|
||||
|
||||
controls.append('div')
|
||||
.attr('class', 'map-control zoombuttons')
|
||||
.call(iD.ui.Zoom(context));
|
||||
|
||||
controls.append('div')
|
||||
.attr('class', 'map-control geolocate-control')
|
||||
.call(iD.ui.Geolocate(map));
|
||||
|
||||
controls.append('div')
|
||||
.attr('class', 'map-control background-control')
|
||||
.call(iD.ui.Background(context));
|
||||
|
||||
if (!context.embed()) {
|
||||
controls.append('div')
|
||||
.attr('class', 'map-control geocode-control')
|
||||
@@ -79,8 +82,8 @@ iD.ui = function(context) {
|
||||
}
|
||||
|
||||
controls.append('div')
|
||||
.attr('class', 'map-control geolocate-control')
|
||||
.call(iD.ui.Geolocate(map));
|
||||
.attr('class', 'map-control help-control')
|
||||
.call(iD.ui.Help(context));
|
||||
|
||||
var about = content.append('div')
|
||||
.attr('class','col12 about-block fillD');
|
||||
|
||||
@@ -163,16 +163,16 @@ iD.ui.Background = function(context) {
|
||||
return d3.event.stopPropagation();
|
||||
});
|
||||
content.style('display', 'block')
|
||||
.style('left', '-500px')
|
||||
.style('left', '0px')
|
||||
.transition()
|
||||
.duration(200)
|
||||
.style('left', '30px');
|
||||
.style('left', '-260px');
|
||||
} else {
|
||||
content.style('display', 'block')
|
||||
.style('left', '30px')
|
||||
.style('left', '-260px')
|
||||
.transition()
|
||||
.duration(200)
|
||||
.style('left', '-500px')
|
||||
.style('left', '0px')
|
||||
.each('end', function() {
|
||||
d3.select(this).style('display', 'none');
|
||||
});
|
||||
|
||||
@@ -131,18 +131,18 @@ iD.ui.Geocoder = function(context) {
|
||||
return d3.event.stopPropagation();
|
||||
});
|
||||
gcForm.style('display', 'block')
|
||||
.style('left', '-500px')
|
||||
.style('left', '0px')
|
||||
.transition()
|
||||
.duration(200)
|
||||
.style('left', '30px');
|
||||
.style('left', '-260px');
|
||||
inputNode.node().focus();
|
||||
} else {
|
||||
selection.on('mousedown.geocoder-inside', null);
|
||||
gcForm.style('display', 'block')
|
||||
.style('left', '30px')
|
||||
.style('left', '-260px')
|
||||
.transition()
|
||||
.duration(200)
|
||||
.style('left', '-500px')
|
||||
.style('left', '0px')
|
||||
.each('end', function() {
|
||||
d3.select(this).style('display', 'none');
|
||||
});
|
||||
@@ -156,7 +156,7 @@ iD.ui.Geocoder = function(context) {
|
||||
.call(tooltip);
|
||||
|
||||
button.append('span')
|
||||
.attr('class', 'icon geocode light');
|
||||
.attr('class', 'icon geocode');
|
||||
|
||||
keybinding.on(key, toggle);
|
||||
|
||||
|
||||
+5
-5
@@ -115,16 +115,16 @@ iD.ui.Help = function(context) {
|
||||
shown = show;
|
||||
if (show) {
|
||||
pane.style('display', 'block')
|
||||
.style('left', '-500px')
|
||||
.style('right', '-500px')
|
||||
.transition()
|
||||
.duration(200)
|
||||
.style('left', '0px')
|
||||
.style('right', '0px')
|
||||
.each('end', blockClick);
|
||||
} else {
|
||||
pane.style('left', '0px')
|
||||
pane.style('right', '0px')
|
||||
.transition()
|
||||
.duration(200)
|
||||
.style('left', '-500px')
|
||||
.style('right', '-500px')
|
||||
.each('end', function() {
|
||||
d3.select(this).style('display', 'none');
|
||||
});
|
||||
@@ -144,7 +144,7 @@ iD.ui.Help = function(context) {
|
||||
.call(tooltip);
|
||||
|
||||
button.append('span')
|
||||
.attr('class', 'icon help light');
|
||||
.attr('class', 'icon help');
|
||||
|
||||
context.surface().on('mousedown.help-outside', hide);
|
||||
context.container().on('mousedown.b.help-outside', hide);
|
||||
|
||||
Reference in New Issue
Block a user