application.html.twig 15.5 KB
Newer Older
1 2 3 4 5 6 7 8 9 10
{#
SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>

SPDX-License-Identifier: AGPL-3.0-or-later
#}

{% extends "base.html.twig" %}

{% set name = application.name | l10n(locale) %}

Carl Schwan's avatar
Carl Schwan committed
11 12 13
{% block title %}{{ name }}{% endblock %}
{% block description %}{{ application.summary | l10n(locale) }}{% endblock %}
{% block image %}{% if application.screenshots | length > 0 %}{{ application.screenshots[0].sourceImage }}{% else %}https://kde.org/products/apps.png{% endif %}{% endblock %}
Carl Schwan's avatar
Carl Schwan committed
14
{% block canonical %}https://kde.org{{ path('app_main_application_intl', {'_locale': locale, 'application': application.simplifiedId}) }}{% endblock %}
Carl Schwan's avatar
Carl Schwan committed
15
{% block donation %}#{{ name }}{% endblock %}
Carl Schwan's avatar
Carl Schwan committed
16 17

{% block hreflang %}
Carl Schwan's avatar
Carl Schwan committed
18
  <link rel="alternate" href="https://kde.org{{ path('app_main_application_intl', {'_locale': 'en', 'application' : application.simplifiedId }) }}" hreflang="en" />
Carl Schwan's avatar
Carl Schwan committed
19
  {% for translation in translations %}
Carl Schwan's avatar
Carl Schwan committed
20
    <link rel="alternate" href="https://kde.org{{ path('app_main_application_intl', {'_locale': translation, 'application' : application.simplifiedId }) }}" hreflang="{{ translation }}" />
Carl Schwan's avatar
Carl Schwan committed
21 22
  {% endfor %}
{% endblock %}
Carl Schwan's avatar
Carl Schwan committed
23

24 25 26 27 28 29 30 31 32 33
{% block body %}
  <main itemscope itemtype="http://schema.org/SoftwareApplication">
    <meta itemprop="operatingSystem" content="GNU/Linux"/>
    <meta itemprop="name" content="{{ name }}"/>
    <meta itemprop="isFamilyFriendly" content="true"/>
    <meta itemprop="applicationCategory" content="{{ application.primaryCategory }}"/>

    <div class="application-header pt-2 pb-2">
      <div class="container d-flex">
        <img src="{{ asset('icons/' ~ application.icon) }}" alt="{% trans %}%name% Icon{% endtrans %}"
34
             width="64" height="64" class="mr-2" aria-hidden="true" />
35 36 37 38 39
        <div>
          <h1 style="font-size: 1.5rem">
            <a href="{{ path('app_main_index', {'_locale': locale}) }}">{% trans %}KDE's Applications{% endtrans %}</a>
            {{ name }}
          </h1>
Carl Schwan's avatar
Carl Schwan committed
40
          <a href="{{ path('app_main_category_intl', {'_locale': locale, 'category': application.primaryCategory | lower }) }}">
41
            {{ application.primaryCategory | trans }}
42 43 44 45 46 47 48 49 50 51 52
          </a>
        </div>
        <a class="noblefir ml-auto align-self-center"
           id="install-button"
           href="appstream://{{ application.appStreamId }}"
           data-windows="{{ application.windowsStoreLink }}">
          <i class="icon icon_cloud-download" style="font-size: 16px"></i>
          <span id="install-msg">{% trans %}Install on Linux{% endtrans %}</span>
        </a>
      </div>
    </div>
53 54 55 56 57 58 59 60 61

    {% if application.primaryCategory == 'Unmaintained' %}
    <div class="unmaintained-header pt-2 pb-2">
      <div class="container d-flex">
        <p>{% trans %}This app is unmaintained and no longer released by the KDE community.{% endtrans %}</p>
      </div>
    </div>
    {% endif %}

62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
    <style>
      .swiper-container, .swiper-slide img, .screenshot img {
        height: 50vw;
        min-height: 300px;
        max-height: 500px;
      }

      .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
      }

      .swiper-slide {
        flex-shrink: initial;
      }

    </style>

    <div class="container" style="overflow: hidden;">
      {% if application.screenshots | length > 1 %}
82
      <section class="swiper-container" class="w-100" aria-label="{% trans %}Screenshots{% endtrans %} role="list">
83
          <!-- Additional required wrapper -->
84
          <div class="swiper-wrapper d-flex my-3" role="listitem">
