templates/includes/tableauLivres.html.twig line 1

Open in your IDE?
  1. <div id="tableBook">
  2. {% set queryParams = app.request.query.all %}
  3. {% set order = app.request.query.get('order') | default('') %}
  4. {% if order != '' and order == 'asc' %}
  5. {% set order = 'desc' %}
  6. {% else %}
  7. {% set order = 'asc' %}
  8. {% endif %}
  10. <!-- Options de tri -->
  11. <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
  12. <div class="text-muted small">
  13. <i class="fas fa-book"></i> {{ Listelivres|length }} livre(s) affiché(s)
  14. </div>
  15. <div class="btn-group btn-group-sm">
  16. <a href="{{ path('listesLivres', queryParams|merge({'order': order, 'sort' : 'l.titre'})) }}"
  17. class="btn {% if app.request.query.get('sort') == 'l.titre' %}btn-primary{% else %}btn-outline-primary{% endif %}">
  18. <i class="fas fa-sort-alpha-down"></i> Titre
  19. </a>
  20. </div>
  21. </div>
  23. <!-- Grille de livres -->
  24. <div class="row">
  25. {% for livre in Listelivres %}
  26. <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-4">
  27. <div class="card h-100 livre-card shadow-sm">
  28. <!-- Image -->
  29. <div class="livre-cover-wrapper text-center p-2" style="background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);">
  30. {% if livre.id in images|keys %}
  31. <img id='img-{{ livre.id }}'
  32. class="img-cover img-fluid"
  33. alt="{{ livre.titre }}"
  34. src="data:image/png;base64,{{ images[livre.id] }}"
  35. style="max-height: 180px; object-fit: contain; cursor: pointer;" />
  36. {% else %}
  37. <div class="d-flex align-items-center justify-content-center" style="height: 180px;">
  38. <i class="fas fa-book fa-4x text-muted"></i>
  39. </div>
  40. {% endif %}
  41. </div>
  43. <!-- Corps de la card -->
  44. <div class="card-body p-2">
  45. <h6 class="card-title mb-1">
  46. <a href="{{ path('livreDetail', {'id': livre.id}) }}" class="text-dark text-decoration-none livre-titre">
  47. {{ livre.titre|length > 40 ? livre.titre|slice(0, 40) ~ '...' : livre.titre }}
  48. </a>
  49. </h6>
  51. {% if livre.tome and livre.tome > 0 %}
  52. <span class="badge badge-secondary badge-sm mb-1">Tome {{ livre.tome }}</span>
  53. {% endif %}
  55. <!-- Auteurs -->
  56. <p class="card-text small text-muted mb-1">
  57. <i class="fas fa-pen-fancy"></i>
  58. {% set nb = 0 %}
  59. {% for auteur in livre.listeAuteur %}
  60. {% if nb > 0 %}, {% endif %}
  61. {% if nb < 2 %}{{ auteur.auteur.nom }}{% endif %}
  62. {% set nb = nb + 1 %}
  63. {% endfor %}
  64. {% if nb > 2 %}...{% endif %}
  65. </p>
  67. <!-- Éditeur -->
  68. {% if livre.edition %}
  69. <p class="card-text small text-muted mb-1">
  70. <i class="fas fa-building"></i> {{ livre.edition.nom|length > 20 ? livre.edition.nom|slice(0, 20) ~ '...' : livre.edition.nom }}
  71. </p>
  72. {% endif %}
  73. </div>
  75. <!-- Footer -->
  76. <div class="card-footer bg-white border-top-0 p-2 pt-0">
  77. <div class="d-flex justify-content-between align-items-center">
  78. <span class="badge badge-primary">{{ livre.prixBase|number_format(2) }} €</span>
  79. <a href="{{ path('livreDetail', {'id': livre.id}) }}" class="btn btn-sm btn-outline-primary">
  80. <i class="fas fa-eye"></i>
  81. </a>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. {% endfor %}
  87. </div>
  89. <!-- Pagination -->
  90. <div class="d-flex justify-content-center mt-4">
  91. {{ knp_pagination_render(pagination) }}
  92. </div>
  93. </div>
  95. <!-- The Image Modal -->
  96. <div id="myModal" class="image-modal">
  97. <span class="image-modal-close">&times;</span>
  98. <img class="image-modal-content" id="img01">
  99. <div id="caption"></div>
  100. </div>
  102. <style>
  103. .livre-card {
  104. transition: transform 0.2s, box-shadow 0.2s;
  105. border: 1px solid #e9ecef;
  106. }
  107. .livre-card:hover {
  108. transform: translateY(-5px);
  109. box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
  110. }
  111. .livre-titre:hover {
  112. color: #667eea !important;
  113. }
  114. .livre-cover-wrapper {
  115. border-radius: 0.25rem 0.25rem 0 0;
  116. min-height: 180px;
  117. }
  118. </style>