added images to splash screen and about window

peeriodproject · Sep 3, 2014 · af9c952 · af9c952
1 parent c0384f9
commit af9c952
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 8 deletions.
diff --git a/src/images/peeriod-about.png b/src/images/peeriod-about.png
diff --git a/src/images/peeriod-about@2x.png b/src/images/peeriod-about@2x.png
diff --git a/src/images/peeriod-splashscreen.png b/src/images/peeriod-splashscreen.png
diff --git a/src/images/peeriod-splashscreen@2x.png b/src/images/peeriod-splashscreen@2x.png
diff --git a/src/public/about.html b/src/public/about.html
@@ -41,7 +41,6 @@
 			-webkit-font-smoothing: antialiased;
 			text-rendering: optimizeLegibility;
 			-webkit-font-feature-settings: "kern";
-			font-kerning: normal;
 		}
 
 		.version,
@@ -58,6 +57,8 @@
 			color: #3c3c3c;
 			text-decoration: none;
 			font-weight: bold;
+			outline: none;
+			outline: none;
 		}
 
 		a:hover,
@@ -66,17 +67,23 @@
 		}
 
 		.version {
+			margin-top: 1rem;
 			font-style: italic;
 		}
 
 		ul {
-			margin: 32px 0;
+			margin: 2rem 0;
 			padding: 0;
 			list-style: none;
 		}
 
+		ul.links {
+			margin-bottom: 0;
+		}
+
 		ul.links li {
 			display: inline-block;
+			white-space: nowrap;
 		}
 
 		ul.links li:after {
@@ -90,12 +97,11 @@
 	</style>
 </head>
 <body>
-	<h1>Logo HERE</h1>
+	<img id="logo" src="#" />
 
 	<div class="version">&mdash; <span id="version">Version</span> &mdash;</div>
 
-	<ul id="maintainers">
-	</ul>
+	<ul id="maintainers"></ul>
 
 	<ul class="links">
 		<li><a href="https://peeriodproject.org" id="home-link">Peeriod</a></li>
@@ -107,15 +113,16 @@ <h1>Logo HERE</h1>
 		(function () {
 			var gui = require('nw.gui');
 			var i18n = require('i18n');
-
+			var win = gui.Window.get();
 			var updateLink = function (linkEl) {
 				linkEl.addEventListener('click', function (event) {
 					event.preventDefault();
 
 					gui.Shell.openExternal(event.target.href);
+					win.close();
 				});
 			};
-
+			var iconName = window.devicePixelRatio > 1 ? 'peeriod-about@2x' : 'peeriod-about';
 			var links = document.getElementsByTagName('A');
 
 			for (var i = 0, l = links.length; i < l; i++) {
@@ -137,6 +144,7 @@ <h1>Logo HERE</h1>
 			}
 
 			document.title = i18n.__('aboutWindow.title');
+			document.getElementById('logo').src = '../images/' + iconName + '.png';
 			document.getElementById('version').innerHTML = i18n.__('aboutWindow.version', gui.App.manifest.version);
 			document.getElementById('home-link').innerHTML = i18n.__('aboutWindow.linkHome');
 			document.getElementById('github-link').innerHTML = i18n.__('aboutWindow.linkGithub');

diff --git a/src/public/splash-screen.html b/src/public/splash-screen.html
@@ -40,6 +40,12 @@
 			}
 		}
 
+		html,
+		body {
+			height: 100%;
+			margin: 0;
+		}
+
 		body {
 			background: #f0f0f0;
 			text-align: center;
@@ -49,6 +55,8 @@
 			/*color: #6B6B6B;*/
 			color: #8E8E8E;
 			-webkit-font-smoothing: antialiased;
+			background-repeat: no-repeat;
+			background-position: 50% 37%;
 		}
 
 		* {
@@ -120,12 +128,22 @@
 	</style>
 </head>
 <body>
-
 <div id="progress-wrapper">
 	<div class="progress"></div>
 	<div id="status-even">Toplogy Started</div>
 	<div id="status-odd"></div>
 </div>
 
+<script type="text/javascript">
+	(function () {
+		var gui = require('nw.gui');
+		gui.Window.get().showDevTools();
+
+		var imageName = window.devicePixelRatio > 1 ? 'peeriod-splashscreen@2x' : 'peeriod-splashscreen';
+
+		document.body.style.backgroundImage = 'url("../images/' + imageName + '.png")';
+	}());
+</script>
+
 </body>
 </html>