templates/auteurs/detail.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ auteur.nomComplet }} - BDD-Books{% endblock %}
  5. {% block body %}
  6. <div class="container-fluid px-4">
  7. <!-- En-tête -->
  8. <div class="card mb-4">
  9. <div class="card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
  10. <div class="d-flex justify-content-between align-items-center">
  11. <h5 class="mb-0 text-white">
  12. <i class="fas fa-user"></i> {{ auteur.nomComplet }}
  13. </h5>
  14. <a href="{{ path('liste_auteurs') }}" class="btn btn-light btn-sm">
  15. <i class="fas fa-arrow-left"></i> Retour aux auteurs
  16. </a>
  17. </div>
  18. </div>
  19. <div class="card-body">
  20. <div class="d-flex align-items-center">
  21. <div class="mr-4">
  22. <span class="badge" style="font-size: 2rem; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
  23. {{ auteur.initiale }}
  24. </span>
  25. </div>
  26. <div>
  27. <h3 class="mb-1">{{ auteur.nomComplet }}</h3>
  28. <p class="text-muted mb-0">
  29. <i class="fas fa-book"></i> {{ livres|length }} livre(s) dans la bibliothèque
  30. </p>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  36. <!-- Liste des livres -->
  37. {% if livres|length > 0 %}
  38. <!-- Grille de livres (même style que la recherche) -->
  39. <div class="row">
  40. {% for livre in livres %}
  41. <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-4">
  42. <div class="card h-100 livre-card shadow-sm">
  43. <!-- Image -->
  44. <div class="livre-cover-wrapper text-center p-2" style="background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);">
  45. {% if livre.id in images|keys %}
  46. <img class="img-fluid"
  47. alt="{{ livre.titre }}"
  48. src="data:image/png;base64,{{ images[livre.id] }}"
  49. style="max-height: 180px; object-fit: contain;" />
  50. {% else %}
  51. <div class="d-flex align-items-center justify-content-center" style="height: 180px;">
  52. <i class="fas fa-book fa-4x text-muted"></i>
  53. </div>
  54. {% endif %}
  55. </div>
  57. <!-- Corps de la card -->
  58. <div class="card-body p-2">
  59. <h6 class="card-title mb-1">
  60. <a href="{{ path('livreDetail', {'id': livre.id}) }}" class="text-dark text-decoration-none livre-titre">
  61. {{ livre.titre|length > 40 ? livre.titre|slice(0, 40) ~ '...' : livre.titre }}
  62. </a>
  63. </h6>
  65. {% if livre.tome and livre.tome > 0 %}
  66. <span class="badge badge-secondary badge-sm mb-1">Tome {{ livre.tome }}</span>
  67. {% endif %}
  69. <!-- Éditeur -->
  70. {% if livre.edition %}
  71. <p class="card-text small text-muted mb-1">
  72. <i class="fas fa-building"></i> {{ livre.edition.nom|length > 20 ? livre.edition.nom|slice(0, 20) ~ '...' : livre.edition.nom }}
  73. </p>
  74. {% endif %}
  76. {% if livre.annee %}
  77. <p class="card-text small text-muted mb-1">
  78. <i class="fas fa-calendar"></i> {{ livre.annee }}
  79. </p>
  80. {% endif %}
  81. </div>
  83. <!-- Footer -->
  84. <div class="card-footer bg-white border-top-0 p-2 pt-0">
  85. <div class="d-flex justify-content-between align-items-center">
  86. <span class="badge badge-primary">{{ livre.prixBase|number_format(2) }} €</span>
  87. <a href="{{ path('livreDetail', {'id': livre.id}) }}" class="btn btn-sm btn-outline-primary">
  88. <i class="fas fa-eye"></i>
  89. </a>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. {% endfor %}
  95. </div>
  96. {% else %}
  97. <div class="alert alert-info">
  98. <i class="fas fa-info-circle"></i> Aucun livre trouvé pour cet auteur.
  99. </div>
  100. {% endif %}
  101. </div>
  103. <style>
  104. .livre-card {
  105. transition: transform 0.2s, box-shadow 0.2s;
  106. border: 1px solid #e9ecef;
  107. }
  108. .livre-card:hover {
  109. transform: translateY(-5px);
  110. box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
  111. }
  112. .livre-titre:hover {
  113. color: #667eea !important;
  114. }
  115. .livre-cover-wrapper {
  116. border-radius: 0.25rem 0.25rem 0 0;
  117. min-height: 180px;
  118. }
  119. </style>
  120. {% endblock %}