mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 09:12:52 +00:00
refining buttons.
This commit is contained in:
Saman Bemel-Benrud
167
css/app.css
167
css/app.css
@@ -78,51 +78,61 @@ button {
|
||||
border:0;
|
||||
line-height:20px;
|
||||
cursor:pointer;
|
||||
border-radius:4px;
|
||||
border:1px solid #b0b0b0;
|
||||
border:1px solid #aaa;
|
||||
box-shadow: inset 0 0 0 1px #fff;
|
||||
color:#222;
|
||||
background: white;
|
||||
font-weight:bold;
|
||||
white-space:nowrap;
|
||||
font-size:14px;
|
||||
display: inline-block;
|
||||
height:40px;
|
||||
margin:10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
button.big {
|
||||
margin:10px;
|
||||
height:40px;
|
||||
button.active:not([disabled]) {
|
||||
background:#7392ff;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
button.mini {
|
||||
width:auto;
|
||||
button.wide,
|
||||
button.narrow {
|
||||
border-radius:4px;
|
||||
}
|
||||
|
||||
button.wide,
|
||||
button.add-button {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
|
||||
button.narrow,
|
||||
button.add-button:first-child {
|
||||
width:40px;
|
||||
}
|
||||
|
||||
.buttons-joined {
|
||||
display: inline-block;
|
||||
margin:10px;
|
||||
padding:1px;
|
||||
border-radius: 4px;
|
||||
background:#fff;
|
||||
display:inline-block;
|
||||
border:1px solid #b0b0b0;
|
||||
}
|
||||
|
||||
.buttons-joined button {
|
||||
height:36px;
|
||||
border:0;
|
||||
border-right:1px solid #ccc;
|
||||
border-right-width: 0;
|
||||
border-radius:0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.buttons-joined button:first-child {
|
||||
border-radius:3px 0 0 3px;
|
||||
border-radius:4px 0 0 4px;
|
||||
}
|
||||
|
||||
.buttons-joined button:last-child {
|
||||
border-right:0;
|
||||
border-radius:0 3px 3px 0;
|
||||
border-right-width: 1px;
|
||||
border-radius:0 4px 4px 0;
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
@@ -130,11 +140,6 @@ button[disabled] {
|
||||
cursor:auto;
|
||||
}
|
||||
|
||||
button.active:not([disabled]) {
|
||||
background:#7392ff;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
button.save {
|
||||
display:inline-block;
|
||||
color:#6dc643;
|
||||
@@ -207,7 +212,7 @@ img.tile {
|
||||
------------------------------------------------------- */
|
||||
|
||||
#bar {
|
||||
border-bottom:1px solid #aaa;
|
||||
border-bottom:1px solid #ccc;
|
||||
position:absolute;
|
||||
left:0px;
|
||||
top:0px;
|
||||
@@ -221,6 +226,60 @@ img.tile {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* Inspector */
|
||||
|
||||
.inspector-wrap {
|
||||
border:1px solid #ccc;
|
||||
position:absolute;
|
||||
right: 0;
|
||||
left: 510px;
|
||||
padding:10px;
|
||||
height: 60px;
|
||||
opacity:0;
|
||||
display:none;
|
||||
}
|
||||
|
||||
.inspector-wrap a.permalink {
|
||||
text-decoration:none;
|
||||
margin-right:1em;
|
||||
}
|
||||
|
||||
.inspector tbody td {
|
||||
border: 1px solid #ccc;
|
||||
width:150px;
|
||||
}
|
||||
|
||||
.inspector input {
|
||||
margin:0;
|
||||
padding:4px;
|
||||
border:0;
|
||||
background:#fff;
|
||||
width:150px;
|
||||
}
|
||||
|
||||
.inspector-wrap table {
|
||||
border-collapse: collapse;
|
||||
width:347px;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
.inspector-wrap .tag-table-wrap {
|
||||
max-height:350px;
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
.inspector-wrap table td {
|
||||
padding:0;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
.inspector-wrap .close {
|
||||
border: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Map Controls */
|
||||
|
||||
@@ -316,66 +375,6 @@ div.geocode-control input {
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.inspector-wrap {
|
||||
border-radius:3px;
|
||||
border:1px solid #ccc;
|
||||
position:absolute;
|
||||
top:50px;
|
||||
left:50%;
|
||||
margin-left:-175px;
|
||||
overflow:auto;
|
||||
padding:10px;
|
||||
background:#fff;
|
||||
width:350px;
|
||||
opacity:0;
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* Inspector
|
||||
------------------------------------------------------- */
|
||||
|
||||
.inspector-wrap a.permalink {
|
||||
text-decoration:none;
|
||||
margin-right:1em;
|
||||
}
|
||||
|
||||
.inspector tbody td {
|
||||
border: 1px solid #ccc;
|
||||
width:150px;
|
||||
}
|
||||
|
||||
.inspector input {
|
||||
margin:0;
|
||||
padding:4px;
|
||||
border:0;
|
||||
background:#fff;
|
||||
width:150px;
|
||||
}
|
||||
|
||||
.inspector-wrap table {
|
||||
border-collapse: collapse;
|
||||
width:347px;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
.inspector-wrap .tag-table-wrap {
|
||||
max-height:350px;
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
.inspector-wrap table td {
|
||||
padding:0;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
.inspector-wrap .close {
|
||||
border: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.typeahead {
|
||||
background:#fff;
|
||||
width:148px;
|
||||
|
||||
12
js/id/id.js
12
js/id/id.js
@@ -45,7 +45,7 @@ window.iD = function(container) {
|
||||
.attr('class', 'buttons-joined');
|
||||
|
||||
undo_buttons.append('button')
|
||||
.attr({ id: 'undo', 'class': 'mini' })
|
||||
.attr({ id: 'undo', 'class': 'narrow' })
|
||||
.property('disabled', true)
|
||||
.html('←<small></small>')
|
||||
.on('click', history.undo)
|
||||
@@ -53,7 +53,7 @@ window.iD = function(container) {
|
||||
.placement('bottom'));
|
||||
|
||||
undo_buttons.append('button')
|
||||
.attr({ id: 'redo', 'class': 'mini' })
|
||||
.attr({ id: 'redo', 'class': 'narrow' })
|
||||
.property('disabled', true)
|
||||
.html('→<small></small>')
|
||||
.on('click', history.redo)
|
||||
@@ -66,7 +66,7 @@ window.iD = function(container) {
|
||||
.attr('class', 'hello');
|
||||
|
||||
bar.append('button')
|
||||
.attr('class', 'save big')
|
||||
.attr('class', 'save wide')
|
||||
.html("Upload<small id='as-username'></small>")
|
||||
.attr('title', 'Save changes to OpenStreetMap, making them visible to other users')
|
||||
.call(bootstrap.tooltip()
|
||||
@@ -111,12 +111,12 @@ window.iD = function(container) {
|
||||
.attr('class', 'zoombuttons')
|
||||
.selectAll('button')
|
||||
.data([['zoom-in', '+', map.zoomIn], ['zoom-out', '-', map.zoomOut]])
|
||||
.enter().append('button').attr('class', function(d) { return d[0] + ' big'; })
|
||||
.enter().append('button').attr('class', function(d) { return d[0] + ' wide'; })
|
||||
.text(function(d) { return d[1]; })
|
||||
.on('click', function(d) { return d[2](); });
|
||||
|
||||
var gc = bar.append('div').attr('class', 'geocode-control');
|
||||
gc.append('button').text('?').attr('class','big');
|
||||
gc.append('button').text('?').attr('class','wide');
|
||||
gc
|
||||
.on('mouseover', function() {
|
||||
d3.select('.geocode-control input').style('display', 'inline-block');
|
||||
@@ -142,7 +142,7 @@ window.iD = function(container) {
|
||||
.call(iD.layerswitcher(map));
|
||||
|
||||
this.append('div')
|
||||
.attr('class', 'inspector-wrap')
|
||||
.attr('class', 'inspector-wrap fillL')
|
||||
.style('display', 'none');
|
||||
|
||||
this.append('div')
|
||||
|
||||
@@ -15,7 +15,7 @@ iD.layerswitcher = function(map) {
|
||||
function layerswitcher(selection) {
|
||||
selection
|
||||
.append('button')
|
||||
.attr('class', 'big')
|
||||
.attr('class', 'wide')
|
||||
.text('L')
|
||||
.on('click', function() {
|
||||
content.classed('hide', function() {
|
||||
|
||||
Reference in New Issue
Block a user