Skip to content

Commit c1b407d

Browse files
1j011j01
committed
Move update-checking status beside icon in About window
- Move the up-to-date/outdated status indictor into the middle content between the app icon and the "What's New?" button in About Paint. - Change #about-paint-header from <h1> to <div> so that the status info isn't logically included in the heading, and its font isn't oversized. - Add 10px margin between the middle content and "What's New?" button, matching the margin to the right. (`margin-left` -> `margin`.) - Allow line wrapping on #maybe-outdated-line and avoid specifying a fixed height, as this would make wrapped lines overflow the element. However, make sure to specify a minimum height, to avoid a flaky test where the blackout is sometimes seen and sometimes not.
1 parent 9a09dc7 commit c1b407d

File tree

3 files changed

+54
-43
lines changed

3 files changed

+54
-43
lines changed

‎index.html‎

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -76,43 +76,44 @@
7676

7777
<body>
7878
<div id="about-paint" style="display: none">
79-
<h1 id="about-paint-header">
79+
<div id="about-paint-header">
8080
<img src="images/icons/128x128.png" width="128" height="128" id="about-paint-icon" alt="" />
81-
<div id="jspaint-project-name-and-version">
82-
<div id="jspaint-project-name">JS Paint</div>
81+
<div id="about-paint-beside-icon">
82+
<h1 id="jspaint-project-name">JS Paint</h1>
8383
<div id="jspaint-version" title="About time to increment the version number, don't you think?">
8484
Version 1.0.0+
8585
</div>
86-
</div>
87-
<button id="view-project-news">What's New?</button>
88-
</h1>
89-
90-
<div id="jspaint-update-status-area" hidden>
91-
<!-- perhaps this can be merged with the container now that it's the only child -->
92-
<div id="maybe-outdated-line">
93-
<div id="outdated" hidden>
94-
<div class="on-official-host">
95-
There's a new version of JS Paint. <a id="refresh-to-update" href=".">Refresh</a> to get it.
96-
</div>
97-
<div class="on-third-party-host">
98-
This instance of JS Paint is outdated compared to <a href="https://jspaint.app"
99-
target="_blank">jspaint.app</a>.
100-
</div>
101-
<div class="on-dev-host">
102-
This version of JS Paint is outdated compared to <a href="https://jspaint.app"
103-
target="_blank">jspaint.app</a>.
86+
<div id="jspaint-update-status-area" hidden>
87+
<!-- perhaps this can be merged with the container now that it's the only child -->
88+
<div id="maybe-outdated-line">
89+
<div id="outdated" hidden>
90+
<div class="on-official-host">
91+
There's a new version of JS Paint.
92+
<a id="refresh-to-update" href=".">Refresh</a> to get it.
93+
</div>
94+
<div class="on-third-party-host">
95+
This instance of JS Paint is outdated compared to
96+
<a href="https://jspaint.app" target="_blank">jspaint.app</a>.
97+
</div>
98+
<div class="on-dev-host">
99+
This version of JS Paint is outdated compared to
100+
<a href="https://jspaint.app" target="_blank">jspaint.app</a>.
101+
</div>
102+
</div>
103+
<div id="checking-for-updates" hidden>
104+
Checking for updates...
105+
</div>
106+
<div id="failed-to-check-if-outdated" hidden>
107+
Couldn't check for updates.
108+
<span class="navigator-offline">You're offline.</span>
109+
<span class="navigator-online">JS Paint may be outdated.</span>
110+
</div>
104111
</div>
105112
</div>
106-
<div id="checking-for-updates" hidden>
107-
Checking for updates...
108-
</div>
109-
<div id="failed-to-check-if-outdated" hidden>
110-
Couldn't check for updates.
111-
<span class="navigator-offline">You're offline.</span>
112-
<span class="navigator-online">JS Paint may be outdated.</span>
113-
</div>
114113
</div>
114+
<button id="view-project-news">What's New?</button>
115115
</div>
116+
116117
<!-- <p>JS Paint is a web-based MS Paint remake by <a href="https://isaiahodhner.io/">Isaiah Odhner</a>.</p> -->
117118
<p>MS Paint remake by <a href="https://isaiahodhner.io/" target="_blank">Isaiah Odhner</a></p>
118119
<!-- <p>Read about the project and extra features on <a href="https://github.com/1j01/jspaint#readme">the readme</a>.</p> -->

‎styles/layout.css‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -972,27 +972,32 @@ input[type="radio"] + label::before {
972972
margin-top: 10px;
973973
margin-bottom: 10px;
974974
}
975-
#jspaint-project-name-and-version {
976-
margin-left: 10px;
975+
#about-paint-beside-icon {
976+
margin: auto 10px;
977+
}
978+
#jspaint-project-name {
977979
white-space: nowrap;
978-
margin: auto;
979-
margin-left: 10px;
980+
font-size: 2rem;
981+
margin: 0;
980982
}
981983
#jspaint-version {
982984
/* @TODO: separate some of this into a shared.css? (not all layout!) */
983-
font-size: 0.7em;
985+
white-space: nowrap;
986+
font-size: 1.4rem;
984987
font-weight: normal;
985988
}
986989
#maybe-outdated-line {
987990
font-style: italic;
988-
height: 2em;
991+
line-height: 1;
992+
/* min-height avoids a flaky test where sometimes the element blackout is visible and sometimes not depending on whether the news had been loaded when the test runs */
993+
min-height: 1em;
989994
}
990995
#view-project-news,
991996
#close-about-paint {
992997
margin: auto; /* for right-alignment AND avoiding stretching to height of the container */
993998
margin-right: 0;
994999
width: 100px;
995-
min-height: 2.2em;
1000+
min-height: 2.2rem;
9961001
}
9971002
#close-about-paint {
9981003
float: right;

‎styles/layout.rtl.css‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -972,27 +972,32 @@ input[type="radio"] + label::before {
972972
margin-top: 10px;
973973
margin-bottom: 10px;
974974
}
975-
#jspaint-project-name-and-version {
976-
margin-right: 10px;
975+
#about-paint-beside-icon {
976+
margin: auto 10px;
977+
}
978+
#jspaint-project-name {
977979
white-space: nowrap;
978-
margin: auto;
979-
margin-right: 10px;
980+
font-size: 2rem;
981+
margin: 0;
980982
}
981983
#jspaint-version {
982984
/* @TODO: separate some of this into a shared.css? (not all layout!) */
983-
font-size: 0.7em;
985+
white-space: nowrap;
986+
font-size: 1.4rem;
984987
font-weight: normal;
985988
}
986989
#maybe-outdated-line {
987990
font-style: italic;
988-
height: 2em;
991+
line-height: 1;
992+
/* min-height avoids a flaky test where sometimes the element blackout is visible and sometimes not depending on whether the news had been loaded when the test runs */
993+
min-height: 1em;
989994
}
990995
#view-project-news,
991996
#close-about-paint {
992997
margin: auto; /* for right-alignment AND avoiding stretching to height of the container */
993998
margin-left: 0;
994999
width: 100px;
995-
min-height: 2.2em;
1000+
min-height: 2.2rem;
9961001
}
9971002
#close-about-paint {
9981003
float: left;

0 commit comments

Comments
 (0)