Mise à niveau des menus

templates/base.html.twig

@@ -25,33 +25,37 @@
 				</div>
 			{% endfor %}
 		{% endfor %}
-		<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-			<a class="navbar-brand" href="{{ path('videotheque_liste') }}">Videothèque</a>
+		<nav class="navbar navbar-expand-lg 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>
+			<a class="navbar-brand" href="{{ path('videotheque_liste') }}">Videothèque</a>
 			<div class="collapse navbar-collapse" id="navbarSupportedContent">
 				{% if not is_granted('IS_AUTHENTICATED_REMEMBERED') %}
-					<ul class="navbar-nav mr-auto">
-						<li class="nav-item
-						{% if app.request.attributes.get('_route') == 'videotheque_liste' %}active{% endif %}">
-							<a class="nav-link" href="{{ path('videotheque_liste') }}">Liste des films<span class="sr-only">(current)</span></a>
+					<ul class="navbar-nav me-auto mb-2 mb-lg-0">
+						<li class="nav-item">
+							<a class="nav-link
+							{% if app.request.attributes.get('_route') == 'videotheque_liste' %}active{% endif %}"
+							href="{{ path('videotheque_liste') }}">Liste des films</a>
 						</li>
 					</ul>
 				{% endif %}
                 {%  if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
-				<ul class="navbar-nav mr-auto">
-					<li class="nav-item
-					{% if app.request.attributes.get('_route') == 'videothequepersonnelle_maliste' %}active{% endif %}">
-						<a class="nav-link" href="{{ path('videothequepersonnelle_maliste') }}">Ma liste à voir<span class="sr-only">(current)</span></a>
+				<ul class="navbar-nav me-auto mb-2 mb-lg-0">
+					<li class="nav-item">
+						<a class="nav-link 
+						{% if app.request.attributes.get('_route') == 'videothequepersonnelle_maliste' %}active{% endif %}"
+						href="{{ path('videothequepersonnelle_maliste') }}">Ma liste à voir</a>
 					</li>
-					<li class="nav-item
-                    {% if app.request.attributes.get('_route') == 'videotheque_liste' %}active{% endif %}">
-                        <a class="nav-link" href="{{ path('videotheque_liste') }}">Films<span class="sr-only">(current)</span></a>
+					<li class="nav-item">
+                        <a class="nav-link
+						{% if app.request.attributes.get('_route') == 'videotheque_liste' %}active{% endif %}"
+						href="{{ path('videotheque_liste') }}">Films</a>
 					</li>
-					<li class="nav-item
-                    {% if app.request.attributes.get('_route') == 'realisateur_liste' %}active{% endif %}">
-                        <a class="nav-link" href="{{ path('realisateur_liste') }}">Réalisateurs<span class="sr-only">(current)</span></a>
+					<li class="nav-item">
+                        <a class="nav-link
+						{% if app.request.attributes.get('_route') == 'realisateur_liste' %}active{% endif %}"
+						href="{{ path('realisateur_liste') }}">Réalisateurs</a>
 					</li>
 					{%  if is_granted('ROLE_MODERATEUR') %}
 						<ul class="navbar-nav">
@@ -72,6 +76,38 @@
 				</ul>
 				{% endif %}
 				
+				<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>
+				</ul>
+				<ul class="navbar-nav">
+					<li class="nav-item dropdown">
+						<a class="nav-link dropdown-toggle" href="#" id="navbarHelpDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+							<i class="fa fa-question-circle fa-lg"></i>
+						</a>
+						{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
+							<div class="dropdown-menu dropdown-menu-end p-4" aria-labelledby="navbarHelpDropdown" style="width: 400px;">
+									<p><i class="fa fa-bookmark fa-lg text-primary"></i> : Films que l'on souhaite voir. On les retrouve dans "Liste de mes films"</p>
+									<p><i class="fa fa-eye fa-lg text-success"></i> : Film qu'on a vu</p>
+									<p><i class="fa fa-eye-slash fa-lg text-secondary"></i> : Film qu'on n'a pas vu</p>
+							</div>
+						{% endif %}
+					</li>
+
+				</ul>
+				<ul class="navbar-nav">
+					<li class="nav-item dropdown">
+						<a class="nav-link dropdown-toggle" href="#" id="navbarBellDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+							<i class="fa fa-bell fa-lg"></i>
+						</a>
+						<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarBellDropdown" style="width: 400px;">
+							<div class="list-group px-4 py-3">
+								{{ afficheNouveautes() | raw }}
+							</div>
+						</div>
+					</li>
+				</ul>
 				
 				{#{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}#}
 				
@@ -94,47 +130,12 @@
 						</li>
 					</ul>
                 {% endif %}
-				<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>
-				</ul>
-				<ul class="navbar-nav">
-					<li class="nav-item dropdown">
-						<a class="nav-link dropdown-toggle" href="#" id="navbarBellDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-							<i class="fa fa-bell fa-lg"></i>
-						</a>
-						<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarBellDropdown" style="width: 400px;">
-							<div class="list-group px-4 py-3">
-								{{ afficheNouveautes() | raw }}
-							</div>
-						</div>
-					</li>
-				</ul>
 			</div>
 		</nav>
-		<div class="container-fluid">
+		<div>
 			<header>
-				<div class="grid">
-					<div class="g-col-8">
-						<h1>{% block titre %}{% endblock %}</h1>
-					</div>
-					<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>
-							</div>
-							<div class="card collapse" id="collapseAide">
-								<div class="card-body">
-									<p><i class="fa fa-bookmark fa-lg text-primary"></i> : Films que l'on souhaite voir. On les retrouve dans "Liste de mes films"</p>
-									<p><i class="fa fa-eye fa-lg text-success"></i> : Film qu'on a vu</p>
-									<p><i class="fa fa-eye-slash fa-lg text-secondary"></i> : Film qu'on n'a pas vu</p>
-								</div>
-							</div>
-						{% endif %}
-					</div>
-				</div>
-
+				<h1>{% block titre %}{% endblock %}</h1>
+				
 				<!-- Modal -->
 				<div class="modal fade" id="modalWindow" tabindex="-1" role="dialog" aria-labelledby="ModalWindow" aria-hidden="true">
 					<div class="modal-dialog modal-dialog-centered" role="document">
@@ -174,13 +175,18 @@
 				</div>
 
 			</header>
+
+
 			<main role="main">
 				{% block body %}{% endblock %}
 			</main>
+
+
 			<footer class="footer">
 				<div class="text-center fixed-bottom bg-white">
 					<span class="text-muted small">Cette application est développée en Symfony 5.3.3 - Code source disponible sur <a target="_blank" href="https://gogs.fdlibre.eu/sangfroid/films-symfony-4-2">Gogs</a><br>Licence <a target="_blank" href="http://www.wtfpl.net">WTFLP</a></span>
 				</div>
+				
                 {% block footer %}
                 {% endblock %}
 			</footer>

templates/security/login.html.twig

@@ -11,11 +11,11 @@
                     {% if error %}
                         <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                     {% endif %}
-                    <div class="form-group">
+                    <div class="input-group">
                         <label for="inputUsername" class="sr-only">Login</label>
                         <input type="text" value="{{ last_username }}" name="username" id="inputUsername" class="form-control" placeholder="Login" required autofocus>
                     </div>
-                    <div class="form-group">
+                    <div class="input-group">
                         <label for="inputPassword" class="sr-only">Mot de passe</label>
                         <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Mot de passe" required>
                     </div>

templates/videotheque/liste.html.twig

@@ -18,9 +18,11 @@
 			</div>
 			<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 class="my-2 my-lg-0" 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>
 			</div>
 			<div class="g-col-3 text-right">