From 41aae4df2aeae7e780e739f364d7615cf7aa21b9 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 18 Jul 2013 16:13:07 -0700 Subject: [PATCH] Swap sidebar and map controls --- css/app.css | 82 +++++++++++++++++++++++------------------- js/id/ui.js | 23 ++++++------ js/id/ui/background.js | 8 ++--- js/id/ui/geocoder.js | 10 +++--- js/id/ui/help.js | 10 +++--- 5 files changed, 73 insertions(+), 60 deletions(-) diff --git a/css/app.css b/css/app.css index 6b0840f93..1358ef4e4 100644 --- a/css/app.css +++ b/css/app.css @@ -39,6 +39,10 @@ body { height: 100%; } +.spacer { + height: 40px; +} + .limiter { position: relative; max-width: 1200px; @@ -52,19 +56,13 @@ body { position: absolute; height: 40px; width: 40px; - right: 33.3333%; + right: 10px; top: 10px; border-radius: 4px; margin-right: 10px; background: black; } -@media only screen and (min-width: 1200px) { - .spinner img { - right: 400px; - } -} - div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -550,9 +548,9 @@ button.save.has-count .count::before { .icon.relation.route { background-position: -540px 0;} .icon.relation.multipolygon { background-position: -560px 0;} -.icon.plus.light, -.icon.zoom-in { background-position: -240px -20px;} -.icon.zoom-out { background-position: -260px -20px;} +.icon.plus.light { background-position: -240px -20px;} +.icon.zoom-in { background-position: -240px 0px;} +.icon.zoom-out { background-position: -260px 0px;} .icon.inspect.light { background-position: -220px -20px;} .icon.geocode.light { background-position: -280px -20px;} .icon.help.light { background-position: -460px -20px;} @@ -603,7 +601,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} ------------------------------------------------------- */ #bar { - position:fixed; + position: fixed; padding: 10px; left:0; top:0; @@ -680,7 +678,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} #sidebar { position: relative; - float: right; + float: left; height: 100%; overflow: hidden; z-index: 2; @@ -1755,25 +1753,22 @@ img.wiki-image { /* Map Controls */ .map-controls { - left: 0; - top: 80px; - width: 30px; + right: 10px; + top: 70px; + width: 40px; position: fixed; z-index: 100; } .map-control > button { - width: 30px; - background: rgba(0,0,0,.5); + width: 40px; + background-color: #FFF; + background-color: rgba(255, 255, 255, 0.8); border-radius: 0; } .map-control > button:hover { - background: rgba(0, 0, 0, .8); -} - -.map-control > button.active:hover { - background: #7092ff; + background-color: #FFF; } .map-overlay { @@ -1790,21 +1785,32 @@ img.wiki-image { /* Zoomer */ .zoombuttons button.zoom-in { - border-radius:0 4px 0 0; + border-radius: 4px 4px 0 0; } /* Background Settings */ + .toggle-list.layer-list { margin-bottom: 10px; } .background-control button { - border-radius:0 4px 0 0; + border-radius: 4px 4px 0 0; } + .background-control button.active { - border-radius: 0; + border-radius: 0 4px 0 0; +} + +.background-control { + position: relative; +} + +.background-control .map-overlay { + position: absolute; + top: 0; } .nudge-container { @@ -1941,11 +1947,13 @@ img.wiki-image { /* Geocoder */ -.geocode-control form { - top:260px; +.geocode-control { + position: relative; } .geocode-control form { + position: absolute; + top: 0; padding: 5px; } @@ -1954,12 +1962,14 @@ img.wiki-image { } .geocode-control div.map-overlay { + position: absolute; + top: 40px; + left: -260px; border-top: 1px solid #CCC; z-index: 100; max-height: 240px; overflow-y: auto; padding: 0; - margin-top: 40px; } .geocode-control div.map-overlay span { @@ -1979,26 +1989,26 @@ img.wiki-image { /* Geolocator */ +.geolocate-control { + margin-bottom: 10px; +} + .geolocate-control button { - border-radius: 0 0 4px 0; + border-radius: 0 0 4px 4px; } /* Help */ -.help-control { - margin-bottom: 20px; -} - .help-control button { - border-radius: 0 0 4px 0; + border-radius: 0 0 4px 4px; } .help-wrap { position: fixed; top:60px; bottom: 30px; - padding: 20px 20px 20px 50px; - left: 0; + padding: 20px 50px 20px 20px; + right: 0; overflow-y: scroll; } diff --git a/js/id/ui.js b/js/id/ui.js index e91ace906..a908fa3ee 100644 --- a/js/id/ui.js +++ b/js/id/ui.js @@ -29,6 +29,9 @@ iD.ui = function(context) { .attr('id', 'map') .call(map); + var spacer = bar.append('div') + .attr('class', 'spacer col4'); + var limiter = bar.append('div') .attr('class', 'limiter'); @@ -60,18 +63,18 @@ iD.ui = function(context) { var controls = bar.append('div') .attr('class', 'map-controls'); - controls.append('div') - .attr('class', 'map-control background-control') - .call(iD.ui.Background(context)); - - controls.append('div') - .attr('class', 'map-control help-control') - .call(iD.ui.Help(context)); - controls.append('div') .attr('class', 'map-control zoombuttons') .call(iD.ui.Zoom(context)); + controls.append('div') + .attr('class', 'map-control geolocate-control') + .call(iD.ui.Geolocate(map)); + + controls.append('div') + .attr('class', 'map-control background-control') + .call(iD.ui.Background(context)); + if (!context.embed()) { controls.append('div') .attr('class', 'map-control geocode-control') @@ -79,8 +82,8 @@ iD.ui = function(context) { } controls.append('div') - .attr('class', 'map-control geolocate-control') - .call(iD.ui.Geolocate(map)); + .attr('class', 'map-control help-control') + .call(iD.ui.Help(context)); var about = content.append('div') .attr('class','col12 about-block fillD'); diff --git a/js/id/ui/background.js b/js/id/ui/background.js index 199f2ba23..a54219157 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -163,16 +163,16 @@ iD.ui.Background = function(context) { return d3.event.stopPropagation(); }); content.style('display', 'block') - .style('left', '-500px') + .style('left', '0px') .transition() .duration(200) - .style('left', '30px'); + .style('left', '-260px'); } else { content.style('display', 'block') - .style('left', '30px') + .style('left', '-260px') .transition() .duration(200) - .style('left', '-500px') + .style('left', '0px') .each('end', function() { d3.select(this).style('display', 'none'); }); diff --git a/js/id/ui/geocoder.js b/js/id/ui/geocoder.js index 5227c4776..d837f111e 100644 --- a/js/id/ui/geocoder.js +++ b/js/id/ui/geocoder.js @@ -131,18 +131,18 @@ iD.ui.Geocoder = function(context) { return d3.event.stopPropagation(); }); gcForm.style('display', 'block') - .style('left', '-500px') + .style('left', '0px') .transition() .duration(200) - .style('left', '30px'); + .style('left', '-260px'); inputNode.node().focus(); } else { selection.on('mousedown.geocoder-inside', null); gcForm.style('display', 'block') - .style('left', '30px') + .style('left', '-260px') .transition() .duration(200) - .style('left', '-500px') + .style('left', '0px') .each('end', function() { d3.select(this).style('display', 'none'); }); @@ -156,7 +156,7 @@ iD.ui.Geocoder = function(context) { .call(tooltip); button.append('span') - .attr('class', 'icon geocode light'); + .attr('class', 'icon geocode'); keybinding.on(key, toggle); diff --git a/js/id/ui/help.js b/js/id/ui/help.js index f0ab47165..aeb33a6d4 100644 --- a/js/id/ui/help.js +++ b/js/id/ui/help.js @@ -115,16 +115,16 @@ iD.ui.Help = function(context) { shown = show; if (show) { pane.style('display', 'block') - .style('left', '-500px') + .style('right', '-500px') .transition() .duration(200) - .style('left', '0px') + .style('right', '0px') .each('end', blockClick); } else { - pane.style('left', '0px') + pane.style('right', '0px') .transition() .duration(200) - .style('left', '-500px') + .style('right', '-500px') .each('end', function() { d3.select(this).style('display', 'none'); }); @@ -144,7 +144,7 @@ iD.ui.Help = function(context) { .call(tooltip); button.append('span') - .attr('class', 'icon help light'); + .attr('class', 'icon help'); context.surface().on('mousedown.help-outside', hide); context.container().on('mousedown.b.help-outside', hide);