Add post counts to user tabs

The counts respect the viewer’s rating preference. Sets up for some future changes:

* determining whether SFW mode has an effect when the configured rating preference is the same between SFW mode and non, so we can avoid confusingly showing a toggle that does nothing

* making blocked tag filtering a visible operation on pages of results (which itself sets up for better pagination and performance improvements through caching and lightened database load)

I’d like to provide counts for favorites and individual folders too, but they’re more involved. Ideally, counts would be stored in the database and updated eagerly; PostgreSQL makes it hard.

assets/scss/components/_user-tabs.scss

@@ -0,0 +1,85 @@
+#user-nav > li {
+    width: 50%;
+    float: left;
+}
+
+#user-nav > li > a {
+    display: block;
+    padding: 0.5em 0;
+    font-size: 14px;
+    font-size: 0.9rem;
+}
+
+.user-nav-with-count {
+    position: relative;
+}
+
+.user-nav-with-count:hover {
+    text-decoration: none;
+}
+
+.user-nav-with-count:hover > .user-nav-label {
+    text-decoration: underline;
+}
+
+$count-selected-background: #006080;
+
+.user-nav-count {
+    background-color: #2a2e2f;
+    border-radius: 4px;
+    color: #999;
+    line-height: 1;
+    margin-left: 6px;
+    margin-top: calc(-0.5em - 4px);
+    padding: 4px 6px;
+    text-decoration: none;
+    top: 50%;
+
+    .current > & {
+        background-color: $count-selected-background;
+        color: scale-color($count-selected-background, $lightness: 75%);
+    }
+}
+
+@media (min-width: 45em) {
+    #user-nav > li {
+        width: 25%;
+    }
+}
+
+@media (min-width: 52em) {
+    #user-nav > li {
+        width: auto;
+        float: left;
+    }
+
+    #user-nav > * + li {
+        padding-left: 2.5em;
+    }
+
+    #user-nav > li > a {
+        padding: 0;
+        height: 48px;
+        height: 3rem;
+        line-height: 48px;
+        line-height: 3rem;
+    }
+}
+
+@media (min-width: 94em) {
+    #user-nav > li {
+        width: 14.28%;
+    }
+
+    #user-nav > * + li {
+        padding-left: 0;
+    }
+
+    #user-nav > li > a {
+        text-align: center;
+    }
+
+    .user-nav-count {
+        position: absolute;
+    }
+}

assets/scss/site.scss

@@ -1,6 +1,7 @@
 @import 'reset';
 @import 'components/option';
 @import 'components/text-post-list';
+@import 'components/user-tabs';
 @import 'pages/marketplace';
 
 /* Basic styles
@@ -2545,18 +2546,6 @@ $notifs-color-active: #b9b9b9;
     padding-top: 1rem;
 }
 
-#user-nav li {
-    width: 50%;
-    float: left;
-}
-
-#user-nav li a {
-    display: block;
-    padding: 0.5em 0;
-    font-size: 14px;
-    font-size: 0.9rem;
-}
-
 #uf-image {
     text-align: center;
 }
@@ -2664,10 +2653,6 @@ $notifs-color-active: #b9b9b9;
         margin-left: 64px;
     }
 
-    #user-nav li {
-        width: 25%;
-    }
-
     #user-stats dl {
         column-count: 2;
     }
@@ -2853,25 +2838,6 @@ $notifs-color-active: #b9b9b9;
     }
 }
 
-@media (min-width: 48em) {
-    #user-nav li {
-        width: auto;
-        float: left;
-    }
-
-    #user-nav li + li {
-        padding-left: 2.5em;
-    }
-
-    #user-nav li a {
-        padding: 0;
-        height: 48px;
-        height: 3rem;
-        line-height: 48px;
-        line-height: 3rem;
-    }
-}
-
 @media (min-width: 53em) {
     #user-info .avatar {
         left: 32px;
@@ -2882,18 +2848,6 @@ $notifs-color-active: #b9b9b9;
         right: 32px;
         right: 2rem;
     }
-
-    #user-nav li {
-        width: 14.28%;
-    }
-
-    #user-nav li + li {
-        padding-left: 0;
-    }
-
-    #user-nav li a {
-        text-align: center;
-    }
 }
 
 @media (min-width: 60em) {

weasyl/character.py

@@ -135,6 +135,7 @@ def create(userid, character, friends, tags, thumbfile, submitfile):
     files.clear_temporary(userid)
 
     define.metric('increment', 'characters')
+    define.cached_posts_count.invalidate(userid)
 
     return charid
 
@@ -396,6 +397,8 @@ def edit(userid, character, friends_only):
             userid, query.userid, 'The following character was edited:',
             '- ' + text.markdown_link(character.char_name, '/character/%s?anyway=true' % (character.charid,)))
 
+    define.cached_posts_count.invalidate(query.userid)
+
 
 def remove(userid, charid):
     ownerid = define.get_ownerid(charid=charid)
@@ -410,6 +413,7 @@ def remove(userid, charid):
 
     if result.rowcount != 0:
         welcome.character_remove(charid)
+        define.cached_posts_count.invalidate(ownerid)
 
     return ownerid
 

weasyl/collection.py

@@ -224,6 +224,7 @@ def pending_accept(userid, submissions):
         welcome.collectrequest_remove(userid, s[1], s[0])
 
     d._page_header_info.invalidate(userid)
+    d.cached_posts_count.invalidate(userid)
 
 
 def pending_reject(userid, submissions):
@@ -250,3 +251,4 @@ def remove(userid, submissions):
     """, user=userid, submissions=submissions)
 
     welcome.collection_remove(userid, submissions)
+    d.cached_posts_count.invalidate(userid)