From b9a2914b35118950bc0b1af91cce087a694e337a Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Tue, 15 Jan 2013 20:11:05 -0500 Subject: [PATCH] implementing flexible grid. --- css/app.css | 70 ++++++++++++++++++++----------------------- js/id/id.js | 33 ++++++++++---------- js/id/modes/browse.js | 2 +- js/id/ui/inspector.js | 32 +++++++++++++------- 4 files changed, 74 insertions(+), 63 deletions(-) diff --git a/css/app.css b/css/app.css index fb6a894a3..468478091 100644 --- a/css/app.css +++ b/css/app.css @@ -14,6 +14,11 @@ body { height: 100%; width: 100%; position: fixed; + min-width: 760px; +} + +.limiter { + max-width: 1400px; } div, textarea, input, span, ul, li, ol, a, button { @@ -230,7 +235,7 @@ button { color:#222; background: white; font-weight:bold; - font-size:14px; + font-size:12px; display: inline-block; height:40px; cursor:url(../img/cursor-pointer.png) 6 1, auto; @@ -255,20 +260,6 @@ button.narrow { border-radius:4px; } -button.wide { - margin: 10px; - width: 100px; -} - -button.add-button { - width: 80px; -} - -button.narrow, -button.Browse { - width:40px; -} - button.minor { border-radius:4px; height: 20px; @@ -289,22 +280,24 @@ button.centered { margin-right: auto; } -.buttons-joined { +.button-wrap { display: inline-block; - margin:10px; -} - -.buttons-joined button { - border-right-width: 0; - border-radius:0; + padding:10px 0 10px 10px; margin: 0; } -.buttons-joined button:first-child { +.button-wrap button:only-child { width: 100%;} + +.joined button { + border-right-width: 0; + border-radius:0; +} + +.joined button:first-child { border-radius:4px 0 0 4px; } -.buttons-joined button:last-child { +.joined button:last-child { border-right-width: 1px; border-radius:0 4px 4px 0; } @@ -324,8 +317,6 @@ button.delete:hover { } button.save { - min-width: 120px; - width: auto; } button.save.has-count { @@ -482,12 +473,6 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} height:60px; } -/* Special rules for toolbar icons */ - -button.Browse .label { - display: none; - } - /* Status box */ .messages { @@ -497,18 +482,21 @@ button.Browse .label { /* Inspector */ .inspector-wrap { - position:absolute; - right: 0; + opacity:0; + display:none; + padding-left: 10px; + max-width: 600px; +} + +.inspector { border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; min-height: 60px; - opacity:0; - display:none; + position: relative; } .inspector-inner { padding: 10px; - min-width:400px; } .inspector-inner.head { @@ -596,6 +584,10 @@ button.Browse .label { border-top: 1px solid #ccc; } +.inspector-buttons .button-wrap { + width: 20%; +} + .inspector-inner .add-tag-row { width: 100%; padding-right: 70px; @@ -616,6 +608,10 @@ button.Browse .label { position:absolute; } +.map-control button { + width: 40px; +} + .map-overlay { width: 150px; position:absolute; diff --git a/js/id/id.js b/js/id/id.js index 712656cd6..a6af4242a 100644 --- a/js/id/id.js +++ b/js/id/id.js @@ -24,13 +24,16 @@ window.iD = function(container) { var bar = container.append('div') .attr('id', 'bar').attr('class', 'fillL2'); - var buttons_joined = bar.append('div') - .attr('class', 'buttons-joined'); + var limiter = bar.append('div') + .attr('class', 'limiter'); + + var buttons_joined = limiter.append('div') + .attr('class', 'button-wrap joined col4'); var buttons = buttons_joined.selectAll('button.add-button') .data([iD.modes.Browse(), iD.modes.AddPoint(), iD.modes.AddLine(), iD.modes.AddArea()]) .enter().append('button') - .attr('class', function (mode) { return mode.title + ' add-button'; }) + .attr('class', function (mode) { return mode.title + ' add-button col3'; }) .attr('data-original-title', function (mode) { return mode.description; }) .call(bootstrap.tooltip().placement('bottom')) .on('click', function (mode) { controller.enter(mode); }); @@ -46,7 +49,7 @@ window.iD = function(container) { } } - notice = iD.ui.notice(bar + notice = iD.ui.notice(limiter .append('div') .attr('class', 'notice')); @@ -71,19 +74,19 @@ window.iD = function(container) { container.classed("mode-" + exited.id, false); }); - var undo_buttons = bar.append('div') - .attr('class', 'buttons-joined'), + var undo_buttons = limiter.append('div') + .attr('class', 'button-wrap joined col1'), undo_tooltip = bootstrap.tooltip().placement('bottom'); undo_buttons.append('button') - .attr({ id: 'undo', 'class': 'narrow' }) + .attr({ id: 'undo', 'class': 'col6 narrow' }) .property('disabled', true) .html("") .on('click', history.undo) .call(undo_tooltip); undo_buttons.append('button') - .attr({ id: 'redo', 'class': 'narrow' }) + .attr({ id: 'redo', 'class': 'col6 narrow' }) .property('disabled', true) .html("") .on('click', history.redo) @@ -94,8 +97,8 @@ window.iD = function(container) { .append('div') .attr('class', 'hello'); - var save_button = bar.append('button') - .attr('class', 'save action wide') + var save_button = limiter.append('div').attr('class','button-wrap col1').append('button') + .attr('class', 'save action wide col12') .call(iD.ui.save().map(map)); history.on('change.warn-unload', function() { @@ -110,7 +113,7 @@ window.iD = function(container) { } : null; }); - bar.append('div') + limiter.append('div') .attr('class', 'messages'); var zoom = container.append('div') @@ -139,8 +142,8 @@ window.iD = function(container) { .call(iD.ui.layerswitcher(map)); container.append('div') - .attr('class', 'inspector-wrap fillL') - .style('display', 'none'); + .style('display', 'none') + .attr('class', 'inspector-wrap fr col5'); var about = container.append('div').attr('id', 'attrib-container'); @@ -169,12 +172,12 @@ window.iD = function(container) { } } - bar.select('#undo') + limiter.select('#undo') .property('disabled', !undo) .attr('data-original-title', undo) .call(undo ? refreshTooltip : undo_tooltip.hide); - bar.select('#redo') + limiter.select('#redo') .property('disabled', !redo) .attr('data-original-title', redo) .call(redo ? refreshTooltip : undo_tooltip.hide); diff --git a/js/id/modes/browse.js b/js/id/modes/browse.js index c57b503f5..4b2ea448f 100644 --- a/js/id/modes/browse.js +++ b/js/id/modes/browse.js @@ -2,7 +2,7 @@ iD.modes.Browse = function() { var mode = { button: 'browse', id: 'browse', - title: 'Browse', + title: 'Move', description: 'Pan and zoom the map' }; diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js index da022e8c8..5edc48e9f 100644 --- a/js/id/ui/inspector.js +++ b/js/id/ui/inspector.js @@ -14,11 +14,15 @@ iD.ui.inspector = function() { event.close(entity); }); - selection.append('div') + + var inspector = selection.append('div') + .attr('class','inspector fillL'); + + inspector.append('div') .attr('class', 'head inspector-inner') .call(drawHead); - var inspectorbody = selection.append('div') + var inspectorbody = inspector.append('div') .attr('class', 'inspector-body'); var inspectorwrap = inspectorbody.append('div') @@ -79,15 +83,23 @@ iD.ui.inspector = function() { } function drawButtons(selection) { - selection.append('button') - .attr('class', 'apply wide action') - .html("Apply") - .on('click', apply); + var inspectorButton1 = selection.append('div') + .attr('class', 'button-wrap') + .append('button') + .attr('class', 'apply wide action') + .on('click', apply); - selection.append('button') - .attr('class', 'delete wide action') - .html("Delete") - .on('click', function(entity) { event.remove(entity); }); + inspectorButton1.append('span').attr('class','icon icon-pre-text apply'); + inspectorButton1.append('span').attr('class','label').text('Apply'); + + var inspectorButton2 = selection.append('div') + .attr('class', 'button-wrap') + .append('button') + .attr('class', 'delete wide 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'); } function drawTags(tags) {