From eaa5df088ab80759cd9fee82840eef0e327bafc4 Mon Sep 17 00:00:00 2001
From: Aditya Anand <aditya.anandmc@gmail.com>
Date: Tue, 23 Apr 2019 00:27:05 +0530
Subject: [PATCH] - enables filters on mobile with minimize + maximize option  
 for both explorer + hackathon - fix results not found img margin - code
 refactor

Fixes: https://github.com/gitcoinco/web/issues/4199
---
 app/assets/v2/css/dashboard.css                |  1 -
 app/assets/v2/css/sidebar_search.css           | 13 +++++++++++--
 app/assets/v2/js/pages/dashboard.js            | 18 ++++++++++++++++++
 app/dashboard/templates/dashboard/index.html   |  4 +++-
 .../templates/dashboard/sidebar_search.html    | 10 ++++++++++
 .../dashboard/sidebar_search_hackathon.html    | 17 +++++++++++------
 6 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/app/assets/v2/css/dashboard.css b/app/assets/v2/css/dashboard.css
index b4e3f3f8f6f..2562aa33fb8 100644
--- a/app/assets/v2/css/dashboard.css
+++ b/app/assets/v2/css/dashboard.css
@@ -191,7 +191,6 @@ body {
 }
 
 @media (max-width: 991.98px) {
-
   .bounty_row {
     padding-left: 1rem;
     padding-right: 1rem;
diff --git a/app/assets/v2/css/sidebar_search.css b/app/assets/v2/css/sidebar_search.css
index a43c6c65796..552ef18058d 100644
--- a/app/assets/v2/css/sidebar_search.css
+++ b/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;
   }
diff --git a/app/assets/v2/js/pages/dashboard.js b/app/assets/v2/js/pages/dashboard.js
index d8b088c6da6..c8662a2c1ba 100644
--- a/app/assets/v2/js/pages/dashboard.js
+++ b/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) {
diff --git a/app/dashboard/templates/dashboard/index.html b/app/dashboard/templates/dashboard/index.html
index 9b5b905d76d..bf703e42e88 100644
--- a/app/dashboard/templates/dashboard/index.html
+++ b/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>
diff --git a/app/dashboard/templates/dashboard/sidebar_search.html b/app/dashboard/templates/dashboard/sidebar_search.html
index e6e8751020e..eb51a08ea3f 100644
--- a/app/dashboard/templates/dashboard/sidebar_search.html
+++ b/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">
diff --git a/app/dashboard/templates/dashboard/sidebar_search_hackathon.html b/app/dashboard/templates/dashboard/sidebar_search_hackathon.html
index 90a82eab8cc..65bc0420a14 100644
--- a/app/dashboard/templates/dashboard/sidebar_search_hackathon.html
+++ b/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>
\ No newline at end of file
+</div>
\ No newline at end of file