diff --git a/css/app.css b/css/app.css index e39adf5c8..2bba25c24 100644 --- a/css/app.css +++ b/css/app.css @@ -30,9 +30,7 @@ div, textarea, input, form, span, ul, li, ol, a, button { box-sizing: border-box; } -/* Mobile Tweaks -------------------------------------------------------- */ -a, button, input, textarea { +a, button, input, textarea, .preset-grid .grid-inner { -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; cursor:url(../img/cursor-pointer.png) 6 1, auto; @@ -95,6 +93,33 @@ a:hover { color:#597be7; } +/* Forms +------------------------------------------------------- */ + +input[type=text] { + padding:5px 10px; + height:30px; + resize: none; +} + +.fillD textarea, +.fillD input[type=text] { + background-color: black; + border:1px solid rgba(255, 255, 255, .25); + color: white; +} + +.fillD textarea:focus, +.fillD input[type=text]:focus { + background-color: black; + border:1px solid rgba(255, 255, 255, .5); +} + +.fillL textarea, +.fillL input[type=text], +.fillL input[type=url], +.fillL input[type=tel], +.fillL input[type=email], textarea, input[type=text], input[type=url], @@ -106,30 +131,13 @@ input[type=email] { resize: vertical; } -.fillD textarea, -.fillD input[type=text] { - background-color: black; - border:1px solid rgba(255, 255, 255, .25); - color: white; -} - +.fillL textarea:focus, +.fillL input[type=text]:focus, textarea:focus, 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:5px 10px; - height:30px; - resize: none; -} - /* tables */ table { @@ -513,6 +521,8 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} opacity:0; display:none; max-width: 500px; + height: 100%; + position: relative; } .inspector { @@ -526,10 +536,12 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} } .inspector-inner.message { - padding: 20px; height: 60px; + border-bottom: 1px solid #ccc; } +.inspector-inner.message h3 { line-height: 40px;} + .inspector-inner.type { border: 1px solid #eee; z-index:1; @@ -577,9 +589,6 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} } .inspector-body { - position:relative; - max-height: 400px; - overflow: auto; } .tag-row { @@ -624,17 +633,17 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} .tag-row button.tag-help { right: -30px; } -.inspector-buttons { - border-radius: 0 0 0 10px; + +.inspector-actions { height: 60px; } -.inspector-buttons button { +.inspector-actions button { width: 20%; float: left; } -.inspector-buttons .minor-buttons { +.inspector-actions .minor-buttons { padding-left: 10px; line-height: 40px; width: 60%; @@ -660,26 +669,45 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} /* temp */ .preset-grid { - max-height: 360px; + overflow: auto; } .preset-grid .grid-entry { - float: left; - width: 100px; - height: 100px; - color: black; - margin: 10px; - text-align: center; + padding-bottom: 25%; + position: relative; + margin-bottom: 20px; } -.preset-grid .grid-entry div { - width: 24px; - height: 24px; - margin-left: 20px; - display: block; - overflow: hidden; + +.preset-grid .grid-entry .grid-inner:hover { + background: #ececec; +} + +.grid-entry .grid-inner { + position: absolute; + border: 1px solid #ccc; + left: 10px; right: 10px; top: 10px; bottom: 10px; + border-radius: 4px; +} +.preset-grid .grid-entry .icon { + left: 0; right: 0; top: 0; bottom: 0; + position: absolute; + display: block; + margin: auto; +} + +.preset-grid .grid-entry .label { + text-align: center; + display: block; + position: absolute; + bottom: -15px; + width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } .preset-grid-search-wrap { + border-top: 1px solid #ccc; padding: 20px; } diff --git a/js/id/ui.js b/js/id/ui.js index 3db4f6ece..2ad42e813 100644 --- a/js/id/ui.js +++ b/js/id/ui.js @@ -58,7 +58,7 @@ iD.ui = function(context) { container.append('div') .style('display', 'none') - .attr('class', 'inspector-wrap fr col5'); + .attr('class', 'inspector-wrap fr fillD col5'); var about = container.append('div') .attr('class','col12 about-block fillD pad1'); diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js index 7baf043d2..06ebe9704 100644 --- a/js/id/ui/inspector.js +++ b/js/id/ui/inspector.js @@ -16,16 +16,15 @@ iD.ui.Inspector = function() { entity = selection.datum(); - var iwrap = selection.append('div') - .attr('class','inspector content hide'), + var iwrap = selection messagewrap = iwrap.append('div') - .attr('class', 'message inspector-inner fillL2'), - message = messagewrap.append('h4'); + .attr('class', 'message inspector-inner fillL'), + message = messagewrap.append('h3'); inspectorbody = iwrap.append('div') - .attr('class', 'inspector-body'), + .attr('class', 'inspector-body fillL'), iwrap.append('div') - .attr('class', 'inspector-buttons pad1 fillD') + .attr('class', 'inspector-actions pad1 col12') .call(drawButtons); presetGrid = iD.ui.PresetGrid() diff --git a/js/id/ui/presetgrid.js b/js/id/ui/presetgrid.js index 47029b2ad..25ecc95bb 100644 --- a/js/id/ui/presetgrid.js +++ b/js/id/ui/presetgrid.js @@ -8,13 +8,13 @@ iD.ui.PresetGrid = function() { selection.html(''); var wrap = selection.append('div') - .attr('class', 'fillL'); + .attr('class', ''); var viable = presetData.match(entity); event.message('What kind of ' + entity.geometry(context.graph()) + ' are you adding?'); var grid = wrap.append('div') - .attr('class', 'preset-grid') + .attr('class', 'preset-grid pad1') .call(drawGrid, filter('')); var searchwrap = wrap.append('div') @@ -50,14 +50,16 @@ iD.ui.PresetGrid = function() { var entered = entries.enter() .append('div') - .attr('class', 'grid-entry') + .attr('class', 'grid-entry col3') .on('click', function(d) { event.choose(d); }); entered.append('div') - .attr('class', function(d) { return 'maki-' + d.icon + '-24'; }); - entered.append('span').text(name); + .attr('class','grid-inner fillL') + .append('div') + .attr('class', function(d) { return 'maki-' + d.icon + '-24 icon'; }); + entered.append('span').attr('class','label').text(name); entries.exit().remove(); } diff --git a/js/id/ui/tageditor.js b/js/id/ui/tageditor.js index fe4f1bdfd..e7896dc16 100644 --- a/js/id/ui/tageditor.js +++ b/js/id/ui/tageditor.js @@ -25,7 +25,7 @@ iD.ui.TagEditor = function() { selection.html(''); var editorwrap = selection.append('div') - .attr('class', 'inspector-inner tag-wrap fillL2'); + .attr('class', 'inspector-inner tag-wrap'); var typewrap = editorwrap.append('div') .attr('class', 'type inspector-inner fillL')