making things consistent with new UI style.

This commit is contained in:
saman bb
2013-01-20 18:30:34 -05:00
parent 19c59236b9
commit 3e8780d466
11 changed files with 91 additions and 77 deletions

View File

@@ -92,16 +92,21 @@ a:hover {
color:#154dff;
}
textarea,
input[type=text] {
background-color: white;
border:1px solid #ccc;
padding:10px;
resize: vertical;
}
input[type=text] {
padding:4px 10px;
height:30px;
.fillD textarea,
.fillD input[type=text] {
background-color: black;
border:1px solid rgba(255, 255, 255, .25);
color: white;
border-radius: 4px;
}
textarea:focus,
@@ -109,6 +114,18 @@ input[type=text]:focus {
background-color: #ececec;
}
.fillD textarea:focus,
.fillD input[type=text]:focus {
background-color: black;
border:1px solid rgba(255, 255, 255, .5);
}
input[type=text] {
padding:4px 10px;
height:30px;
resize: none;
}
/* tables */
table {
@@ -206,10 +223,9 @@ ul.link-list li:last-child {
color: #333;
}
.content, .fillD {
.fillD {
background:rgba(0,0,0,.8);
color: white;
border-radius: 4px;
}
.fl { float: left;}
@@ -220,6 +236,11 @@ form.hide {
display:none;
}
.content {
border-radius: 4px;
box-shadow: 0 0 30px 0px rgba(0, 0, 0, 0.7);
}
.pad1 {padding: 10px;}
.pad2 {padding: 20px;}
.margin1 {margin: 10px;}
@@ -284,7 +305,7 @@ button.centered {
}
.button-wrap button:only-child { width: 100%;}
.button-wrap:last-child { padding-right: 0;}
.button-wrap:last-of-type { padding-right: 0;}
.joined button {
border-right: 1px solid rgba(0,0,0,.5);
@@ -315,9 +336,6 @@ button.delete:hover {
background-color: #ef5454;
}
button.save {
}
button.save.has-count {
padding: 9px;
}
@@ -350,9 +368,9 @@ button.save.has-count .count::before {
left: -6px;
top: 0;
bottom: 0;
border-top: 6px solid transparent;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid rgba(255,255,255,.5);
border-right: 6px solid rgba(255,255,255,.5);
}
button.close {
@@ -361,11 +379,6 @@ button.close {
right: 10px;
}
button.save .label {
display: inline-block;
color: white;
}
button[disabled] {
cursor:auto;
background: rgba(255,255,255,.5);
@@ -474,12 +487,6 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
border-radius: 0;
}
/* Status box */
.messages {
display:none;
}
/* Inspector */
.inspector-wrap {
@@ -492,7 +499,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
.inspector {
min-height: 60px;
position: relative;
border-radius: 0 0 0 4px;
border-radius: 0 0 0 10px;
}
.inspector-inner {
@@ -577,9 +584,20 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
.tag-row button.tag-help {
right: -30px;
}
.inspector-buttons {
border-radius: 0 0 0 10px;
height: 60px;
}
.inspector-buttons .button-wrap {
width: 40%;
padding-right: 0;
}
.inspector-buttons .minor-buttons {
padding-left: 10px;
line-height: 40px;
width: 60%;
}
.inspector-inner .add-tag-row {
@@ -904,10 +922,9 @@ div.typeahead a:first-child {
.modal-section {
padding: 20px;
width: 100%;
}
.modal-section:first-child {
.modal-section.header {
border-radius: 4px 4px 0 0;
}
@@ -915,7 +932,10 @@ div.typeahead a:first-child {
border-radius: 0 0 4px 4px;
}
.modal-section .buttons { padding-top: 20px;}
.modal-section .buttons {
padding-top: 10px;
width: 100%;
}
.modal-section img.wiki-image {
max-width: 400px;
@@ -1078,12 +1098,8 @@ div.typeahead a:first-child {
------------------------------------------------------- */
@media only screen and (max-width: 840px) {
span.label {
display: none;
}
.icon.icon-pre-text {
margin-right: 0px;
}
}
span.label {display: none;}
/* override hide for save button */
.icon.icon-pre-text { margin-right: 0px;}
.save .label { display: block;}
}

View File

@@ -94,7 +94,7 @@ window.iD = function(container) {
.call(undo_tooltip);
var save_button = limiter.append('div').attr('class','button-wrap col1').append('button')
.attr('class', 'save action col12')
.attr('class', 'save col12')
.call(iD.ui.save().map(map).controller(controller));
history.on('change.warn-unload', function() {
@@ -103,9 +103,6 @@ window.iD = function(container) {
} : null;
});
limiter.append('div')
.attr('class', 'messages');
var zoom = container.append('div')
.attr('class', 'zoombuttons map-control')
.selectAll('button')

View File

@@ -59,26 +59,25 @@ iD.ui.commit = function() {
header.append('p').text('The changes you upload will be visible on all maps that use OpenStreetMap data.');
// Comment Box
var comment_section = body.append('div').attr('class','modal-section cf');
var comment_section = body.append('div').attr('class','modal-section fillD');
comment_section.append('textarea')
.attr('class', 'changeset-comment')
.attr('placeholder', 'Brief Description of your contributions');
// Confirm / Cancel Buttons
var buttonwrap = comment_section.append('div')
.attr('class', 'buttons')
.attr('class', 'buttons cf')
.append('div')
.attr('class', 'button-wrap joined col4');
var savebutton = buttonwrap
.append('button')
.attr('class', 'action col6 button')
.attr('class', 'save action col6 button')
.on('click.save', function() {
event.save({
comment: d3.select('textarea.changeset-comment').node().value
});
});
savebutton.append('span').attr('class','icon save icon-pre-text');
savebutton.append('span').attr('class','label').text('Save');
var cancelbutton = buttonwrap.append('button')

View File

@@ -2,7 +2,7 @@ iD.ui.confirm = function() {
var modal = iD.ui.modal();
modal.select('.modal').classed('modal-alert', true);
modal.select('.content')
.classed('modal-section', true)
.attr('class','modal-section fillD')
.append('div')
.attr('class', 'description');
var nochanges = modal.select('.content')

View File

@@ -47,7 +47,7 @@ iD.ui.geocoder = function() {
var gcForm = selection.append('form');
gcForm.attr('class','content map-overlay hide')
gcForm.attr('class','content fillD map-overlay hide')
.append('input')
.attr({ type: 'text', placeholder: 'find a place' })
.on('keydown', keydown);

View File

@@ -39,9 +39,7 @@ iD.ui.inspector = function() {
drawTags(entity.tags);
inspectorbody.append('div')
.attr('class', 'inspector-buttons pad1')
.append('div')
.attr('class','button-wrap joined')
.attr('class', 'inspector-buttons pad1 fillD')
.call(drawButtons);
}
@@ -55,41 +53,45 @@ iD.ui.inspector = function() {
h2.append('span')
.text(entity.friendlyName());
selection.append('a')
.attr('href', 'http://www.openstreetmap.org/browse/' + entity.type + '/' + entity.osmId())
.attr('target', '_blank')
.text('View on OSM');
if (entity.type === 'way') {
selection.append('a')
.attr('href', '#')
.text('Reverse Direction')
.on('click', function() { event.changeWayDirection(entity); });
}
if (entity.geometry() === 'vertex') {
selection.append('a')
.attr('href', '#')
.text('Split Way')
.on('click', function() { event.splitWay(entity); });
}
}
function drawButtons(selection) {
var inspectorButton1 = selection.append('button')
var entity = selection.datum();
var inspectorButtonWrap = selection.append('div')
.attr('class','button-wrap joined fl');
var inspectorButton1 = inspectorButtonWrap.append('button')
.attr('class', 'apply col6 action')
.on('click', apply);
inspectorButton1.append('span').attr('class','icon icon-pre-text apply');
inspectorButton1.append('span').attr('class','label').text('Okay');
var inspectorButton2 = selection.append('button')
var inspectorButton2 = inspectorButtonWrap.append('button')
.attr('class', 'delete col6 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');
var minorButtons = selection.append('div').attr('class','minor-buttons fl');
minorButtons.append('a')
.attr('href', 'http://www.openstreetmap.org/browse/' + entity.type + '/' + entity.osmId())
.attr('target', '_blank')
.text('View on OSM');
if (entity.type === 'way') {
minorButtons.append('a')
.attr('href', '#')
.text('Reverse Direction')
.on('click', function() { event.changeWayDirection(entity); });
}
if (entity.geometry() === 'vertex') {
minorButtons.append('a')
.attr('href', '#')
.text('Split Way')
.on('click', function() { event.splitWay(entity); });
}
}
function drawTags(tags) {

View File

@@ -4,10 +4,10 @@ iD.ui.keyReference = function(selection) {
var selection = d3.select(this),
data = selection.datum(),
header = selection.append('div')
.attr('class','modal-section')
.attr('class','modal-section fillL')
.append('h2'),
body = selection.append('div')
.attr('class', 'modal-section');
.attr('class', 'modal-section fillL2');
header.append('span').attr('class', 'icon big icon-pre-text big-' + data.geometry);
header.append('span').text(data.title);

View File

@@ -29,7 +29,7 @@ iD.ui.layerswitcher = function(map) {
function layerswitcher(selection) {
var content = selection
.append('div').attr('class', 'content map-overlay hide');
.append('div').attr('class', 'content fillD map-overlay hide');
var button = selection
.append('button')

View File

@@ -3,7 +3,7 @@ iD.ui.loading = function(message) {
var loadertext = modal.select('.content')
.classed('loading-modal', true)
.append('div').classed('modal-section',true);
.append('div').attr('class','modal-section fillL');
loadertext.append('img').attr('class','loader').attr('src', '/img/loader.gif');
loadertext.append('h3').text(message || '');

View File

@@ -6,7 +6,7 @@ iD.ui.success = function() {
header = selection.append('div').attr('class', 'header fillL modal-section'),
body = selection.append('div').attr('class', 'body');
var section = body.append('div').attr('class','modal-section cf');
var section = body.append('div').attr('class','modal-section fillD');
header.append('h2').text('You Just Edited OpenStreetMap!');
header.append('p').text('You just improved the world\'s best free map');
@@ -27,7 +27,7 @@ iD.ui.success = function() {
.text('Tweet: ' + message);
var buttonwrap = section.append('div')
.attr('class', 'buttons');
.attr('class', 'buttons cf');
var okbutton = buttonwrap.append('button')
.attr('class', 'action col2')
@@ -36,7 +36,7 @@ iD.ui.success = function() {
});
okbutton.append('span').attr('class','icon apply icon-pre-text');
okbutton.append('span').attr('class','label').text('OK');
okbutton.append('span').attr('class','label').text('Okay');
}
return d3.rebind(success, event, 'on');

View File

@@ -3,7 +3,7 @@ iD.ui.tagReference = function(selection) {
function g(x) { return function(d) { return d[x]; }; }
var selection = d3.select(this);
var header = selection.append('div')
.attr('class','modal-section')
.attr('class','modal-section fillL header')
.append('h2');
header.selectAll('span.icon')
@@ -20,7 +20,7 @@ iD.ui.tagReference = function(selection) {
.text(g('title'));
referenceBody = selection.append('div')
.attr('class','modal-section');
.attr('class','modal-section fillL2');
referenceBody
.append('h5')