matrix.org/templates/shortcodes/all_clients.html

169 lines
6.8 KiB
HTML

{% import "macros/clients.html" as clientutils %}
{% import "macros/client_details.html" as client_details %}
{% set clients = section.pages %}
{% set licences = [] %}
{% for client in clients %}
{% set_global licences = licences | concat(with=client.licence) %}
{% endfor %}
{% set licences = licences | unique | sort %}
<div class="filters">
<div class="filter-wrap">
<div id="filter-platform" class="filter">
Platform
<div class="divider"></div>
<img src="/assets/down-arrow.svg">
</div>
<div id="filter-platform-menu" class="filter-menu">
<p>The clients must support all of the platforms checked.</p>
<div class="filter-option">
<input id="platform-ios" type="checkbox">
<label for="platform-ios">Apple iOS</label>
</div>
<div class="filter-option">
<input id="platform-android" type="checkbox">
<label for="platform-android">Google Android</label>
</div>
<div class="filter-option">
<input id="platform-web" type="checkbox">
<label for="platform-web">Web</label>
</div>
<div class="filter-option">
<input id="platform-windows" type="checkbox">
<label for="platform-windows">Windows</label>
</div>
<div class="filter-option">
<input id="platform-macos" type="checkbox">
<label for="platform-macos">macOS</label>
</div>
<div class="filter-option">
<input id="platform-linux" type="checkbox">
<label for="platform-linux">Linux (Flatpak)</label>
</div>
<div class="reset-links">Select <a>all</a> - <a>none</a></div>
</div>
</div>
<div class="filter-wrap">
<div id="filter-maturity" class="filter">
Maturity
<div class="divider"></div>
<img src="/assets/down-arrow.svg">
</div>
<div id="filter-maturity-menu" class="filter-menu">
<p>The client can support any of the maturity levels checked.</p>
<div class="filter-option">
<input id="maturity-stable" type="checkbox" checked>
<label for="maturity-stable">Stable</label>
</div>
<div class="filter-option">
<input id="maturity-beta" type="checkbox" checked>
<label for="maturity-beta">Beta</label>
</div>
<div class="filter-option">
<input id="maturity-alpha" type="checkbox" checked>
<label for="maturity-alpha">Alpha</label>
</div>
<div class="filter-option">
<input id="maturity-obsolete" type="checkbox" checked>
<label for="maturity-obsolete">Obsolete</label>
</div>
<div class="reset-links">Select <a>all</a> - <a>none</a></div>
</div>
</div>
<div class="filter-wrap">
<div id="filter-licence" class="filter">
Licence
<div class="divider"></div>
<img src="/assets/down-arrow.svg">
</div>
<div id="filter-licence-menu" class="filter-menu">
<p>The client can support any of the licences checked.</p>
{% for licence in licences %}
<div class="filter-option">
<input id="licence-{{ licence | slugify }}" type="checkbox" checked>
<label for="licence-{{ licence | slugify }}">{{ licence }}</label>
</div>
{% endfor %}
<div class="reset-links">Select <a>all</a> - <a>none</a></div>
</div>
</div>
<div class="filter-wrap">
<div id="filter-features" class="filter">
Features
<div class="divider"></div>
<img src="/assets/down-arrow.svg">
</div>
<div id="filter-features-menu" class="filter-menu">
<p>The client must support all of the features checked.</p>
<div class="filter-option">
<input id="feature-e2ee" type="checkbox">
<label for="feature-e2ee">E2EE</label>
</div>
<div class="filter-option">
<input id="feature-spaces" type="checkbox">
<label for="feature-spaces">Spaces</label>
</div>
<div class="filter-option">
<input id="feature-voip-1to1" type="checkbox">
<label for="feature-voip-1to1">Native 1:1 calls</label>
</div>
<div class="filter-option">
<input id="feature-widgets" type="checkbox">
<label for="feature-widgets">Widgets</label>
</div>
<div class="filter-option">
<input id="feature-threads" type="checkbox">
<label for="feature-threads">Threads</label>
</div>
<div class="filter-option">
<input id="feature-sso" type="checkbox">
<label for="feature-sso">SSO (Enterprise login)</label>
</div>
<div class="filter-option">
<input id="feature-multi-account" type="checkbox">
<label for="feature-multi-account">Multi-account</label>
</div>
<div class="filter-option">
<input id="feature-multi-language" type="checkbox">
<label for="feature-multi-language">Multi-language</label>
</div>
<div class="reset-links">Select <a>all</a> - <a>none</a></div>
</div>
</div>
</div>
<div id="filters-overlay"></div>
<div id="all-clients" class="projects-card-deck clients">
{{ section.pages }}
{% for client in clients %}
{% if client.thumbnail %}
{% set thumbnail = page.extra.thumbnail %}
{% else %}
{% set thumbnail = "client-placeholder.svg" %}
{% endif %}
<div>
<input id="client-{{ name | slugify }}-card-checkbox" type="checkbox" class="client-checkbox"
aria-hidden="true">
<label for="client-{{ name | slugify }}-card-checkbox"
class="project-card client {{ clientutils::classes(client=client) }}">
<img src="{{ thumbnail }}" alt="{{ name }} Preview">
<h3>{{ name }}</h3>
<span>{{ client.summary | safe }}</span>
<div class="platform-links">
{{ clientutils::platforms(packages=client.packages) }}
</div>
<a>Open client details</a>
</label>
<!-- Overlay -->
<label for="client-{{ name | slugify }}-card-checkbox" class="client-details-overlay">
</label>
<!-- Client details card -->
{{ client_details::client_details(name=name, client=client) }}
</div>
{% endfor %}
</div>