Browse Source

On avait oublié la taille du formulaire

Sangfroid 5 months ago
parent
commit
29ed6c84ec
3 changed files with 12 additions and 2 deletions
  1. 6 0
      assets/controllers/resize_controller.js
  2. 5 1
      assets/styles/app.css
  3. 1 1
      assets/styles/forms.css

+ 6 - 0
assets/controllers/resize_controller.js

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

+ 5 - 1
assets/styles/app.css

@@ -164,7 +164,7 @@ main h2 a:hover {
 }
 
 .resize {
-  position: absolute;
+  position: fixed;
   bottom: 50px;
   right: 50px;
 }
@@ -173,6 +173,10 @@ main h2 a:hover {
   max-width: 90vw;
 }
 
+.size-max-form {
+  max-width: 85vw;
+}
+
 @media screen and (max-width: 1400px) {
   #header {
     height: 250px;

+ 1 - 1
assets/styles/forms.css

@@ -1,6 +1,6 @@
 /* Style global du formulaire */
 form {
-    max-width: 600px;
+    max-width: 850px;
     margin: 50px auto;
     padding: 20px;
     background-color: #f9f9f9;