mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 09:12:52 +00:00
making things consistent with new UI style.
This commit is contained in:
84
css/app.css
84
css/app.css
@@ -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;}
|
||||
}
|
||||
|
||||
@@ -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')
|
||||
|
||||
@@ -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')
|
||||
|
||||
@@ -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')
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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')
|
||||
|
||||
@@ -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 || '');
|
||||
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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')
|
||||
|
||||
Reference in New Issue
Block a user