WIP: sidebar for searching and filtering resources

web/app/static/js/main.js

@@ -8,7 +8,7 @@
 # @acknowledgements:
 */
 
-// Dynamic HTML forms based on dropdown menu
+// dynamic HTML forms based on dropdown menu
 $("#resource_type").change(function() {
     var $ = jQuery.noConflict();
     var resource_type = $(this).val();
@@ -17,7 +17,17 @@ $("#resource_type").change(function() {
     });
 });
 
-// Testing a couple of ways to expand text
+// filtering resources by search
+$(document).ready(function(){
+  $("#searchInput").on("keyup", function() {
+    var value = $(this).val().toLowerCase();
+    $("#resource-boxes #resource").filter(function() {
+      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
+    });
+  });
+});
+
+// testing a couple of ways to expand text
 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
 var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
   return new bootstrap.Tooltip(tooltipTriggerEl)

web/app/static/styles/custom.css

@@ -190,6 +190,13 @@ body {
   justify-content: center
 }
 
+.search-filter-sidebar {
+  background-color: #efefef;
+  padding: 5px;
+  padding-top: 10px;
+  border: 1px solid #cdcdcd;
+}
+
 ol,
 ul {
   /*list-style-type: circle;*/

web/app/templates/resources.html

@@ -17,8 +17,15 @@
         </div>
     </div>
     <div class="row">
-    {% for resource in resources %}
-        <div class="col-md-4 col-sm-6 py-3">
+      <div class="col-md-4 col-lg-3 py-3">
+        <div class="search-filter-sidebar">
+          <input class="form-control" id="searchInput" type="text" placeholder="Search...">
+        </div>
+      </div>
+      <div class="col-md-8 col-lg-9">
+        <div id="resource-boxes" class="row">
+        {% for resource in resources %}
+        <div id="resource" class="col-md-4 col-sm-6 py-3">
         <div class="card text-dark bg-{{type}} mb-3">
             <div class="card-body">
                 {% if resource['type'] == 'tool' %}
@@ -55,6 +62,8 @@
             </div>
         </div>
         </div>
-    {% endfor %}
+        {% endfor %}
+        </div>
+      </div>
     </div>
 {% endblock %}