templates/model/echange.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Echanges{% endblock %}
  5. {% block body %}
  6. <div style="width: 100%;">
  7.         <section class='topPageCollection'>
  8. {#            <div class="firstPart">#}
  9. {#                <h3 class="lists-title">Echange.</h3>#}
  10. {#            </div>#}
  11.             <div class="subtitleCollection">
  12.                 <span class="mt-5 echange">Ici sont répertoriés les écussons disponibles à l'échange.<br>Vous êtes interessé par un modèle ?<br>
  13.                     Contactez-moi <a href="mailto:michelin.david01@gmail.com">ici</a>
  14.                     </span>
  15.                 <p>Nombre total de modèles à l'échange : {{ count }}</p>
  16.             </div>
  17.             <div class="converter-list">
  18.                 <button id="list-button">
  19.                     <i class="fa-solid fa-list"></i>
  20.                 </button>
  21.                 <button id="grid-button">
  22.                     <i class="fa-solid fa-table-cells-large"></i>
  23.                 </button>
  24.             </div>
  26.         </section>
  27.         <div class="row block grid-collection grid-top-margin" id="content-collection">
  28.             {% for model in models %}
  29.                 <div class="card">
  30.                     {% if model.photos is empty %}
  31.                         <img src="/images/logo_ecusson_bleu_grand_format.png" class="img-fluid rounded- ">
  32.                     {% else %}
  33.                         <img src="{{ model.photos[0].chemin }}" class="img-fluid rounded- ">
  34.                     {% endif %}
  35.                     <h5>{{ model.titre }}</h5>
  36.                     {% if 'ROLE_ADMIN' in app.user.roles %}
  37.                         <span class="qty">x{{ model.nb > 10 ? model.nb -1 : '0'~model.nb -1 }}</span>
  38.                     {% else %}
  39.                         <br>
  40.                     {% endif %}
  41.                     <div class="card-body">
  42.                         <ul>
  43.                             <li class="title-category">Catégories :</li>
  44.                             {% for categorie in model.categories %}
  45.                                 <li>
  46.                                     {{ categorie.nom }}
  47.                                 </li>
  48.                             {% endfor %}
  49.                         </ul>
  50.                     </div>
  51.                     <div class="bottom-card">
  52.                         <a href="{{ path('app_model_show', {'id':model.id}) }}" class="btn btn-round btn-grad container-fluid ">En savoir plus</a>
  53.                     </div>
  54.                 </div>
  55.             {% endfor %}
  56.         </div>
  57. </div>
  59. {% endblock %}
  61. {% block javascripts %}
  62.     {{ encore_entry_script_tags('app') }}
  63.     <script>
  64.         let listButton = document.getElementById('list-button')
  65.         let gridButton = document.getElementById('grid-button')
  66.         let contentCollection = document.getElementById('content-collection')
  67.         gridButton.classList.add('active');
  70.         listButton.addEventListener('click', () => {
  71.             contentCollection.classList.remove('grid-collection');
  72.             contentCollection.classList.add('list-collection');
  73.             listButton.classList.add('active');
  74.             gridButton.classList.remove('active')
  75.         });
  77.         gridButton.addEventListener('click', () => {
  78.             contentCollection.classList.remove('list-collection');
  79.             contentCollection.classList.add('grid-collection');
  80.             gridButton.classList.add('active');
  81.             listButton.classList.remove('active')
  82.         });
  85.     </script>
  86. {% endblock %}