diff --git a/css/app.css b/css/app.css
index fa750db1e..c979ea095 100644
--- a/css/app.css
+++ b/css/app.css
@@ -33,6 +33,7 @@ div, textarea, input, span, ul, li, ol, a, button {
a, button, input, textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-touch-callout:none;
+ cursor:url(../img/cursor-pointer.png) 6 1, auto;
}
h2 {
@@ -186,6 +187,7 @@ ul.toggle-list li a {
display:block;
border-top: 1px solid rgba(0, 0, 0, .5);
}
+ul.toggle-list li a:hover { background-color: #ececec;}
ul.toggle-list .icon {
float: left;
@@ -253,7 +255,6 @@ button {
font-size:12px;
display: inline-block;
height:40px;
- cursor:url(../img/cursor-pointer.png) 6 1, auto;
border-radius:4px;
-webkit-transition: background 100ms;
-moz-transition: background 100ms;
@@ -620,6 +621,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
background: rgba(0,0,0,.5);
border-radius: 0 0 4px 4px;
}
+
.inspector-inner .add-tag:hover {
background: rgba(0,0,0,.8);
}
@@ -635,25 +637,25 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
position:absolute;
}
-.map-control button {
- width: 40px;
+.map-control > button {
+ width: 30px;
background: rgba(0,0,0,.5);
border-radius: 0;
border-bottom: 1px solid rgba(0, 0, 0, 1);
}
-.map-control button:hover {
+.map-control > button:hover {
background: rgba(0, 0, 0, .8);
}
-.map-control button.active:hover {
+.map-control > button.active:hover {
background: #6bc641;
}
.map-overlay {
width: 150px;
position:absolute;
- left:50px;
+ left:40px;
top:0;
display: block;
border-radius: 4px;
@@ -663,7 +665,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
.zoombuttons {
top:70px;
- width: 40px;
+ width: 30px;
}
.zoombuttons button.zoom-in {
@@ -680,24 +682,94 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
top:190px;
}
+.nudge-container {
+ margin-top: 10px;
+}
+
.layerswitcher-control .adjustments button {
- opacity:0.5;
- height:20px;
+ height:30px;
font-size:10px;
- font-weight:normal;
padding:0 5px 3px 5px;
background: white;
- border: 1px solid #ddd;
- border-radius: 0;
+ border:0;
+ text-transform: uppercase;
+ font-weight: bold;
+
}
.layerswitcher-control .adjustments button:hover {
- opacity: 1;
+ background:#ececec;
+}
+
+.layerswitcher-control .alignment-toggle:before {
+ content: '';
+ display: inline-block;
+ height: 0;
+ width: 0;
+ margin-right: 5px;
+ border-top: 4px solid transparent;
+ border-bottom: 4px solid transparent;
+ border-left: 8px solid #7092ff;
+}
+
+.layerswitcher-control .alignment-toggle.expanded:before {
+ border-top: 8px solid #7092ff;
+ border-bottom: 0;
+ border-right: 4px solid transparent;
+ border-left: 4px solid transparent;
+
}
.layerswitcher-control .nudge {
+ text-indent: -9999px;
+ overflow: hidden;
width:20px;
- margin-right:2px;
+ border-radius: 0;
+ margin-right:1px;
+ position: relative;
+}
+
+.layerswitcher-control .nudge::after {
+ content: '';
+ display: block;
+ position: absolute;
+ margin: auto;
+ left: 0; right: 0; top: 0; bottom: 0;
+ height: 0;
+ width: 0;
+}
+
+.layerswitcher-control .nudge.left::after {
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-left: 5px solid #222;
+}
+
+.layerswitcher-control .nudge.right::after {
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-right: 5px solid #222;
+}
+
+.layerswitcher-control .nudge.top::after {
+ border-right: 5px solid transparent;
+ border-left: 5px solid transparent;
+ border-bottom: 5px solid #222;
+}
+
+.layerswitcher-control .nudge.bottom::after {
+ border-right: 5px solid transparent;
+ border-left: 5px solid transparent;
+ border-top: 5px solid #222;
+}
+
+.layerswitcher-control .nudge:first-child {
+ border-radius: 4px 0 0 4px;
+}
+
+.layerswitcher-control .reset {
+ width: 45px;
+ border-radius: 0 4px 4px 0;
}
.opacity-options-wrapper {
@@ -711,6 +783,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
position: absolute;
right: 10px;
top: 10px;
+ border: 1px solid #ddd;
}
.opacity-options li {
@@ -723,7 +796,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
.opacity-options li .select-box{
position: absolute;
width:20px;
- height:20px;
+ height:18px;
z-index: 9999;
}
@@ -742,7 +815,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
background:#222;
display:inline-block;
width:20px;
- height:20px;
+ height:18px;
}
/* Geocoder */
diff --git a/img/source/sprite.svg b/img/source/sprite.svg
index 64b75e286..6248e28cc 100644
--- a/img/source/sprite.svg
+++ b/img/source/sprite.svg
@@ -7,6 +7,7 @@
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="420"
@@ -38,9 +39,9 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
- inkscape:zoom="4"
- inkscape:cx="202.2911"
- inkscape:cy="164.38176"
+ inkscape:zoom="1"
+ inkscape:cx="581.64693"
+ inkscape:cy="71.693021"
inkscape:document-units="px"
inkscape:current-layer="layer12"
showgrid="false"
@@ -53,10 +54,10 @@
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
- showguides="true"
+ showguides="false"
inkscape:guide-bbox="true"
inkscape:snap-bbox="true"
- inkscape:snap-nodes="true">
+ inkscape:snap-nodes="false">
+
+
+
+
+
+
+
+
+
+
+
+ fix misalignment
+
+
+
+
+ RESET
diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js
index ea87cb7a9..298c469e0 100644
--- a/js/id/ui/layerswitcher.js
+++ b/js/id/ui/layerswitcher.js
@@ -17,12 +17,12 @@ iD.ui.layerswitcher = function(map) {
}, {
name: 'MapBox',
source: iD.BackgroundSource.MapBox,
- description: 'Satellite and Aerial Imagery',
+ description: 'Satellite and aerial imagery.',
link: 'http://mapbox.com'
}, {
name: 'Custom',
source: iD.BackgroundSource.Custom,
- description: 'A custom layer (requires configuration)'
+ description: 'A custom layer (requires configuration).'
}],
opacities = [1, 0.5, 0];
@@ -139,10 +139,10 @@ iD.ui.layerswitcher = function(map) {
.attr('class', 'adjustments pad1');
var directions = [
- ['←', [-1, 0]],
- ['↑', [0, -1]],
- ['→', [1, 0]],
- ['↓', [0, 1]]];
+ ['left', [-1, 0]],
+ ['top', [0, -1]],
+ ['right', [1, 0]],
+ ['bottom', [0, 1]]];
function nudge(d) {
map.background.nudge(d[1]);
@@ -150,17 +150,16 @@ iD.ui.layerswitcher = function(map) {
}
adjustments.append('a')
- .text('▶ fix misalignment')
+ .text('Fix misalignment')
.attr('href', '#')
+ .classed('alignment-toggle', true)
.classed('expanded', false)
.on('click', function() {
var exp = d3.select(this).classed('expanded');
if (!exp) {
nudge_container.style('display', 'block');
- d3.select(this).text('▼ fix misalignment');
} else {
nudge_container.style('display', 'none');
- d3.select(this).text('▶ fix misalignment');
}
d3.select(this).classed('expanded', !exp);
d3.event.preventDefault();
@@ -174,7 +173,7 @@ iD.ui.layerswitcher = function(map) {
nudge_container.selectAll('button')
.data(directions).enter()
.append('button')
- .attr('class', 'nudge')
+ .attr('class', function(d) { return d[0] + ' nudge'; })
.text(function(d) { return d[0]; })
.on('click', nudge);