Updates to support sticky site header (#822)

* Displays trimmed site header when scrolling upward and hides on
  scrolling downward.
* Includes a notification badge for mobile. Kind of addresses #289 as a result.
* Supports light / dark mode.
* Updates mltshp-patterns CSS to v2.8.0.

Author: bradchoate

handlers/home.py

@@ -65,6 +65,7 @@ def get(self, before_or_after=None, base36_id=None, returning=None):
         else:
             front_page = True
             notifications = models.Notification.display_for_user(current_user_obj)
+            notifications_count = notifications['total']
             sharedfiles = current_user_obj.sharedfiles_from_subscriptions(per_page=11)
             # Start Reading.
             first_bookmark = None

models/notification.py

@@ -19,15 +19,15 @@ class Notification(Model):
     type        = Property() # favorite, save, subscriber
     deleted     = Property(default=0)
     created_at  = Property()
-    
+
     def save(self, *args, **kwargs):
         if options.readonly:
             self.add_error('_', 'Site is read-only.')
             return False
 
         self._set_dates()
         return super(Notification, self).save(*args, **kwargs)
-    
+
     def _set_dates(self):
         """
         Sets the created_at and updated_at fields. This should be something
@@ -39,13 +39,13 @@ def _set_dates(self):
     def delete(self):
         self.deleted = 1
         self.save()
-        
+
     def sender(self):
         return user.User.get("id=%s", self.sender_id)
-        
+
     def receiver(self):
         return user.User.get("id=%s", self.receiver_id)
-    
+
     def related_object(self):
         """
         Return the object this notification relates to. In the case of a favorite
@@ -63,7 +63,7 @@ def related_object(self):
             return subscription_ and subscription_.shake()
         else:
             return user.User.get("id = %s and deleted=0", self.sender_id)
-    
+
     @classmethod
     def invitation_to_shake_for_user(self, shake, user):
         """
@@ -117,51 +117,63 @@ def display_for_user(cls, user):
                           'invitation':[],
                           'invitations': [], # TODO: kill this ambiguity - IK
                           'invitation_request' : [],
-                          'invitation_approved' : []
+                          'invitation_approved' : [],
+                          'total': 0,
                         }
+        total = 0
         for notification in cls.for_user(user):
             sender = notification.sender()
             related_object = notification.related_object()
             if not related_object:
                 continue
 
             _notification = {'sender' : sender, 'related_object' : related_object, 'id' : notification.id}
-            
+
             if notification.type == 'favorite':
                 if related_object.id not in notifications['like']['items']:
                     notifications['like']['items'][related_object.id] = []
                 notifications['like']['items'][related_object.id].append(_notification)
                 notifications['like']['count'] += 1
-                
+                total += 1
+
             elif notification.type == 'subscriber':
                 _notification['post_name_text'] = " is now following " + related_object.display_name(user)
                 notifications['follow'].append(_notification)
-                
+                total += 1
+
             elif notification.type == 'save':
                 if related_object.id not in notifications['save']['items']:
                     notifications['save']['items'][related_object.id] = []
                 notifications['save']['items'][related_object.id].append(_notification)
                 notifications['save']['count'] += 1
+                total += 1
 
             elif notification.type == 'comment':
                 notifications['comment'].append(_notification)
+                total += 1
 
             elif notification.type == 'mention':
                 notifications['mention'].append(_notification)
+                total += 1
 
             elif notification.type == 'invitation':
                 notifications['invitation'].append(_notification)
-            
+                total += 1
+
             elif notification.type == 'invitation_request':
                 notifications['invitation_request'].append(_notification)
-            
+                total += 1
+
             elif notification.type == 'invitation_approved':
                 notifications['invitation_approved'].append(_notification)
-            
+                total += 1
+
+        notifications['total'] = total
+
         #for invitation_ in invitation.Invitation.by_user(user):
         #    notifications['invitations'].append(invitation_.email_address)
         return notifications
-        
+
     @classmethod
     def for_user(cls, user, deleted=False):
         """
@@ -192,7 +204,7 @@ def new_favorite(sender, sharedfile):
         n = Notification(sender_id=sender.id, receiver_id=sharedfile.user_id, action_id=sharedfile.id, type='favorite')
         n.save()
         return n
-    
+
     @staticmethod
     def new_save(sender, sharedfile):
         """
@@ -215,7 +227,7 @@ def new_comment(comment):
         n = Notification(sender_id=comment.user_id, receiver_id=sf.user_id, action_id=comment.id, type='comment')
         n.save()
         return n
-    
+
     @staticmethod
     def new_comment_like(comment, sender):
         """
@@ -237,7 +249,7 @@ def new_mention(receiver, comment):
         n = Notification(sender_id=comment.user_id, receiver_id=receiver.id, action_id=comment.id, type='mention')
         n.save()
         return n
-        
+
     @staticmethod
     def new_invitation_request_accepted(sender, receiver, shake):
         """
@@ -256,7 +268,7 @@ def new_invitation_to_shake(sender, receiver, action_id):
         action_id - the shake_id
         """
         the_shake = shake.Shake.get('id=%s', action_id)
-        
+
         n = Notification(sender_id=sender.id, receiver_id=receiver.id, action_id=action_id, type='invitation_request')
         text_message = """Hi, %s.
 %s has requested to join "%s". This means they will be able to put files into the "%s" shake.
@@ -325,7 +337,7 @@ def new_invitation(sender, receiver, action_id):
 """ % (receiver.name, options.app_host, sender.name, sender.display_name(), options.app_host,
        new_shake.name, new_shake.display_name(), options.app_host, new_shake.name,
        new_shake.display_name(), options.app_host, new_shake.name, options.app_host, new_shake.name)
-            
+
         n.save()
 
         if not receiver.disable_notifications and not options.debug:
@@ -336,7 +348,7 @@ def new_invitation(sender, receiver, action_id):
                 html_body=html_message)
             pm.send()
         return n
