From 16e87ca12edb50eea7332186f28f0241978abb5d Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Thu, 6 Dec 2012 19:58:21 -0500 Subject: [PATCH] refining buttons. --- css/app.css | 167 +++++++++++++++++++------------------- js/id/id.js | 12 +-- js/id/ui/layerswitcher.js | 2 +- 3 files changed, 90 insertions(+), 91 deletions(-) diff --git a/css/app.css b/css/app.css index 54eb1ded9..10ac5130b 100644 --- a/css/app.css +++ b/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; diff --git a/js/id/id.js b/js/id/id.js index f422b9349..a0534863a 100644 --- a/js/id/id.js +++ b/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('←') .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('→') .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") .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') diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js index 39b8e201f..f91d80e36 100644 --- a/js/id/ui/layerswitcher.js +++ b/js/id/ui/layerswitcher.js @@ -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() {