Passage en gridcss

assets/styles/app.scss

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

templates/base.html.twig

@@ -115,11 +115,11 @@
 		</nav>
 		<div class="container-fluid">
 			<header>
-				<div class="row">
-					<div class="col-8">
+				<div class="grid">
+					<div class="g-col-8">
 						<h1>{% block titre %}{% endblock %}</h1>
 					</div>
-					<div class="col-4">
+					<div class="g-col-4">
 						{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
 							<div class="text-right">
 							<a data-bs-toggle="collapse" role="button" href="#collapseAide" aria-expanded="false" aria-controls="collapseAide">Aide <i class="fa fa-chevron-down"></i></a>

templates/genre/modifier.html.twig

@@ -4,7 +4,7 @@
 {% block titre %}Genre - Modifier{% endblock %}
 
 {% block body %}
-	<div class="row">
+	<div class="grid">
 		<div class="col">
 			{{  form_start(form) }}
 			{{ form_rest(form) }}

templates/profil/monprofil.html.twig

@@ -5,8 +5,8 @@
 
 {% block body %}
     <div class="container">
-        <div class="row">
-            <div class="col-4">
+        <div class="grid">
+            <div class="g-col-4">
     {{ form(form) }}
     <a href="{{ path('videotheque_liste') }}" class="btn btn-link" role="button">Retour à l'accueil</a>
             </div>

templates/realisateur/modifier.html.twig

@@ -4,7 +4,7 @@
 {% block titre %}Réalisateurs - Modifier{% endblock %}
 
 {% block body %}
-	<div class="row">
+	<div class="grid">
 		<div class="col">
 			{{  form_start(form) }}
 			{{ form_rest(form) }}

templates/security/login.html.twig

@@ -5,8 +5,8 @@
 
 {% block body %}
     <div class="container">
-        <div class="row">
-            <div class="col-md-4">
+        <div class="grid">
+            <div class="g-col-md-4">
                 <form method="post">
                     {% if error %}
                         <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
@@ -39,7 +39,7 @@
                 </form>
             </div>
         </div>
-        <div class="row">
+        <div class="grid">
             <div class="hr">
                 <p>Pas de compte ? <a href="{{ path('security_register') }}">S'enregistrer</a></p>
                 <p>Mot de passe oublié ? <a href="{{ path('security_envoyertoken') }}">Récupérer mot de passe</a></p>

templates/security/login.html.twig.save

@@ -12,8 +12,8 @@
 
     {# Le formulaire, avec URL de soumission vers la route « login_check » comme on l'a vu #}
     <div class="container">
-        <div class="row">
-            <div class="col-md-4">
+        <div class="grid">
+            <div class="g-col-md-4">
                 <form method="post">
                     <div class="form-group">
                         <label for="username">Login</label>
@@ -30,7 +30,7 @@
                 </form>
             </div>
         </div>
-        <div class="row">
+        <div class="grid">
             <div class="">
                 <p>Pas de compte ? <a href="{{ path('security_register') }}">S'enregistrer</a></p>
                 <p>Mot de passe oublié ? <a href="{{ path('security_envoyertoken') }}">Récupérer mot de passe</a></p>

templates/security/register.html.twig

@@ -5,8 +5,8 @@
 
 {% block body %}
     <div class="container">
-        <div class="row">
-            <div class="col-4">
+        <div class="grid">
+            <div class="g-col-4">
                 {{ form(form) }}
             </div>
         </div>

templates/videotheque/form.html.twig

@@ -1,10 +1,10 @@
     {{ form_start(form, {'attr': {'class': ''}}) }}
     <div class="container-fluid">
-        <div class="row">
-            <div class="col-3">
+        <div class="grid">
+            <div class="g-col-3">
                 {% form_theme form 'bootstrap_5_horizontal_layout.html.twig' %}
 
-                <div class="form-group row">
+                <div class="form-group grid">
                     {{ form_row(form.titre) }}
                     {{ form_row(form.annee) }}
                     {{ form_row(form.lien) }}

templates/videotheque/liste.html.twig

@@ -10,20 +10,20 @@
 
 {% block body %}
 	<div class="container-fluid">
-		<div class="row">
-			<div class="col-3">
+		<div class="grid">
+			<div class="g-col-3">
 			{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
 			<p><a class="btn btn-primary" role="button" href="{{ path('videotheque_ajouter') }}"><i class="fa fa-plus-square fa-lg"></i> Ajouter un film</a></p>
 			{% endif %}
 			</div>
-			<div class="col-6">
+			<div class="g-col-6">
 				{# Des filtres ? #}
 				<form class="form-inline my-2 my-lg-0" action="{{ path('search_recherche') }}">
 					<input class="form-control mr-sm-2" name="q" type="text" placeholder="Rechercher" aria-label="Rechercher">
 					<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Go</button>
 				</form>
 			</div>
-			<div class="col-3 text-right">
+			<div class="g-col-3 text-right">
 				<p>Filtrer par film au dessus de
 				<input class="rating"
 					data-disabled="false"

templates/videotheque/voirfilm.html.twig

@@ -49,16 +49,16 @@
 {% endblock %}
 
 {%  block body %}
-    <div class="row">
-        <div class="col-sm-8">
-            <div class="row">
-                <div class="col-sm-7">
+    <div class="grid">
+        <div class="g-col-sm-8">
+            <div class="grid">
+                <div class="g-col-sm-7">
                     <div class="card border-info">
                         <div class="card-header">
-                            <div class="row">
-                                <h5 class="col-10">Fiche technique</h5>
+                            <div class="grid">
+                                <h5 class="g-col-10">Fiche technique</h5>
                                 {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
-                                    <div class="col-2">
+                                    <div class="g-col-2">
                                         <a data-bs-toggle="tooltip" title="Modifier la fiche du film" href="{{ path('videotheque_modifier', {'id': film.id}) }}"><i class="fa fa-edit fa-lg"></i></a>
                                         {% if is_granted('ROLE_ADMIN') %}<a href="{{ path('videotheque_supprimer', {'id': film.id})  }}"><i class="fa fa-trash fa-lg", style="color:Tomato;"></i></a>{% endif %}
 
@@ -67,37 +67,37 @@
                             </div>
                         </div>
                         <div class="card-body">
-                            <dl class="row">
-                                <dt class="col-4">Année</dt>
-                                <dd class="col-8">{{ film.annee | date('Y') }}</dd>
-                                <dt class="col-4">Réalisateur(s)</dt>
-                                <dd class="col-8">
+                            <dl class="grid">
+                                <dt class="g-col-4">Année</dt>
+                                <dd class="g-col-8">{{ film.annee | date('Y') }}</dd>
+                                <dt class="g-col-4">Réalisateur(s)</dt>
+                                <dd class="g-col-8">
                                 {% for realisateur in film.realisateurs %}
                                     <a href="{{ path('videotheque_listeparreal', {'id': realisateur.id}) }}"><span class="badge bg-info">{{ realisateur.nomComplet }}</span></a>
                                 {% endfor %}
                                 </dd>
-                                <dt class="col-4">Genre</dt>
-                                <dd class="col-8">
+                                <dt class="g-col-4">Genre</dt>
+                                <dd class="g-col-8">
                                 {% for genre in film.genres %}
                                     <a href="{{ path('videotheque_listepargenre', {'id': genre.id}) }}"><span class="badge bg-info">{{ genre.name }}</span></a>
                                 {% endfor %}
                                 </dd>
                                 {% 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>
+                                <dt class="g-col-4">Lien</dt>
+                                <dd class="g-col-8"><a href="{{ film.lien }}"><i class="fa fa-external-link"></i></a></dd>
                             {% endif %}
                             </dl>
                         </div>
                         <div class="card-footer">
-                            <dl class="row">
-                                <dt class="col-4">Suivi par</dt>
-                                <dd class="col-8">
+                            <dl class="grid">
+                                <dt class="g-col-4">Suivi par</dt>
+                                <dd class="g-col-8">
                                     {% for user in film.usersWantToView %}
                                         <span>{{ user.username }}</span>&nbsp;
                                     {% endfor %}
                                 </dd>
-                                <dt class="col-4">Vu par</dt>
-                                <dd class="col-8">
+                                <dt class="g-col-4">Vu par</dt>
+                                <dd class="g-col-8">
                                     {% for user in film.usersWhoSeen %}
                                         <span>{{ user.username }}</span>&nbsp;
                                     {% endfor %}
@@ -122,7 +122,7 @@
                     </div>
 
                 </div>
-                <div class="col-sm-5">
+                <div class="g-col-sm-5">
                     <div class="card border-info">
                         <div class="card-header">
                             <h5>Bande Annonce</h5>
@@ -140,7 +140,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-sm-4">
+        <div class="g-col-sm-4">
             <div class="card border-info">
                 <div class="card-header">
                     <h5>Commentaires</h5>