Suppression du tableau - Passage en Card

assets/app.js

@@ -8,6 +8,8 @@ import 'font-awesome/css/font-awesome.css';
 import 'jquery-ui/themes/base/all.css';
 import 'jquery-ui/ui/widgets/autocomplete';
 import 'bootstrap-star-rating';
+import 'bootstrap-star-rating/locales/fr'
+import 'bootstrap-star-rating/js/locales/fr'
 import 'bootstrap-star-rating/css/star-rating.css';
 import 'bootstrap-star-rating/themes/krajee-fa/theme';
 import 'bootstrap-star-rating/themes/krajee-fa/theme.css';

assets/js/filtre.js

@@ -2,7 +2,7 @@
     $.fn.filtre = function () {
         let value = $(this).val().toLowerCase();
         let target = $(this).data('target');
-        $(target + " tr").filter(function () {
+        $(target + " article").filter(function () {
             $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
         });
     };
@@ -15,9 +15,8 @@
             $(this).on("change", function(e) {
                 let value = $(this).val();
                 let target = $(this).data('path');
-                console.log(value);
-                $(target + " tr").filter(function () {
-                    $(this).toggle($("td input.rating", this).val() >= value);
+                $(target + " article").filter(function () {
+                    $(this).toggle($("input.rating", this).val() >= value);
                 });
             });
         });

assets/styles/app.scss

@@ -1,4 +1,6 @@
 $enable-grid-classes: true;
 $enable-cssgrid: false;
+$yellow: #fde16d;
+
+@import "~bootstrap/scss/bootstrap";
 
-@import "~bootstrap/scss/bootstrap";

templates/videotheque/liste.html.twig

@@ -16,6 +16,7 @@
 		<p>Filtrer par film au dessus de
 		<input class="rating"
 			data-disabled="false"
+			data-language="fr"
 			data-show-clear="true"
 			data-show-caption="false"
 			data-theme="krajee-fa"
@@ -29,108 +30,112 @@
 			value="0">
 		</p>
 	</div>
-	<div class="row">
-		<table class="table table-bordered table-hover table-sm align-middle">
-			<thead class="">
-				<tr>
-					{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
-						<th style="width:1em;"></th>
-						<th style="width:1em;"></th>
-						<th>Ajouté par</th>
-					{% endif %}
-					<th>Titre</th>
-					<th>Genre</th>
-					<th>Réalisateur</th>
-					<th style="width:5em;">Note</th>
-					<th style="width:5em;">Année</th>
-				</tr>
-			</thead>
-			<tbody id="tableFilms">
-				{% for film in listeFilms %}
-				<tr data-auteur="{{ film.authered.nomComplet }}">
-					{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
-						<td>
-							{%  if app.user.wantToSee(film) %}
-								{% set follow_icone = "fa fa-bookmark fa-lg" %}
-								{% set follow_texte = "Supprimer ce film de votre liste à voir" %}
-							{% else %}
-								{% set follow_icone = "fa fa-bookmark-o text-secondary fa-lg" %}
-								{% set follow_texte = "Ajouter ce film à votre liste à voir" %}
-							{% endif %}
-							<a href="#" data-fonction="switch"
-										data-icone-actif="fa fa-bookmark fa-lg"
-										data-icone-inactif="fa fa-bookmark-o text-secondary fa-lg"
-										data-path="{{ path('maliste_modifier_a_voir') }}"
-										data-bs-toggle="tooltip"
-										title="{{ follow_texte }}"
-										data-content="{{ film.id }}">
-								<i class="{{ follow_icone }}"></i>
-							</a>
-						</td>
-						<td>
-							{%  if app.user.haveSeen(film) %}
-								{% set vu_icone = '<i class="fa fa-eye fa-lg text-success"></i>' %}
+
+
+	<section id="tableFilms">
+		
+		{% for film in listeFilms %}
+		<article class="card border-primary mb-4" data-auteur="{{ film.authered.nomComplet }}">
+			<div class="card-header d-flex">
+				{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
+					<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" %}
+						{% else %}
+							{% set follow_icone = "fa fa-bookmark-o text-secondary fa-lg" %}
+							{% set follow_texte = "Ajouter ce film à votre liste à voir" %}
+						{% endif %}
+						<button		class="btn text-primary"
+									data-fonction="switch"
+									data-icone-actif="fa fa-bookmark fa-lg"
+									data-icone-inactif="fa fa-bookmark-o text-secondary fa-lg"
+									data-path="{{ path('maliste_modifier_a_voir') }}"
+									data-bs-toggle="tooltip"
+									title="{{ follow_texte }}"
+									data-content="{{ film.id }}">
+							<i class="{{ follow_icone }}"></i>
+						</button>
+					</div>
+					<div class="">
+						{%  if app.user.haveSeen(film) %}
+							{% set vu_icone = '<i class="fa fa-eye fa-lg text-success"></i>' %}
+						{% else %}
+							{% set vu_icone = '<i class="fa fa-eye-slash fa-lg text-secondary"></i>' %}
+						{% endif %}				
+						<button     class="btn"
+									data-fonction="switch"
+									data-path="{{ path('maliste_modifier_vus') }}"
+									data-content="{{ film.id }}"
+									data-icone-actif = "fa fa-eye fa-lg text-success"
+									data-icone-inactif = "fa fa-eye-slash fa-lg text-secondary">
+							{{ vu_icone | raw }}
+						</button>
+					</div>
+					<div class="ms-auto">
+						{%  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 %}
-								{% set vu_icone = '<i class="fa fa-eye-slash fa-lg text-secondary"></i>' %}
-							{% endif %}				
-							<a href="#" data-fonction="switch"
-										data-path="{{ path('maliste_modifier_vus') }}"
-										data-content="{{ film.id }}"
-										data-icone-actif = "fa fa-eye fa-lg text-success"
-										data-icone-inactif = "fa fa-eye-slash fa-lg text-secondary">
-								{{ vu_icone | raw }}
-							</a>
-						</td>
-						<td>
-							{%  if film.authered is defined %}
-								{% 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 %}
-								{{ film.authered.username }}
+								<i class="fa fa-user-o text-secondary" data-bs-toggle="tooltip" title="Hors ligne"></i>
 							{% endif %}
-						</td>
-					{% endif %}
-					<td>
-						<a 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 %}
-						{% if film.nbComs %}<span class="badge bg-warning rounded-pill" data-bs-toggle="tooltip" title="{{ film.nbComs }} commentaire(s)">{{ film.nbComs }}</span>{% endif %}
+						{% endif %}
+					</div>
+				{% endif %}
+			</div>
+			<div class="card-body">
+				<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 %}
+				</h3>
+				<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"
+							min=0
+							max=5
+							data-step=0.5
+							data-size="xs"
+							value="{{ film.note }}">
+					</div>
+					<div class="">
+						{% if film.nbComs %}
+							<div class="badge bg-warning text-dark">{{ film.nbComs }} commentaire{% if film.nbComs > 1 %}s{% endif %}</div>
+						{% endif %}
+					</div>
+				</div>
 
-					</td>
-					<td>
-						{% if film.genres is defined %}
+				<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-secondary">{{ genre.name }}</span></a>
+								<a href="{{ path('videotheque_listepargenre', {'id': genre.id}) }}"><span class="badge bg-success rounded-pill">{{ genre.name }}</span></a>
 							{% endfor %}
-						{% endif %}
-					</td>
-					<td>
-					{% if film.realisateurs is defined %}
-						{%  for realisateur in film.realisateurs %}
-							<a href="{{ path('videotheque_listeparreal', {"id": realisateur.id}) }}"><span class="badge bg-info">{{ realisateur.nomComplet }}</span></a>
-						{%  endfor %}
-					{% endif %}
-					</td>
-					<td>
-						{% if film.note > 0 %}
-							<input class="rating"
-								data-disabled="true"
-								data-show-clear="false"
-								data-show-caption="false"
-								data-theme="krajee-fa"
-								style="display:none;"
-								min=0
-								max=5
-								data-step=0.5
-								data-size="xs"
-								value="{{ film.note }}">
-						{% endif %}
-					</td>
-					<td>{{ film.annee | date('Y') }}</td>
-				</tr>
-				{% endfor %}
-			</tbody>
-		</table>
-	</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+
+			</div>
+		</article>
+		{% endfor %}
+	</section>
 {% endblock %}

templates/videotheque/voirfilm.html.twig

@@ -86,7 +86,7 @@
                                 {% if film.lien is not null %}
                                 <dt class="col-4">Lien</dt>
                                 <dd class="col-8"><a href="{{ film.lien }}"><i class="fa fa-external-link"></i></a></dd>
-                            {% endif %}
+                                {% endif %}
                             </dl>
                         </div>
                         <div class="card-footer">