gnousdoteu-v3/apps/gnous_eu/templates/services.html

124 lines
No EOL
6.8 KiB
HTML

{% extends 'layouts/base.html' %}
{% load static %}
{% load i18n %}
{% block content %}
<div class="uk-margin-medium-top">
<div class="uk-container uk-flex-auto top-container uk-position-relative uk-margin-medium-top">
<div class="uk-width-1-2@l uk-width-1-1 uk-align-center">
<div class="uk-inline uk-width-1-1@l">
<h1 class="uk-text-bold uk-text-center">{% trans 'Nos services' %}</h1>
<p>{% trans "GnousEU propose à tous des services gratuits et libre d'utilisations à tous. Ces services sont majoritairement opensource et ne volent pas vos précieuses données personnelles." %}</p>
</div>
</div>
<div class="uk-width-1-2@l uk-width-1-1 uk-align-center uk-margin-large-bottom">
<form action="{% url 'gnous_eu:services' %}" method="get" id="searchForm">
<div class="uk-inline uk-width-1-1@l">
<button class="uk-form-icon uk-form-icon-flip" data-uk-icon="search" type="submit"></button>
<label for="searchInput">
<input class="uk-input" type="search" id="searchInput" name="search"
placeholder="{% trans 'Rechercher...' %}" {% if search %} value="{{ search }}" {% endif %}>
</label>
</div>
</form>
</div>
{% if services|length >= 1 %}
<ul class="uk-grid uk-grid-margin-medium uk-child-width-1-3@m" data-uk-grid="masonry: true">
{% for service in services %}
<li>
<div class="uk-card uk-card-secondary">
<div class="uk-card-media-top">
<img data-src="{{ service.photo.url }}" data-uk-img alt="{{ service.name }}">
<noscript>
<img src="{{ service.photo.url }}" data-uk-img alt="{{ service.name }}">
</noscript>
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">
{{ service.name }}
<code>{{ service.domain }}</code>
</h3>
<p>{% get_current_language as LANGUAGE_CODE %}{% if LANGUAGE_CODE == 'en' and service.description_en != None %}{{ service.description_en }}{% else %}{{ service.description }}{% endif %}</p>
<a href="https://{{ service.domain }}" class="uk-text-large">{% trans "Rejoindre !" %}</a>
</div>
<div class="uk-card-footer uk-card-media">
{% if service.sources == 'CLOSED' %}
<span class="uk-label uk-label-warning">{% trans service.get_sources_display %}</span>
{% elif service.sources == 'OPEN' %}
<span class="uk-label uk-label-success">{% trans service.get_sources_display %}</span>
{% else %}
<span class="uk-label">{% trans service.get_sources_display %}</span>
{% endif %}
{% if service.hosted == 'CENT' %}
<span class="uk-label uk-label-warning">{% trans service.get_hosted_display %}</span>
{% elif service.hosted == 'FED' %}
<span class="uk-label uk-label-success">{% trans service.get_hosted_display %}</span>
{% else %}
<span class="uk-label">{% trans service.get_hosted_display %}</span>
{% endif %}
</div>
</div>
</li>
{% endfor %}
</ul>
<ul class="uk-pagination uk-margin-medium-top">
<li class="uk-width-1-3">
{% if services.has_previous %}
<a {% if search %}
href="?search={{ search }}&page={{ services.previous_page_number }}"
{% else %}
href="?page={{ services.previous_page_number }}"
{% endif %} class="uk-button">
<span class="uk-margin-small-right" data-uk-pagination-previous></span> {% trans "Précédent" %}
</a>
{% endif %}
</li>
<li class="uk-width-1-3">
<span class="uk-button">{{ services.number }}/{{ services.paginator.num_pages }}</span>
</li>
<li class="uk-width-1-3">
{% if services.has_next %}
<a {% if search %}
href="?search={{ search }}&page={{ services.next_page_number }}"
{% else %}
href="?page={{ services.next_page_number }}"
{% endif %} class="uk-button">
{% trans "Suivant" %} <span class="uk-margin-small-left" data-uk-pagination-next></span>
</a>
{% endif %}
</li>
</ul>
{% else %}
<div class="uk-width-2-3@m uk-align-center">
<div class="uk-card">
<div class="uk-card-header">
<div class="uk-grid-small uk-flex-middle uk-grid">
<div class="uk-width-2-3">
<h3 class="uk-card-title uk-text-bold uk-text-danger">{% trans "Aucun service trouvé pour la recheche: " %}</h3>
<p class="uk-margin-large">{{ search }}</p>
</div>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
{% endblock %}
{% block javascript %}
<script>
window.searchForm = document.getElementById('searchForm');
window.searchInputearch = searchForm.querySelector('input#searchInput');
searchInputearch.addEventListener('keypress', e => {
if (e.which === 13) {
searchForm.submit();
}
});
</script>
{% endblock %}