fix sticky header display when no favorites or no specials

Author: jwoglom

intranet/static/css/eighth.signup.css

@@ -392,6 +392,12 @@ h5.hidden {
     display: none;
 }
 
+h5.no-activities {
+    /* fixes sticky headers */
+    visibility: hidden;
+    height: 0;
+}
+
 h5.search-header {
     margin-top: 1px;
 }

intranet/static/js/eighth/signup.js

@@ -294,9 +294,9 @@ $(function() {
             });
             renderActivitiesInContainer(specials, $(".special-activities", this.el));
             if (specials.length === 0) {
-                $(".special-header").addClass("hidden");
+                $(".special-header").addClass("no-activities");
             } else {
-                $(".special-header").removeClass("hidden");
+                $(".special-header").removeClass("no-activities");
             }
 
             if (!$("#activity-picker").hasClass("different-user")) {

intranet/static/js/eighth/signup.search.js

@@ -238,14 +238,16 @@ $(document).ready(function() {
         $("#activity-list > ul[data-header]").each(function() {
             var vis = $("li:not(.search-hide)[data-activity-id]", $(this));
             var cat = $(this).attr("data-header");
-
+            var hideUl = (cat != "all-header");
+            var sticky = $(".sticky-header." + cat);
+            var hideHeader = !sticky.hasClass("no-activities");
             console.log(vis.size(), cat);
             if(vis.size() == 0) {
-                if(cat != "all-header") $(this).hide();
-                $(".sticky-header." + cat).hide();
+                if(hideUl) $(this).hide();
+                if(hideHeader) sticky.hide();
             } else {
-                if(cat != "all-header") $(this).show();
-                $(".sticky-header." + cat).show();
+                if(hideUl) $(this).show();
+                if(hideHeader) sticky.show();
             }
         });
 

intranet/static/js/eighth/signupUI.js

@@ -123,11 +123,16 @@ $(function() {
 // Sticky headers for activity picker
 function stickyHeaders(headers) {
     this.load = function() {
+        var firstEmpty = false;
         headers.each(function(i) {
             var id = Math.floor((i + 1) * Math.random() * 99999);
             var stuckCopy = $(this).clone().prependTo($("#activity-picker"));
-            if (i == 0) {
-                stuckCopy.addClass("stuck");
+            var empty = $(this).hasClass("empty");
+            if(i == 0 && empty) {
+                firstEmpty = true;
+            }
+            if ((i == 0 && !empty) || (i == 1 && firstEmpty)) {
+                 stuckCopy.addClass("stuck");
             } else {
                 stuckCopy.addClass("hidden stuck");
             }
@@ -144,8 +149,14 @@ function stickyHeaders(headers) {
                 thrdHeader = headers.eq(i - 2);
             var top = thisHeader.position().top;
 
+            if(prevHeader.hasClass("empty")) {
+                prevHeader = thrdHeader;
+            }
+
             if (top <= 0) {
-                $("#" + thisHeader.attr("id") + "-stuck").removeClass("hidden");
+                if(!thisHeader.hasClass("empty")) {
+                    $("#" + thisHeader.attr("id") + "-stuck").removeClass("hidden");
+                }
                 headers.each(function(j) {
                     var loopHeader = $(this);
                     if(j != i) $("#" + loopHeader.attr("id") + "-stuck").addClass("hidden");

intranet/templates/eighth/signup.html

@@ -414,11 +414,11 @@ <h5 class="search-header">
                 <i class="fa fa-chevron-left"></i>
             </div>
             <div id="activity-list" data-toggle-favorite-endpoint="{% url 'eighth_toggle_favorite' %}">
-                <h5 class="sticky-header favorites-header">Favorites</h5>
+                <h5 class="sticky-header favorites-header" data-header="favorites-header">Favorites</h5>
                 <ul class="favorite-activities" data-header="favorites-header"></ul>
-                <h5 class="sticky-header special-header">Special</h5>
+                <h5 class="sticky-header special-header" data-header="special-header">Special</h5>
                 <ul class="special-activities" data-header="special-header"></ul>
-                <h5 class="sticky-header all-header">All</h5>
+                <h5 class="sticky-header all-header" data-header="all-header">All</h5>
                 <ul class="all-activities" data-header="all-header"></ul>
                 <ul class="search-noresults">
                     <li>