Skip to content

Commit b0c19ac

Browse files
dpagedpage
committed
Download pages overhaul:
- Don't use inline event handlers - Simplify some of the wording - Replace the package download list with nice buttons Design by me & Jonathan, code by me, review by Jonathan and others.
1 parent e850a9b commit b0c19ac

File tree

17 files changed

+167
-54
lines changed

17 files changed

+167
-54
lines changed

‎media/css/main.css

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1364,6 +1364,21 @@ table.contributor-table thead tr th {
13641364
}
13651365

13661366
/* Downloads/products */
1367+
1368+
.btn-download {
1369+
border-color: #336791;
1370+
border-width: 2px;
1371+
color: #336791 !important;
1372+
}
1373+
1374+
.btn-download:hover {
1375+
background-color: #e7eae8;
1376+
}
1377+
1378+
.download-subnav {
1379+
display: none;
1380+
}
1381+
13671382
table.product-table thead tr th:nth-child(1) {
13681383
width: 60%;
13691384
}
@@ -1541,4 +1556,4 @@ table.sponsor-table tbody tr td:nth-child(3) {
15411556
position: absolute;
15421557
top: 8px;
15431558
right: 8px;
1544-
}
1559+
}

‎media/img/bsd.png

72.3 KB
Loading

‎media/img/linux.svg

Lines changed: 1 addition & 1 deletion
Loading

‎media/img/suse.png

52 KB
Loading

‎media/img/suse.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎media/js/apt.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/* Event handlers */
2+
function setupHandlers() {
3+
document.getElementById('copy-btn').addEventListener('click', function () {
4+
copyScript(this, 'script-box');
5+
});
6+
}
7+
8+
document.addEventListener("DOMContentLoaded", setupHandlers);

‎media/js/download.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/* Event handlers */
2+
function setupHandlers() {
3+
document.getElementById('btn-download-bsd').addEventListener('click', function (event) {
4+
showDistros(this, 'download-subnav-bsd');
5+
event.preventDefault();
6+
});
7+
8+
document.getElementById('btn-download-linux').addEventListener('click', function (event) {
9+
showDistros(this, 'download-subnav-linux');
10+
event.preventDefault();
11+
});
12+
}
13+
14+
document.addEventListener("DOMContentLoaded", setupHandlers);

‎media/js/main.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,19 @@ function copyScript(trigger, elem) {
7373
trigger.innerHTML = label;
7474
}, 3000);
7575
}
76+
77+
/*
78+
* showDistros shows / hides the individual distributions of particular OS
79+
* families on the Download page
80+
*/
81+
function showDistros(btn, osDiv) {
82+
// Disable everything
83+
document.getElementById('btn-download-bsd').style.background = '#ffffff';
84+
document.getElementById('download-subnav-bsd').style.display = 'none';
85+
document.getElementById('btn-download-linux').style.background = '#ffffff';
86+
document.getElementById('download-subnav-linux').style.display = 'none';
87+
88+
// Enable the one we want
89+
btn.style.background='#e7eae8';
90+
document.getElementById(osDiv).style.display = 'block';
91+
}

