Redesign layout of About Paint

Move the View Project News button into the header row.
1j01 · Oct 10, 2019 · 61b22ad · 61b22ad
1 parent aed00ce
commit 61b22ad
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -41,7 +41,13 @@
 	</head>
 	<body>
 		<div id="about-paint" style="display: none">
-			<h1><img src="images/icons/32x32.png" width="32" height="32" alt=""/> JS Paint <small id="jspaint-version" title="expect bugs!">Alpha</small></h1>
+			<h1 id="about-paint-header">
+				<img src="images/icons/32x32.png" width="32" height="32" alt=""/>
+				<span id="jspaint-project-name">JS Paint</span>
+				<small id="jspaint-version" title="expect bugs!">Alpha</small>
+				<button id="view-project-news">View Project News</button>
+			</h1>
+
 			<div id="maybe-outdated-view-project-news" hidden>
 				<div id="maybe-outdated-line">
 					<div id="outdated" hidden>
@@ -64,7 +70,7 @@ <h1><img src="images/icons/32x32.png" width="32" height="32" alt=""/> JS Paint <
 						<span class="navigator-online">JS Paint may be outdated.</span>
 					</div>
 				</div>
-				<button id="view-project-news">View Project News</button>
+
 			</div>
 			<p>JS Paint is a web-based remake of MS Paint by <a href="https://isaiahodhner.ml/">Isaiah Odhner</a>.</p>
 			<p>Read about the project and <b>extra features</b> on <a href="https://github.com/1j01/jspaint#readme">the README</a>.</p>

diff --git a/src/functions.js b/src/functions.js
@@ -500,10 +500,13 @@ function show_about_paint(){
 	}
 	$about_paint_window = $Window().title("About Paint");
 
+	$about_paint_window.$content.append($about_paint_content.show()).css({padding: "15px"});
+
 	$("#maybe-outdated-view-project-news").removeAttr("hidden");
+
 	$("#failed-to-check-if-outdated").attr("hidden", "hidden");
+	$("#outdated").attr("hidden", "hidden");
 
-	$about_paint_window.$content.append($about_paint_content.show()).css({padding: "15px"});
 	$about_paint_window.center();
 	$about_paint_window.center(); // XXX - but it helps tho
 

diff --git a/styles/layout.css b/styles/layout.css
@@ -299,13 +299,6 @@ html, body, .jspaint {
 	padding: 5px;
 }
 
-#jspaint-version {
-	/* TODO: separate into a shared.css? (not really layout!) */
-	font-size: 0.6em;
-	color: #7b7b7b;
-
-}
-
 .help-window .window-content {
 	display: flex;
 	flex-flow: row;
@@ -390,6 +383,33 @@ html, body, .jspaint {
 	cursor: inherit !important;
 }
 
+#about-paint-header {
+	display: flex;
+	flex-direction: row;
+	margin: 0;
+	margin-top: 30px;
+	margin-bottom: 10px;
+}
+#jspaint-project-name {
+	margin-left: 10px;
+	margin-right: 8px;
+}
+#jspaint-version {
+	/* TODO: separate into a shared.css? (not really layout!) */
+	font-size: 0.6em;
+	color: #7b7b7b;
+}
+#maybe-outdated-line {
+	font-style: italic;
+	height: 2em;
+}
+#view-project-news {
+	margin: auto;
+	margin-right: 40px;
+	width: 150px;
+	height: 2.2em;
+}
+
 #news {
 	max-height: 500px;
 	overflow: auto;
@@ -399,9 +419,3 @@ html, body, .jspaint {
 		max-height: calc(100vh - 50px);
 	}
 }
-/* #maybe-outdated-view-project-news {
-	height: 3em;
-} */
-#maybe-outdated-line {
-	height: 1em;
-}
diff --git a/test-news-newer.html b/test-news-newer.html
@@ -8,20 +8,20 @@ <h1>Extraterrestrial Life</h1>
 	<article class="news-entry" id="news-2100-js">
 		<h1>The Legacy of JavaScript</h1>
 		<time datetime="2100-09-21">2100-09-21</time>
-		It's sad that JavaScript still exists, but at least we don't have to write it anymore.
-		Anyway, as I've said before, the JS no longer stands for JavaScript, it's Jarvis's Spectre Paint,
+		JavaScript still exists, but hey look on the bright side, at least we don't have to write it anymore.
+		Btw the JS in JS Paint no longer stands for JavaScript, it's Jarvis's Spectre Paint,
 		named after the AI that helps maintain this project.
 	</article>
 	<style>
 		#news {
 			background: black;
-			color: lime;
+			color: aqua;
 		}
 		.news-entry {
-			background: rgba(0, 255, 0, 0.2);
-			color: lime;
+			background: rgba(0, 255, 255, 0.2);
+			color: aqua;
 			border-radius: 5px;
-			border: 1px solid green;
+			border: 1px solid rgba(0, 255, 255, 0.5);
 			padding: 10px;
 			max-width: 30em;
 			margin: 10px;
@@ -33,10 +33,10 @@ <h1>The Legacy of JavaScript</h1>
 		}
 		.news-entry > time {
 			font-size: 1.3em;
-			color: green;
+			color: rgba(0, 255, 255, 0.5);
 		}
 		.news-entry .new {
-			color: yellow;
+			color: lime;
 		}
 	</style>
 </div>