RWD fixes

generazion · Apr 27, 2018 · 2bad1af · 2bad1af
1 parent 56fa39a
commit 2bad1af
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 19 deletions.
diff --git a/js13kpwa/app.js b/js13kpwa/app.js
@@ -1,6 +1,6 @@
 // Generating content based on the template
 var template = "<article>\n\
-	<img src='data/img/SLUG.jpg'>\n\
+	<img src='data/img/SLUG.jpg' alt='NAME'>\n\
 	<h3>#POS. NAME</h3>\n\
 	<ul>\n\
 	<li><span>Author:</span> <strong>AUTHOR</strong></li>\n\
@@ -19,6 +19,7 @@ for(var i=0; i<games.length; i++) {
 		.replace(/TWITTER/g,games[i].twitter)
 		.replace(/WEBSITE/g,games[i].website)
 		.replace(/GITHUB/g,games[i].github);
+	entry = entry.replace('<a href=\'http:///\'></a>','-');
 	content += entry;
 };
 document.getElementById('content').innerHTML = content;
@@ -28,11 +29,14 @@ if('serviceWorker' in navigator) {
 	navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js');
 };
 
-// Requesting permission for Notifications
-Notification.requestPermission().then(function(result) {
-	if(result === 'granted') {
-		// randomNotification();
-	}
+// Requesting permission for Notifications after clicking on the button
+var button = document.getElementById("notifications");
+button.addEventListener('click', function(e) {
+	Notification.requestPermission().then(function(result) {
+		if(result === 'granted') {
+			randomNotification();
+		}
+	});
 });
 
 // Setting up random Notification

diff --git a/js13kpwa/img/bg_header.png → js13kpwa/img/bg.png b/js13kpwa/img/bg_header.png → js13kpwa/img/bg.png
diff --git a/js13kpwa/img/bg_content.png b/js13kpwa/img/bg_content.png
diff --git a/js13kpwa/img/forkme.png b/js13kpwa/img/forkme.png
diff --git a/js13kpwa/index.html b/js13kpwa/index.html
@@ -11,7 +11,7 @@
 	<link rel="shortcut icon" href="favicon.ico">
 	<link rel="stylesheet" href="style.css">
 	<link rel="manifest" href="js13kpwa.webmanifest">
-	<script src="data/games.js"></script>
+	<script src="data/games.js" defer></script>
 	<script src="app.js" defer></script>
 </head>
 <body>
@@ -21,6 +21,7 @@
 <main>
 	<h1>js13kGames A-Frame entries</h1>
 	<p class="description">List of games submitted to the <a href="http://js13kgames.com/aframe">A-Frame category</a> in the <a href="http://2017.js13kgames.com">js13kGames 2017</a> competition. You can <a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa">fork js13kPWA on GitHub</a> to check its source code.</p>
+	<button id="notifications">Request dummy notifications</button>
 	<section id="content"></section>
 </main>
 <footer>

diff --git a/js13kpwa/style.css b/js13kpwa/style.css
@@ -17,7 +17,7 @@ html {
 }
 body {
 	background: #efefef url(img/bg_content.png) fixed repeat;
-	font: normal 1.5em Helvetica, Arial, sans-serif;
+	font: normal 1.6em Helvetica, Arial, sans-serif;
 	line-height: 1.6;
 	color: #333;
 	position: relative;
@@ -34,7 +34,7 @@ h1 {
 	padding-top: 0.5em;
 	margin-bottom: 1em;
 	text-align: center;
-	color: #acabab;
+	color: #6c6b6b;
 }
 h1:before {
 	content: " • ";
@@ -53,7 +53,7 @@ a {
 	color: #b12a34;
 }
 header {
-	background: #2d2d2d url(img/bg_header.png) repeat;
+	background: #2d2d2d url(img/bg.png) repeat;
 	border-top: 0.2em solid #a52730;
 	border-bottom: 0.2em solid #fff;
 }
@@ -70,12 +70,14 @@ header img {
 }
 .description {
 	text-align: center;
+	padding: 1em;
+}
+button {
+	display: block;
+	margin: 0 auto 2em;
 }
 main {
-	box-sizing: border-box;
-	width: 90%;
-	margin: 0 auto;
-	padding: 0 1em 0.5em 1em;
+	width: 100%;
 	background: #fafafa;
 }
 main a:hover {
@@ -100,12 +102,11 @@ main img {
 	padding-bottom: 1em;
 }
 article {
-	border: 0.1em solid #acabab;
+	border-top: 0.1em solid #acabab;
 	padding: 1em;
-	margin-bottom: 1em;
 }
 footer {
-	background: #2d2d2d url(img/bg_header.png) repeat;
+	background: #2d2d2d url(img/bg.png) repeat;
 	border-top: 0.2em solid #fff;
 	border-bottom: 0.2em solid #a52730;
 }

diff --git a/js13kpwa/sw.js b/js13kpwa/sw.js
@@ -12,8 +12,7 @@ var appShellFiles = [
   '/pwa-examples/js13kpwa/fonts/graduate.woff',
   '/pwa-examples/js13kpwa/favicon.ico',
   '/pwa-examples/js13kpwa/img/js13kgames.png',
-  '/pwa-examples/js13kpwa/img/bg_header.png',
-  '/pwa-examples/js13kpwa/img/bg_content.png',
+  '/pwa-examples/js13kpwa/img/bg.png',
   '/pwa-examples/js13kpwa/icons/icon-32.png',
   '/pwa-examples/js13kpwa/icons/icon-64.png',
   '/pwa-examples/js13kpwa/icons/icon-96.png',