浏览代码

retour en grille bootstrap

François Drouhard 3 年之前
父节点
当前提交
cebebe8441

+ 2 - 2
assets/styles/app.scss

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

+ 19 - 28
templates/base.html.twig

@@ -9,36 +9,27 @@
         <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
     </head>
     <body style="padding-top:5rem;padding-bottom:4rem;">
-		{% include 'flashbag.html.twig' %}
-		{% include 'navbar.html.twig' %}
-
-		<header>
-			{% include 'modal.html.twig' %}
-		</header>
-
-		<nav class="navbar">
-			<div class="nav-item">
-				<h1>{% block titre %}{% endblock %}</h1>
-			</div>
-			<div class="container-xxl d-flex align-items-md-center">
-				<form class="me-auto" action="{{ path('search_recherche') }}">
-					<div class="input-group">
-						<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>
+		<div class="container">
+			<header>
+				{% include 'flashbag.html.twig' %}
+				{% include 'navbar.html.twig' %}
+				{% include 'modal.html.twig' %}
+				<nav class="navbar">
+					<div class="nav-item">
+						<h1>{% block titre %}{% endblock %}</h1>
 					</div>
-				</form>
-			</div>
-		</nav>
-
-		
-			
-		<main role="main">
-			{% block body %}{% endblock %}
-		</main>
+					
+				</nav>
+			</header>			
+				
+			<main role="main">
+				{% block body %}{% endblock %}
+			</main>
 
-		<footer class="footer">
-			{% include 'footer.html.twig' %}
-		</footer>
+			<footer class="footer">
+				{% include 'footer.html.twig' %}
+			</footer>
+		</div>
 
 
 		{{ encore_entry_script_tags('app') }}

+ 1 - 1
templates/genre/modifier.html.twig

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

+ 12 - 2
templates/navbar.html.twig

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
     </button>
@@ -48,8 +48,18 @@
             {%  endif %}
         </ul>
         {% endif %}
-        
         <ul class="navbar-nav">
+            <li class="nav-item">
+                <form class="me-auto" action="{{ path('search_recherche') }}">
+                    <div class="input-group">
+                        <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>
+                    </div>
+                </form>
+            </li>
+        </ul>
+        <ul class="navbar-nav">
+        
             <li class="nav-item">
                 <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#modalWindow"><i class="fa fa-info-circle fa-lg text-light nav-link" aria-hidden="true"></i></a>
             <li>

+ 2 - 2
templates/profil/monprofil.html.twig

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

+ 1 - 1
templates/realisateur/modifier.html.twig

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

+ 3 - 3
templates/security/login.html.twig

@@ -5,8 +5,8 @@
 
 {% block body %}
     <div class="container">
-        <div class="grid">
-            <div class="g-col-md-4">
+        <div class="row">
+            <div class="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="grid">
+        <div class="row">
             <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>

+ 3 - 3
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="grid">
-            <div class="g-col-md-4">
+        <div class="row">
+            <div class="col-md-4">
                 <form method="post">
                     <div class="form-group">
                         <label for="username">Login</label>
@@ -30,7 +30,7 @@
                 </form>
             </div>
         </div>
-        <div class="grid">
+        <div class="row">
             <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>

+ 2 - 2
templates/security/register.html.twig

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

+ 9 - 9
templates/videotheque/form.html.twig

@@ -1,10 +1,10 @@
     {{ form_start(form, {'attr': {'class': ''}}) }}
     <div class="container-fluid">
-        <div class="grid">
-            <div class="g-col-3">
+        <div class="row">
+            <div class="col-md">
                 {% form_theme form 'bootstrap_5_horizontal_layout.html.twig' %}
 
-                <div class="form-group grid">
+                <div class="form-group">
                     {{ form_row(form.titre) }}
                     {{ form_row(form.annee) }}
                     {{ form_row(form.lien) }}
@@ -17,31 +17,31 @@
                     
                 </div>
             </div>
-            <div class="col">
+            <div class="col-md">
                 <div class="card">
                     <div class="card-header">
                         {{ form_label(form.genres, 'Genres') }}
                     </div>
                     <div class="card-body">
-                        <a href="#" id="add_genre" class="btn btn-link add-another-collection-widget" data-path="{{ path('videotheque_ajax_genres') }}" data-list-selector="#genre-fields-list">Ajouter un genre</a>
+                        <button id="add_genre" class="btn btn-link add-another-collection-widget" data-path="{{ path('videotheque_ajax_genres') }}" data-list-selector="#genre-fields-list">Ajouter un genre</button>
                         <ul id="genre-fields-list"
-                            data-prototype='<div id="App_film_genres___name__" class="input-group"><input type="text" id="App_film_genres___name___name" name="App_film[genres][__name__][name]" required="required" /></div>'
+                            data-prototype="{{ form_widget(form.genres.vars.prototype)|e }}"
                             data-widget-tags="{{ '<li class="list-group-item"></li>'|e }}"
                             data-widget-counter="{{ form.children|length }}">
                             {% for genreField in form.genres %}
                             <li class="list-group-item">
