radex
/
jspaint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redesign layout of About Paint 

Move the View Project News button into the header row.
main
Isaiah Odhner 2019-10-10 12:19:20 -04:00
parent aed00ce022
commit 61b22adbc6
4 changed files with 49 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -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 @@
<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>

9
src/functions.js
View File

@ -500,10 +500,13 @@ function show_about_paint(){
}
$about_paint_window = $Window().title("About Paint");
$("#maybe-outdated-view-project-news").removeAttr("hidden");
$("#failed-to-check-if-outdated").attr("hidden", "hidden");
$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.center();
$about_paint_window.center(); // XXX - but it helps tho

40
styles/layout.css
View File

@ -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;
}

16
test-news-newer.html
View File

@ -8,20 +8,20 @@
<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 @@
}
.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>