diff --git a/css/app.css b/css/app.css
index fb6a894a3..468478091 100644
--- a/css/app.css
+++ b/css/app.css
@@ -14,6 +14,11 @@ body {
height: 100%;
width: 100%;
position: fixed;
+ min-width: 760px;
+}
+
+.limiter {
+ max-width: 1400px;
}
div, textarea, input, span, ul, li, ol, a, button {
@@ -230,7 +235,7 @@ button {
color:#222;
background: white;
font-weight:bold;
- font-size:14px;
+ font-size:12px;
display: inline-block;
height:40px;
cursor:url(../img/cursor-pointer.png) 6 1, auto;
@@ -255,20 +260,6 @@ button.narrow {
border-radius:4px;
}
-button.wide {
- margin: 10px;
- width: 100px;
-}
-
-button.add-button {
- width: 80px;
-}
-
-button.narrow,
-button.Browse {
- width:40px;
-}
-
button.minor {
border-radius:4px;
height: 20px;
@@ -289,22 +280,24 @@ button.centered {
margin-right: auto;
}
-.buttons-joined {
+.button-wrap {
display: inline-block;
- margin:10px;
-}
-
-.buttons-joined button {
- border-right-width: 0;
- border-radius:0;
+ padding:10px 0 10px 10px;
margin: 0;
}
-.buttons-joined button:first-child {
+.button-wrap button:only-child { width: 100%;}
+
+.joined button {
+ border-right-width: 0;
+ border-radius:0;
+}
+
+.joined button:first-child {
border-radius:4px 0 0 4px;
}
-.buttons-joined button:last-child {
+.joined button:last-child {
border-right-width: 1px;
border-radius:0 4px 4px 0;
}
@@ -324,8 +317,6 @@ button.delete:hover {
}
button.save {
- min-width: 120px;
- width: auto;
}
button.save.has-count {
@@ -482,12 +473,6 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
height:60px;
}
-/* Special rules for toolbar icons */
-
-button.Browse .label {
- display: none;
- }
-
/* Status box */
.messages {
@@ -497,18 +482,21 @@ button.Browse .label {
/* Inspector */
.inspector-wrap {
- position:absolute;
- right: 0;
+ opacity:0;
+ display:none;
+ padding-left: 10px;
+ max-width: 600px;
+}
+
+.inspector {
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
min-height: 60px;
- opacity:0;
- display:none;
+ position: relative;
}
.inspector-inner {
padding: 10px;
- min-width:400px;
}
.inspector-inner.head {
@@ -596,6 +584,10 @@ button.Browse .label {
border-top: 1px solid #ccc;
}
+.inspector-buttons .button-wrap {
+ width: 20%;
+}
+
.inspector-inner .add-tag-row {
width: 100%;
padding-right: 70px;
@@ -616,6 +608,10 @@ button.Browse .label {
position:absolute;
}
+.map-control button {
+ width: 40px;
+}
+
.map-overlay {
width: 150px;
position:absolute;
diff --git a/js/id/id.js b/js/id/id.js
index 712656cd6..a6af4242a 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -24,13 +24,16 @@ window.iD = function(container) {
var bar = container.append('div')
.attr('id', 'bar').attr('class', 'fillL2');
- var buttons_joined = bar.append('div')
- .attr('class', 'buttons-joined');
+ var limiter = bar.append('div')
+ .attr('class', 'limiter');
+
+ var buttons_joined = limiter.append('div')
+ .attr('class', 'button-wrap joined col4');
var buttons = buttons_joined.selectAll('button.add-button')
.data([iD.modes.Browse(), iD.modes.AddPoint(), iD.modes.AddLine(), iD.modes.AddArea()])
.enter().append('button')
- .attr('class', function (mode) { return mode.title + ' add-button'; })
+ .attr('class', function (mode) { return mode.title + ' add-button col3'; })
.attr('data-original-title', function (mode) { return mode.description; })
.call(bootstrap.tooltip().placement('bottom'))
.on('click', function (mode) { controller.enter(mode); });
@@ -46,7 +49,7 @@ window.iD = function(container) {
}
}
- notice = iD.ui.notice(bar
+ notice = iD.ui.notice(limiter
.append('div')
.attr('class', 'notice'));
@@ -71,19 +74,19 @@ window.iD = function(container) {
container.classed("mode-" + exited.id, false);
});
- var undo_buttons = bar.append('div')
- .attr('class', 'buttons-joined'),
+ var undo_buttons = limiter.append('div')
+ .attr('class', 'button-wrap joined col1'),
undo_tooltip = bootstrap.tooltip().placement('bottom');
undo_buttons.append('button')
- .attr({ id: 'undo', 'class': 'narrow' })
+ .attr({ id: 'undo', 'class': 'col6 narrow' })
.property('disabled', true)
.html("")
.on('click', history.undo)
.call(undo_tooltip);
undo_buttons.append('button')
- .attr({ id: 'redo', 'class': 'narrow' })
+ .attr({ id: 'redo', 'class': 'col6 narrow' })
.property('disabled', true)
.html("")
.on('click', history.redo)
@@ -94,8 +97,8 @@ window.iD = function(container) {
.append('div')
.attr('class', 'hello');
- var save_button = bar.append('button')
- .attr('class', 'save action wide')
+ var save_button = limiter.append('div').attr('class','button-wrap col1').append('button')
+ .attr('class', 'save action wide col12')
.call(iD.ui.save().map(map));
history.on('change.warn-unload', function() {
@@ -110,7 +113,7 @@ window.iD = function(container) {
} : null;
});
- bar.append('div')
+ limiter.append('div')
.attr('class', 'messages');
var zoom = container.append('div')
@@ -139,8 +142,8 @@ window.iD = function(container) {
.call(iD.ui.layerswitcher(map));
container.append('div')
- .attr('class', 'inspector-wrap fillL')
- .style('display', 'none');
+ .style('display', 'none')
+ .attr('class', 'inspector-wrap fr col5');
var about = container.append('div').attr('id', 'attrib-container');
@@ -169,12 +172,12 @@ window.iD = function(container) {
}
}
- bar.select('#undo')
+ limiter.select('#undo')
.property('disabled', !undo)
.attr('data-original-title', undo)
.call(undo ? refreshTooltip : undo_tooltip.hide);
- bar.select('#redo')
+ limiter.select('#redo')
.property('disabled', !redo)
.attr('data-original-title', redo)
.call(redo ? refreshTooltip : undo_tooltip.hide);
diff --git a/js/id/modes/browse.js b/js/id/modes/browse.js
index c57b503f5..4b2ea448f 100644
--- a/js/id/modes/browse.js
+++ b/js/id/modes/browse.js
@@ -2,7 +2,7 @@ iD.modes.Browse = function() {
var mode = {
button: 'browse',
id: 'browse',
- title: 'Browse',
+ title: 'Move',
description: 'Pan and zoom the map'
};
diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js
index da022e8c8..5edc48e9f 100644
--- a/js/id/ui/inspector.js
+++ b/js/id/ui/inspector.js
@@ -14,11 +14,15 @@ iD.ui.inspector = function() {
event.close(entity);
});
- selection.append('div')
+
+ var inspector = selection.append('div')
+ .attr('class','inspector fillL');
+
+ inspector.append('div')
.attr('class', 'head inspector-inner')
.call(drawHead);
- var inspectorbody = selection.append('div')
+ var inspectorbody = inspector.append('div')
.attr('class', 'inspector-body');
var inspectorwrap = inspectorbody.append('div')
@@ -79,15 +83,23 @@ iD.ui.inspector = function() {
}
function drawButtons(selection) {
- selection.append('button')
- .attr('class', 'apply wide action')
- .html("Apply")
- .on('click', apply);
+ var inspectorButton1 = selection.append('div')
+ .attr('class', 'button-wrap')
+ .append('button')
+ .attr('class', 'apply wide action')
+ .on('click', apply);
- selection.append('button')
- .attr('class', 'delete wide action')
- .html("Delete")
- .on('click', function(entity) { event.remove(entity); });
+ inspectorButton1.append('span').attr('class','icon icon-pre-text apply');
+ inspectorButton1.append('span').attr('class','label').text('Apply');
+
+ var inspectorButton2 = selection.append('div')
+ .attr('class', 'button-wrap')
+ .append('button')
+ .attr('class', 'delete wide action')
+ .on('click', function(entity) { event.remove(entity); });
+
+ inspectorButton2.append('span').attr('class','icon icon-pre-text delete');
+ inspectorButton2.append('span').attr('class','label').text('Delete');
}
function drawTags(tags) {