[gimp-web] content, themes: improve OS selection display in download pages.
- From: Jehan <jehanp src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gimp-web] content, themes: improve OS selection display in download pages.
- Date: Sun, 5 Dec 2021 17:11:14 +0000 (UTC)
commit 0adfbfe6f0c9a9aa899c4ce53103b1131f3ff177
Author: Jehan <jehan girinstud io>
Date: Sun Dec 5 17:59:35 2021 +0100
content, themes: improve OS selection display in download pages.
- Move the detection text under the menu-style links, with a <br/>
instead of their own paragraph to better show they are related.
- Also make this text smaller and between parentheses, because this is
not the most important information here, so it should not be that
prominent.
- The detection failure text (mostly when javascript is disabled) is
moved to a <sub> text to kind-of break the running sentence flow.
- s/OS X/macOS/
- Not sure why, but the menu in only the dev download page was in
<small>. I don't think it should be (it's quite important), so making
all download page designs consistent.
- Make the whole menu + detection text as "monospace" in all download
pages to show it a bit differently and mark it more as interface than
contents.
content/js/platform-display.js | 10 ++++---
themes/newgimp/templates/downloads-comments.html | 25 ++++++++++-------
.../newgimp/templates/downloads-development.html | 31 ++++++++++++----------
themes/newgimp/templates/downloads-oldstable.html | 25 ++++++++++-------
themes/newgimp/templates/downloads.html | 25 ++++++++++-------
5 files changed, 68 insertions(+), 48 deletions(-)
---
diff --git a/content/js/platform-display.js b/content/js/platform-display.js
index 931cb2ba..d9ce7fd7 100644
--- a/content/js/platform-display.js
+++ b/content/js/platform-display.js
@@ -35,12 +35,14 @@
* Pat David, 2016
*/
+ document.getElementById('OS-choice').style.fontFamily = 'monospace';
+
if ( platform.os.family.indexOf('Win') !== -1 && platform.os.family.indexOf('Phone') == -1 ){
// Windows, _not_ Phone
document.getElementById('win').style.display = 'block';
document.getElementById('mac').style.display = 'none';
document.getElementById('linux').style.display = 'none';
- document.getElementById('pOSTEST').innerHTML = 'Microsoft Windows.';
+ document.getElementById('pOSTEST').innerHTML = 'Microsoft Windows';
document.getElementById('os_win').style.fontWeight = 'bold';
}else if ( platform.os.family.indexOf('OS X') !== -1 ){
@@ -48,12 +50,12 @@
document.getElementById('win').style.display = 'none';
document.getElementById('mac').style.display = 'block';
document.getElementById('linux').style.display = 'none';
- document.getElementById('pOSTEST').innerHTML = 'OS X.';
+ document.getElementById('pOSTEST').innerHTML = 'macOS';
document.getElementById('os_mac').style.fontWeight = 'bold';
}else if ( platform.os.family.indexOf('iOS') !== -1 || platform.os.family.indexOf('Android') !== -1 ){
// iOS or Android
- document.getElementById('pOSTEST').innerHTML = platform.os.family + '.';
+ document.getElementById('pOSTEST').innerHTML = platform.os.family;
var nope = "<br/><strong>This platform is not currently supported.</strong>";
document.getElementById('pOSTEST').innerHTML += nope;
document.getElementById('win').style.display = 'none';
@@ -61,7 +63,7 @@
document.getElementById('linux').style.display = 'none';
}else {
// Everything else (assuming *nix-type)
- document.getElementById('pOSTEST').innerHTML = platform.os.family + '.';
+ document.getElementById('pOSTEST').innerHTML = platform.os.family;
document.getElementById('win').style.display = 'none';
document.getElementById('mac').style.display = 'none';
document.getElementById('linux').style.display = 'block';
diff --git a/themes/newgimp/templates/downloads-comments.html
b/themes/newgimp/templates/downloads-comments.html
index 3ed0e3f9..4c206209 100644
--- a/themes/newgimp/templates/downloads-comments.html
+++ b/themes/newgimp/templates/downloads-comments.html
@@ -24,21 +24,26 @@
{% endif %}
<div class="OSTEST">
- <p>
- We think your OS is
- <span id="pOSTEST">
- Well, we don't actually know.
- Either JavaScript is disabled, or I am not working quite right...
- So I am showing you all the options.
- </span>
- </p>
-
- <p id='others'>
+ <p id='OS-choice'>
Show downloads for
<span class="show_links" id='os_linux'>GNU/Linux</span> |
<span class="show_links" id='os_mac'>OS X</span> |
<span class="show_links" id='os_win'>Microsoft Windows</span> |
<span class="show_links" id='os_all'>All</span>
+
+ <br />
+
+ <small>
+ (we think your OS is
+ <span id="pOSTEST">
+ …
+ <sub>
+ Well, we don't actually know.
+ Either JavaScript is disabled, or I am not working quite right…
+ So I am showing you all the options
+ </sub>
+ </span>)
+ </small>
</p>
</div>
diff --git a/themes/newgimp/templates/downloads-development.html
b/themes/newgimp/templates/downloads-development.html
index 6b9229fa..32e7ce33 100644
--- a/themes/newgimp/templates/downloads-development.html
+++ b/themes/newgimp/templates/downloads-development.html
@@ -33,22 +33,25 @@
<div class="OSTEST">
- <p>
- We think your OS is
- <span id="pOSTEST">
- Well, we don't actually know.
- Either JavaScript is disabled, or I am not working quite right...
- So I am showing you all the options.
- </span>
- </p>
+ <p id='OS-choice'>
+ Show downloads for
+ <span class="show_links" id='os_linux'>GNU/Linux</span> |
+ <span class="show_links" id='os_mac'>macOS</span> |
+ <span class="show_links" id='os_win'>Microsoft Windows</span> |
+ <span class="show_links" id='os_all'>All</span>
+
+ <br />
- <p id='others'>
<small>
- Show downloads for
- <span class="show_links" id='os_linux'>GNU/Linux</span> |
- <span class="show_links" id='os_mac'>macOS</span> |
- <span class="show_links" id='os_win'>Microsoft Windows</span> |
- <span class="show_links" id='os_all'>All</span>
+ (we think your OS is
+ <span id="pOSTEST">
+ …
+ <sub>
+ Well, we don't actually know.
+ Either JavaScript is disabled, or I am not working quite right…
+ So I am showing you all the options
+ </sub>
+ </span>)
</small>
</p>
diff --git a/themes/newgimp/templates/downloads-oldstable.html
b/themes/newgimp/templates/downloads-oldstable.html
index 0be7acc5..920c91bd 100644
--- a/themes/newgimp/templates/downloads-oldstable.html
+++ b/themes/newgimp/templates/downloads-oldstable.html
@@ -24,21 +24,26 @@
{% endif %}
<div class="OSTEST">
- <p>
- We think your OS is
- <span id="pOSTEST">
- Well, we don't actually know.
- Either JavaScript is disabled, or I am not working quite right...
- So I am showing you all the options.
- </span>
- </p>
-
- <p id='others'>
+ <p id='OS-choice'>
Show downloads for
<span class="show_links" id='os_linux'>GNU/Linux</span> |
<span class="show_links" id='os_mac'>macOS</span> |
<span class="show_links" id='os_win'>Microsoft Windows</span> |
<span class="show_links" id='os_all'>All</span>
+
+ <br />
+
+ <small>
+ (we think your OS is
+ <span id="pOSTEST">
+ …
+ <sub>
+ Well, we don't actually know.
+ Either JavaScript is disabled, or I am not working quite right…
+ So I am showing you all the options
+ </sub>
+ </span>)
+ </small>
</p>
</div>
diff --git a/themes/newgimp/templates/downloads.html b/themes/newgimp/templates/downloads.html
index 1b713dff..348d9b03 100644
--- a/themes/newgimp/templates/downloads.html
+++ b/themes/newgimp/templates/downloads.html
@@ -20,21 +20,26 @@
<p>The current stable release of GIMP is <b>{{ GIMP_VERSION }}</b> ({{ RELEASE_DATE }}).</p>
<div class="OSTEST">
- <p>
- We think your OS is
- <span id="pOSTEST">
- Well, we don't actually know.
- Either JavaScript is disabled, or I am not working quite right...
- So I am showing you all the options.
- </span>
- </p>
-
- <p id='others'>
+ <p id='OS-choice'>
Show downloads for
<span class="show_links" id='os_linux'>GNU/Linux</span> |
<span class="show_links" id='os_mac'>macOS</span> |
<span class="show_links" id='os_win'>Microsoft Windows</span> |
<span class="show_links" id='os_all'>All</span>
+
+ <br />
+
+ <small>
+ (we think your OS is
+ <span id="pOSTEST">
+ …
+ <sub>
+ Well, we don't actually know.
+ Either JavaScript is disabled, or I am not working quite right…
+ So I am showing you all the options
+ </sub>
+ </span>)
+ </small>
</p>
</div>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
