apps/store/templates/app.html

{% extends "base.html" %}
{% block title %}
{{ infos['manifest']['name'] }}
{% endblock %}
{% block main %}
<div class="max-w-screen-md mx-auto pt-5 px-5 lg:px-0">

    <span class="flex sm:flex-row sm:items-end mb-1" style="flex-wrap: wrap;">
        <span class="flex flex-row items-end">
            <img alt="{{ _('Logo for %(app)s',app=infos['manifest']['name']) }}"
                 {% if infos['logo_hash'] %}
                 src="https://app.yunohost.org/default/v3/logos/{{ infos['logo_hash'] }}.png"
                 {% else %}
                 src="{{ url_for('static', filename='app_logo_placeholder.png') }}"
                 {% endif %}
                 loading="lazy"
                 class="h-12 w-12 rounded-lg object-cover shadow-sm mt-1"
            >
            <h1 class="flex-0 pl-2 pt-3 {% if infos["manifest"]["name"]|length > 12 %}text-2xl{% else %}text-3xl{% endif %} font-bold text-gray-900">{{ infos["manifest"]["name"] }}</h1>

            {% if infos['category'] %}
            <span class="ml-2 mb-1 rounded-full px-2.5 py-0.5 text-[10px] border text-{{ catalog['categories'][infos['category']]['color'] }}-600 border-{{ catalog['categories'][infos['category']]['color'] }}-400 ">
                {{ catalog['categories'][infos['category']]['title']|localize|lower }}
            </span>
            {% endif %}

            {% if infos['level'] == "?" or infos["level"]|int <= 4 %}
            <span class="ml-2 mb-1.5">
                <i class="fa fa-exclamation-circle text-red-500 py-0.5"
                   title="{{ _('This app is currently flagged as broken because it failed our automatic tests.') }} {{ _('This is usually a temporary situation which requires packagers to fix something in the app.') }}"
                   aria-label="{{ _('This app is currently flagged as broken because it failed our automatic tests.') }} {{ _('This is usually a temporary situation which requires packagers to fix something in the app.') }}"
                ></i>
            </span>
            {% elif infos['level'] == 8 %}
            <span class="ml-2 mb-1.5">
                <i class="fa fa-diamond text-teal-500 py-0.5"
                   title="{{ _('This app has been good quality according to our automatic tests over at least one year.') }}"
                   aria-label="{{ _('This app has been good quality according to our automatic tests over at least one year.') }}"
                ></i>
            </span>
            {% endif %}

        </span>

        <span class="grow"></span>

        <div class="h-9.5 flex flex-row items-end pt-1 my-3 sm:my-0 scale-90 sm:scale-100">

            <span class="grow"></span>

            {% set this_app_stars = stars.get(app_id, {})|length %}
            {% if user %}
                {% set user_starred_this_app = user['id'] in stars.get(app_id, {}) %}
            {% else %}
                {% set user_starred_this_app = False %}
            {% endif %}

           <a
              href="{{ url_for('star_app', app_id=app_id, action="unstar" if user_starred_this_app else "star") }}"
              role="button"
              class="mr-1 inline-block group btn border text-violet-600 border-violet-500 {% if user %}hover:bg-violet-500 hover:text-white{% endif %}"
           >
                {% if not user_starred_this_app %}
                    <span class="inline-block {% if user %}group-hover:hidden{% endif %}">{{ this_app_stars }}</span>
                    <span class="hidden {% if user %}group-hover:inline-block{% endif %}">{{ this_app_stars+1 }}</span>
                    <i class="fa fa-star-o inline-block {% if user %}group-hover:hidden{% endif %}" aria-hidden="true"></i>
                    <i class="fa fa-star   hidden {% if user %}group-hover:inline-block{% endif %}" aria-hidden="true"></i>
                {% else %}
                    <span class="inline-block group-hover:hidden">{{ this_app_stars }}</span>
                    <span class="hidden group-hover:inline-block">{{ this_app_stars-1 }}</span>
                    <i class="fa fa-star   inline-block group-hover:hidden" aria-hidden="true"></i>
                    <i class="fa fa-star-o hidden group-hover:inline-block" aria-hidden="true"></i>
                {% endif %}
            </a>
            {% if infos["manifest"]["upstream"]["demo"] %}
            <a
              class="btn btn-success inline-block mr-1"
              href="{{ infos["manifest"]["upstream"]["demo"] }}"
            >
              <i class="fa fa-external-link fa-fw" aria-hidden="true"></i>
              <span class="hidden sm:inline">{{ _("Try the demo") }}</span>
              <span class="inline sm:hidden">{{ _("Demo") }}</span>
            </a>
            {% endif %}
            <a aria-label="{{ _('Install with YunoHost') }}" title="{{ _('Install with YunoHost') }}" class="h-9.5 inline-block rounded-md border p-0 bg-gray-900 text-white " href="https://install-app.yunohost.org/?app={{ app_id }}">
                <span class="inline-block text-[11px] leading-3 text-center py-1.5 pl-2">Install<br/>with</span>
                <span class="inline-block pr-2 pt-1"><img alt="YunoHost" src="{{ url_for('static', filename='horizontal-yunohost.svg') }}"></span>
            </a>
        </div>

    </span>

    <p class="text-sm text-slate-500">{{ _("Current version: %(version)s", version=infos["manifest"]["version"]) }}</p>
    {% if infos["potential_alternative_to"] %}
    <p class="text-sm text-slate-500">{{ _("Potential alternative to: %(alternatives)s", alternatives=infos["potential_alternative_to"]|join(', ')) }}</p>
    {% endif %}

    <div class="from-markdown my-4">{{ infos["full_description_html"]|safe }}</div>

    {% if infos["screenshot"] %}
    <img alt="{{ _("Screenshot for %(app)s",app=infos["manifest"]["name"]) }}" class="my-3 shadow-lg" src="{{ infos["screenshot"] }}">
    {% endif %}

    {% if infos["manifest"]["integration"]["architectures"] != "all" %}
     <div class="my-3 rounded-md bg-yellow-100 text-yellow-800 px-5 py-2">
         <i class="fa fa-exclamation-triangle fa-fw"></i> {{ _("This app is only compatible with these specific architectures: %(archs)s", archs=infos["manifest"]["integration"]["architectures"]|join(', ')) }}
    </div>
    {% endif %}

    {% if infos["manifest"]["integration"]["ram"]["build_binary"] >= 500 * 1024 * 1024 %}
     <div class="my-3 rounded-md bg-yellow-100 text-yellow-800 px-5 py-2">
         <i class="fa fa-exclamation-triangle fa-fw"></i> {{ _("This app requires an unusual amount of RAM to install: %(ram)s", ram=infos["manifest"]["integration"]["ram"]["build"]) }}
    </div>
    {% endif %}

    {% if infos["pre_install_html"] %}
    <div class="my-3 rounded-md bg-blue-100 text-blue-800 px-5 py-2">
        <h2 class="inline-block text-xl mb-2 font-semibold">{{ _("Important infos before installing") }}</h2>
        <div class="from-markdown">{{ infos["pre_install_html"] | safe }}</div>
    </div>
    {% endif %}

    {% if infos["antifeatures"] %}
    <h2 class="inline-block text-xl mb-2 font-semibold">{{ _("Anti-features") }}</h2>
    <p class="inline-block text-sm">{{ _("(This app has features you may not like)") }}</p>
    <div class="my-3 rounded-md bg-red-100 text-red-800 px-5 py-2">
        <ul>
        {% for antifeature in infos["antifeatures"] %}
            <li class="mb-1"><i class="fa fa-{{ catalog['antifeatures'][antifeature]['icon'] }} fa-fw" aria-hidden="true"></i> {{ catalog['antifeatures'][antifeature]['description']|localize }}</li>
        {% endfor %}
        </ul>
    </div>
    {% endif %}


    <h2 class="text-xl mb-2 font-semibold">{{ _("Useful links") }}</h2>
    <div>
        {% set upstream = infos["manifest"]["upstream"] %}
        <a class="block btn btn-link my-1" href="https://spdx.org/licenses/{{upstream.license}}" target="_blank"><i class="fa fa-institution fa-fw" aria-hidden="true"></i> {{ _("License: %(license)s", license=upstream.license) }}</a>
        {% if upstream.website %}<a class="block btn btn-link my-1" href="{{ upstream.website }}" target="_blank"><i class="fa fa-globe fa-fw" aria-hidden="true"></i> {{ _(" Official website") }}</a>{% endif %}
        {% if upstream.admindoc %}<a class="block btn btn-link my-1" href="{{ upstream.admindoc }}" target="_blank"><i class="fa fa-book fa-fw" aria-hidden="true"></i> {{ _("Official admin documentation") }}</a>{% endif %}
        {% if upstream.userdoc %}<a class="block btn btn-link my-1" href="{{ upstream.userdoc }}" target="_blank"><i class="fa fa-book fa-fw" aria-hidden="true"></i> {{ _("Official user documentation") }}</a>{% endif %}
        {% if upstream.code %}<a class="block btn btn-link my-1" href="{{ upstream.code }}" target="_blank"><i class="fa fa-code fa-fw" aria-hidden="true"></i> {{ _("Official code repository") }}</a>{% endif %}
        <a class="block btn btn-link my-1" href="{{ infos["git"]["url"] }}" target="_blank"><i class="fa fa-code fa-fw" aria-hidden="true"></i> {{ _("YunoHost package repository") }}</a>
    </div>
</div>
{% endblock %}