Add a department filter to the home page, various design improvements…

…, helps with #7

_plugins/books_from_evergreen_generator.rb

@@ -20,9 +20,10 @@ def generate(site)
     new_records = records_from_evergreen site.config
     site.data['books'] = new_records
     generate_montage site.data['books'], site.config['plugins_dir']
-    site.config['departments']
-        .map { |department| Department.new department, site.config }
-        .each { |department| department.email_about site.data['books'] }
+    site.data['departments'] = site.config['departments']
+                                   .map { |department| Department.new department, site.config, site.data['books'] }
+                                   .select(&:enough_books?)
+    site.data['departments'].each(&:send_email)
   end
 
   private
@@ -77,7 +78,7 @@ def send_instagram_email(books, dir)
 
 # A new book
 class Book
-  attr_reader :call_number, :cover_image, :title
+  attr_reader :call_number, :cover_image, :id, :title
 
   def initialize(entry)
     @author = entry.at_xpath('./atom:author', 'atom' => ATOM_NAMESPACE)
@@ -90,6 +91,7 @@ def initialize(entry)
 
     @uri = catalog_url_for entry.at_xpath('./atom:id', 'atom' => ATOM_NAMESPACE).text[/\d+/]
     @title = entry.at_xpath('./atom:title', 'atom' => ATOM_NAMESPACE).text
+    @id = entry.at_xpath('./atom:id', 'atom' => ATOM_NAMESPACE).text.gsub(':', '-')
 
     @date_cataloged = entry.at_xpath('./atom:updated', 'atom' => ATOM_NAMESPACE)
     @date_cataloged = @date_cataloged if @date_cataloged
@@ -107,6 +109,7 @@ def to_liquid
     {
       'author' => @author,
       'call_number' => @call_number,
+      'id' => @id,
       'uri' => @uri,
       'title' => @title,
       'date_cataloged' => @date_cataloged,
@@ -148,35 +151,38 @@ def normalize_isbn(isbn)
 
 # An LBCC department
 class Department
-  def initialize(department_config, site_config)
+  def initialize(department_config, site_config, books)
     @name = department_config['name']
     @emails = department_config['emails']
     @regex = department_config['regex']
     @site_config = site_config
-  end
-
-  def email_about(books)
     @books_of_interest = books.select { |book| interested_in? book }
-    send_email if enough_books?
   end
 
-  private
+  def send_email
+    mail = Mail.new "To: #{@emails.join(', ')}\r\n"\
+      "From: [email protected]\r\n"\
+      'Subject: New books at the LBCC Library'
+    mail.text_part = text_contents
+    mail.html_part = html_contents
+    mail.deliver!
+  end
 
-  def interested_in?(book)
-    book.call_number.match? @regex
+  def to_liquid
+    {
+      'name' => @name,
+      'book_ids' => @books_of_interest.map(&:id)
+    }
   end
 
   def enough_books?
     @books_of_interest.count >= @site_config['min_items_per_email']
   end
 
-  def send_email
-    mail = Mail.new "To: #{@emails.join(', ')}\r\n"\
-                    "From: [email protected]\r\n"\
-                    'Subject: New books at the LBCC Library'
-    mail.text_part = text_contents
-    mail.html_part = html_contents
-    mail.deliver!
+  private
+
+  def interested_in?(book)
+    book.call_number.match? @regex
   end
 
   def text_contents

assets/main.scss

@@ -1,16 +1,62 @@
 ---
 ---
 
-@import "{{ site.theme }}";
+$content-width: 90%;
 
-.grid { /* Masonry container */
-    column-count: 4;
-    column-gap: 1em;
+@import "minima";
+
+a, a:visited {
+  color: #005B94;
+}
+
+.post-content h2 {
+  font-size: 1.4em;
+  text-align: center;
+}
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid-item {
+  margin: 12px auto;
+}
+
+.grid-item img {
+  width: 100%;
+}
+
+.hidden {
+  display: none;
+}
+
+#filter {
+  border: none;
+  border-bottom: 2px solid #FDB913;
+  color: #005B94;
+  font-size: 2em;
+}
+
+
+@media (max-width: 767px) {
+  .only-medium-and-larger {
+    display: none;
+  }
+  .grid-item {
+    width: 30%;
+  }
+}
+
+@media (min-width: 768px) {
+  .grid-item {
+    width: 21%;
+  }
+
+}
+
+@media only screen {
+  .post-title {
+    display: none;
   }
-
-  .grid-item { /* Masonry bricks or child elements */
-    background-color: #eee;
-    display: inline-block;
-    margin: 0 0 1em;
-    width: 100%;
-  }
+}

index.md

@@ -2,20 +2,57 @@
 layout: page
 title: New books
 ---
+<div id="filter-wrapper">
+  <select id="filter" onchange="applyFilter()">
+    <option id="all">All New Books</option>
+    {% for department in site.data.departments %}
+      <option id="{{ department.name }}">{{ department.name }}</option>
+    {% endfor %}
+  </select>
+</div>
 
-<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
+<div class="grid">
   {% for book in site.data.books %}
-    <div class="grid-item">
+    <div class="grid-item" id="{{ book.id }}">
       <a href="{{ book.uri }}">
         <img src="{{ book.cover_image }}" alt="">
         <h2>{{ book.title }}</h2>
       </a>
-      Call number: {{ book.call_number }}<br />
-      Shelving location: {{ book.shelving_location }}<br />
-      {% if book.author %}
-        Author: {{ book.author }}<br />
-      {% endif %}
+      <span class="only-medium-and-larger">
+        <strong>Call number:</strong>
+        {{ book.call_number }}<br />
+
+        {% if book.author %}
+          <strong>Author:</strong>
+          {{ book.author }}<br />
+        {% endif %}
+      </span>
     </div>
   {% endfor %}
 </div>
 
+<script>
+  function applyFilter() {
+    var dropdown = document.getElementById('filter');
+    var selectedDepartment = dropdown[dropdown.selectedIndex].id;
+
+    var gridEntries = document.getElementsByClassName('grid-item');
+    for (var i = 0; i < gridEntries.length; ++i) {
+      gridEntries[i].classList.remove('hidden');
+    }
+
+    if (selectedDepartment != "all") {
+      var departments = {{ site.data.departments | jsonify }};
+      var match = departments.find(function(department) {
+        return department['name'] == selectedDepartment;
+      });
+      if (match) {
+        for (var i = 0; i < gridEntries.length; ++i) {
+          if (match['book_ids'].indexOf(gridEntries[i].id) == -1) {
+            gridEntries[i].classList.add('hidden');
+          }
+        }
+      }
+    }
+  }
+</script>