Update schedule filters (pybay#160)

* allow for multiple-category filter and update filters * transition opacity of cards on filter change
ccsv · Feb 22, 2018 · e95bacc · e95bacc
1 parent d6ff645
commit e95bacc
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 19 deletions.
diff --git a/pybay/templates/frontend/schedule.html b/pybay/templates/frontend/schedule.html
@@ -20,8 +20,8 @@ <h1><strong>Schedule</strong></h1>
         <div class="sch-filters substicky">
             <ul class="sch-filter-list">
                 <li data-filter="">All Talks</li>
-              {% for filter, name in filters %}
-                <li data-filter="{{ filter }}">{{ name }}</li>
+              {% for name, filter in filters %}
+                <li data-filter="{{ filter|join:" " }}">{{ name }}</li>
               {% endfor %}
             </ul>
         </div>
@@ -74,20 +74,20 @@ <h4><a href="{% url 'pybay_speakers_detail' talk.speaker.name_slug %}">{{ talk.t
     <script src="{% static 'new/js/schedule-filters.js' %}" async></script>
 
     <style type="text/css">
-      {% for slug, _ in filters %}
-      .sch-schedule-filter-{{ slug }} .sch-filter-list > li[data-filter="{{ slug }}"]{% if not forloop.last %},{% endif %}{% endfor %} {
+      {% for _, slugs in filters %}{% for slug in slugs %}
+      .sch-schedule-filter-{{ slug }} .sch-filter-list > li[data-filter~="{{ slug }}"]{% if not forloop.last %},{% endif %}{% endfor %}{% if not forloop.last %},{% endif %}{% endfor %}{
         background: #428bca;
         color: white;
       }
 
-      {% for slug, _ in filters %}
-      .sch-schedule-filter-{{ slug }} .sch-timeslot-kind-talk:not(.sch-talk-{{ slug }}){% if not forloop.last %},{% endif %} {% endfor %}{
+      {% for _, slugs in filters %}{% for slug in slugs %}
+      .sch-schedule-filter-{{ slug }} .sch-timeslot-kind-talk:not(.sch-talk-{{ slug }}){% if not forloop.last %},{% endif %}{% endfor %}{% if not forloop.last %},{% endif %}{% endfor %}{
         opacity: .3;
       }
 
       @media(max-width: 450px) {
-        {% for slug, _ in filters %}
-        .sch-schedule-filter-{{ slug }} .sch-timeslot-kind-talk:not(.sch-talk-{{ slug }}){% if not forloop.last %},{% endif %} {% endfor %} {
+        {% for _, slugs in filters %}{% for slug in slugs %}
+        .sch-schedule-filter-{{ slug }} .sch-timeslot-kind-talk:not(.sch-talk-{{ slug }}){% if not forloop.last %},{% endif %}{% endfor %}{% if not forloop.last %},{% endif %}{% endfor %}{
           display: none;
         }
       }

diff --git a/pybay/views.py b/pybay/views.py
@@ -177,10 +177,20 @@ def _day_slots(day):
 
 
 FILTER_CATEGORIES = [
-    "All things Web",
-    "DevOps",
+    ("Fundamentals", ['fundamentals']),
+    ("Data", ['dealingwithdata']),
+    ("Python at Scale", ['performantpython', 'scalablepython', 'devops']),
 ]
 
+ALLOWED_CATEGORIES = [
+    slug
+    for _, slugs in FILTER_CATEGORIES
+    for slug in slugs
+]
+
+FILTER_CATEGORIES.append(('Misc', ['other']))
+FILTER_CATEGORIES.append(('Beginner-friendly', ['level-1']))
+
 
 def pybay_schedule(request):
     if request.user.is_staff:
@@ -197,15 +207,10 @@ def pybay_schedule(request):
         for schedule in schedules
     ]
 
-    filters = [
-        (name.lower().replace(' ', ''), name)
-        for name in FILTER_CATEGORIES
-    ]
-
     ctx = {
         'schedules': schedules,
-        'filters' :  filters + [('other', 'Other'), ('level-1', 'Beginner-friendly')],
-        'allowed_categories': [slug for slug, _ in filters]
+        'filters' :  FILTER_CATEGORIES,
+        'allowed_categories': ALLOWED_CATEGORIES,
     }
 
     return render(request, "frontend/schedule.html", ctx)
diff --git a/static/new/css/style.css b/static/new/css/style.css
@@ -281,6 +281,7 @@ p.question {
   padding-top: 4px;
   padding-bottom: 4px;
   text-align: left;
+  transition: opacity 0.2s ease-out;
 }
 
 .sch-timeslot-kind-talk > * {

diff --git a/static/new/js/schedule-filters.js b/static/new/js/schedule-filters.js
@@ -7,11 +7,16 @@
       var filter = target.closest('li').data('filter');
       if (filter === undefined) return;
       var schedule = target.closest('.' + parentClass);
-      var alreadySelected = filter === '' || schedule.hasClass(prefix + filter);
+      schedule.data('filter');
+      var alreadySelected = filter === '' || schedule.data('filter') === filter;
+      schedule.data('filter', filter);
       schedule.removeClass(function(i, cls) { return cls; });
       schedule.addClass(parentClass);
       if (!alreadySelected) {
-        schedule.addClass(filterEnabledClass + ' ' + prefix + filter);
+        var filters = $.map(filter.split(' '), function (f) {
+          return prefix + f;
+        }).join(' ');
+        schedule.addClass(filterEnabledClass + ' ' + filters);
       }
   });
 }(jQuery);