templates/games/list_categories.html.twig line 1
{% extends 'base.html.twig' %}
{% trans_default_domain "gamepage" %}
{% block title %}{% trans %}Tous les jeux{% endtrans %} | {% trans %}SpeakyPlanet{% endtrans %}{% endblock %}
{% block pageTitle %}{% trans %}Tous les jeux{% endtrans %}{% endblock %}
{% block body %}
<style>
.nav-pills button.nav-link {
background-color: #eaf7fd;
color: #0071bc;
margin: 1em;
}
.nav-pills button.nav-link.active {
background-color: #f28431;
color: #fff;
}
</style>
<div>Je choisis des jeux selon :</div>
<ul class="nav nav-pills mb-3 pt-4" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">{% trans %}Les thèmes vus à l'école{% endtrans %}</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">{% trans %}Ma classe{% endtrans %}</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">{% trans %}Le type du jeu{% endtrans %}</button>
</li>
</ul>
<div class="tab-content py-4" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
{% for categorie in categories %}
{% if categorie.type == "theme" %}
<a class="text-decoration-none text-muted" href="{{ path('front_theme_games', { 'slug': categorie.slug }) }}">
<div class="col px-4">
<div class="card shadow-sm">
<div class="text-center pt-2">
<img class="rounded mx-auto d-block" alt="{{ categorie.slug }}" src="{% if categorie.mobileUrl is not null %}{{ asset(categorie.mobileUrl) }}{% endif %}" />
</div>
<div class="card-body pt-0">
<p class="card-text text-center">{{ ('category-' ~ categorie.slug)|trans({},"categories",app.request.getLocale()) }}</p>
</div>
</div>
</div>
</a>
{% endif %}
{% endfor %}
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
{% for categorie in categories %}
{% if categorie.type == "class" %}
<a class="text-decoration-none text-muted" href="{{ path('front_class_games', { 'slug': categorie.slug }) }}">
<div class="col px-4">
<div class="card shadow-sm">
<div class="text-center pt-2">
<img class="rounded mx-auto d-block" alt="{{ categorie.slug }}" src="{% if categorie.mobileUrl is not null %}{{ asset(categorie.mobileUrl) }}{% endif %}" />
</div>
<div class="card-body pt-0 ">
<p class="card-text text-center">{{ ('category-' ~ categorie.slug)|trans({},"categories",app.request.getLocale()) }}</p>
</div>
</div>
</div>
</a>
{% endif %}
{% endfor %}
</div>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
{% for categorie in categories %}
{% if categorie.type == "category" %}
<a class="text-decoration-none text-muted" href="{{ path('front_category_games', { 'slug': categorie.slug }) }}">
<div class="col px-4">
<div class="card shadow-sm">
<div class="text-center pt-2">
<img class="rounded mx-auto d-block" alt="{{ categorie.slug }}" src="{% if categorie.mobileUrl is not null %}{{ asset(categorie.mobileUrl) }}{% endif %}" />
</div>
<div class="card-body pt-0 ">
<p class="card-text text-center">{{ ('category-' ~ categorie.slug)|trans({},"categories",app.request.getLocale()) }}</p>
</div>
</div>
</div>
</a>
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% endblock %}