MSFD data explorer UI improvements

src/wise/msfd/pt/wise-macros.pt

@@ -29,7 +29,7 @@
         </li>
       </tal:rep>
     </ul>
-    <!-- <div class="visible-xs" style="clear: both;"> -->
+
     <div class="visible-xs">
       <div class="article-select">
         <div tal:content="view/tab_select_label | string:Select ${tab_type}:">
@@ -60,12 +60,20 @@
       About MSFD reporting data explorer
       <img src="/marine/++api++/++resource++msfd/images/msfd-mini.png">
     </a> -->
-    <div>
+    <div class="msfd-heading">
       <h2 class="main-title" tal:content="structure view/main_title">Article X</h2>
       <div class="main-subtitle" tal:content="structure view/subtitle">
         Subtitle here
       </div>
     </div>
+
+    <div class="active-filters-section">
+      <div class="active-filters-header">
+        <h4 class="active-filters-title">Active filters</h4>
+        <i class="fa fa-chevron-down" aria-hidden="true"></i>
+      </div>
+      <div class="active-filters-list"></div>
+    </div>
   </div>
 </metal:macro>
 
@@ -76,7 +84,6 @@
     <img src="/marine/++api++/++resource++msfd/images/msfd-mini.png">
   </a>
 
-  <!-- <div class="visible-xs" style="clear: both;"> -->
   <div class="article-select" tal:define="tab_type view/tabs_type | string:article">
     <label tal:content="view/tab_select_label | string:Select ${tab_type}:">
       Select article/tab:

src/wise/msfd/search/pt/item-display-form.pt

@@ -87,4 +87,4 @@
       <div tal:content="structure subform">subform here</div>
     </div>
   </tal:def>
-</div>
+</div>