123 lines
6.6 KiB
HTML
123 lines
6.6 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-default">
|
|
<div class="uk-card-media-top">
|
|
<img src="https://media.giphy.com/media/sSgvbe1m3n93G/giphy.gif"
|
|
data-src="{{ service.photo.url }}"
|
|
data-uk-img
|
|
alt="{{ service.name }}">
|
|
</div>
|
|
<div class="uk-card-body">
|
|
<h3 class="uk-card-title">
|
|
{{ service.name }}
|
|
<a class="uk-text-small uk-link-muted uk-margin-left" href="https://{{ service.domain }}">{{ service.domain }}</a>
|
|
</h3>
|
|
<p>{{ service.description }}</p>
|
|
</div>
|
|
<div class="uk-card-footer">
|
|
{% if service.sources == 'CLOSED' %}
|
|
<span class="uk-label uk-label-warning">{{ service.get_sources_display }}</span>
|
|
{% elif service.sources == 'OPEN' %}
|
|
<span class="uk-label uk-label-success">{{ service.get_sources_display }}</span>
|
|
{% else %}
|
|
<span class="uk-label">{{ service.get_sources_display }}</span>
|
|
{% endif %}
|
|
|
|
{% if service.hosted == 'CENT' %}
|
|
<span class="uk-label uk-label-warning">{{ service.get_hosted_display }}</span>
|
|
{% elif service.hosted == 'FED' %}
|
|
<span class="uk-label uk-label-success">{{ service.get_hosted_display }}</span>
|
|
{% else %}
|
|
<span class="uk-label">{{ 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 %} |