Ajout d'un collapse pour les titres en vignettes

assets/controllers/collapser-controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "@stimulus/core";
+
+export default class extends Controller {
+    static targets = ['collapse', 'button']
+    connect() {
+        this.collapseTarget.addEventListener ('hide.bs.collapse', () => {
+            this.buttonTarget.innerHTML = '<i class="fa fa-chevron-circle-right fa-lg"></i>';
+        });
+        this.collapseTarget.addEventListener ('show.bs.collapse', () => {
+            this.buttonTarget.innerHTML = '<i class="fa fa-chevron-circle-down fa-lg"></i>';
+        })
+    }
+}

templates/videotheque/liste_vignettes.html.twig

@@ -35,7 +35,7 @@
 	<section id="tableFilms">
 		
 		{% for film in listeFilms %}
-		<article class="card border-primary mb-4" data-auteur="{{ film.authered.nomComplet }}">
+		<article class="card border-primary mb-4" data-controller="collapser" data-auteur="{{ film.authered.nomComplet }}">
 			<div class="card-header d-flex justify-content-between">
 				<h3 class="card-title"><a class="" href="{{ path('videotheque_voirfilm', {'id': film.id}) }}"><span data-bs-toggle="tooltip" data-placement="right" title="{{ film.information }}">{{ film.titre }}</span></a>
 					{% if film.new %}<span class="badge bg-success">New</span>{% endif %}
@@ -57,7 +57,7 @@
 								{{ vu_icone | raw }}
 							</button>
 						</div>
-						<div class="">
+						<div class="me-3">
 							{%  if app.user.wantToSee(film) %}
 								{% set follow_icone = "fa fa-bookmark fa-lg" %}
 								{% set follow_texte = "Supprimer ce film de votre liste à voir" %}
@@ -77,67 +77,71 @@
 							</button>
 						</div>
 					{% endif %}
-				</div>
-			</div>
-			<div class="card-body">
-				
-				<div class="d-flex">
-					<div class="me-3">
-						<input class="rating"
-							data-theme="krajee-fa"
-							data-language="fr"
-							data-display-only="true"
-							data-show-caption="false"
-							style="display:none;"
-							min=0
-							max=5
-							data-step=0.5
-							data-size="xs"
-							value="{{ film.note }}">
-					</div>
 					<div class="">
-						{% if film.nbComs %}
-							<a href="{{ path('videotheque_voirfilm', {'id': film.id}) }}#coms"><span class="badge bg-warning text-dark">{{ film.nbComs }} commentaire{% if film.nbComs > 1 %}s{% endif %}</span></a>
-						{% endif %}
+						<button class="btn text-primary" data-collapser-target="button" data-bs-toggle="collapse" data-bs-target="#collapse-id-{{ film.id }}"><i class="fa fa-chevron-circle-right fa-lg"></i></button>
 					</div>
 				</div>
+			</div>
+			<div class="collapse" id="collapse-id-{{ film.id }}" data-collapser-target="collapse">
+				<div class="card-body">
+					<div class="d-flex">
+						<div class="me-3">
+							<input class="rating"
+								data-theme="krajee-fa"
+								data-language="fr"
+								data-display-only="true"
+								data-show-caption="false"
+								style="display:none;"
+								min=0
+								max=5
+								data-step=0.5
+								data-size="sm"
+								value="{{ film.note }}">
+						</div>
+						<div class="">
+							{% if film.nbComs %}
+								<a href="{{ path('videotheque_voirfilm', {'id': film.id}) }}#coms"><span class="badge bg-warning text-dark">{{ film.nbComs }} commentaire{% if film.nbComs > 1 %}s{% endif %}</span></a>
+							{% endif %}
+						</div>
+					</div>
 
-				<table class="table">
-					<tbody>
-						<tr>
-							<th style="width: 9em;">Année</th>
-							<td>{{ film.annee | date('Y') }}</td>
-						<tr>
-						<tr>
-							<th>Réalisateur(s)</th>
-							<td>
-								{% for realisateur in film.realisateurs %}
-									<a href="{{ path('videotheque_listeparreal', {'id': realisateur.id}) }}"><span class="badge bg-info rounded-pill text-dark">{{ realisateur.nomComplet }}</span></a>
+					<table class="table">
+						<tbody>
+							<tr>
+								<th style="width: 9em;">Année</th>
+								<td>{{ film.annee | date('Y') }}</td>
+							<tr>
+							<tr>
+								<th>Réalisateur(s)</th>
+								<td>
+									{% for realisateur in film.realisateurs %}
+										<a href="{{ path('videotheque_listeparreal', {'id': realisateur.id}) }}"><span class="badge bg-info rounded-pill text-dark">{{ realisateur.nomComplet }}</span></a>
+									{% endfor %}
+								</td>
+							</tr>
+							<tr>
+								<th>Genre</th>
+								<td>
+								{% for genre in film.genres %}
+									<a href="{{ path('videotheque_listepargenre', {'id': genre.id}) }}"><span class="badge bg-success rounded-pill">{{ genre.name }}</span></a>
 								{% endfor %}
-							</td>
-						</tr>
-						<tr>
-							<th>Genre</th>
-							<td>
-							{% for genre in film.genres %}
-								<a href="{{ path('videotheque_listepargenre', {'id': genre.id}) }}"><span class="badge bg-success rounded-pill">{{ genre.name }}</span></a>
-							{% endfor %}
-							</td>
-						</tr>
-					</tbody>
-				</table>
+								</td>
+							</tr>
+						</tbody>
+					</table>
 
-			</div>
-			<div class="card-footer text-end">
-				{%  if film.authered is defined %}
-					Ajouté par 
-					{{ film.authered.username }}
-					{% if film.authered.activeNow %}
-						<i class="fa fa-user text-success" data-bs-toggle="tooltip" title="En ligne"></i>
-					{% else %}
-						<i class="fa fa-user-o text-secondary" data-bs-toggle="tooltip" title="Hors ligne"></i>
+				</div>
+				<div class="card-footer text-end">
+					{%  if film.authered is defined %}
+						Ajouté par 
+						{{ film.authered.username }}
+						{% if film.authered.activeNow %}
+							<i class="fa fa-user text-success" data-bs-toggle="tooltip" title="En ligne"></i>
+						{% else %}
+							<i class="fa fa-user-o text-secondary" data-bs-toggle="tooltip" title="Hors ligne"></i>
+						{% endif %}
 					{% endif %}
-				{% endif %}
+				</div>
 			</div>
 		</article>
 		{% endfor %}