diff --git a/css/app.css b/css/app.css
index 932ca3b52..53eec9933 100644
--- a/css/app.css
+++ b/css/app.css
@@ -14,6 +14,11 @@ body {
height: 100%;
width: 100%;
position: fixed;
+ min-width: 768px;
+}
+
+.limiter {
+ max-width: 1400px;
}
div, textarea, input, span, ul, li, ol, a, button {
@@ -121,6 +126,36 @@ table.tags, table.tags td, table.tags th {
padding: 4px;
}
+/* Grid
+------------------------------------------------------- */
+
+.col0 { float:left; width:04.1666%; }
+.col1 { float:left; width:08.3333%; }
+.col2 { float:left; width:16.6666%; }
+.col3 { float:left; width:25.0000%; }
+.col4 { float:left; width:33.3333%; }
+.col5 { float:left; width:41.6666%; }
+.col6 { float:left; width:50.0000%; }
+.col7 { float:left; width:58.3333%; }
+.col8 { float:left; width:66.6666%; }
+.col9 { float:left; width:75.0000%; }
+.col10 { float:left; width:83.3333%; }
+.col11 { float:left; width:91.6666%; }
+.col12 { float:left; width:100.0000%; }
+.margin0 { margin-left: 04.1666%; }
+.margin1 { margin-left: 08.3333%; }
+.margin2 { margin-left: 16.6666%; }
+.margin3 { margin-left: 25.0000%; }
+.margin4 { margin-left: 33.3333%; }
+.margin5 { margin-left: 41.6666%; }
+.margin6 { margin-left: 50.0000%; }
+.margin7 { margin-left: 58.3333%; }
+.margin8 { margin-left: 66.6666%; }
+.margin9 { margin-left: 75.0000%; }
+.margin10 { margin-left: 83.3333%; }
+.margin11 { margin-left: 91.6666%; }
+.margin12 { margin-left: 100.0000%; }
+
/* UI Lists
------------------------------------------------------- */
@@ -200,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;
@@ -225,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;
@@ -259,31 +280,33 @@ 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;
}
button.action {
- background-color: #7092ff;
+ background: #444;
}
button.action:hover {
- background-color: #6282ee;
+ background: #222;
}
button.delete {
@@ -294,10 +317,6 @@ button.delete:hover {
}
button.save {
- background-color: #6bc641;
- min-width: 120px;
- width: auto;
- position: relative;
}
button.save.has-count {
@@ -310,7 +329,7 @@ button.save .count {
button.save.has-count .count {
display: block;
- color: #6bc641;
+ color: #444;
background: #fff;
border-radius: 0 3px 3px 0;
padding: 9px;
@@ -320,10 +339,6 @@ button.save.has-count .count {
margin-right: -8px;
}
-button.save:hover {
- background-color: #59ac33;
-}
-
button.close {
position: absolute;
top: 10px;
@@ -458,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 {
@@ -473,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 {
@@ -572,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;
@@ -592,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 afcdfc3e4..2edc7fd23 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).controller(controller));
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');
@@ -173,12 +176,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 600538e4c..b1d26a53b 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("Close")
- .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) {
diff --git a/js/id/ui/save.js b/js/id/ui/save.js
index 6bf8419c3..e711e4bde 100644
--- a/js/id/ui/save.js
+++ b/js/id/ui/save.js
@@ -7,7 +7,7 @@ iD.ui.save = function() {
var history = map.history(),
connection = map.connection();
- selection.html("Save")
+ selection.html("Save")
.attr('title', 'Save changes to OpenStreetMap, making them visible to other users')
.property('disabled', true)
.call(bootstrap.tooltip()