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

123 lines
7.1 KiB
HTML
Raw Normal View History

2020-05-16 02:12:21 +02:00
{% 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 uk-icon" data-uk-icon="search" type="submit"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></button>
2020-05-16 02:12:21 +02:00
<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 %}
<div class="uk-grid uk-grid-margin-medium uk-child-width-1-3@m">
2020-05-16 02:12:21 +02:00
{% for service in services %}
<div class="uk-margin">
<div class="uk-card uk-card-secondary">
2020-05-16 02:12:21 +02:00
<div class="uk-card-media-top">
<a href="https://{{ service.domain }}" target="_blank">
<img src="{{ service.photo.url }}" loading="lazy" alt="{{ service.name }}">
</a>
2020-05-16 02:12:21 +02:00
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">
<a href="https://{{ service.domain }}"target="_blank">{{ service.name }}</a>
<code>{{ service.domain }}</code>
2020-05-16 02:12:21 +02:00
</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" target="_blank">{% trans "Rejoindre !" %}</a>
2020-05-16 02:12:21 +02:00
</div>
<div class="uk-card-footer uk-card-media">
2020-05-16 02:12:21 +02:00
{% if service.sources == 'CLOSED' %}
<span class="uk-label uk-label-warning">{% trans service.get_sources_display %}</span>
2020-05-16 02:12:21 +02:00
{% elif service.sources == 'OPEN' %}
<span class="uk-label uk-label-success">{% trans service.get_sources_display %}</span>
2020-05-16 02:12:21 +02:00
{% else %}
<span class="uk-label">{% trans service.get_sources_display %}</span>
2020-05-16 02:12:21 +02:00
{% endif %}
{% if service.hosted == 'CENT' %}
<span class="uk-label uk-label-warning">{% trans service.get_hosted_display %}</span>
2020-05-16 02:12:21 +02:00
{% elif service.hosted == 'FED' %}
<span class="uk-label uk-label-success">{% trans service.get_hosted_display %}</span>
2020-05-16 02:12:21 +02:00
{% else %}
<span class="uk-label">{% trans service.get_hosted_display %}</span>
2020-05-16 02:12:21 +02:00
{% endif %}
</div>
</div>
</div>
2020-05-16 02:12:21 +02:00
{% endfor %}
</div>
2020-05-16 02:12:21 +02:00
<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 %}