templates/games/list_categories.html.twig line 1

  1. {% extends 'base.html.twig' %}
  2. {% trans_default_domain "gamepage" %}
  4. {% block title %}{% trans %}Tous les jeux{% endtrans %} | {% trans %}SpeakyPlanet{% endtrans %}{% endblock %}
  6. {% block pageTitle %}{% trans %}Tous les jeux{% endtrans %}{% endblock %}
  8. {% block body %}
  9. <style>
  10.     .nav-pills button.nav-link {
  11.         background-color: #eaf7fd;
  12.         color: #0071bc;
  13.         margin: 1em;
  14.     }
  15.     .nav-pills button.nav-link.active {
  16.         background-color: #f28431;
  17.         color: #fff;
  18.     }
  19. </style>
  21. <div>Je choisis des jeux selon :</div>
  22. <ul class="nav nav-pills mb-3 pt-4" id="pills-tab" role="tablist">
  23.     <li class="nav-item" role="presentation">
  24.         <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>
  25.     </li>
  26.     <li class="nav-item" role="presentation">
  27.         <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>
  28.     </li>
  29.     <li class="nav-item" role="presentation">
  30.         <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>
  31.     </li>
  32. </ul>
  33. <div class="tab-content py-4" id="pills-tabContent">
  34.     <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
  35.         <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
  36.             {% for categorie in categories %}
  37.                 {% if categorie.type == "theme" %}
  38.                 <a class="text-decoration-none text-muted" href="{{ path('front_theme_games', { 'slug': categorie.slug }) }}">
  39.                 <div class="col px-4">
  40.                     <div class="card shadow-sm">
  41.                         <div class="text-center pt-2">
  42.                             <img class="rounded mx-auto d-block" alt="{{ categorie.slug }}" src="{% if categorie.mobileUrl is not null %}{{ asset(categorie.mobileUrl) }}{% endif %}" />
  43.                         </div>
  44.                         <div class="card-body pt-0">
  45.                             <p class="card-text text-center">{{ ('category-' ~ categorie.slug)|trans({},"categories",app.request.getLocale()) }}</p>
  46.                         </div>
  47.                     </div>
  48.                 </div>
  49.                 </a>
  50.                 {% endif %}
  51.             {% endfor %}
  52.         </div>
  53.     </div>
  54.     <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
  55.         <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
  56.             {% for categorie in categories %}
  57.                 {% if categorie.type == "class" %}
  58.                 <a class="text-decoration-none text-muted" href="{{ path('front_class_games', { 'slug': categorie.slug }) }}">
  59.                 <div class="col px-4">
  60.                     <div class="card shadow-sm">
  61.                         <div class="text-center pt-2">
  62.                             <img class="rounded mx-auto d-block" alt="{{ categorie.slug }}" src="{% if categorie.mobileUrl is not null %}{{ asset(categorie.mobileUrl) }}{% endif %}" />
  63.                         </div>
  64.                         <div class="card-body pt-0 ">
  65.                             <p class="card-text text-center">{{ ('category-' ~ categorie.slug)|trans({},"categories",app.request.getLocale()) }}</p>
  66.                         </div>
  67.                     </div>
  68.                 </div>
  69.                 </a>
  70.                 {% endif %}
  71.             {% endfor %}
  72.         </div>
  73.     </div>
  74.     <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
  75.         <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
  76.             {% for categorie in categories %}
  77.                 {% if categorie.type == "category" %}
  78.                 <a class="text-decoration-none text-muted" href="{{ path('front_category_games', { 'slug': categorie.slug }) }}">
  79.                 <div class="col px-4">
  80.                     <div class="card shadow-sm">
  81.                         <div class="text-center pt-2">
  82.                             <img class="rounded mx-auto d-block" alt="{{ categorie.slug }}" src="{% if categorie.mobileUrl is not null %}{{ asset(categorie.mobileUrl) }}{% endif %}" />
  83.                         </div>
  84.                         <div class="card-body pt-0 ">
  85.                             <p class="card-text text-center">{{ ('category-' ~ categorie.slug)|trans({},"categories",app.request.getLocale()) }}</p>
  86.                         </div>
  87.                     </div>
  88.                 </div>
  89.                 </a>
  90.                 {% endif %}
  91.             {% endfor %}
  92.         </div>
  93.     </div>
  94. </div>
  95. {% endblock %}