Bouton pour agrandir la fenêtre quand on édite

assets/app.js

@@ -7,7 +7,7 @@ import './bootstrap.js';
  */
 
 
+import './styles/buttons.css';
 import './styles/app.css';
 import './styles/forms.css';
-import './styles/badges.css';
-import './styles/buttons.css';
+import './styles/badges.css';

assets/controllers/resize_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    connect() {
+        const main = document.querySelector('main')
+        if (sessionStorage.getItem('size')) {
+            main.classList.toggle('size-max', true)
+        } else {
+            main.classList.toggle('size-max', false)
+        }
+    }
+    
+    resize() {
+        const main = document.querySelector('main')
+        if (main.classList.toggle('size-max')) {
+            sessionStorage.setItem('size', 'size-max')
+        } else {
+            sessionStorage.removeItem('size')
+        }
+    }
+}

assets/styles/app.css

@@ -98,6 +98,7 @@ main {
   padding: 0 30px;
   border-radius: 15px;
   min-height: 70vh;
+  transition: all 0.2s ease;
 }
 
 img, .contenu-flex {
@@ -162,11 +163,15 @@ main h2 a:hover {
   width: 100%;
 }
 
+.resize {
+  position: absolute;
+  bottom: 50px;
+  right: 50px;
+}
 
-
-
-
-
+.size-max {
+  max-width: 90vw;
+}
 
 @media screen and (max-width: 1400px) {
   #header {
@@ -175,6 +180,10 @@ main h2 a:hover {
 }
 
 @media screen and (max-width: 900px) {
+  .resize {
+    display: none;
+  }
+
   #header.big {
     height: 100vh;
   }

assets/styles/buttons.css

@@ -39,4 +39,13 @@
   .btn-red:hover {
     background-color: #c82333; /* Rouge plus foncé au survol */
   }
+  
+  /* Bouton gris  */
+  .btn-gray {
+    background-color: #8f8f8f; /* Gris */
+  }
+  
+  .btn-gray:hover {
+    background-color: #494949; /* Gris plus foncé */
+  }
   

templates/article/_bouton_agrandir.html.twig

@@ -0,0 +1 @@
+<div data-controller="resize" data-action="click->resize#resize" class="btn btn-gray resize">Agrandir</div>

templates/article/edit.html.twig

@@ -10,4 +10,5 @@
     <a href="{{ path('app_article_index') }}">Retour à la liste</a>
 
     {{ include('article/_delete_form.html.twig') }}
+    {{ include('article/_bouton_agrandir.html.twig') }}
 {% endblock %}

templates/article/index.html.twig

@@ -10,10 +10,10 @@
         <thead>
             <tr>
                 <th>Id</th>
-                <th>Title</th>
-                <th>PublicationDate</th>
+                <th>Titre</th>
+                <th>Date de publication</th>
                 <th>Etat</th>
-                <th>actions</th>
+                <th>Actions</th>
             </tr>
         </thead>
         <tbody>
@@ -46,4 +46,7 @@
     <a class="btn btn-blue" href="{{ path('app_article_new') }}">Créer un nouvel article</a>
 
 </div>
+
+{{ include('article/_bouton_agrandir.html.twig') }}
+
 {% endblock %}

templates/article/new.html.twig

@@ -8,4 +8,6 @@
     {{ include('article/_form.html.twig') }}
 
     <a href="{{ path('app_article_index') }}">Retour à la liste</a>
+    
+    {{ include('article/_bouton_agrandir.html.twig') }}
 {% endblock %}

templates/article/show.html.twig

@@ -35,4 +35,5 @@
     <a href="{{ path('app_article_edit', {'id': article.id}) }}" class="btn btn-blue">Editer</a>
 
     {{ include('article/_delete_form.html.twig') }}
+    {{ include('article/_bouton_agrandir.html.twig') }}
 {% endblock %}

templates/view/index.html.twig

@@ -18,4 +18,8 @@
 
 <a href="{{ path('app_index')}}">Retour au blog</a>
 
+{% if is_granted('edit', article) %}
+<a href="{{ path('app_article_edit', {'id': article.id}) }}">Modifier cet article</a>
+{% endif %}
+
 {% endblock %}