Commit 25fd1dbd authored by Carl Schwan's avatar Carl Schwan 🚴

Improve release design of application page

parent 05f57f1f
Pipeline #26401 passed with stage
in 4 minutes and 1 second
......@@ -18,12 +18,14 @@ class Release
private $timestamp = null;
private $artifacts = [];
private $url;
private $description;
public function __construct(string $version, int $type, string $timestamp, string $url = null, array $artifacts = [])
public function __construct(string $version, int $type, string $timestamp, ?array $description, ?string $url, array $artifacts)
{
$this->version = $version;
$this->type = $type;
$this->timestamp = $timestamp;
$this->description = $description;
$this->url = $url;
$this->artifacts = $artifacts;
}
......@@ -32,10 +34,11 @@ class Release
{
$url = isset($release['url']) && isset($release['url']['details']) ? $release['url']['details'] : null;
$artifacts = isset($release['artifacts']) ? $release['artifacts'] : [];
$description = isset($release['description']) ? $release['description'] : null;
if ($release['type'] === 'stable') {
return new Release($release['version'], ReleaseType::Stable, $release['unix-timestamp'],$url, $artifacts);
return new Release($release['version'], ReleaseType::Stable, $release['unix-timestamp'], $description, $url, $artifacts);
} else if ($release['type'] === 'development') {
return new Release($release['version'], ReleaseType::Development, $release['unix-timestamp'], $url, $artifacts);
return new Release($release['version'], ReleaseType::Development, $release['unix-timestamp'], $description, $url, $artifacts);
} else {
return null;
}
......@@ -80,4 +83,12 @@ class Release
{
return $this->url;
}
/**
* @return array|null
*/
public function getDescription(): ?array
{
return $this->description;
}
}
......@@ -102,12 +102,73 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<div>
{{ application.description | l10n(locale) | raw }}
</div>
<div class="row">
<div class="col-12 col-sm-4 d-flex flex-column mb-3">
<a class="align-self-center" href="appstream://{{ application.appStreamId }}" style="height: 100px">
<img src="{{ asset('assets/plasmadiscover.svg') }}" alt="logo discover" class="img-fluid" width="100">
</a>
<h2 class="align-self-center">Linux</h2>
<a class="noblefir align-self-center mb-3" href="appstream://{{ application.id }}.desktop">
<i class="icon icon_cloud-download"></i>
<span id="install-msg">{% trans %}Install on Linux{% endtrans %}</span>
</a>
<small>{% trans %}This button only works with <a
href="/a pplications/system/org.kde.discover">Discover</a> and other
AppStrea m application stores. You can also use your distribution's package manager.{% endtrans %}
</small>
</div>
{% if application.windowsStoreLink %}
<div class="col-12 col-sm-4 d-flex flex-column mb-3">
<a class="d-flex align-self-center" href="{{ application.windowsStoreLink }}" style="height: 100px">
<img src="{{ asset('assets/get-it-from-ms.png') }}" alt="{% trans %}Get it from Microsoft{% endtrans %}"
class="img-fluid align-self-center" width="150">
</a>
<h2 class="align-self-center">Microsoft Store</h2>
<a class="noblefir align-self-center mb-3" href="{{ application.windowsStoreLink }}">
<i class="icon icon_cloud-download"></i>
<span id="install-msg">{% trans %}Install on Windows{% endtrans %}</span>
</a>
</div>
{% endif %}
{% if application.fDroidLink %}
<div class="col-12 col-sm-4 d-flex flex-column mb-3">
<a class="d-flex align-self-center" href="{{ application.fDroidLink }}" style="height: 100px">
<img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
alt="{% trans %}Get it from F-Droid{% endtrans %}"
class="img-fluid align-self-center" style="max-height: 80px">
</a>
<h2 class="align-self-center">F-Droid</h2>
<a class="noblefir align-self-center mb-3" href="{{ application.fDroidLink }}">
<i class="icon icon_cloud-download"></i>
<span id="install-msg">{% trans %}Get it on F-Droid{% endtrans %}</span>
</a>
</div>
{% endif %}
{% if application.fDroidLink %}
<div class="col-12 col-sm-4 d-flex flex-column mb-3">
<a class="d-flex align-self-center" href="{{ application.googlePlayLink }}" style="height: 100px">
<img src="{{ asset('assets/get-it-from-google-play.png') }}" alt="Get it from Google Play"
class="img-fluid align-self-center" style="max-height: 80px">
</a>
<h2 class="align-self-center">Google Play</h2>
<a class="noblefir align-self-center mb-3" href="{{ application.googlePlayLink }}">
<i class="icon icon_cloud-download"></i>
<span id="install-msg">{% trans %}Get it on Google Play{% endtrans %}</span>
</a>
<small>Google Play and the Google Play logo are trademarks of Google LLC.</small>
</div>
{% endif %}
</div>
{% if application.releases | length > 0 %}
<h2>{% trans %}Releases{% endtrans %}</h2>
<h2 class="mb-0">{% trans %}Releases{% endtrans %}</h2>
{% endif %}
{% for release in application.releases %}
<div class="release {% if not loop.first %}d-none{% endif %}">
<h3>{{ release.version }} <small>{{ release.timestamp | format_date('long', locale=locale) }}</small></h3>
<div class="release mb-5 {% if not loop.first %}d-none{% endif %}">
<h3 class="mt-1">{{ release.version }} <small class="text-muted">{{ release.timestamp | format_date('long', locale=locale) }}</small></h3>
{% if release.description %}
{{ release.description | l10n(locale) | raw }}
{% endif %}
{% if release.url %}
<div><a class="learn-more" href="{{ release.url}}">{% trans %}Learn more{% endtrans %}</a></div>
......@@ -122,13 +183,13 @@ SPDX-License-Identifier: AGPL-3.0-or-later
{% if artifact.type == "binary" %}
<h4 class="mb-0">
{% if artifact.platform == "x86_64-appimage" or artifact.platform == "x86_64-linux-gnu" %}
{% trans %}AppImage{% endtrans %} - <small>x86_64 {{ size }}</small>
{% trans %}AppImage{% endtrans %} - <small class="text-muted">x86_64 {{ size }}</small>
{% elseif artifact.platform == "macOS" %}
{% trans %}macOS{% endtrans %} - <small>x86_64 {{ size }}</small>
{% trans %}macOS{% endtrans %} - <small class="text-muted">x86_64 {{ size }}</small>
{% elseif artifact.platform == "win64" %}
{% trans %}Windows{% endtrans %} - <small>win64 {{ size }}</small>
{% trans %}Windows{% endtrans %} - <small class="text-muted">win64 {{ size }}</small>
{% elseif artifact.platform == "win32" %}
{% trans %}Windows{% endtrans %} - <small>win32 {{ size }}</small>
{% trans %}Windows{% endtrans %} - <small class="text-muted">win32 {{ size }}</small>
{% endif %}
</h4>
<div><a href="{{ artifact.locations[0] }}">{{ artifact.locations[0] }}</a></div>
......@@ -252,63 +313,6 @@ SPDX-License-Identifier: AGPL-3.0-or-later
</a>
</div>
</aside>
<div class="row">
<div class="col-12 col-sm-4 d-flex flex-column mb-3">
<a class="align-self-center" href="appstream://{{ application.appStreamId }}" style="height: 100px">
<img src="{{ asset('assets/plasmadiscover.svg') }}" alt="logo discover" class="img-fluid" width="100">
</a>
<h2 class="align-self-center">Linux</h2>
<a class="noblefir align-self-center mb-3" href="appstream://{{ application.id }}.desktop">
<i class="icon icon_cloud-download"></i>
<span id="install-msg">{% trans %}Install on Linux{% endtrans %}</span>
</a>
<small>{% trans %}This button only works with <a
href="/applications/system/org.kde.discover">Discover</a> and other
AppStream application stores. You can also use your distribution's package manager.{% endtrans %}
</small>
</div>
{% if application.windowsStoreLink %}
<div class="col-12 col-sm-4 d-flex flex-column mb-3">
<a class="d-flex align-self-center" href="{{ application.windowsStoreLink }}" style="height: 100px">
<img src="{{ asset('assets/get-it-from-ms.png') }}" alt="{% trans %}Get it from Microsoft{% endtrans %}"
class="img-fluid align-self-center" width="150">
</a>
<h2 class="align-self-center">Microsoft Store</h2>
<a class="noblefir align-self-center mb-3" href="{{ application.windowsStoreLink }}">
<i class="icon icon_cloud-download"></i>
<span id="install-msg">{% trans %}Install on Windows{% endtrans %}</span>
</a>
</div>
{% endif %}
{% if application.fDroidLink %}
<div class="col-12 col-sm-4 d-flex flex-column mb-3">
<a class="d-flex align-self-center" href="{{ application.fDroidLink }}" style="height: 100px">
<img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
alt="{% trans %}Get it from F-Droid{% endtrans %}"
class="img-fluid align-self-center" style="max-height: 80px">
</a>
<h2 class="align-self-center">F-Droid</h2>
<a class="noblefir align-self-center mb-3" href="{{ application.fDroidLink }}">
<i class="icon icon_cloud-download"></i>
<span id="install-msg">{% trans %}Get it on F-Droid{% endtrans %}</span>
</a>
</div>
{% endif %}
{% if application.fDroidLink %}
<div class="col-12 col-sm-4 d-flex flex-column mb-3">
<a class="d-flex align-self-center" href="{{ application.googlePlayLink }}" style="height: 100px">
<img src="{{ asset('assets/get-it-from-google-play.png') }}" alt="Get it from Google Play"
class="img-fluid align-self-center" style="max-height: 80px">
</a>
<h2 class="align-self-center">Google Play</h2>
<a class="noblefir align-self-center mb-3" href="{{ application.googlePlayLink }}">
<i class="icon icon_cloud-download"></i>
<span id="install-msg">{% trans %}Get it on Google Play{% endtrans %}</span>
</a>
<small>Google Play and the Google Play logo are trademarks of Google LLC.</small>
</div>
{% endif %}
</div>
</div>
</div>
</main>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment