added installer download option

- new download card
- added buttons for each release file
- improved general responsiveness
This commit is contained in:
Hendrik authored and Florian Küpper committed 2017-09-01 20:12:58 +02:00
1 parent d026cff3e6
commit f40e3ed4ea
9 files changed
+1136 -1919

No files matched your search

+3 -2
View File
@@ -3,8 +3,9 @@
<div class="container">
<div class="row">
<h1 class="title">{{ page.title }}</h1>
<h2 class="subtitle">{{ page.subtitle }}</h2> {% for feature in site.data.features %}
<div class="col-md-3 flex-box-col">
<h2 class="subtitle">{{ page.subtitle }}</h2>
{% for feature in site.data.features %}
<div class="col-md-3 col-sm-6 flex-box-col">
<div class="card hover-card dark-text">
<img src="{{site.baseurl}}/img/features/{{ feature.image }}" class="img-responsive" alt="">
<div class="hover-overlay blue-bg">
+1 -1
View File
@@ -6,7 +6,7 @@
{{ page.content | markdownify }}
<div class="flex-box-row">
{% for contribute in site.data.contribute %}
<div class="col-md-4 flex-box-col card hover-card dark-text">
<div class="col-md-4 col-sm-5 flex-box-col card hover-card dark-text">
<div class="flex-box-row">
<div class="col-md-3 flex-box-col">
<span class="contribute-icon fa fa-{{ contribute.icon }} flex00a" aria-hidden="true"></span>
+67 -44
View File
@@ -14,7 +14,7 @@
{% 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">
@@ -26,73 +26,96 @@
<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="release-section">
<div class="col-md-4 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 %}
<span class="release-details flex00a">
{% for asset in release_nightly.assets %}
{% assign currentReleaseData = asset.name | split:".zip" | first | split:"_" %}
{% assign currentReleaseFileEnding = asset.name | split:"." | last %}
{% assign currentReleaseTitle = release_nightly.created_at | date: "%b %d, %Y"" %}
{% 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 title=currentReleaseTitle type=currentReleaseType os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %}
{% endfor %}
</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 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 flex-box-col card red-bg">
<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">
{% for asset in release_pre.assets %}
{% assign currentReleaseData = asset.name | remove:".zip" | remove:".exe" | split:"_" %}
{% assign currentReleaseFileEnding = asset.name | split:"." | last %}
{% assign currentReleaseTitle = release_pre.name %}
{% 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 title=currentReleaseTitle type=currentReleaseType os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %}
{% endfor %}
<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 flex-box-col card blue-bg">
<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 currentReleaseTitle = 'Vocaluxe ' | append: release_stable.name %}
{% assign currentReleaseOs = currentReleaseData[2] | downcase %}
{% assign currentReleaseArch = currentReleaseData[3] %}
{% if currentReleaseFileEnding == "zip" %}
{% assign currentReleaseType = "portable" %}
{% assign currentReleaseType = "Portable" %}
{% else if currentReleaseFileEnding == "exe" %}
{% assign currentReleaseType = "installer" %}
{% assign currentReleaseType = "Installer" %}
{% endif %}
{% include downloadButton.html title=currentReleaseTitle type=currentReleaseType os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %}
{% 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 %}
+2 -2
View File
@@ -5,9 +5,9 @@
<span class="fa fa-windows btnDownloadIcon" aria-hidden="true"></span>
{% endif %}
{% if include.arch == "x86" %}
<span>{{include.title}} (x86, {{include.type}})</span>
<span>x86 {{include.type}}</span>
{% else %}
<span>{{include.title}} (x64, {{include.type}})</span>
<span>x64 {{include.type}}</span>
{% endif %}
</a>
</br>
+1 -1
View File
@@ -6,7 +6,7 @@
<p>{{ page.content | markdownify }}</p>
<div class="flex-box-row">
{% for help in site.data.help %}
<div class="col-md-4 flex-box-col card hover-card dark-text">
<div class="col-md-4 col-sm-5 flex-box-col card hover-card dark-text">
<div class="flex-box-row">
<div class="col-md-3 flex-box-col">
<span class="help-icon fa fa-{{ help.icon }} flex00a" aria-hidden="true"></span>
+1 -1
View File
@@ -6,7 +6,7 @@
<p>{{ page.content | markdownify }}</p>
<div class="flex-box-row">
{% for song in site.data.songs %}
<div class="col-md-6 flex-box-col card hover-card dark-text">
<div class="col-md-6 col-sm-5 flex-box-col card hover-card dark-text">
<div class="flex-box-row">
<div class="col-md-3 flex-box-col">
<span class="song-icon fa fa-{{ song.icon }} flex00a" aria-hidden="true"></span>
+959 -1864
View File
File diff suppressed because it is too large. Load diff
+64 -3
View File
@@ -241,13 +241,17 @@ a:hover {
color: #eee;
}
.navbar-default .navbar-toggle {
border: none;
}
.navbar-default .navbar-toggle .icon-bar {
background: #fff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background: transparent;
background: rgba(0, 0, 0, 0.2);
}
.affix.navbar-default {
@@ -410,6 +414,13 @@ a:hover {
text-align: left;
}
@media (max-width: 767px) {
#news .col-md-12 {
padding: 0;
margin-left: 0;
}
}
.news-card-text {
padding: 10px;
color: white;
@@ -442,30 +453,67 @@ a:hover {
#download .card .release-date {
font-size: 11pt;
margin-top: 10px;
margin-top: 15px;
margin-bottom: 0px;
}
#download .card-overlay {
z-index: 100;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
border-radius: 10px;
}
.card-overlay .close-icon {
cursor: pointer;
font-size: 20pt;
margin-top: 8px;
}
.card-overlay h3 {
margin: 10px 0;
}
.dark-bg .release-date a {
color: #428bca;
}
.dark-bg .card-overlay {
background-color: #233240;
}
.red-bg .release-date a {
color: #2C3E50;
}
.red-bg .card-overlay {
background-color: #b93d30;
}
.blue-bg .release-date a {
color: #E74C3C;
}
.blue-bg .card-overlay {
background-color: #356fa2;
}
.release-details {
text-align: center;
margin-top: 10px;
}
.btnDownload {
margin: 5px;
}
.release-details .btnDownload {
min-width: 50%;
}
.btnDownloadIcon {
padding-right: 5px;
}
@@ -487,6 +535,14 @@ a:hover {
}
}
@media (max-width: 767px) {
#download .card {
margin-left: 15px !important;
margin-right: 15px !important;
width: calc(100% - 30px);
}
}
.flex-box-col {
display: flex;
flex-direction: column;
@@ -720,7 +776,6 @@ a:hover {
.footer {
background-color: #243342;
color: white;
/*border-top: 1px solid rgba(255,255,255,0.1);*/
padding-top: 15px;
padding-bottom: 5px;
}
@@ -759,3 +814,9 @@ a:hover {
/**************/
/**Animations**/
.animated {
animation-duration: 0.7s !important;
}
+38 -1
View File
@@ -2,6 +2,43 @@
//Use .swipebox class
(function($) {
$('.swipebox').swipebox();
$(".swipebox").swipebox();
})(jQuery);
//Download Cards
function showCard(card) {
card.addClass("animated flipInY").removeClass("flipOutY hidden");
}
function hideCard(card) {
card.addClass("flipOutY").removeClass("flipInY");
}
// Nightlies
$(".dark-bg .btnDownload").click(function() {
showCard($(".dark-bg .card-overlay"));
});
$(".dark-bg .card-overlay .close-icon").click(function () {
hideCard($(".dark-bg .card-overlay"));
});
// Pre Release
$(".red-bg .btnDownload").click(function() {
showCard($(".red-bg .card-overlay"));
});
$(".red-bg .card-overlay .close-icon").click(function () {
hideCard($(".red-bg .card-overlay"));
});
// Stable
$(".blue-bg .btnDownload").click(function() {
showCard($(".blue-bg .card-overlay"));
});
$(".blue-bg .card-overlay .close-icon").click(function () {
hideCard($(".blue-bg .card-overlay"));
});