Merge pull request #62 from econ-ark/materials-filter-update

Merging with master branch. This PR addresses intended changes from first comment.

_layouts/materials.html

@@ -8,7 +8,7 @@
   The following form filters and update content in the table below.
 </p>
 
-<form class="tag-filter">
+<form class="tag-filter" id="tag-filter">
   <div class="form-group">
     <label for="tagSelect">Tags</label>
     <select name="tagSelect" id="tagSelect" placeholder="Select tags" multiple>
@@ -17,8 +17,8 @@
 
   <div class="form-group">
     <label for="search" class="visuallyhidden">Search</label>
-    <button class="submit-btn" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
-    <input name="search" id="search" placeholder="Search" class="input-search"></input>    
+    <button class="submit-btn" id="submit-btn" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
+    <input name="search" type="search" id="search" placeholder="Search" class="input-search" />
   </div>
 </form>
 
@@ -104,11 +104,16 @@ <h2 class="title"><a href="{{ material.url }}">
       const row_authors = [...row.querySelectorAll("ul.authors li")]
       const row_abstract = row.querySelector("p.summary").innerText;
 
+      //console.log(row_authors);
+
       const tag_matches = isSuperset(row_tags, formData.getAll("tagSelect"));
       const title_matches = row_title.toLowerCase().includes(formData.get("search").toLowerCase());
       const author_matches = row_authors.some((li) => {
-        return li.innerText.toLowerCase().includes(formData.get("search"))
+        return li.innerText.toLowerCase().includes(formData.get("search").toLowerCase())
       });
+
+      console.log(author_matches);
+
       const abstract_matches = row_abstract.toLowerCase().includes(formData.get("search").toLowerCase());
       //console.log(title_matches, author_matches, abstract_matches);
       if (tag_matches && (title_matches || author_matches || abstract_matches)) {
@@ -117,9 +122,21 @@ <h2 class="title"><a href="{{ material.url }}">
         row.style.display = 'none';
       }
     });
+    document.documentElement.scrollTop = 0;
     return false;
   });
 
+  function insertTextAndSubmit(event) {
+    var textValue = event.target.textContent;
+    document.getElementById('search').value = textValue;
+    document.getElementById('submit-btn').click();
+  }
+
+  var listItems = document.querySelectorAll('.authors li');
+  listItems.forEach(function(li) {
+    li.addEventListener('click', insertTextAndSubmit);
+  });
+
   document.addEventListener("DOMContentLoaded", () => {
     const choices = new Choices(tagSelect, {
       allowHTML: true,
@@ -130,25 +147,19 @@ <h2 class="title"><a href="{{ material.url }}">
       removeItemButton: true,
     });
 
-    const tabLinks = document.querySelectorAll('.tabs-toggles li a');
-    for (var i = 0; i < tabLinks.length; i++) {
-      tabLinks[i].addEventListener('click', function (e) {
-        e.preventDefault();
-        for (var j = 0; j < tabLinks.length; j++) {
-          tabLinks[j].classList.remove('active');
-          choices.removeActiveItemsByValue(tabLinks[j].innerText);
-        }
-        this.classList.add('active');
-
-        if (this.innerText != 'All') {
-          choices.setChoiceByValue(this.innerText);
-          //console.log(this)
-        }
-        let evt = document.createEvent("Event");
-        evt.initEvent("change", true, true);
-        tagSelect.dispatchEvent(evt)
-      });
+    function addTagToFilter(event) {
+      var textValue = event.target.textContent;
+      choices.setChoiceByValue(textValue);
+      let evt = document.createEvent("Event");
+      evt.initEvent("change", true, true);
+      tagSelect.dispatchEvent(evt)
     }
+
+    var tagPills = document.querySelectorAll('.tags li');
+    tagPills.forEach(function(li) {
+      li.addEventListener('click', addTagToFilter);
+    });
+
   });
 
 </script>

_team/christopher-carroll.md

@@ -7,4 +7,4 @@ role: Founder
 order: 1
 ---
 
-Christopher Carroll is Professor of Economics at the Johns Hopkins University.
+Christopher Carroll is a Professor of Economics at Johns Hopkins University.

assets/sass/_main.scss

@@ -488,6 +488,11 @@ a.button {
     li {
       white-space: nowrap;
       margin: 0 0.5rem 0 0;
+      &:hover {
+        //border-bottom: 1px solid $ark-grey;
+        text-decoration: underline;
+        cursor: pointer;
+      }
 
       &:after {
         content: "; ";
@@ -540,6 +545,7 @@ a.button {
       border-radius: 5px;
       font-weight: 500;
       color: #fff;
+      cursor: pointer;
     }
 
     @media (max-width: 1023px) {
@@ -587,8 +593,13 @@ a.button {
     display: flex;
     align-items: center;
     box-sizing: border-box;
+    -webkit-appearance: searchfield;
+    &::-webkit-search-cancel-button {
+      -webkit-appearance: searchfield-cancel-button;
+    }
   }
 
+
   .submit-btn {
     border: 1px solid $ark-blue;
     border-radius: 5px 0 0 5px;

assets/sass/_material.scss

@@ -7,7 +7,7 @@
     background:#fff;
     border-radius: 5px;
     overflow: hidden;
-    box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
+    //box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
     border:1px solid #ccc;
     .panel-head {
         padding:1.5rem 2rem 1.2rem 2rem;