application.html.twig 15.3 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 %}{{ app.request.getSchemeAndHttpHost ~ "/applications" ~ path('app_main_application_intl', {'_locale': locale, 'category': category, 'application': application.id}) }}{% endblock %}
Carl Schwan's avatar
Carl Schwan committed
15

16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
{% 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 %}"
             width="64" height="64" class="mr-2"/>
        <div>
          <h1 style="font-size: 1.5rem">
            <a href="{{ path('app_main_index', {'_locale': locale}) }}">{% trans %}KDE's Applications{% endtrans %}</a>
            {{ name }}
          </h1>
          <a href="{{ path('app_main_category_intl', {'_locale': locale, 'category': category}) }}">
33
            {{ application.primaryCategory | trans }}
34 35 36 37 38 39 40 41 42 43 44
          </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>
45 46 47 48 49 50 51 52 53

    {% 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 %}

54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
    <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 %}
        <div class="swiper-container" class="w-100">
          <!-- Additional required wrapper -->
          <div class="swiper-wrapper d-flex my-3">
            {% 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>
        </div>
      {% 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>
105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
          <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 %}
Carl Schwan's avatar
Carl Schwan committed
147
            {% if application.googlePlayLink %}
148 149 150 151 152 153 154 155 156 157 158 159 160 161
              <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>
162
          {% if application.releases | length > 0 %}
163
            <h2 class="mb-0">{% trans %}Releases{% endtrans %}</h2>
164 165
          {% endif %}
          {% for release in application.releases %}
166 167 168 169 170 171
            <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 %}
172 173

              {% if release.url %}
Carl Schwan's avatar
Carl Schwan committed
174
                <div><a class="learn-more" href="{{ release.url}}">{% trans %}Learn more{% endtrans %}</a></div>
175 176 177 178 179 180 181 182 183 184 185
              {% 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" %}
186
                        {% trans %}AppImage{% endtrans %} - <small class="text-muted">x86_64 {{ size }}</small>
187
                      {% elseif artifact.platform == "macOS" %}
188
                        {% trans %}macOS{% endtrans %} - <small class="text-muted">x86_64 {{ size }}</small>
189
                      {% elseif artifact.platform == "win64" %}
190
                        {% trans %}Windows{% endtrans %} - <small class="text-muted">win64 {{ size }}</small>
191
                      {% elseif artifact.platform == "win32" %}
192
                        {% trans %}Windows{% endtrans %} - <small class="text-muted">win32 {{ size }}</small>
193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210
                      {% 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 %}
            </div>
          {% endfor %}
Carl Schwan's avatar
Carl Schwan committed
211
          <a class="show-more-release learn-more" href="#">{% trans %}Show more releases...{% endtrans %}</a>
212 213 214 215 216 217
        </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
218
                {% trans %}Project website{% endtrans %}
219 220 221
              </a>
            </div>
          {% endif %}
222
          {% if application.latestStableRelease is not null %}
223
            <h4>{% trans %}Latest stable release{% endtrans %}</h4>
224 225 226
            {{ application.latestStableRelease.version }} <br/>
            {{ application.latestStableRelease.timestamp | format_date('long', locale=locale) }}
          {% endif %}
227 228 229 230 231
          {% 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 %}
232 233 234 235 236 237 238 239 240 241 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
          {% 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">
            <a href="{{ path('app_main_application_dev_intl', {
              '_locale': locale,
              'application': application.id,
              'category': category
            }) }}">
312
              {% trans %}Development information{% endtrans %}
313 314 315 316 317 318
            </a>
          </div>
        </aside>
      </div>
    </div>
  </main>
319 320 321 322 323 324 325 326 327 328
    <script>
      document.querySelector('.show-more-release').addEventListener('click', function(e) {
        event.preventDefault();
        console.log(event.target);
        event.target.classList.add('d-none');
        document.querySelectorAll('.release').forEach(function(release) {
          release.classList.remove('d-none');
        });
      });
    </script>
329 330 331
{% endblock %}

{% block donation %}#{{ name }}{% endblock %}