diff --git a/css/app.css b/css/app.css
index 01134f272..ec6daa726 100644
--- a/css/app.css
+++ b/css/app.css
@@ -57,45 +57,17 @@ body {
.spinner {
opacity: .5;
+ float: right;
}
.spinner img {
- position: absolute;
height: 40px;
width: 40px;
- right: 50px;
- top: 10px;
border-radius: 4px;
margin-right: 10px;
background: black;
}
-div.full-screen {
- position: absolute;
- width: 40px;
- right: 10px;
- top: 10px;
-}
-
-button.full-screen {
- width: 100%;
- position: relative;
-}
-
-button.full-screen, button.full-screen.active {
- width: 40px;
- height: 40px;
- background: transparent url(img/fullscreen_request.svg) no-repeat center;
-}
-
-button.full-screen.active {
- background-image: url(img/fullscreen_exit.svg);
-}
-
-button.full-screen:hover, button.full-screen:focus {
- background-color: rgba(0, 0, 0, .8);
-}
-
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;
@@ -580,6 +552,9 @@ button.save.has-count .count::before {
.icon.back.blue { background-position: -420px -20px;}
.icon.forward.blue { background-position: -440px -20px;}
+.icon.full-screen { background-position: -620px -20px;}
+.active .icon.full-screen { background-position: -640px -20px;}
+
button[disabled] .icon.alert { background-position: 0 -40px;}
button[disabled] .icon.add-point { background-position: -20px -40px;}
button[disabled] .icon.add-line { background-position: -40px -40px;}
@@ -1765,6 +1740,27 @@ img.wiki-image {
background: rgba(0,0,0,.8);
}
+/* Fullscreen button */
+div.full-screen {
+ float: right;
+ width: 40px;
+ margin-right: 10px;
+}
+
+div.full-screen .tooltip {
+ min-width: 160px;
+}
+
+div.full-screen > button, div.full-screen > button.active {
+ width: 40px;
+ height: 40px;
+ background: transparent;
+}
+
+div.full-screen > button:hover {
+ background-color: rgba(0, 0, 0, .8);
+}
+
/* Map Controls */
.map-controls {
diff --git a/dist/img/fullscreen_exit.svg b/dist/img/fullscreen_exit.svg
deleted file mode 100644
index 8608ceb52..000000000
--- a/dist/img/fullscreen_exit.svg
+++ /dev/null
@@ -1,64 +0,0 @@
-
-
\ No newline at end of file
diff --git a/dist/img/fullscreen_request.svg b/dist/img/fullscreen_request.svg
deleted file mode 100644
index fbdc9874c..000000000
--- a/dist/img/fullscreen_request.svg
+++ /dev/null
@@ -1,64 +0,0 @@
-
-
\ No newline at end of file
diff --git a/dist/img/sprite.svg b/dist/img/sprite.svg
index b47a50a64..7aec0cc11 100644
--- a/dist/img/sprite.svg
+++ b/dist/img/sprite.svg
@@ -13,7 +13,7 @@
width="800"
height="560"
id="svg12393"
- inkscape:version="0.48.5 r10040"
+ inkscape:version="0.48.4 r9939"
sodipodi:docname="sprite.svg">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 6eefaada4..d237cf54a 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -430,9 +430,7 @@
"help": "Another user changed some of the same map features you changed.\nClick on each item below for more details about the conflict, and choose whether to keep\nyour changes or the other user's changes.\n"
}
},
- "full_screen": {
- "tooltip": "Toggle Full Screen"
- },
+ "full_screen": "Toggle Fullscreen",
"merge_remote_changes": {
"conflict": {
"deleted": "This object has been deleted by {user}.",
diff --git a/js/id/ui.js b/js/id/ui.js
index 4d4f80780..1fb7d0a2a 100644
--- a/js/id/ui.js
+++ b/js/id/ui.js
@@ -60,14 +60,14 @@ iD.ui = function(context) {
.attr('class', 'button-wrap col1')
.call(iD.ui.Save(context));
- bar.append('div')
- .attr('class', 'spinner')
- .call(iD.ui.Spinner(context));
-
bar.append('div')
.attr('class', 'full-screen')
.call(iD.ui.FullScreen(context));
+ bar.append('div')
+ .attr('class', 'spinner')
+ .call(iD.ui.Spinner(context));
+
var controls = bar.append('div')
.attr('class', 'map-controls');
diff --git a/js/id/ui/full_screen.js b/js/id/ui/full_screen.js
index e2fec1347..1e00f63b2 100644
--- a/js/id/ui/full_screen.js
+++ b/js/id/ui/full_screen.js
@@ -26,8 +26,8 @@ iD.ui.FullScreen = function(context) {
}
function isFullScreen() {
- return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement
- || document.msFullscreenElement;
+ return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement ||
+ document.msFullscreenElement;
}
function is_supported() {
@@ -53,10 +53,12 @@ iD.ui.FullScreen = function(context) {
.placement('left');
button = selection.append('button')
- .attr('class', 'full-screen')
- .attr('title', t('full_screen.tooltip'))
+ .attr('title', t('full_screen'))
.attr('tabindex', -1)
.on('click', fullScreen)
.call(tooltip);
+
+ button.append('span')
+ .attr('class', 'icon full-screen');
};
};