Merge branch 'integration/add-accordion' into 'master'

update: Add accordion on more criteria form

See merge request !135

src/includes/mentor/resources/list.pug

@@ -128,6 +128,7 @@ div.block_list
                     widget-review.status='cs-resource-status',
                     search-widget-header_criterias="cs-section_header"
                     search-label-header_criterias="More criterias"
+                    search-class-header_criterias="accordion-form active"
 
                     search-label-format=`${data.Format}`
                     search-label-publication_year=`${data.DatePublication}`

src/scripts/coopstarter.js

@@ -293,6 +293,27 @@ function manageAccordionByStep(){
   }
 }
 
+/**
+ * Manage the accordion "more criteria"
+ */
+function manageAccordionMoreCriteria(){
+  var acc = document.getElementsByClassName("accordion-form");
+
+  for (let item of acc) {
+    item.addEventListener("click", function() {
+      this.classList.toggle("active");
+      
+      var panelForm = this.nextElementSibling;
+      if (!this.classList.contains("active")) {
+        panelForm.style.maxHeight = "0px";
+        refreshPagination();
+      } else {
+        panelForm.style.maxHeight = panelForm.scrollHeight + "px";
+      }
+    });
+  }
+}
+
 /**
  * Manage the accordion for requested resources in the mentor dashboard
  */
@@ -894,6 +915,8 @@ jQuery(document).ready(function($) {
   window.setTimeout(() => {
     //Manage accordion by step
     manageAccordionByStep();
+    //manage accordion for "More criteria"
+    manageAccordionMoreCriteria();
 
     //Init the form file behaviour
     // initFileUpload();

src/styles/index.scss

@@ -1482,6 +1482,31 @@ sib-multiple label, cs-resource-status[name="review.status"]+*{
           max-height: 1500px;
       }
 }
+
+/* Enable the accordion of "more criteria form"*/
+sib-set-default[name="more_criterias_hidden"]{
+    max-height: 235px;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+}
+
+.accordion-form h2{
+    position : relative
+}
+.accordion-form h2:after {
+    font-family: "Font Awesome 5 pro";
+    content: "\f078";
+    font-weight: 900;
+    right: 0;
+    position: absolute;
+    transform-origin: .7rem .7rem;
+    transform: rotate(0);
+}
+
+.accordion-form.active h2:after {
+    transform: rotate(-90deg);
+}
+
 /*XXXXXXXXXXXXXXXXXXXXX DETAIL RESSOURCES XXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
 .format_type p{
     border-radius: 5px;