-        
+
     @staticmethod
     def new_subscriber(sender, receiver, action_id):
         """
@@ -349,7 +361,7 @@ def new_subscriber(sender, receiver, action_id):
         subscription_line = ""
         if target_shake.type == 'group':
             subscription_line = " called '%s'" % (target_shake.name)
-        
+
         n = Notification(sender_id=sender.id, receiver_id=receiver.id, action_id=action_id, type='subscriber')
 
         text_message = """Hi, %s.
@@ -381,7 +393,7 @@ def new_subscriber(sender, receiver, action_id):
        options.app_host)
 
         n.save()
-        
+
         if not receiver.disable_notifications and not options.debug:
             pm = postmark.PMMail(api_key=options.postmark_api_key, 
                 sender="hello@mltshp.com", to=receiver.email, 
@@ -390,7 +402,7 @@ def new_subscriber(sender, receiver, action_id):
                 html_body=html_message)
             pm.send()
         return n
-        
+
     @staticmethod
     def send_shake_member_removal(former_shake, former_member):
         """

static/css/main.min.css

@@ -2157,4 +2157,35 @@ $(document).ready(function () {
             alertVote.css({ display: "none" });
         });
     }
+
+    // Support for sticky site header
+    const $siteHeader = $('.site-header');
+    if ($siteHeader.length > 0) {
+        let lastScrollY = window.scrollY;
+        const scrollHandler = () => {
+            if (!$siteHeader.hasClass('docked')) {
+                if (window.scrollY > 120) {
+                $siteHeader.addClass('docked');
+                }
+            } else {
+                if (window.scrollY <= 120) {
+                $siteHeader.removeClass('docked visible hidden');
+                }
+            }
+            if ($siteHeader.hasClass('docked')) {
+                const isVisible = $siteHeader.hasClass('visible');
+                if (!isVisible && window.scrollY < lastScrollY) {
+                // triggering delta can be 1px
+                $siteHeader.addClass('visible');
+                $siteHeader.removeClass('hidden');
+                } else if (isVisible && window.scrollY > lastScrollY + 20) {
+                // triggering delta must be ~20px
+                $siteHeader.removeClass('visible');
+                $siteHeader.addClass('hidden');
+                }
+            }
+            lastScrollY = window.scrollY;
+        };
+        $(window).on('scroll', scrollHandler);
+    }
 });

static/js/main.js

@@ -84,9 +84,11 @@
         <div class="wrapper">
             <header class="site-header">
                 <div class="site-branding">
-                    <a href="/"><img class="site-branding--logo" src="{{ static_url("images/logo-compact.svg") }}" alt="MLTSHP"></a>
+                    <a href="/"><img class="site-branding--logo" src="{{ static_url("images/logo-compact.svg") }}" alt="MLTSHP">
+                    <span class="site-branding--icon" /></a>
                 </div>
                 <nav id="site-nav" class="site-nav">
+                    {% block notification_button %}{% end %}
                     <button type="button" class="site-nav--toggle btn btn-warning btn-pastel btn-icon">&#9776;</button>
                     <ul class="site-nav--list">
                         {% if current_user and current_user_object.is_member() %}

templates/base.html

@@ -5,6 +5,12 @@
   Friend Shake
 {% end %}
 
+{% block notification_button %}
+  {% if notifications_count > 0 %}
+  <a href="#notifications-anchor" class="site-nav--notifications btn btn-danger btn-pastel">{{ notifications_count }}</a>
+  {% end %}
+{% end %}
+
 {% block main %}
 <div class="content content-with-sidebar content-account">
   <div class="account-header">
@@ -19,7 +25,7 @@ <h2 class="avatar-title">Your Friends</h2>
       {% end %}
     </div>
   </div>
-  <div class="sidebar">
+  <div class="sidebar" id="notifications-anchor">
     {% if current_user_obj.show_stats %}
     {{modules.UserCounts(user=current_user_obj)}}
     {% end %}

templates/home/index.html

@@ -2,13 +2,20 @@
 
 {% block title %}Incoming!!!{% end %}
 
+{% block notification_button %}
+  {% if notifications_count > 0 %}
+  <a href="#notifications-anchor" class="site-nav--notifications btn btn-danger btn-pastel">{{ notifications_count }}</a>
+  {% end %}
+{% end %}
+
 {% block main %}
   <div class="content content-with-sidebar content-incoming">
     <div class="incoming-header">
       <h2 class="incoming-header--title">Our most recent files</h2>
     </div>
 
-    <div class="sidebar">
+    <div class="sidebar" id="notifications-anchor">
+
     {% if notifications_count > 0 %}
       <div class="notification-block notification-block-aggregate" id="notification-block-aggregate">
         <div class="notification-block-hd">

templates/incoming/index.html

@@ -4,14 +4,20 @@
   30 Recently Popular Files
 {% end %}
 
+{% block notification_button %}
+  {% if notifications_count > 0 %}
+  <a href="#notifications-anchor" class="site-nav--notifications btn btn-danger btn-pastel">{{ notifications_count }}</a>
+  {% end %}
+{% end %}
+
 {% block main %}
 <div class="content content-with-sidebar content-account">
   <div class="account-header">
     <div class="avatar">
       <h2>30 Recently Popular Files</h2>
     </div>
   </div>
-  <div class="sidebar">
+  <div class="sidebar" id="notifications-anchor">
     {% if notifications_count > 0 %}
     <div class="notification-block notification-block-aggregate" id="notification-block-aggregate">
       <div class="notification-block-hd">