85 86 87 88 89 90 91 92 93 94 95 96
            {% for screenshot in application.screenshots %}
              <div class="swiper-slide">
                <img src="{{ screenshot.sourceImage }}"
                     alt="{{ screenshot.caption
                     ? (screenshot.caption | l10n(locale))
                     : ("Screeenshot of %name%" | trans({'%name%': name})) }}">
              </div>
            {% endfor %}
          </div>
          <div class="swiper-pagination"></div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
97
        </section>
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
      {% elseif application.screenshots | length == 1 %}
        {% with { screenshot: application.screenshots[0] } %}
          <div class="text-center screenshot my-3">
            <img src="{{ screenshot.sourceImage }}"
                 alt="{{ screenshot.caption
                 ? (screenshot.caption | l10n(locale))
                 : ("Screeenshot of %name%" | trans) }}">
          </div>
        {% endwith %}
      {% endif %}
      <div class="row">
        <section class="description col-12 col-md-8 col-lg-9">
          <div>
            {{ application.description | l10n(locale) | raw }}
          </div>
113 114
          <div class="row">
            <div class="col-12 col-sm-4  d-flex flex-column mb-3">
115
              <a class="align-self-center" href="appstream://{{ application.appStreamId }}" style="height: 100px" aria-hidden="true">
116 117 118 119 120 121 122 123
                <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
Carl Schwan's avatar
Carl Schwan committed
124 125
href="/applications/system/org.kde.discover">Discover</a> and other
AppStream application stores. You can also use your distribution's package manager.{% endtrans %}
126 127 128 129
              </small>
            </div>
            {% if application.windowsStoreLink %}
              <div class="col-12 col-sm-4  d-flex flex-column mb-3">
130
                <a class="d-flex align-self-center" href="{{ application.windowsStoreLink }}" style="height: 100px" aria-hidden="true">
131 132 133 134 135 136 137 138 139 140 141 142
                  <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">
143
                <a class="d-flex align-self-center" href="{{ application.fDroidLink }}" style="height: 100px" aria-hidden="true">
144 145 146 147 148 149 150 151 152 153 154
                  <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 %}
Carl Schwan's avatar
Carl Schwan committed
155
            {% if application.googlePlayLink %}
156
              <div class="col-12 col-sm-4  d-flex flex-column mb-3">
157
                <a class="d-flex align-self-center" href="{{ application.googlePlayLink }}" style="height: 100px" aria-hidden="true">
158 159 160 161 162 163 164 165 166 167 168 169
                  <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>
170
          {% if application.releases | length > 0 %}
171
            <h2 class="mb-0">{% trans %}Releases{% endtrans %}</h2>
172 173
          {% endif %}
          {% for release in application.releases %}
Carl Schwan's avatar
Carl Schwan committed
174
            <details class="release" {% if loop.first %}open="true"{% endif %}>
175
              <summary class="mt-1 h5">{{ release.version }} <small class="text-muted">{{ release.timestamp | format_date('long', locale=locale) }}</small></summary>
176 177 178 179

              {% if release.description %}
                {{ release.description | l10n(locale) | raw }}
              {% endif %}
180 181

              {% if release.url %}
Carl Schwan's avatar
Carl Schwan committed
182
                <div><a class="learn-more" href="{{ release.url}}">{% trans %}Learn more{% endtrans %}</a></div>
183 184 185 186 187 188 189 190 191 192 193
              {% endif %}
              {% if release.artifacts | length > 0 %}
                {% for artifact in release.artifacts %}
                <div class="mb-2 ">
                    {% set size = "" %}
                    {% if artifact.size is defined and artifact.size.download %}
                      {% set size = " (" ~ artifact.size.download | size ~ ")" %}
                    {% endif %}
                    {% if artifact.type == "binary" %}
                      <h4 class="mb-0">
                      {% if artifact.platform == "x86_64-appimage" or artifact.platform == "x86_64-linux-gnu" %}
194
                        {% trans %}AppImage{% endtrans %} - <small class="text-muted">x86_64 {{ size }}</small>
195
                      {% elseif artifact.platform == "macOS" %}
196
                        {% trans %}macOS{% endtrans %} - <small class="text-muted">x86_64 {{ size }}</small>
197
                      {% elseif artifact.platform == "win64" %}
198
                        {% trans %}Windows{% endtrans %} - <small class="text-muted">win64 {{ size }}</small>
199
                      {% elseif artifact.platform == "win32" %}
200
                        {% trans %}Windows{% endtrans %} - <small class="text-muted">win32 {{ size }}</small>
