diff --git a/css/app.css b/css/app.css
index fbb8de027..6dbcd45a5 100644
--- a/css/app.css
+++ b/css/app.css
@@ -78,7 +78,7 @@ table th {
#map {
display:block;
position:absolute;
- top:40px;
+ top:45px;
left:0;
right:0;
bottom:0;
@@ -98,7 +98,7 @@ table th {
position:absolute;
left:0px;
top:0px;
- height:40px;
+ height:45px;
right:0;
}
@@ -118,13 +118,32 @@ input#geocode-location {
font-weight:bold;
font-size:14px;
line-height:19px;
- border:0;
- border-right:1px solid #eee;
+ border:1px solid #ccc;
+ border-radius:3px;
padding:0 10px;
- height:40px;
+ height:35px;
margin:0;
}
+div.buttons-joined {
+ padding:5px;
+ display:inline-block;
+}
+
+#bar div.buttons-joined button:first-child {
+ border-radius:3px 0 0 3px;
+ border-right:0;
+}
+#bar div.buttons-joined button:last-child {
+ border-right:1px solid #ccc;
+ border-radius:0 3px 3px 0;
+}
+
+#bar div.buttons-joined button {
+ border-right:0;
+ border-radius:0;
+}
+
#bar .messages {
position:absolute;
right:200px;
@@ -160,8 +179,6 @@ input#geocode-location {
position:absolute;
top:0;
right:100px;
- background:#7092ff;
- color:#fff;
}
#bar button.mini,
@@ -179,16 +196,28 @@ input#geocode-location {
.zoombuttons {
position:absolute;
- right:0;
- top:0;
+ left:10px;
+ top:50px;
+ width:40px;
}
+
#bar .zoombuttons button {
- width:50px;
+ width:40px;
+ border:1px solid #ccc;
+}
+
+#bar .zoombuttons button.zoom-in {
+ border-bottom:0;
+ border-radius:5px 5px 0 0;
+}
+
+#bar .zoombuttons button.zoom-out {
+ border-radius:0 0 5px 5px;
}
.inspector-wrap {
position:absolute;
- top:40px;
+ top:45px;
right:0px;
overflow:auto;
padding:10px;
diff --git a/js/id/id.js b/js/id/id.js
index f857e7325..9c1f8196a 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -25,7 +25,10 @@ window.iD = function(container) {
var bar = this.append('div')
.attr('id', 'bar');
- var buttons = bar.selectAll('button.add-button')
+ var buttons_joined = bar.append('div')
+ .attr('class', 'buttons-joined');
+
+ var buttons = buttons_joined.selectAll('button.add-button')
.data([iD.modes.AddPlace(), iD.modes.AddRoad(), iD.modes.AddArea()])
.enter().append('button')
.attr('class', 'add-button')
@@ -36,13 +39,16 @@ window.iD = function(container) {
buttons.classed('active', function (mode) { return entered === mode; });
});
- bar.append('button')
+ var undo_buttons = bar.append('div')
+ .attr('class', 'buttons-joined');
+
+ undo_buttons.append('button')
.attr({ id: 'undo', 'class': 'mini' })
.property('disabled', true)
.html('←')
.on('click', history.undo);
- bar.append('button')
+ undo_buttons.append('button')
.attr({ id: 'redo', 'class': 'mini' })
.property('disabled', true)
.html('→')