mirror of
https://github.com/postgres/pgweb.git
synced 2025-07-25 16:02:27 +00:00
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.
This commit is contained in:
Dave Page
@ -1364,6 +1364,21 @@ table.contributor-table thead tr th {
|
||||
}
|
||||
|
||||
/* Downloads/products */
|
||||
|
||||
.btn-download {
|
||||
border-color: #336791;
|
||||
border-width: 2px;
|
||||
color: #336791 !important;
|
||||
}
|
||||
|
||||
.btn-download:hover {
|
||||
background-color: #e7eae8;
|
||||
}
|
||||
|
||||
.download-subnav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
table.product-table thead tr th:nth-child(1) {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
BIN
media/img/bsd.png
Normal file
BIN
media/img/bsd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 8.7 KiB |
BIN
media/img/suse.png
Normal file
BIN
media/img/suse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.0 KiB |
8
media/js/apt.js
Normal file
8
media/js/apt.js
Normal file
@ -0,0 +1,8 @@
|
||||
/* Event handlers */
|
||||
function setupHandlers() {
|
||||
document.getElementById('copy-btn').addEventListener('click', function () {
|
||||
copyScript(this, 'script-box');
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", setupHandlers);
|
||||
14
media/js/download.js
Normal file
14
media/js/download.js
Normal file
@ -0,0 +1,14 @@
|
||||
/* Event handlers */
|
||||
function setupHandlers() {
|
||||
document.getElementById('btn-download-bsd').addEventListener('click', function (event) {
|
||||
showDistros(this, 'download-subnav-bsd');
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
document.getElementById('btn-download-linux').addEventListener('click', function (event) {
|
||||
showDistros(this, 'download-subnav-linux');
|
||||
event.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", setupHandlers);
|
||||
@ -73,3 +73,19 @@ function copyScript(trigger, elem) {
|
||||
trigger.innerHTML = label;
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
/*
|
||||
* showDistros shows / hides the individual distributions of particular OS
|
||||
* families on the Download page
|
||||
*/
|
||||
function showDistros(btn, osDiv) {
|
||||
// Disable everything
|
||||
document.getElementById('btn-download-bsd').style.background = '#ffffff';
|
||||
document.getElementById('download-subnav-bsd').style.display = 'none';
|
||||
document.getElementById('btn-download-linux').style.background = '#ffffff';
|
||||
document.getElementById('download-subnav-linux').style.display = 'none';
|
||||
|
||||
// Enable the one we want
|
||||
btn.style.background='#e7eae8';
|
||||
document.getElementById(osDiv).style.display = 'block';
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ sitenav = {
|
||||
],
|
||||
'download': [
|
||||
{'title': 'Downloads', 'link': '/download/', 'submenu': [
|
||||
{'title': 'Binary', 'link': '/download/'},
|
||||
{'title': 'Packages', 'link': '/download/'},
|
||||
{'title': 'Source', 'link': '/ftp/source/'}
|
||||
]},
|
||||
{'title': 'Software Catalogue', 'link': '/download/product-categories/'},
|
||||
|
||||
@ -158,3 +158,15 @@ function archChanged() {
|
||||
|
||||
document.getElementById('copy-btn').style.display = 'block';
|
||||
}
|
||||
|
||||
/* Event handlers */
|
||||
function setupHandlers() {
|
||||
document.getElementById('copy-btn').addEventListener('click', function () {
|
||||
copyScript(this, 'script-box');
|
||||
});
|
||||
document.getElementById('version').addEventListener('change', verChanged);
|
||||
document.getElementById('platform').addEventListener('change', platChanged);
|
||||
document.getElementById('arch').addEventListener('change', archChanged);
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", setupHandlers);
|
||||
|
||||
@ -1,44 +1,76 @@
|
||||
{%extends "base/page.html"%}
|
||||
{%block title%}Downloads{%endblock%}
|
||||
{%block extrahead%}
|
||||
<script type="text/javascript" src="/media/js/download.js?{{gitrev}}"></script>
|
||||
{%endblock%}
|
||||
{%block contents%}
|
||||
|
||||
<h1>Downloads <i class="fa fa-download"></i></h1>
|
||||
|
||||
<h2>PostgreSQL Core Distribution</h2>
|
||||
<h2>PostgreSQL Downloads</h2>
|
||||
|
||||
<p>
|
||||
The core of the PostgreSQL object-relational database management system
|
||||
is available in several source and binary formats.
|
||||
PostgreSQL is available for download as ready-to-use packages or installers for
|
||||
various platforms, as well as a source code archive if you want to build it
|
||||
yourself.
|
||||
</p>
|
||||
|
||||
<h3>Binary packages</h3>
|
||||
<h3>Packages and Installers</h3>
|
||||
|
||||
<p>
|
||||
Pre-built binary packages are available for a number of different operating
|
||||
systems:
|
||||
</p>
|
||||
<ul>
|
||||
<li>BSD
|
||||
<ul>
|
||||
<li><a href="/download/freebsd/">FreeBSD</a></li>
|
||||
<li><a href="/download/openbsd/">OpenBSD</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Linux
|
||||
<ul>
|
||||
<li>
|
||||
<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)
|
||||
</li>
|
||||
<li><a href="/download/linux/debian/">Debian</a> GNU/Linux and derivatives</li>
|
||||
<li><a href="/download/linux/ubuntu/">Ubuntu</a> Linux and derivatives</li>
|
||||
<li><a href="/download/linux/suse/">SUSE</a> and <a href="/download/linux/suse/">openSUSE</a></li>
|
||||
<li><a href="/download/linux/">Other</a> Linux</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/download/macosx/">macOS</a></li>
|
||||
<li><a href="/download/solaris/">Solaris</a></li>
|
||||
<li><a href="/download/windows/">Windows</a></li>
|
||||
</ul>
|
||||
<p>Select your operating system family:</p>
|
||||
|
||||
<a role="button" id="btn-download-linux" class="btn btn-outline-dark btn-download" href="/download/linux/">
|
||||
Linux<br/>
|
||||
<img class="logo" src="/media/img/linux.svg" alt="Linux Logo" />
|
||||
</a>
|
||||
<a role="button" class="btn btn-outline-dark btn-download" href="/download/macosx/">
|
||||
macOS<br/>
|
||||
<img class="logo" src="/media/img/apple.png" alt="Apple Logo" />
|
||||
</a>
|
||||
<a role="button" class="btn btn-outline-dark btn-download" href="/download/windows/">
|
||||
Windows<br/>
|
||||
<img class="logo" src="/media/img/windows.svg" alt="Windows Logo" />
|
||||
</a>
|
||||
<a role="button" class="btn btn-outline-dark btn-download" href="/download/solaris/">
|
||||
Solaris<br/>
|
||||
<img class="logo" src="/media/img/solaris.png" alt="Solaris Logo" />
|
||||
</a>
|
||||
<a role="button" id="btn-download-bsd" class="btn btn-outline-dark btn-download" href="/download/bsd/">
|
||||
BSD<br/>
|
||||
<img class="logo" src="/media/img/bsd.png" alt="BSD Logo" />
|
||||
</a>
|
||||
|
||||
<!-- sub-navigation for Linux distributions -->
|
||||
<div id="download-subnav-linux" class="download-subnav">
|
||||
<p>Select your Linux distribution:</p>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<a role="button" class="btn btn-outline-dark btn-download" href="/download/linux/#generic">
|
||||
Other Linux<br/>
|
||||
<img class="logo" src="/media/img/linux.svg" alt="Linux Logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- sub-navigation for BSD distributions -->
|
||||
<div id="download-subnav-bsd" class="download-subnav">
|
||||
<p>Select your BSD distribution:</p>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<h3>Source code</h3>
|
||||
|
||||
|
||||
14
templates/pages/download/bsd.html
Normal file
14
templates/pages/download/bsd.html
Normal file
@ -0,0 +1,14 @@
|
||||
{%extends "base/page.html"%}
|
||||
{%block title%}BSD packages{%endblock%}
|
||||
{%block contents%}
|
||||
|
||||
<h1>BSD Distributions <img class="logo" src="/media/img/bsd.png" alt="BSD Logo" /></h1>
|
||||
|
||||
<p>
|
||||
Select your BSD distribution:
|
||||
</p>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{%endblock%}
|
||||
@ -2,21 +2,18 @@
|
||||
{%block title%}Linux downloads (other){%endblock%}
|
||||
{%block contents%}
|
||||
|
||||
<h1>Linux downloads (other) <img class="logo" src="/media/img/linux.svg" alt="Linux Logo" /></h1>
|
||||
<h1>Linux downloads <img class="logo" src="/media/img/linux.svg" alt="Linux Logo" /></h1>
|
||||
<p>
|
||||
<strong>Note!</strong> These are the generic Linux download instructions. If you
|
||||
are using one of the major Linux distributions, you should read the
|
||||
distribution specific instructions:
|
||||
Please select your distribution below:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<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)
|
||||
</li>
|
||||
<li><a href="/download/linux/debian/">Debian</a> GNU/Linux and derivatives</li>
|
||||
<li><a href="/download/linux/ubuntu/">Ubuntu</a> Linux and derivatives</li>
|
||||
<li><a href="/download/linux/suse/">SUSE</a> and <a href="/download/linux/suse/">openSUSE</a></li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<a name="generic"/>
|
||||
<h2>Generic linux distributions</h2>
|
||||
<p>
|
||||
PostgreSQL is available integrated with the package management on most
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
{%extends "base/page.html"%}
|
||||
{%block title%}Linux downloads (Debian){%endblock%}
|
||||
{%block extrahead%}
|
||||
<script type="text/javascript" src="/media/js/apt.js?{{gitrev}}"></script>
|
||||
{%endblock%}
|
||||
{%block contents%}
|
||||
|
||||
<h1>Linux downloads (Debian) <img class="logo" src="/media/img/debian.svg" alt="Debian Logo" /></h1>
|
||||
@ -55,7 +58,7 @@ sudo apt-get update
|
||||
# Install the latest version of PostgreSQL.
|
||||
# If you want a specific version, use 'postgresql-12' or similar instead of 'postgresql':
|
||||
sudo apt-get install postgresql</pre>
|
||||
<button class="pg-script-copy-btn" onclick="copyScript(this, 'script-box')">Copy Script</button>
|
||||
<button id="copy-btn" class="pg-script-copy-btn">Copy Script</button>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
|
||||
@ -56,13 +56,13 @@ using Fedora for server deployments.
|
||||
To use the PostgreSQL Yum Repository, follow these steps:
|
||||
</p>
|
||||
<ol>
|
||||
<li>Select version: <select id="version" class="custom-select" onChange="verChanged()"></select><br/></li>
|
||||
<li>Select platform: <select id="platform" class="custom-select" onChange="platChanged()"></select></li>
|
||||
<li>Select architecture: <select id="arch" class="custom-select" onChange="archChanged()"></select></li>
|
||||
<li>Select version: <select id="version" class="custom-select"></select><br/></li>
|
||||
<li>Select platform: <select id="platform" class="custom-select"></select></li>
|
||||
<li>Select architecture: <select id="arch" class="custom-select"></select></li>
|
||||
<li>Copy, paste and run the relevant parts of the setup script:
|
||||
<div class="pg-script-container">
|
||||
<pre id="script-box" class="code"></pre>
|
||||
<button id="copy-btn" class="pg-script-copy-btn" onclick="copyScript(this, 'script-box')">Copy Script</button>
|
||||
<button id="copy-btn" class="pg-script-copy-btn">Copy Script</button>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
{%block title%}Linux downloads (SUSE){%endblock%}
|
||||
{%block contents%}
|
||||
|
||||
<h1>Linux downloads (SUSE) <img class="logo" src="/media/img/suse.svg" alt="SUSE Logo" /></h1>
|
||||
<h1>Linux downloads (SUSE) <img class="logo" src="/media/img/suse.png" alt="SUSE Logo" /></h1>
|
||||
<p>
|
||||
PostgreSQL is available in all SUSE versions by default. However,
|
||||
SUSE Linux "snapshots" a specific version of PostgreSQL
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
{%extends "base/page.html"%}
|
||||
{%block title%}Linux downloads (Ubuntu){%endblock%}
|
||||
{%block extrahead%}
|
||||
<script type="text/javascript" src="/media/js/apt.js?{{gitrev}}"></script>
|
||||
{%endblock%}
|
||||
{%block contents%}
|
||||
|
||||
<h1>Linux downloads (Ubuntu) <img class="logo" src="/media/img/ubuntu.svg" alt="Ubuntu Logo" /></h1>
|
||||
@ -54,7 +57,7 @@ sudo apt-get update
|
||||
# Install the latest version of PostgreSQL.
|
||||
# If you want a specific version, use 'postgresql-12' or similar instead of 'postgresql':
|
||||
sudo apt-get install postgresql</pre>
|
||||
<button class="pg-script-copy-btn" onclick="copyScript(this, 'script-box')">Copy Script</button>
|
||||
<button id="copy-btn" class="pg-script-copy-btn">Copy Script</button>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
|
||||
Reference in New Issue
Block a user