‎pgweb/util/contexts.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
],
2121
'download': [
2222
{'title': 'Downloads', 'link': '/download/', 'submenu': [
23-
{'title': 'Binary', 'link': '/download/'},
23+
{'title': 'Packages', 'link': '/download/'},
2424
{'title': 'Source', 'link': '/ftp/source/'}
2525
]},
2626
{'title': 'Software Catalogue', 'link': '/download/product-categories/'},

‎templates/downloads/js/yum.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,3 +158,15 @@ function archChanged() {
158158

159159
document.getElementById('copy-btn').style.display = 'block';
160160
}
161+
162+
/* Event handlers */
163+
function setupHandlers() {
164+
document.getElementById('copy-btn').addEventListener('click', function () {
165+
copyScript(this, 'script-box');
166+
});
167+
document.getElementById('version').addEventListener('change', verChanged);
168+
document.getElementById('platform').addEventListener('change', platChanged);
169+
document.getElementById('arch').addEventListener('change', archChanged);
170+
}
171+
172+
document.addEventListener("DOMContentLoaded", setupHandlers);

‎templates/pages/download.html

Lines changed: 63 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,76 @@
11
{%extends "base/page.html"%}
22
{%block title%}Downloads{%endblock%}
3+
{%block extrahead%}
4+
<script type="text/javascript" src="/media/js/download.js?{{gitrev}}"></script>
5+
{%endblock%}
36
{%block contents%}
47

58
<h1>Downloads <i class="fa fa-download"></i></h1>
69

7-
<h2>PostgreSQL Core Distribution</h2>
10+
<h2>PostgreSQL Downloads</h2>
811

912
<p>
10-
The core of the PostgreSQL object-relational database management system
11-
is available in several source and binary formats.
13+
PostgreSQL is available for download as ready-to-use packages or installers for
14+
various platforms, as well as a source code archive if you want to build it
15+
yourself.
1216
</p>
1317

14-
<h3>Binary packages</h3>
15-
16-
<p>
17-
Pre-built binary packages are available for a number of different operating
18-
systems:
19-
</p>
20-
<ul>
21-
<li>BSD
22-
<ul>
23-
<li><a href="/download/freebsd/">FreeBSD</a></li>
24-
<li><a href="/download/openbsd/">OpenBSD</a></li>
25-
</ul>
26-
</li>
27-
<li>Linux
28-
<ul>
29-
<li>
30-
<a href="/download/linux/redhat/">Red Hat</a> family Linux (including <a href="/download/linux/redhat/">CentOS</a>/<a href="/download/linux/redhat/">Fedora</a>/<a href="/download/linux/redhat/">Scientific/Oracle</a> variants)
31-
</li>
32-
<li><a href="/download/linux/debian/">Debian</a> GNU/Linux and derivatives</li>
33-
<li><a href="/download/linux/ubuntu/">Ubuntu</a> Linux and derivatives</li>
34-
<li><a href="/download/linux/suse/">SUSE</a> and <a href="/download/linux/suse/">openSUSE</a></li>
35-
<li><a href="/download/linux/">Other</a> Linux</li>
36-
</ul>
37-
</li>
38-
<li><a href="/download/macosx/">macOS</a></li>
39-
<li><a href="/download/solaris/">Solaris</a></li>
40-
<li><a href="/download/windows/">Windows</a></li>
41-
</ul>
18+
<h3>Packages and Installers</h3>
19+
20+
<p>Select your operating system family:</p>
21+
22+
<a role="button" id="btn-download-linux" class="btn btn-outline-dark btn-download" href="/download/linux/">
23+
Linux<br/>
24+
<img class="logo" src="/media/img/linux.svg" alt="Linux Logo" />
25+
</a>
26+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/macosx/">
27+
macOS<br/>
28+
<img class="logo" src="/media/img/apple.png" alt="Apple Logo" />
29+
</a>
30+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/windows/">
31+
Windows<br/>
32+
<img class="logo" src="/media/img/windows.svg" alt="Windows Logo" />
33+
</a>
34+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/solaris/">
35+
Solaris<br/>
36+
<img class="logo" src="/media/img/solaris.png" alt="Solaris Logo" />
37+
</a>
38+
<a role="button" id="btn-download-bsd" class="btn btn-outline-dark btn-download" href="/download/bsd/">
39+
BSD<br/>
40+
<img class="logo" src="/media/img/bsd.png" alt="BSD Logo" />
41+
</a>
42+
43+
<!-- sub-navigation for Linux distributions -->
44+
<div id="download-subnav-linux" class="download-subnav">
45+
<p>Select your Linux distribution:</p>
46+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/linux/debian/">
47+
Debian<br/>
48+
<img class="logo" src="/media/img/debian.svg" alt="Debian Logo" />
49+
</a>
50+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/linux/redhat">
51+
Red Hat/CentOS<br/>
52+
<img class="logo" src="/media/img/redhat.svg" alt="Red Hat Logo" />
53+
</a>
54+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/linux/suse">
55+
SUSE<br/>
56+
<img class="logo" src="/media/img/suse.png" alt="SUSE Logo" />
57+
</a>
58+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/linux/ubuntu">
59+
Ubuntu<br/>
60+
<img class="logo" src="/media/img/ubuntu.svg" alt="Ubuntu Logo" />
61+
</a>
62+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/linux/#generic">
63+
Other Linux<br/>
64+
<img class="logo" src="/media/img/linux.svg" alt="Linux Logo" />
65+
</a>
66+
</div>
67+
68+
<!-- sub-navigation for BSD distributions -->
69+
<div id="download-subnav-bsd" class="download-subnav">
70+
<p>Select your BSD distribution:</p>
71+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/openbsd/">OpenBSD<br/><img class="logo" src="/media/img/openbsd.gif" alt="OpenBSD Logo" /></a>
72+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/freebsd/">FreeBSD<br/><img class="logo" src="/media/img/freebsd.svg" alt="FreeBSD Logo" /></a>
73+
</div>
4274

4375
<h3>Source code</h3>
4476

‎templates/pages/download/bsd.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{%extends "base/page.html"%}
2+
{%block title%}BSD packages{%endblock%}
3+
{%block contents%}
4+
5+
<h1>BSD Distributions <img class="logo" src="/media/img/bsd.png" alt="BSD Logo" /></h1>
6+
7+
<p>
8+
Select your BSD distribution:
9+
</p>
10+
11+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/openbsd/">OpenBSD<br/><img class="logo" src="/media/img/openbsd.gif" alt="OpenBSD Logo" /></a>
12+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/freebsd/">FreeBSD<br/><img class="logo" src="/media/img/freebsd.svg" alt="FreeBSD Logo" /></a>
13+
14+
{%endblock%}

‎templates/pages/download/linux.html

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,18 @@
22
{%block title%}Linux downloads (other){%endblock%}
33
{%block contents%}
44

5-
<h1>Linux downloads (other) <img class="logo" src="/media/img/linux.svg" alt="Linux Logo" /></h1>
5+
<h1>Linux downloads <img class="logo" src="/media/img/linux.svg" alt="Linux Logo" /></h1>
66
<p>
7-
<strong>Note!</strong> These are the generic Linux download instructions. If you
8-
are using one of the major Linux distributions, you should read the
9-
distribution specific instructions:
7+
Please select your distribution below:
108
</p>
11-
<ul>
12-
<li>
13-
<a href="/download/linux/redhat/">Red Hat</a> family Linux (including <a href="/download/linux/redhat/">CentOS</a>/<a href="/download/linux/redhat/">Fedora</a>/<a href="/download/linux/redhat/">Scientific/Oracle</a> variants)
14-
</li>
15-
<li><a href="/download/linux/debian/">Debian</a> GNU/Linux and derivatives</li>
16-
<li><a href="/download/linux/ubuntu/">Ubuntu</a> Linux and derivatives</li>
17-
<li><a href="/download/linux/suse/">SUSE</a> and <a href="/download/linux/suse/">openSUSE</a></li>
18-
</ul>
199

10+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/linux/debian/">Debian<br/><img class="logo" src="/media/img/debian.svg" alt="Debian Logo" /></a>
11+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/linux/redhat">Red Hat/CentOS<br/><img class="logo" src="/media/img/redhat.svg" alt="Red Hat Logo" /></a>
12+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/linux/suse">SUSE<br/><img class="logo" src="/media/img/suse.png" alt="SUSE Logo" /></a>
13+
<a role="button" class="btn btn-outline-dark btn-download" href="/download/linux/ubuntu">Ubuntu<br/><img class="logo" src="/media/img/ubuntu.svg" alt="Ubuntu Logo" /></a>
14+
<a role="button" class="btn btn-outline-dark btn-download" href="#generic">Other Linux<br/><img class="logo" src="/media/img/linux.svg" alt="Linux Logo" /></a>
15+
16+
<a name="generic"/>
2017
<h2>Generic linux distributions</h2>
2118
<p>
2219
PostgreSQL is available integrated with the package management on most

‎templates/pages/download/linux/debian.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
{%extends "base/page.html"%}
22
{%block title%}Linux downloads (Debian){%endblock%}
3+
{%block extrahead%}
4+
<script type="text/javascript" src="/media/js/apt.js?{{gitrev}}"></script>
5+
{%endblock%}
36
{%block contents%}
47

58
<h1>Linux downloads (Debian) <img class="logo" src="/media/img/debian.svg" alt="Debian Logo" /></h1>
@@ -55,7 +58,7 @@ <h2>PostgreSQL Apt Repository</h2>
5558
# Install the latest version of PostgreSQL.
5659
# If you want a specific version, use 'postgresql-12' or similar instead of 'postgresql':
5760
sudo apt-get install postgresql</pre>
58-
<button class="pg-script-copy-btn" onclick="copyScript(this, 'script-box')">Copy Script</button>
61+
<button id="copy-btn" class="pg-script-copy-btn">Copy Script</button>
5962
</div>
6063

6164
<p>

‎templates/pages/download/linux/redhat.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,13 @@ <h2>PostgreSQL Yum Repository</h2>
5656
To use the PostgreSQL Yum Repository, follow these steps:
5757
</p>
5858
<ol>
59-
<li>Select version: <select id="version" class="custom-select" onChange="verChanged()"></select><br/></li>
60-
<li>Select platform: <select id="platform" class="custom-select" onChange="platChanged()"></select></li>
61-
<li>Select architecture: <select id="arch" class="custom-select" onChange="archChanged()"></select></li>
59+
<li>Select version: <select id="version" class="custom-select"></select><br/></li>
60+
<li>Select platform: <select id="platform" class="custom-select"></select></li>
61+
<li>Select architecture: <select id="arch" class="custom-select"></select></li>
6262
<li>Copy, paste and run the relevant parts of the setup script:
6363
<div class="pg-script-container">
6464
<pre id="script-box" class="code"></pre>
65-
<button id="copy-btn" class="pg-script-copy-btn" onclick="copyScript(this, 'script-box')">Copy Script</button>
65+
<button id="copy-btn" class="pg-script-copy-btn">Copy Script</button>
6666
</div>
6767
</li>
6868
</ol>

‎templates/pages/download/linux/suse.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
{%block title%}Linux downloads (SUSE){%endblock%}
33
{%block contents%}
44

5-
<h1>Linux downloads (SUSE) <img class="logo" src="/media/img/suse.svg" alt="SUSE Logo" /></h1>
5+
<h1>Linux downloads (SUSE) <img class="logo" src="/media/img/suse.png" alt="SUSE Logo" /></h1>
66
<p>
77
PostgreSQL is available in all SUSE versions by default. However,
88
SUSE Linux "snapshots" a specific version of PostgreSQL

‎templates/pages/download/linux/ubuntu.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
{%extends "base/page.html"%}
22
{%block title%}Linux downloads (Ubuntu){%endblock%}
3+
{%block extrahead%}
4+
<script type="text/javascript" src="/media/js/apt.js?{{gitrev}}"></script>
5+
{%endblock%}
36
{%block contents%}
47

58
<h1>Linux downloads (Ubuntu) <img class="logo" src="/media/img/ubuntu.svg" alt="Ubuntu Logo" /></h1>
@@ -54,7 +57,7 @@ <h2>PostgreSQL Apt Repository</h2>
5457
# Install the latest version of PostgreSQL.
5558
# If you want a specific version, use 'postgresql-12' or similar instead of 'postgresql':
5659
sudo apt-get install postgresql</pre>
57-
<button class="pg-script-copy-btn" onclick="copyScript(this, 'script-box')">Copy Script</button>
60+
<button id="copy-btn" class="pg-script-copy-btn">Copy Script</button>
5861
</div>
5962

6063
<p>

0 commit comments

Comments
 (0)