New download card layout (#308)

* Changed download card layout
This commit is contained in:
Hendrik authored and Florian Küpper committed 2017-09-03 00:55:21 +02:00
1 parent 39949da620
commit 7d6150dd60
4 files changed
+210 -130

No files matched your search

+167 -115
View File
@@ -4,126 +4,178 @@
{% assign release_stable = nil %}
{% for release in site.github.releases %}
{% if release.tag_name == "Nightly" %}
{% assign release_nightly = release %}
{% elsif release.prerelease == true and (release_pre == nil or release.created_at > release_pre.created_at) %}
{% assign release_pre = release %}
{% elsif release.prerelease == false and (release_stable == nil or release.created_at > release_stable.created_at) %}
{% assign release_stable = release %}
{% endif %}
{% if release.tag_name == "Nightly" %}
{% assign release_nightly = release %}
{% elsif release.prerelease == true and (release_pre == nil or release.created_at > release_pre.created_at) %}
{% assign release_pre = release %}
{% elsif release.prerelease == false and (release_stable == nil or release.created_at > release_stable.created_at) %}
{% assign release_stable = release %}
{% endif %}
{% endfor %}
{% if release_pre != nil and release_stable != nil and release_stable.created_at > release_pre.created_at %}
{% assign release_pre = nil %}
{% assign release_pre = nil %}
{% endif %}
<section id="{{ page.section-type }}" class="content-section">
<div class="container">
<div class="row">
<h1 class="title">{{ page.title }}</h1>
<p>
We provide portable versions of Vocaluxe for every release. If you want to try our stable release, you could also use our installer. If you're on Linux, you need to <a href="https://github.com/Vocaluxe/Vocaluxe/blob/develop/HowToBuildLinux.md">compile Vocaluxe yourself</a> (for advanced users, no official support).
<br />
If you're looking for some older versions, check out our releases on <a href="https://github.com/Vocaluxe/Vocaluxe/releases">GitHub</a> and <a href="https://sourceforge.net/projects/vocaluxe/files/?source=directory">Sourceforge</a>.
</p>
<div class="flex-box-row release-section">
<div class="col-md-4 col-sm-5 flex-box-col card dark-bg">
<h2 class="flex00a">Nightly</h2>
<p class="flex11a">A version with all the newest development changes. Likely to contain bugs, so use with caution.</p>
{% if release_nightly != nil %}
{% assign currentReleaseTitle = release_nightly.created_at | date: "%b %d, %Y" %}
<div class="hidden card-overlay">
<span class="fa fa-times close-icon" aria-hidden="true"></span>
<h3>{{currentReleaseTitle}}</h3>
{% for asset in release_nightly.assets %}
{% assign currentReleaseData = asset.name | split:".zip" | first | split:"_" %}
{% assign currentReleaseFileEnding = asset.name | split:"." | last %}
{% assign currentReleaseOs = currentReleaseData[2] %}
{% assign currentReleaseArch = currentReleaseData[3] %}
{% if currentReleaseFileEnding == "zip" %}
{% assign currentReleaseType = "Portable" %}
{% else if currentReleaseFileEnding == "exe" %}
{% assign currentReleaseType = "Installer" %}
{% endif %}
{% include downloadButton.html type=currentReleaseType os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %}
{% endfor %}
</div>
<span class="release-details flex00a">
<a class="btn btn-primary btn-lg btnDownload">
<span>{{currentReleaseTitle}}</span>
</a>
</span>
<p class="release-date">{{ release_nightly.created_at | date: "%Y-%m-%d" }} | <a href="{{ release_nightly.html_url }}">GitHub</a></p>
{% else %}
<p class="flex11100 no-release-text ">There isn't any nightly release yet.</p>
{% endif %}
</div>
<div class="col-md-4 col-sm-5 flex-box-col card red-bg">
<h2 class="flex00a">Pre Release</h2>
<p class="flex11a">Should be almost stable, but you might experience some bugs here.</p>
{% if release_pre != nil %}
{% assign currentReleaseTitle = release_pre.name %}
<div class="hidden card-overlay">
<span class="fa fa-times close-icon" aria-hidden="true"></span>
<h3>{{currentReleaseTitle}}</h3>
{% for asset in release_pre.assets %}
{% assign currentReleaseData = asset.name | remove:".zip" | remove:".exe" | split:"_" %}
{% assign currentReleaseFileEnding = asset.name | split:"." | last %}
{% assign currentReleaseOs = currentReleaseData[2] %}
{% assign currentReleaseArch = currentReleaseData[3] %}
{% if currentReleaseFileEnding == "zip" %}
{% assign currentReleaseType = "Portable" %}
{% else if currentReleaseFileEnding == "exe" %}
{% assign currentReleaseType = "Installer" %}
{% endif %}
{% include downloadButton.html type=currentReleaseType os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %}
{% endfor %}
</div>
<span class="release-details flex00a">
<a class="btn btn-primary btn-lg btnDownload">
<span>{{currentReleaseTitle}}</span>
</a>
</span>
<p class="release-date">{{ release_pre.created_at | date: "%Y-%m-%d" }} | <a href="{{ release_pre.html_url }}">GitHub</a></p>
{% else %}
<p class="flex11100 no-release-text">There isn't any pre release yet.</p>
{% endif %}
</div>
<div class="col-md-4 col-sm-5 flex-box-col card blue-bg">
<h2 class="flex00a">Stable Release</h2>
<p class="flex11a">The latest release.</p>
{% if release_stable != nil %}
{% assign currentReleaseTitle = 'Vocaluxe ' | append: release_stable.name %}
<span class="release-details flex00a">
<div class="hidden card-overlay">
<span class="fa fa-times close-icon" aria-hidden="true"></span>
<h3>{{currentReleaseTitle}}</h3>
{% for asset in release_stable.assets %}
{% assign currentReleaseData = asset.name | remove:".zip" | remove:".exe" | split:"_" %}
{% assign currentReleaseFileEnding = asset.name | split:"." | last %}
{% assign currentReleaseOs = currentReleaseData[2] | downcase %}
{% assign currentReleaseArch = currentReleaseData[3] %}
{% if currentReleaseFileEnding == "zip" %}
{% assign currentReleaseType = "Portable" %}
{% else if currentReleaseFileEnding == "exe" %}
{% assign currentReleaseType = "Installer" %}
{% endif %}
{% include downloadButton.html type=currentReleaseType os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %}
{% endfor %}
</div>
</span>
<span class="release-details flex00a">
<a class="btn btn-primary btn-lg btnDownload">
<span>{{currentReleaseTitle}}</span>
</a>
</span>
<p class="release-date">{{ release_stable.created_at | date: "%Y-%m-%d" }} | <a href="{{ release_stable.html_url }}">GitHub</a></p>
{% else %}
<p class="flex11100 no-release-text">There isn't any stable release yet.</p>
{% endif %}
</div>
</div>
<section id="{{ page.section-type }}" class="content-section">
<div class="container">
<div class="row">
<h1 class="title">{{ page.title }}</h1>
<p>
We provide portable versions of Vocaluxe for every release. If you want to try our stable release, you could also use our installer. If you're on Linux, you need to <a href="https://github.com/Vocaluxe/Vocaluxe/blob/develop/HowToBuildLinux.md">compile Vocaluxe yourself</a> (for advanced users, no official support).
<br />
If you're looking for some older versions, check out our releases on <a href="https://github.com/Vocaluxe/Vocaluxe/releases">GitHub</a> and <a href="https://sourceforge.net/projects/vocaluxe/files/?source=directory">Sourceforge</a>.
</p>
<div class="flex-box-row release-section">
<div class="col-md-4 col-sm-5 flex-box-col card dark-bg">
<h2 class="flex00a">Nightly</h2>
<p class="flex11a">A version with all the newest development changes. Likely to contain bugs, so use with caution.</p>
{% if release_nightly != nil %}
{% assign currentReleaseTitle = release_nightly.created_at | date: "%b %d, %Y" %}
<div class="hidden card-overlay">
<span class="fa fa-times close-icon" aria-hidden="true"></span>
<h3>{{currentReleaseTitle}}</h3>
{% for asset in release_nightly.assets %}
{% assign currentReleaseData = asset.name | remove:".zip" | remove:".exe" | split:"_" %}
{% assign currentReleaseFileEnding = asset.name | split:"." | last %}
{% assign currentReleaseOs = currentReleaseData[2] %}
{% assign currentReleaseArch = currentReleaseData[3] %}
{% if currentReleaseOs == "Windows" and currentReleaseFileEnding == "zip" and currentReleaseArch == "x86" %}
{% assign winZip86 = asset.browser_download_url %}
{% elsif currentReleaseOs == "Windows" and currentReleaseFileEnding == "zip" and currentReleaseArch == "x64" %}
{% assign winZip64 = asset.browser_download_url %}
{% elsif currentReleaseOs == "Windows" and currentReleaseFileEnding == "exe" and currentReleaseArch == "x86" %}
{% assign winExe86 = asset.browser_download_url %}
{% elsif currentReleaseOs == "Windows" and currentReleaseFileEnding == "exe" and currentReleaseArch == "x64" %}
{% assign winExe64 = asset.browser_download_url %}
{% elsif currentReleaseOs == "Linux" and currentReleaseArch == "x86" %}
{% assign linux86 = asset.browser_download_url %}
{% elsif currentReleaseOs == "Linux" and currentReleaseArch == "x64" %}
{% assign linux64 = asset.browser_download_url %}
{% endif %}
{% endfor %}
{% if winZip86 or winZip64 %}
{% include downloadRow.html x86=winZip86 x64=winZip64 os="Windows" type="Portable" %}
{% endif %}
{% if winExe86 or winExe64 %}
{% include downloadRow.html x86=winExe86 x64=winExe64 os="Windows" type="Installer" %}
{% endif %}
{% if linux86 or linux64 %}
{% include downloadRow.html x86=linux86 x64=linux64 os="Linux" type="Linux" %}
{% endif %}
</div>
<span class="release-details flex00a">
<a class="btn btn-primary btn-lg btnDownload">
<span>{{currentReleaseTitle}}</span>
</a>
</span>
<p class="release-date">{{ release_nightly.created_at | date: "%Y-%m-%d" }} | <a href="{{ release_nightly.html_url }}">GitHub</a></p>
{% else %}
<p class="flex11100 no-release-text ">There isn't any nightly release yet.</p>
{% endif %}
</div>
</section>
<div class="col-md-4 col-sm-5 flex-box-col card red-bg">
<h2 class="flex00a">Pre Release</h2>
<p class="flex11a">Should be almost stable, but you might experience some bugs here.</p>
{% if release_pre != nil %}
{% assign currentReleaseTitle = release_pre.name %}
<div class="hidden card-overlay">
<span class="fa fa-times close-icon" aria-hidden="true"></span>
<h3>{{currentReleaseTitle}}</h3>
{% for asset in release_pre.assets %}
{% assign currentReleaseData = asset.name | remove:".zip" | remove:".exe" | split:"_" %}
{% assign currentReleaseFileEnding = asset.name | split:"." | last %}
{% assign currentReleaseOs = currentReleaseData[2] %}
{% assign currentReleaseArch = currentReleaseData[3] %}
{% if currentReleaseOs == "Windows" and currentReleaseFileEnding == "zip" and currentReleaseArch == "x86" %}
{% assign winZip86 = asset.browser_download_url %}
{% elsif currentReleaseOs == "Windows" and currentReleaseFileEnding == "zip" and currentReleaseArch == "x64" %}
{% assign winZip64 = asset.browser_download_url %}
{% elsif currentReleaseOs == "Windows" and currentReleaseFileEnding == "exe" and currentReleaseArch == "x86" %}
{% assign winExe86 = asset.browser_download_url %}
{% elsif currentReleaseOs == "Windows" and currentReleaseFileEnding == "exe" and currentReleaseArch == "x64" %}
{% assign winExe64 = asset.browser_download_url %}
{% elsif currentReleaseOs == "Linux" and currentReleaseArch == "x86" %}
{% assign linux86 = asset.browser_download_url %}
{% elsif currentReleaseOs == "Linux" and currentReleaseArch == "x64" %}
{% assign linux64 = asset.browser_download_url %}
{% endif %}
{% endfor %}
{% if winZip86 or winZip64 %}
{% include downloadRow.html x86=winZip86 x64=winZip64 os="Windows" type="Portable" %}
{% endif %}
{% if winExe86 or winExe64 %}
{% include downloadRow.html x86=winExe86 x64=winExe64 os="Windows" type="Installer" %}
{% endif %}
{% if linux86 or linux64 %}
{% include downloadRow.html x86=linux86 x64=linux64 os="Linux" type="Linux" %}
{% endif %}
</div>
<span class="release-details flex00a">
<a class="btn btn-primary btn-lg btnDownload">
<span>{{currentReleaseTitle}}</span>
</a>
</span>
<p class="release-date">{{ release_pre.created_at | date: "%Y-%m-%d" }} | <a href="{{ release_pre.html_url }}">GitHub</a></p>
{% else %}
<p class="flex11100 no-release-text">There isn't any pre release yet.</p>
{% endif %}
</div>
<div class="col-md-4 col-sm-5 flex-box-col card blue-bg">
<h2 class="flex00a">Stable Release</h2>
<p class="flex11a">The latest release.</p>
{% if release_stable != nil %}
{% assign currentReleaseTitle = 'Vocaluxe ' | append: release_stable.name %}
<span class="release-details flex00a">
<div class="hidden card-overlay">
<span class="fa fa-times close-icon" aria-hidden="true"></span>
<h3>{{currentReleaseTitle}}</h3>
{% for asset in release_stable.assets %}
{% assign currentReleaseData = asset.name | remove:".zip" | remove:".exe" | split:"_" %}
{% assign currentReleaseFileEnding = asset.name | split:"." | last %}
{% assign currentReleaseOs = currentReleaseData[2] %}
{% assign currentReleaseArch = currentReleaseData[3] %}
{% if currentReleaseOs == "Windows" and currentReleaseFileEnding == "zip" and currentReleaseArch == "x86" %}
{% assign winZip86 = asset.browser_download_url %}
{% elsif currentReleaseOs == "Windows" and currentReleaseFileEnding == "zip" and currentReleaseArch == "x64" %}
{% assign winZip64 = asset.browser_download_url %}
{% elsif currentReleaseOs == "Windows" and currentReleaseFileEnding == "exe" and currentReleaseArch == "x86" %}
{% assign winExe86 = asset.browser_download_url %}
{% elsif currentReleaseOs == "Windows" and currentReleaseFileEnding == "exe" and currentReleaseArch == "x64" %}
{% assign winExe64 = asset.browser_download_url %}
{% elsif currentReleaseOs == "Linux" and currentReleaseArch == "x86" %}
{% assign linux86 = asset.browser_download_url %}
{% elsif currentReleaseOs == "Linux" and currentReleaseArch == "x64" %}
{% assign linux64 = asset.browser_download_url %}
{% endif %}
{% endfor %}
{% if winZip86 or winZip64 %}
{% include downloadRow.html x86=winZip86 x64=winZip64 os="Windows" type="Portable" %}
{% endif %}
{% if winExe86 or winExe64 %}
{% include downloadRow.html x86=winExe86 x64=winExe64 os="Windows" type="Installer" %}
{% endif %}
{% if linux86 or linux64 %}
{% include downloadRow.html x86=linux86 x64=linux64 os="Linux" type="Linux" %}
{% endif %}
</div>
</span>
<span class="release-details flex00a">
<a class="btn btn-primary btn-lg btnDownload">
<span>{{currentReleaseTitle}}</span>
</a>
</span>
<p class="release-date">{{ release_stable.created_at | date: "%Y-%m-%d" }} | <a href="{{ release_stable.html_url }}">GitHub</a></p>
{% else %}
<p class="flex11100 no-release-text">There isn't any stable release yet.</p>
{% endif %}
</div>
</div>
</div>
</div>
</section>
<!-- Download Section End -->
-13
View File
@@ -1,13 +0,0 @@
<a href={{include.url}} class="btn btn-primary btn-lg btnDownload">
{% if include.os == "linux" %}
<span class="fa fa-linux btnDownloadIcon" aria-hidden="true"></span>
{% else %}
<span class="fa fa-windows btnDownloadIcon" aria-hidden="true"></span>
{% endif %}
{% if include.arch == "x86" %}
<span>x86 {{include.type}}</span>
{% else %}
<span>x64 {{include.type}}</span>
{% endif %}
</a>
</br>
+21
View File
@@ -0,0 +1,21 @@
<p class="download-table-row">
<span>
{% if include.os == "Linux" %}
<span class="fa fa-linux btnDownloadIcon" aria-hidden="true"></span>
{% else %}
<span class="fa fa-windows btnDownloadIcon" aria-hidden="true"></span>
{% endif %}
<span>{{include.type}}</span>
</span>
<span class="right">
{% if include.x86 != nil %}
<a href={{include.x86}}>x86</a>
{% if include.x64 != nil %}
<span> | </span>
{% endif %}
{% endif %}
{% if include.x64 != nil %}
<a href={{include.x64}}>x64</a>
{% endif %}
</span>
</p>
+22 -2
View File
@@ -474,7 +474,27 @@ a:hover {
}
.card-overlay h3 {
margin: 10px 0;
margin-top: 10px;
margin-bottom: 30px;
}
.card-overlay .download-table-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin: 15px auto;
max-width: 200px;
text-align: center;
}
.card-overlay .download-table-row a {
text-decoration: underline;
color: white;
}
.card-overlay .download-table-row a:hover {
color: #428bca;
}
.dark-bg .release-date a {
@@ -494,7 +514,7 @@ a:hover {
}
.blue-bg .release-date a {
color: #E74C3C;
color: #2C3E50;
}
.blue-bg .card-overlay {