REDMINE_ISSUE-14461 | Responsive - Filtre écrasés sur page des projets

src/components/Projects/ProjectsMenu.vue

@@ -171,12 +171,28 @@ export default {
         content[0].style.maxHeight = content[0].scrollHeight + 5 + 'px';
       }
     });
+
+    window.addEventListener('resize', this.handleResize);
   },
 
   methods: {
     ...mapActions('projects', [
       'SEARCH_PROJECTS'
-    ])
+    ]),
+
+    handleResize() {
+      if (window.innerWidth <= 700) {
+        const icon = document.getElementsByClassName('caret');
+        icon[0].classList.toggle('right');
+        const content = document.getElementsByClassName('filters');
+        content[0].classList.toggle('hidden');
+        if (content[0].style.maxHeight){
+          content[0].style.maxHeight = null;
+        } else {
+          content[0].style.maxHeight = content[0].scrollHeight + 5 + 'px';
+        }
+      }
+    }
   }
 };
 </script>
@@ -194,9 +210,10 @@ export default {
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-end;
-	align-items: flex-end;
+	align-items: center;
+  margin-bottom: 1rem;
 	.accordion {
-		width: fit-content;
+		width: fit-content !important;
 		.collapsible-filters {
 			font-size: 1.25em;
 			padding-right: 0;
@@ -246,4 +263,19 @@ export default {
 		border: none;
 	}
 }
+
+@media screen and (max-width: 700px) {
+  .filters-container {
+
+    .filters {
+      display: flex;
+      flex-direction: column;
+      .transition-properties(max-height 0.2s ease-out;);
+
+      .item {
+        width: 100%;
+      }
+    }
+  }
+}
 </style>