diff --git a/css/app.css b/css/app.css index 98ba49e57..fa750db1e 100644 --- a/css/app.css +++ b/css/app.css @@ -440,7 +440,7 @@ button[disabled] .label { .icon.geolocate { background-position: -360px 0px;} .icon.warning { background-position: -380px 0px;} -.icon.close-modal { background-position: -200px -40px;} +.icon.close-modal { background-position: -200px 0px;} .fillD .icon.avatar { background-position: -320px -20px;} .fillD .icon.nearby { background-position: -340px -20px;} @@ -911,10 +911,14 @@ div.typeahead a:first-child { position: absolute; right:5px; top:5px; - border:0; + opacity: .5; + -webkit-transition: opacity 100ms; + -moz-transition: opacity 100ms; + transition: opacity 100ms; } .modal button.close-modal:hover { background-color: transparent; + opacity: 1; } .shaded { @@ -932,7 +936,7 @@ div.typeahead a:first-child { padding: 20px; } -.modal-section.header { +.modal-section:first-child { border-radius: 4px 4px 0 0; } @@ -940,6 +944,10 @@ div.typeahead a:first-child { border-radius: 0 0 4px 4px; } +.modal-section:only-child { + border-radius: 4px; +} + .modal-section .buttons { padding-top: 10px; width: 100%; @@ -966,10 +974,25 @@ div.typeahead a:first-child { text-align: center; } +/* Splash Modal +------------------------------------------------------- */ + +.modal-splash { + width: 33.3333%; + left: 33.3333%; +} + +.logo { + height: 100px; + width: 100px; + margin: 0 auto 20px auto; + background: url(../img/logo.png) 0 0 repeat; +} + /* Commit Modal ------------------------------------------------------- */ -.commit-modal .user-info { +.commit-modal a.user-info { display: inline-block; } @@ -1012,11 +1035,38 @@ div.typeahead a:first-child { .commit-section.modal-section:last-child { padding-bottom: 20px;} -.changeset-list li { +.commit-modal .changeset-list li { + position: relative; border-top:1px solid #ccc; padding:5px 10px; } +.modal-section { + padding: 20px; +} + +.modal-section .buttons { + padding-top: 10px; + width: 100%; +} + +.modal-section img.wiki-image { + max-width: 100%; + max-height: 300px; + display: block; +} + +.modal-flash .content { + box-shadow: none; + border-radius: 4px; + background: #111; + color: #eee; +} + +.modal-flash .close-modal { + display:none; +} + .changeset-list li span.count { font-size:10px; color:#555; @@ -1257,5 +1307,5 @@ a.success-action { span.label {display: none;} /* override hide for save button */ .icon.icon-pre-text { margin-right: 0px;} - .save .label, .apply .label { display: block;} + .save .label, .apply .label, .cancel .label { display: block;} } diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 000000000..6afa01f1b Binary files /dev/null and b/img/logo.png differ diff --git a/img/source/logo.svg b/img/source/logo.svg new file mode 100644 index 000000000..bf3841f90 --- /dev/null +++ b/img/source/logo.svg @@ -0,0 +1,1205 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + iD + + + + + + + + + + + + + + + + + + + + + + + + + A javascript OpenStreetMap Editor + + + + + + + + + + + iD + + + + + + + + + + + + + + + + + + + + + + + A Javascript OpenStreetMap Editor + + + + + + + + + + + + + + + + + + + + + + + D3.js + + + + + + iD + + + + + + + + + + + iD + + + diff --git a/img/source/sprite.svg b/img/source/sprite.svg index 01a28e513..64b75e286 100644 --- a/img/source/sprite.svg +++ b/img/source/sprite.svg @@ -39,8 +39,8 @@ inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="4" - inkscape:cx="332.2911" - inkscape:cy="175.13176" + inkscape:cx="202.2911" + inkscape:cy="164.38176" inkscape:document-units="px" inkscape:current-layer="layer12" showgrid="false" @@ -1344,10 +1344,16 @@ style="fill:#ffffff;fill-opacity:1;display:inline" /> + diff --git a/img/sprite.png b/img/sprite.png index 5922c06c1..f14b74ac9 100644 Binary files a/img/sprite.png and b/img/sprite.png differ diff --git a/index.html b/index.html index 5f62b0f8f..3c6767927 100644 --- a/index.html +++ b/index.html @@ -69,6 +69,7 @@ + @@ -140,4 +141,15 @@ d3.select("#iD").call(id); }); + + diff --git a/js/id/id.js b/js/id/id.js index 69e64e5fe..2aad9b5bf 100644 --- a/js/id/id.js +++ b/js/id/id.js @@ -245,6 +245,11 @@ window.iD = function(container) { .on('login.editor', connection.authenticate)); controller.enter(iD.modes.Browse()); + + if (!localStorage.sawSplash) { + iD.ui.splash(); + localStorage.sawSplash = true; + } } editor.connection = function(_) { diff --git a/js/id/ui/splash.js b/js/id/ui/splash.js new file mode 100644 index 000000000..43489fab1 --- /dev/null +++ b/js/id/ui/splash.js @@ -0,0 +1,16 @@ +iD.ui.splash = function() { + var modal = iD.ui.modal(); + + modal.select('.modal') + .attr('class', 'modal-splash modal') + + var introModal = modal.select('.content') + .append('div') + .attr('class', 'modal-section fillL'); + + introModal.append('div').attr('class','logo'); + + introModal.append('div').html("

Welcome to the iD OpenStreetMap editor

This is development version 0.0.0-alpha1. For more information see ideditor.com and report bugs at github.com.systemed/iD.

"); + + return modal; +}; \ No newline at end of file diff --git a/test/index.html b/test/index.html index 731800f62..f8149a368 100644 --- a/test/index.html +++ b/test/index.html @@ -66,6 +66,7 @@ +