Improve download page layout

Increase icons' size and add an icon for the source code
Show optimized OS list and no OS auto-detect button for mobiles
Don't mix release signatures with downloads
This commit is contained in:
Saivann 2013-12-15 14:47:50 -05:00
parent fc4a84b99f
commit 536cf0149b
15 changed files with 260 additions and 126 deletions

View file

@ -191,9 +191,16 @@ body{
zoom:1;
display:inline;
}
.downloadbox span{
.downloadbox div{
zoom:1;
display:inline;
display:inline;
}
.downloadbox div div{
display:block;
}
.download span{
zoom:1;
display:inline;
}
.alert-message a:hover,
@ -203,11 +210,6 @@ body{
color:#fff;
}
.download span{
zoom:1;
display:inline;
}
.index{
zoom:1;
display:inline;

View file

@ -117,6 +117,20 @@ h2 .rssicon{
margin-right:auto;
margin-left:10px;
}
.downloadbox a{
direction:ltr;
}
.downloadbox small{
direction:ltr;
}
.downloadbox div div{
text-align:right;
font-family:Arial, sans-serif;
}
.downloadbox small{
right:40px;
left:0;
}
/*Override UbuntuBold by Droid Naskh*/
@ -137,6 +151,22 @@ h2 .rssicon{
padding:15px 10px 20px 10px;
text-align:right;
}
.download{
text-align:right;
}
.download p{
text-align:right;
}
.downloadbox{
text-align:right;
}
.download h1,
.download h2{
text-align:right;
}
.download div p{
text-align:right;
}
}
/* Deprecated styles (should be removed when translations are updated) */

View file

@ -1009,7 +1009,6 @@ h2 .rssicon{
}
.downloadbox{
display:inline-block;
text-align:center;
border:2px solid #fad296;
padding:20px;
font-size:125%;
@ -1019,30 +1018,39 @@ h2 .rssicon{
margin:0 auto 20px auto;
}
.downloadbox p{
margin:0;
margin-top:20px;
margin-bottom:0;
margin:20px 0 0 0;
}
.downloadbox p:first-child{
margin-top:0;
margin-bottom:20px;
margin:0 0 10px 0;
}
.downloadbox p a{
font-size:90%;
}
.downloadbox a{
display:inline-block;
}
.downloadbox div{
display:inline-block;
margin:0 10px;
vertical-align:top;
}
.downloadbox div div{
display:block;
width:180px;
margin:10px 0;
text-align:left;
}
.downloadbox span{
width:16px;
height:16px;
display:inline-block;
.downloadbox img{
width:32px;
height:32px;
position:relative;
bottom:-22px;
}
.download span{
width:16px;
height:16px;
display:inline-block;
.downloadbox small{
display:block;
position:relative;
left:40px;
margin-top:4px;
}
.summary{
@ -1555,9 +1563,34 @@ h2 .rssicon{
.resourcesorg div{
border-top:0;
}
.download{
text-align:left;
}
.download p{
text-align:left;
}
.download div p{
text-align:left;
}
.download h1,
.download h2{
text-align:left;
}
.download .mainbutton{
display:none;
}
.downloadbox{
border:0;
padding:0;
text-align:left;
}
.downloadbox div div{
margin:0;
width:auto;
}
.downloadbox>p:first-child{
display:none;
}
}
/* Deprecated styles (should be removed when translations are updated) */

View file

@ -9,24 +9,25 @@ id: download
<div class="mainbutton"><a id="downloadbutton" href="http://sourceforge.net/projects/bitcoin/files/Bitcoin/bitcoin-{{site.DOWNLOAD_VERSION}}/bitcoin-{{site.DOWNLOAD_VERSION}}-win32-setup.exe/download"><img src="/img/but_windows.svg" alt="icon">{% translate download %}</a></div>
<div class="downloadbox">
<p>{% translate downloados %}</p>
<div><img src="/img/os/win.png" alt="windows"> <a href="http://sourceforge.net/projects/bitcoin/files/Bitcoin/bitcoin-{{site.DOWNLOAD_VERSION}}/bitcoin-{{site.DOWNLOAD_VERSION}}-win32.zip/download">{% translate downloadwinzip %}</a> <small>~16MB</small></div>
<div id="download_windows"><img src="/img/os/win.png" alt="windows"> <a href="http://sourceforge.net/projects/bitcoin/files/Bitcoin/bitcoin-{{site.DOWNLOAD_VERSION}}/bitcoin-{{site.DOWNLOAD_VERSION}}-win32-setup.exe/download">{% translate downloadwinexe %}</a> <small>~12MB</small></div>
<div><img src="/img/os/ubuntu.png" alt="ubuntu"> <a href="https://launchpad.net/~bitcoin/+archive/bitcoin">{% translate downloadubu %}</a> <small>~4MB</small></div>
<div><img src="/img/os/linux.png" alt="linux"> <a href="http://sourceforge.net/projects/bitcoin/files/Bitcoin/bitcoin-{{site.DOWNLOAD_VERSION}}/bitcoin-{{site.DOWNLOAD_VERSION}}-linux.tar.gz/download">{% translate downloadlin %}</a> <small>~16MB</small></div>
<div><img src="/img/os/osx-uni.png" alt="osx"> <a href="http://sourceforge.net/projects/bitcoin/files/Bitcoin/bitcoin-{{site.DOWNLOAD_VERSION}}/bitcoin-{{site.DOWNLOAD_VERSION}}-macosx.dmg/download">{% translate downloadmac %}</a> <small>~14MB</small></div>
{% case page.lang %}
{% when 'ar' or 'de' or 'es' or 'fa' or 'id' or 'it' or 'nl' or 'pl' or 'ru' or 'tr' or 'zh_CN' or 'zh_TW' %}
<div><img src="/img/os/sig.svg" alt="signature"> <a href="http://sourceforge.net/projects/bitcoin/files/Bitcoin/bitcoin-{{site.DOWNLOAD_VERSION}}/SHA256SUMS.asc/view">{% translate downloadsig download en %}</a></div>
{% else %}
<div><img src="/img/os/sig.svg" alt="signature"> <a href="http://sourceforge.net/projects/bitcoin/files/Bitcoin/bitcoin-{{site.DOWNLOAD_VERSION}}/SHA256SUMS.asc/view">{% translate downloadsig %}</a></div>
{% endcase %}
<div><span></span> <a href="https://github.com/bitcoin/bitcoin">{% translate downloadsource %}</a> (GitHub)</div>
<p><a href="/en/version-history">{% translate versionhistory %}</a></p>
<div>
<div id="download_windows"><img src="/img/os/med_win.png" alt="windows"> <a href="http://sourceforge.net/projects/bitcoin/files/Bitcoin/bitcoin-{{site.DOWNLOAD_VERSION}}/bitcoin-{{site.DOWNLOAD_VERSION}}-win32-setup.exe/download">Windows (exe)</a> <small>~12MB</small></div>
<div><img src="/img/os/med_win.png" alt="windows"> <a href="http://sourceforge.net/projects/bitcoin/files/Bitcoin/bitcoin-{{site.DOWNLOAD_VERSION}}/bitcoin-{{site.DOWNLOAD_VERSION}}-win32.zip/download">Windows (zip)</a> <small>~16MB</small></div>
<div><img src="/img/os/med_ubuntu.svg" alt="ubuntu"> <a href="https://launchpad.net/~bitcoin/+archive/bitcoin">Ubuntu (PPA)</a> <small>~4MB</small></div>
</div>
<div>
<div><img src="/img/os/med_osx.png" alt="osx"> <a href="http://sourceforge.net/projects/bitcoin/files/Bitcoin/bitcoin-{{site.DOWNLOAD_VERSION}}/bitcoin-{{site.DOWNLOAD_VERSION}}-macosx.dmg/download">Mac OS X</a> <small>~14MB</small></div>
<div><img src="/img/os/med_linux.png" alt="linux"> <a href="http://sourceforge.net/projects/bitcoin/files/Bitcoin/bitcoin-{{site.DOWNLOAD_VERSION}}/bitcoin-{{site.DOWNLOAD_VERSION}}-linux.tar.gz/download">Linux (tgz)</a> <small>~16MB</small></div>
<div><img src="/img/os/med_opensource.svg" alt="opensource"> <a href="https://github.com/bitcoin/bitcoin">Source code</a> <small>(GitHub)</small></div>
</div>
<p>
<a href="http://sourceforge.net/projects/bitcoin/files/Bitcoin/bitcoin-{{site.DOWNLOAD_VERSION}}/SHA256SUMS.asc/view">{% case page.lang %}{% when 'ar' or 'de' or 'es' or 'fa' or 'id' or 'it' or 'nl' or 'pl' or 'ru' or 'tr' or 'zh_CN' or 'zh_TW' %}{% translate downloadsig download en %}{% else %}{% translate downloadsig %}{% endcase %}</a><br>
<a href="/en/version-history">{% translate versionhistory %}</a>
</p>
</div>
{% case page.lang %}
{% when 'ar' or 'de' or 'es' or 'fa' or 'id' or 'it' or 'nl' or 'pl' or 'ru' or 'tr' or 'zh_CN' or 'zh_TW' %}
{% else %}
<h2><img src="/img/warning.svg" class="warningicon">{% translate patient %}</h2>
<h2><img src="/img/warning.svg" class="warningicon" alt="warning">{% translate patient %}</h2>
{% endcase %}
<p>{% translate notesync %}</p>
<p>{% translate notelicense %}</p>

View file

@ -151,13 +151,7 @@ en:
latestversion: "Latest version : "
download: "Download Bitcoin-Qt"
downloados: "Or choose your operating system"
downloadwinzip: "Download for Windows (zip)"
downloadwinexe: "Download for Windows (exe)"
downloadubu: "Download for Ubuntu (PPA)"
downloadlin: "Download for Linux (tgz, 32/64-bit)"
downloadmac: "Download for Mac OS X"
downloadsig: "Verify release signatures"
downloadsource: "Source code"
versionhistory: "Show version history"
notelicense: "Bitcoin-Qt is a community-driven <a href=\"http://www.fsf.org/about/what-is-free-software\">free software</a> project, released under the <a href=\"http://opensource.org/licenses/mit-license.php\">MIT license</a>."
notesync: "Bitcoin-Qt initial sync can take a very long time to complete. You should make sure that you have enough bandwidth and storage for the full <a href=\"http://blockchain.info/charts/blocks-size\">block chain size</a>. If you know how to download a torrent file, you can speed up this process by putting <a href=\"http://sourceforge.net/projects/bitcoin/files/Bitcoin/blockchain/bootstrap.dat.torrent/download\">bootstrap.dat</a> (a previous copy of the block chain) in the Bitcoin-Qt data directory before starting the software."

BIN
img/os/med_linux.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
img/os/med_opensource.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

61
img/os/med_opensource.svg Normal file
View file

@ -0,0 +1,61 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="32"
height="32"
id="svg2"
inkscape:version="0.48.4 r9939"
sodipodi:docname="Open_Source_Initiative_keyhole.svg">
<metadata
id="metadata8">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="1026"
id="namedview6"
showgrid="false"
inkscape:zoom="18.040778"
inkscape:cx="29.51492"
inkscape:cy="23.508067"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<defs
id="defs4" />
<g
transform="matrix(0.10196638,0,0,0.10196638,-16.144442,-47.931902)"
id="layer1">
<path
d="m 314.15745,481.69558 c -59.20089,0.53774 -114.80979,36.72219 -137.3125,95.34375 -29.39129,76.56693 8.83932,162.45246 85.40625,191.84375 l 34.03125,-88.6875 c -20.0678,-7.71358 -34.3125,-27.15324 -34.3125,-49.9375 0,-29.54723 23.95277,-53.5 53.5,-53.5 29.54723,0 53.5,23.95277 53.5,53.5 0,22.78426 -14.2447,42.22392 -34.3125,49.9375 l 34.03125,88.6875 c 39.29085,-15.08234 70.3239,-46.1154 85.40625,-85.40625 29.39129,-76.56693 -8.83932,-162.48371 -85.40625,-191.875 -17.94537,-6.88859 -36.40853,-10.07087 -54.53125,-9.90625 z"
id="path2830"
style="fill:#40aa54;fill-opacity:1;stroke:#20552a;stroke-width:7.99999952;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
inkscape:connector-curvature="0" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
img/os/med_osx.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
img/os/med_ubuntu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

98
img/os/med_ubuntu.svg Normal file
View file

@ -0,0 +1,98 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="32"
height="32"
viewBox="-142.5 -142.5 32 32"
id="svg3821"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="logo-ubuntu_cof-orange-hex.svg">
<metadata
id="metadata3838">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3836" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="1026"
id="namedview3834"
showgrid="false"
inkscape:zoom="9.3685446"
inkscape:cx="-2.5431232"
inkscape:cy="37.916409"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="svg3821" />
<circle
r="141.73199"
id="circle3823"
cx="0"
cy="0"
sodipodi:cx="0"
sodipodi:cy="0"
sodipodi:rx="141.73199"
sodipodi:ry="141.73199"
style="fill:#dd4814"
transform="matrix(0.10830859,0,0,0.10830859,-126.3812,-126.6188)" />
<g
id="U"
style="fill:#ffffff"
transform="matrix(0.10830859,0,0,0.10830859,-126.3812,-126.6188)">
<circle
cx="-96.377197"
r="18.921499"
id="circle3826"
d="m -77.455698,0 c 0,10.450055 -8.471444,18.921499 -18.921499,18.921499 -10.450053,0 -18.921503,-8.471444 -18.921503,-18.921499 0,-10.450055 8.47145,-18.921499 18.921503,-18.921499 10.450055,0 18.921499,8.471444 18.921499,18.921499 z"
cy="0"
sodipodi:cx="-96.377197"
sodipodi:cy="0"
sodipodi:rx="18.921499"
sodipodi:ry="18.921499" />
<path
d="M -45.6059,68.395 C -62.1655,57.3316 -74.4844,40.4175 -79.6011,20.6065 -73.623,15.7354 -69.8047,8.3164 -69.8047,0 c 0,-8.3164 -3.8183,-15.7354 -9.7964,-20.6065 5.1167,-19.811 17.4356,-36.7251 33.9952,-47.7885 l 13.8344,23.1738 C -45.9824,-35.2197 -55.2754,-18.7026 -55.2754,0 c 0,18.7026 9.293,35.2197 23.5039,45.2212 z"
id="path3828"
inkscape:connector-curvature="0" />
</g>
<use
xlink:href="#U"
transform="matrix(-0.5,0.8660254,-0.8660254,-0.5,-299.2269,-80.478858)"
id="use3830"
x="0"
y="0"
width="285"
height="285" />
<use
xlink:href="#U"
transform="matrix(-0.5,-0.8660254,0.8660254,-0.5,-79.916716,-299.37753)"
id="use3832"
x="0"
y="0"
width="285"
height="285" />
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
img/os/med_win.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 507 B

View file

@ -1,85 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="16"
height="16"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="dow_sig.svg"
inkscape:export-filename="/media/X/bitcoin.org/current/img/dow_sig.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="15.839192"
inkscape:cx="-5.6017855"
inkscape:cy="-3.2692325"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1680"
inkscape:window-height="1026"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1036.3622)">
<path
sodipodi:type="arc"
style="opacity:0.98999999000000005;fill:#646464;fill-opacity:1;stroke:#646464;stroke-width:0.10000000000000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path4293-3"
sodipodi:cx="12.867188"
sodipodi:cy="10.052734"
sodipodi:rx="0.2109375"
sodipodi:ry="0.20898438"
d="m 13.078126,10.052734 a 0.2109375,0.20898438 0 1 1 -0.421875,0 0.2109375,0.20898438 0 1 1 0.421875,0 z"
transform="matrix(17.461151,0,0,17.461151,-214.65045,866.36739)" />
<path
style="fill:#646464;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
d="m 6.7631633,1042.6281 -5.6490497,6.8524 0,1.8424 1.1158969,0.012 1.3963952,-1.0023 0.4846995,-1.0578 1.6331707,-0.051 0.3153579,-1.5459 1.4239823,-0.3907 3.3436979,-3.2102 z"
id="path4297-3"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccc" />
<path
sodipodi:type="arc"
style="opacity:0.98999999000000005;fill:#646464;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
id="path2986"
sodipodi:cx="22.033953"
sodipodi:cy="8.5770874"
sodipodi:rx="1.1995561"
sodipodi:ry="1.1995561"
d="m 23.233509,8.5770874 a 1.1995561,1.1995561 0 1 1 -2.399112,0 1.1995561,1.1995561 0 1 1 2.399112,0 z"
transform="matrix(0.45824495,0,0,0.45824495,1.04787,1036.8936)" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 969 B

Before After
Before After