201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216
                      {% endif %}
                      </h4>
                      <div><a href="{{ artifact.locations[0] }}">{{ artifact.locations[0] }}</a></div>
                      {% for algo, checksum in artifact.checksum %}
                        <div><strong>{{ algo }}:</strong>  {{ checksum }}</div>
                      {% endfor %}
                    {% else %}
                      <h4 class="mb-0">Source</h4>
                      <div><a href="{{ artifact.locations[0] }}">{{ artifact.locations[0] }}</a></div>
                      {% for algo, checksum in artifact.checksum %}
                        <strong>{{ algo }}:</strong>  {{ checksum }}
                      {% endfor %}
                    {% endif %}
                  </div>
                {% endfor %}
              {% endif %}
217
            </details>
218
          {% endfor %}
219 220 221
          {% if application.releases | length > 1 %}
            <a class="show-more-release learn-more" href="#">{% trans %}Show more releases...{% endtrans %}</a>
          {% endif %}
222 223 224 225 226 227
        </section>
        <aside class="details col-12 col-md-4 col-lg-3">
          <h3>{% trans %}Details for %name%{% endtrans %}</h3>
          {% if application.homepage is not null %}
            <div>
              <a href="{{ application.homepage }}">
Carl Schwan's avatar
Carl Schwan committed
228
                {% trans %}Project website{% endtrans %}
229 230 231
              </a>
            </div>
          {% endif %}
232
          {% if application.latestStableRelease is not null %}
233
            <h4>{% trans %}Latest stable release{% endtrans %}</h4>
234 235 236
            {{ application.latestStableRelease.version }} <br/>
            {{ application.latestStableRelease.timestamp | format_date('long', locale=locale) }}
          {% endif %}
237 238 239 240 241
          {% if application.latestDevelopmentRelease is not null %}
            <h4>{% trans %}Latest development release{% endtrans %}</h4>
            {{ application.latestDevelopmentRelease.version }} <br/>
            {{ application.latestDevelopmentRelease.timestamp | format_date('long', locale=locale) }}
          {% endif %}
242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316
          {% if application.licenseIdentifier is not null %}
            <h4>{% trans %}License{% endtrans %}</h4>
            <a itemprop="license" href="https://spdx.org/licenses/{{ application.licenseIdentifier }}.html">{{ application.licenseIdentifier }}</a>
          {% endif %}
          {% if application.handbook is not null or application.forum is not null %}
            <h4>{% trans %}Get Help{% endtrans %}</h4>
            {% if application.handbook is not null %}
              <a href="{{ application.handbook }}">
                {% trans %}%name% Handbook{% endtrans %}
              </a>
              <br/>
            {% endif %}
            {% if application.forum is not null %}
              <a href="{{ application.forum }}">
                {% trans %}KDE Community Forum{% endtrans %}
              </a>
              <br/>
            {% endif %}
          {% endif %}
          <h4>{% trans %}Contact the authors{% endtrans %}</h4>
          {% if application.bugTracker is not null %}
            <div>
              <a href="{{ application.bugTracker ?? 'https://bugs.kde.org/wizard.cgi' }}">
                {% trans %}Report a bug{% endtrans %}
              </a>
            </div>
          {% else %}
          {% endif %}
          {% if application.ircChannels | length > 0 %}
            {% trans %}IRC:{% endtrans %}
            {% for ircChannel in application.ircChannels %}
              <a href="{{ ircChannel }}">
                {{ ircChannel }}
              </a>
            {% endfor %} in Freenode <br/>
          {% endif %}
          {% if application.mailingLists | length > 0 %}
            {% trans %}Mailing List:{% endtrans %}
            {% for mailingList in application.mailingLists %}
              <a href="https://mail.kde.org/mailman/listinfo/{{ mailingList }}">
                {{ mailingList }}@kde.org <br/>
              </a>
            {% endfor %}
          {% endif %}
          {% if application.authors is not null %}
            <div>
              <b>{% trans %}Author(s):{% endtrans %}</b>
              <ul class="inline-list">
                {% for author in application.authors %}
                  <li itemprop="author" itemscope itemtype="http://schema.org/Person">
                    <span itemprop="name">{{ author[1] }}</span>
                    {% if author[3] is defined %}
                      (<a itemprop="url" href="{{ author[3] }}">{{ author[3] }}</a>)
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
          {% if application.credits is not null %}
            <div>
              <b>{% trans %}Thanks to:{% endtrans %}</b>
              <ul class="inline-list">
                {% for author in application.credits %}
                  <li>
                    {{ author[1] }}
                    {% if author[3] is defined %}
                      (<a href="{{ author[3] }}">{{ author[3] }}</a>)
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
          <div class="mt-3">
317 318
            <a href="https://invent.kde.org/{{ application.repository }}">
           {% trans %}Browse %name% source code online{% endtrans %}
319 320 321 322 323 324 325
            </a>
          </div>
        </aside>
      </div>
    </div>
  </main>
{% endblock %}