- enables filters on mobile with minimize + maximize option

  for both explorer + hackathon
- fix results not found img margin
- code refactor

Fixes: #4199

app/assets/v2/css/dashboard.css

@@ -191,7 +191,6 @@ body {
 }
 
 @media (max-width: 991.98px) {
-
   .bounty_row {
     padding-left: 1rem;
     padding-right: 1rem;

app/assets/v2/css/sidebar_search.css

@@ -15,6 +15,11 @@
   font-size: 0.8rem;
 }
 
+#expand,
+#minimize {
+  display: none;
+}
+
 .close-icon {
   position: absolute;
   top: 13px;
@@ -87,11 +92,15 @@
 }
 
 @media (max-width: 991.98px) {
-  #sidebar_container form,
-  .search-history {
+  #sidebar_container form {
+    height: 0;
     display: none;
   }
 
+  #expand {
+    display: inherit;
+  }
+
   .search_bar div {
     padding-right: 15px !important;
   }

app/assets/v2/js/pages/dashboard.js

@@ -670,6 +670,24 @@ var resetFilters = function(resetKeyword) {
 
 $(document).ready(function() {
 
+  $('#expand').on('click', () => {
+    $('#expand').hide();
+    $('#minimize').show();
+    $('#sidebar_container form').css({
+      'height': 'auto',
+      'display': 'inherit'
+    });
+  });
+
+  $('#minimize').on('click', () => {
+    $('#minimize').hide();
+    $('#expand').show();
+    $('#sidebar_container form').css({
+      'height': 0,
+      'display': 'none'
+    });
+  });
+
   // Sort select menu
   $('#sort_option').selectmenu({
     select: function(event, ui) {

app/dashboard/templates/dashboard/index.html

@@ -78,7 +78,7 @@
           <div class="row loading justify-content-center align-items-center loading_img">
             <img src="{% static "v2/images/loading_v2.gif" %}">
           </div>
-          <div class="row nonefound" style="display:none;">
+          <div class="row nonefound mx-auto" style="display:none;">
             <img src="{% static "v2/images/shrug_bot.png" %}">
             <h3>{% trans "No results found." %}</h3>
             <p>{% trans "Please try another query" %}</p>
@@ -131,6 +131,8 @@ <h3 class="popover-header"></h3>
       $.fn.bootstrapModal = bootstrapModal
       {% if hackathon %}
         document.hackathon = "{{ hackathon.slug | safe }}";
+
+        if(location.hostname === 'localhost') $('#network-filter').show();
       {% endif %}
     </script>
     <script src="/dynamic/js/tokens_dynamic.js"></script>

app/dashboard/templates/dashboard/sidebar_search.html

@@ -29,6 +29,16 @@
       <div class="filter-tags"></div> <!-- Populate the filters -->
     </div>
   </div>
+
+  <p id="expand" class="text-right font-caption font-weight-semibold">
+    {% trans "Expand Filter" %}
+    <i class="fas fa-chevron-down"></i>
+  </p>
+  <p id="minimize" class="text-right font-caption font-weight-semibold">
+    {% trans "Minimize Filter" %}
+    <i class="fas fa-chevron-up"></i>
+  </p>
+
   <form>
 
     <div class="col my-1">

app/dashboard/templates/dashboard/sidebar_search_hackathon.html

@@ -24,9 +24,18 @@
   .sidebar_search {
     padding: 20px 3rem;
   }
+
 </style>
-<div class="sidebar_search font-body">
 
+<div class="sidebar_search font-body">
+  <p id="expand" class="text-right font-caption font-weight-semibold mb-0">
+    {% trans "Expand Filter" %}
+    <i class="fas fa-chevron-down"></i>
+  </p>
+  <p id="minimize" class="text-right font-caption font-weight-semibold">
+    {% trans "Minimize Filter" %}
+    <i class="fas fa-chevron-up"></i>
+  </p>
   <form>
     <div class="col">
       <div class="col-12 subheading">
@@ -62,8 +71,4 @@
       </div>
     </div>
   </form>
-</div>
-
-<script>
-  if(location.hostname === 'localhost') $('#network-filter').show();
-</script>
+</div>