-                                {{ form_errors(genreField) }}
                                 {{ form_widget(genreField) }}
+                                {{ form_errors(genreField) }}
                             </li>
                             {% else %}
-                                {{ form_errors(form.genres) }}
                                 {{ form_widget(form.genres) }}
+                                {{ form_errors(form.genres) }}
                             {% endfor %}
                         </ul>
                     </div>
                 </div>
             </div>
-            <div class="col">
+            <div class="col-md">
                 <div class="card">
                     <div class="card-header">
                         {{ form_label(form.realisateurs, 'Réalisateurs') }}

+ 24 - 33
templates/videotheque/liste.html.twig

@@ -9,49 +9,39 @@
 {% endblock %}
 
 {% block body %}
-	<div class="container-xxs">
-		<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="g-col-6">
-				{# Des filtres ? #}
-				{# Ancien emplacement des recherches #}
-			</div>
-			<div class="g-col-3 text-right">
-				<p>Filtrer par film au dessus de
-				<input class="rating"
-					data-disabled="false"
-					data-show-clear="true"
-					data-show-caption="false"
-					data-theme="krajee-fa"
-					data-toggle="star-filter"
-					data-path="#tableFilms"
-					min=0
-					max=5
-					data-step=1
-					data-size="sm"
-					value="0">
-				</p>
-			</div>
-		</div>
+	<div class="row">
+		{% 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 %}
+		<p>Filtrer par film au dessus de
+		<input class="rating"
+			data-disabled="false"
+			data-show-clear="true"
+			data-show-caption="false"
+			data-theme="krajee-fa"
+			data-toggle="star-filter"
+			data-path="#tableFilms"
+			min=0
+			max=5
+			data-step=1
+			data-size="sm"
+			value="0">
+		</p>
 	</div>
-	<div class="">
+	<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:2em;"></th>
-						<th style="width:2em;"></th>
+						<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:8em;">Note moyenne</th>
-					<th style="width:4em;">Année</th>
+					<th style="width:5em;">Note</th>
+					<th style="width:5em;">Année</th>
 				</tr>
 			</thead>
 			<tbody id="tableFilms">
@@ -128,6 +118,7 @@
 								data-show-clear="false"
 								data-show-caption="false"
 								data-theme="krajee-fa"
+								style="display:none;"
 								min=0
 								max=5
 								data-step=0.5

+ 23 - 23
templates/videotheque/voirfilm.html.twig

@@ -49,16 +49,16 @@
 {% endblock %}
 
 {%  block body %}
-    <div class="grid">
-        <div class="g-col-sm-8">
-            <div class="grid">
-                <div class="g-col-sm-7">
+    <div class="row">
+        <div class="col-sm-8">
+            <div class="row">
+                <div class="col-sm-7">
                     <div class="card border-info">
                         <div class="card-header">
-                            <div class="grid">
-                                <h5 class="g-col-10">Fiche technique</h5>
+                            <div class="row">
+                                <h5 class="col-10">Fiche technique</h5>
                                 {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
-                                    <div class="g-col-2">
+                                    <div class="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="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">
+                            <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">
                                 {% 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="g-col-4">Genre</dt>
-                                <dd class="g-col-8">
+                                <dt class="col-4">Genre</dt>
+                                <dd class="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="g-col-4">Lien</dt>
-                                <dd class="g-col-8"><a href="{{ film.lien }}"><i class="fa fa-external-link"></i></a></dd>
+                                <dt class="col-4">Lien</dt>
+                                <dd class="col-8"><a href="{{ film.lien }}"><i class="fa fa-external-link"></i></a></dd>
                             {% endif %}
                             </dl>
                         </div>
                         <div class="card-footer">
-                            <dl class="grid">
-                                <dt class="g-col-4">Suivi par</dt>
-                                <dd class="g-col-8">
+                            <dl class="row">
+                                <dt class="col-4">Suivi par</dt>
+                                <dd class="col-8">
                                     {% for user in film.usersWantToView %}
                                         <span>{{ user.username }}</span>&nbsp;
                                     {% endfor %}
                                 </dd>
-                                <dt class="g-col-4">Vu par</dt>
-                                <dd class="g-col-8">
+                                <dt class="col-4">Vu par</dt>
+                                <dd class="col-8">
                                     {% for user in film.usersWhoSeen %}
                                         <span>{{ user.username }}</span>&nbsp;
                                     {% endfor %}
@@ -122,7 +122,7 @@
                     </div>
 
                 </div>
-                <div class="g-col-sm-5">
+                <div class="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="g-col-sm-4">
+        <div class="col-sm-4">
             <div class="card border-info">
                 <div class="card-header">
                     <h5>Commentaires</h5>