Improved forums lists

static/cranefly/css/cranefly.css

@@ -964,13 +964,17 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .markdown pre>:last-child,.markdown blockquote>:last-child,.markdown iframe>:last-child{margin-bottom:0px;}
 .index-sidebar{position:relative;bottom:9px;}
 .index-category{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.index-category table{margin:0px;}.index-category table caption{background-color:#fbfbfb;border:1px solid #d5d5d5;border-radius:2px 2px 0px 0px;margin:-1px;padding:3.966666666666667px 9.9px;color:#333333;font-size:11.9px;font-weight:bold;text-align:left;}.index-category table caption small{margin-left:7px;color:#999999;font-size:11.9px;}
-.index-category table td{padding:14.75px 9.9px;}
+.index-category table td{padding:14.75px 9.9px;padding-bottom:15.75px;}
 .index-category table .forum-icon{padding-right:2.95px;width:1%;}.index-category table .forum-icon .forum-icon-wrap{background-color:#555555;border:1px solid #3b3b3b;border-radius:3px;padding:3px 4px;}.index-category table .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#cf402e;border:1px solid #a53325;}
 .index-category table .forum-icon .forum-icon-wrap.forum-icon-redirect{background-color:#9466c6;border:1px solid #7a43b6;}
 .index-category table .forum-main h3{float:left;margin:0px;padding:0px;font-size:17.5px;font-weight:normal;line-height:20px;}.index-category table .forum-main h3 a:link,.index-category table .forum-main h3 a:visited{color:#333333;}
-.index-category table .forum-main .forum-details{background-color:#f7f7f7;border-bottom:1px solid #f0f0f0;border-radius:3px;float:right;margin:-2px 0px;margin-top:-3.0999999999999996px;padding:2px 8px;width:230px;color:#999999;font-size:11.9px;}.index-category table .forum-main .forum-details strong,.index-category table .forum-main .forum-details a{color:#555555;font-weight:normal;}
-.index-category table .forum-main .forum-details a:hover,.index-category table .forum-main .forum-details a:active{color:#333333;}
-.index-category table .forum-main .forum-details strong.stat-increment{color:#46a546;}
+.index-category table .forum-main .dropdown{float:right;right:14px;}.index-category table .forum-main .dropdown .dropdown-toggle{padding:4px 8px;opacity:0.6;filter:alpha(opacity=60);color:#333333;font-weight:bold;}.index-category table .forum-main .dropdown .dropdown-toggle:hover,.index-category table .forum-main .dropdown .dropdown-toggle:active .index-category table .forum-main .dropdown .dropdown-toggle:focus{opacity:1;filter:alpha(opacity=100);text-decoration:none;}
+.index-category table .forum-main .dropdown.open .dropdown-toggle{background-color:#eeeeee;border-radius:3px 3px 0px 0px;opacity:1;filter:alpha(opacity=100);padding-bottom:6px;text-decoration:none;}
+.index-category table .forum-main .dropdown .dropdown-menu{background:none;border:none;box-shadow:none;}.index-category table .forum-main .dropdown .dropdown-menu .dropdown-shadow{border-radius:3px;-webkit-box-shadow:0px 0px 3px #999999;-moz-box-shadow:0px 0px 3px #999999;box-shadow:0px 0px 3px #999999;width:256px;position:relative;right:0px;top:-4px;}.index-category table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul{background-color:#fbfbfb;border-radius:3px;margin:0px;padding:0px;}.index-category table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul li{margin:0px;padding:0px;list-style:none;}.index-category table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul li a{border-bottom:1px dotted #d5d5d5;display:block;opacity:0.7;filter:alpha(opacity=70);padding:6px 8px;color:#333333;text-decoration:none;}.index-category table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul li a:hover,.index-category table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul li a:active{opacity:1;filter:alpha(opacity=100);}
+.index-category table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul li:last-child a{border-bottom:none;}
+.index-category table .forum-main .forum-details{border-left:1px dotted #e0e0e0;float:right;margin:-10px 0px;margin-top:-8.1px;padding-left:14px;height:35px;width:220px;}.index-category table .forum-main .forum-details .thread-name a:link,.index-category table .forum-main .forum-details .thread-name a:active,.index-category table .forum-main .forum-details .thread-name a:visited,.index-category table .forum-main .forum-details .thread-name a:hover{margin-bottom:1px;color:#333333;font-size:11.9px;font-weight:bold;}
+.index-category table .forum-main .forum-details .muted{font-size:10.5px;line-height:10.5px;}.index-category table .forum-main .forum-details .muted .last-poster,.index-category table .forum-main .forum-details .muted a:link,.index-category table .forum-main .forum-details .muted a:active,.index-category table .forum-main .forum-details .muted a:visited,.index-category table .forum-main .forum-details .muted a:hover{color:#555555;}
+.index-category table .forum-main .forum-details em,.index-category table .forum-main .forum-details .forum-clicks{position:relative;top:7.5px;color:#999999;}.index-category table .forum-main .forum-details em strong,.index-category table .forum-main .forum-details .forum-clicks strong{color:#333333;font-weight:normal;}
 .index-category table .forum-main .forum-meta-tooltip .tooltip-inner{max-width:400px;text-align:left;}.index-category table .forum-main .forum-meta-tooltip .tooltip-inner .forum-stats{color:#999999;font-size:10.5px;}.index-category table .forum-main .forum-meta-tooltip .tooltip-inner .forum-stats strong{color:#ffffff;}
 .index-category table .forum-main .forum-meta-tooltip .tooltip-inner .forum-stats span{margin-right:14px;}
 .index-category table .forum-main .forum-meta-tooltip .tooltip-inner .forum-description{clear:both;margin:0px;margin-bottom:7px;padding:0px;color:#eeeeee;font-size:14px;}
@@ -1026,13 +1030,17 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .news-feed .media .media-body .media-footer{margin:0px;color:#999999;font-size:10.5px;font-weight:normal;}.news-feed .media .media-body .media-footer a{color:#555555;}
 .news-feed hr{border:none;border-top:1px solid #eeeeee;margin:20px 0px;}
 .category-forums-list{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.category-forums-list table{margin:0px;}.category-forums-list table tr:first-child td{border-top:none;}
-.category-forums-list table td{padding:14.75px 9.9px;}
+.category-forums-list table td{padding:14.75px 9.9px;padding-bottom:15.75px;}
 .category-forums-list table .forum-icon{padding-right:2.95px;width:1%;}.category-forums-list table .forum-icon .forum-icon-wrap{background-color:#555555;border:1px solid #3b3b3b;border-radius:3px;padding:3px 4px;}.category-forums-list table .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#cf402e;border:1px solid #a53325;}
 .category-forums-list table .forum-icon .forum-icon-wrap.forum-icon-redirect{background-color:#9466c6;border:1px solid #7a43b6;}
 .category-forums-list table .forum-main h3{float:left;margin:0px;padding:0px;font-size:17.5px;font-weight:normal;line-height:20px;}.category-forums-list table .forum-main h3 a:link,.category-forums-list table .forum-main h3 a:visited{color:#333333;}
-.category-forums-list table .forum-main .forum-details{background-color:#f7f7f7;border-bottom:1px solid #f0f0f0;border-radius:3px;float:right;margin:-2px 0px;margin-top:-3.0999999999999996px;padding:2px 8px;width:230px;color:#999999;font-size:11.9px;}.category-forums-list table .forum-main .forum-details strong,.category-forums-list table .forum-main .forum-details a{color:#555555;font-weight:normal;}
-.category-forums-list table .forum-main .forum-details a:hover,.category-forums-list table .forum-main .forum-details a:active{color:#333333;}
-.category-forums-list table .forum-main .forum-details strong.stat-increment{color:#46a546;}
+.category-forums-list table .forum-main .dropdown{float:right;right:14px;}.category-forums-list table .forum-main .dropdown .dropdown-toggle{padding:4px 8px;opacity:0.6;filter:alpha(opacity=60);color:#333333;font-weight:bold;}.category-forums-list table .forum-main .dropdown .dropdown-toggle:hover,.category-forums-list table .forum-main .dropdown .dropdown-toggle:active .category-forums-list table .forum-main .dropdown .dropdown-toggle:focus{opacity:1;filter:alpha(opacity=100);text-decoration:none;}
+.category-forums-list table .forum-main .dropdown.open .dropdown-toggle{background-color:#eeeeee;border-radius:3px 3px 0px 0px;opacity:1;filter:alpha(opacity=100);padding-bottom:6px;text-decoration:none;}
+.category-forums-list table .forum-main .dropdown .dropdown-menu{background:none;border:none;box-shadow:none;}.category-forums-list table .forum-main .dropdown .dropdown-menu .dropdown-shadow{border-radius:3px;-webkit-box-shadow:0px 0px 3px #999999;-moz-box-shadow:0px 0px 3px #999999;box-shadow:0px 0px 3px #999999;width:256px;position:relative;right:0px;top:-4px;}.category-forums-list table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul{background-color:#fbfbfb;border-radius:3px;margin:0px;padding:0px;}.category-forums-list table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul li{margin:0px;padding:0px;list-style:none;}.category-forums-list table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul li a{border-bottom:1px dotted #d5d5d5;display:block;opacity:0.7;filter:alpha(opacity=70);padding:6px 8px;color:#333333;text-decoration:none;}.category-forums-list table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul li a:hover,.category-forums-list table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul li a:active{opacity:1;filter:alpha(opacity=100);}
+.category-forums-list table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul li:last-child a{border-bottom:none;}
+.category-forums-list table .forum-main .forum-details{border-left:1px dotted #e0e0e0;float:right;margin:-10px 0px;margin-top:-8.1px;padding-left:14px;height:35px;width:220px;}.category-forums-list table .forum-main .forum-details .thread-name a:link,.category-forums-list table .forum-main .forum-details .thread-name a:active,.category-forums-list table .forum-main .forum-details .thread-name a:visited,.category-forums-list table .forum-main .forum-details .thread-name a:hover{margin-bottom:1px;color:#333333;font-size:11.9px;font-weight:bold;}
+.category-forums-list table .forum-main .forum-details .muted{font-size:10.5px;line-height:10.5px;}.category-forums-list table .forum-main .forum-details .muted .last-poster,.category-forums-list table .forum-main .forum-details .muted a:link,.category-forums-list table .forum-main .forum-details .muted a:active,.category-forums-list table .forum-main .forum-details .muted a:visited,.category-forums-list table .forum-main .forum-details .muted a:hover{color:#555555;}
+.category-forums-list table .forum-main .forum-details em,.category-forums-list table .forum-main .forum-details .forum-clicks{position:relative;top:7.5px;color:#999999;}.category-forums-list table .forum-main .forum-details em strong,.category-forums-list table .forum-main .forum-details .forum-clicks strong{color:#333333;font-weight:normal;}
 .category-forums-list table .forum-main .forum-meta-tooltip .tooltip-inner{max-width:400px;text-align:left;}.category-forums-list table .forum-main .forum-meta-tooltip .tooltip-inner .forum-stats{color:#999999;font-size:10.5px;}.category-forums-list table .forum-main .forum-meta-tooltip .tooltip-inner .forum-stats strong{color:#ffffff;}
 .category-forums-list table .forum-main .forum-meta-tooltip .tooltip-inner .forum-stats span{margin-right:14px;}
 .category-forums-list table .forum-main .forum-meta-tooltip .tooltip-inner .forum-description{clear:both;margin:0px;margin-bottom:7px;padding:0px;color:#eeeeee;font-size:14px;}
@@ -1051,13 +1059,17 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .user-profile .content-list .media .media-body{margin-left:66px;}.user-profile .content-list .media .media-body .post-preview:link,.user-profile .content-list .media .media-body .post-preview:active,.user-profile .content-list .media .media-body .post-preview:visited,.user-profile .content-list .media .media-body .post-preview:hover{display:block;margin-top:7px;color:#333333;font-size:16.8px;text-decoration:none;}
 .user-profile .content-list .media .media-body .media-footer{margin:0px;color:#999999;font-size:10.5px;font-weight:normal;}.user-profile .content-list .media .media-body .media-footer a{color:#555555;}
 .forum-subforums-list{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.forum-subforums-list table{margin:0px;}.forum-subforums-list table caption{background-color:#fbfbfb;border:1px solid #d5d5d5;border-radius:2px 2px 0px 0px;margin:-1px;padding:3.966666666666667px 9.9px;color:#333333;font-size:11.9px;font-weight:bold;text-align:left;}.forum-subforums-list table caption small{margin-left:7px;color:#999999;font-size:11.9px;}
-.forum-subforums-list table td{padding:14.75px 9.9px;}
+.forum-subforums-list table td{padding:14.75px 9.9px;padding-bottom:15.75px;}
 .forum-subforums-list table .forum-icon{padding-right:2.95px;width:1%;}.forum-subforums-list table .forum-icon .forum-icon-wrap{background-color:#555555;border:1px solid #3b3b3b;border-radius:3px;padding:3px 4px;}.forum-subforums-list table .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#cf402e;border:1px solid #a53325;}
 .forum-subforums-list table .forum-icon .forum-icon-wrap.forum-icon-redirect{background-color:#9466c6;border:1px solid #7a43b6;}
 .forum-subforums-list table .forum-main h3{float:left;margin:0px;padding:0px;font-size:17.5px;font-weight:normal;line-height:20px;}.forum-subforums-list table .forum-main h3 a:link,.forum-subforums-list table .forum-main h3 a:visited{color:#333333;}
-.forum-subforums-list table .forum-main .forum-details{background-color:#f7f7f7;border-bottom:1px solid #f0f0f0;border-radius:3px;float:right;margin:-2px 0px;margin-top:-3.0999999999999996px;padding:2px 8px;width:230px;color:#999999;font-size:11.9px;}.forum-subforums-list table .forum-main .forum-details strong,.forum-subforums-list table .forum-main .forum-details a{color:#555555;font-weight:normal;}
-.forum-subforums-list table .forum-main .forum-details a:hover,.forum-subforums-list table .forum-main .forum-details a:active{color:#333333;}
-.forum-subforums-list table .forum-main .forum-details strong.stat-increment{color:#46a546;}
+.forum-subforums-list table .forum-main .dropdown{float:right;right:14px;}.forum-subforums-list table .forum-main .dropdown .dropdown-toggle{padding:4px 8px;opacity:0.6;filter:alpha(opacity=60);color:#333333;font-weight:bold;}.forum-subforums-list table .forum-main .dropdown .dropdown-toggle:hover,.forum-subforums-list table .forum-main .dropdown .dropdown-toggle:active .forum-subforums-list table .forum-main .dropdown .dropdown-toggle:focus{opacity:1;filter:alpha(opacity=100);text-decoration:none;}
+.forum-subforums-list table .forum-main .dropdown.open .dropdown-toggle{background-color:#eeeeee;border-radius:3px 3px 0px 0px;opacity:1;filter:alpha(opacity=100);padding-bottom:6px;text-decoration:none;}
+.forum-subforums-list table .forum-main .dropdown .dropdown-menu{background:none;border:none;box-shadow:none;}.forum-subforums-list table .forum-main .dropdown .dropdown-menu .dropdown-shadow{border-radius:3px;-webkit-box-shadow:0px 0px 3px #999999;-moz-box-shadow:0px 0px 3px #999999;box-shadow:0px 0px 3px #999999;width:256px;position:relative;right:0px;top:-4px;}.forum-subforums-list table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul{background-color:#fbfbfb;border-radius:3px;margin:0px;padding:0px;}.forum-subforums-list table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul li{margin:0px;padding:0px;list-style:none;}.forum-subforums-list table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul li a{border-bottom:1px dotted #d5d5d5;display:block;opacity:0.7;filter:alpha(opacity=70);padding:6px 8px;color:#333333;text-decoration:none;}.forum-subforums-list table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul li a:hover,.forum-subforums-list table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul li a:active{opacity:1;filter:alpha(opacity=100);}
+.forum-subforums-list table .forum-main .dropdown .dropdown-menu .dropdown-shadow ul li:last-child a{border-bottom:none;}
+.forum-subforums-list table .forum-main .forum-details{border-left:1px dotted #e0e0e0;float:right;margin:-10px 0px;margin-top:-8.1px;padding-left:14px;height:35px;width:220px;}.forum-subforums-list table .forum-main .forum-details .thread-name a:link,.forum-subforums-list table .forum-main .forum-details .thread-name a:active,.forum-subforums-list table .forum-main .forum-details .thread-name a:visited,.forum-subforums-list table .forum-main .forum-details .thread-name a:hover{margin-bottom:1px;color:#333333;font-size:11.9px;font-weight:bold;}
+.forum-subforums-list table .forum-main .forum-details .muted{font-size:10.5px;line-height:10.5px;}.forum-subforums-list table .forum-main .forum-details .muted .last-poster,.forum-subforums-list table .forum-main .forum-details .muted a:link,.forum-subforums-list table .forum-main .forum-details .muted a:active,.forum-subforums-list table .forum-main .forum-details .muted a:visited,.forum-subforums-list table .forum-main .forum-details .muted a:hover{color:#555555;}
+.forum-subforums-list table .forum-main .forum-details em,.forum-subforums-list table .forum-main .forum-details .forum-clicks{position:relative;top:7.5px;color:#999999;}.forum-subforums-list table .forum-main .forum-details em strong,.forum-subforums-list table .forum-main .forum-details .forum-clicks strong{color:#333333;font-weight:normal;}
 .forum-subforums-list table .forum-main .forum-meta-tooltip .tooltip-inner{max-width:400px;text-align:left;}.forum-subforums-list table .forum-main .forum-meta-tooltip .tooltip-inner .forum-stats{color:#999999;font-size:10.5px;}.forum-subforums-list table .forum-main .forum-meta-tooltip .tooltip-inner .forum-stats strong{color:#ffffff;}
 .forum-subforums-list table .forum-main .forum-meta-tooltip .tooltip-inner .forum-stats span{margin-right:14px;}
 .forum-subforums-list table .forum-main .forum-meta-tooltip .tooltip-inner .forum-description{clear:both;margin:0px;margin-bottom:7px;padding:0px;color:#eeeeee;font-size:14px;}

static/cranefly/css/cranefly/category.less

@@ -19,6 +19,7 @@
     
     td {
       padding: ((@fontSizeLarge / 2) + 6px) (@fontSizeSmall - 2px);
+      padding-bottom: (@fontSizeLarge / 2) + 7px;
     }
 
     .forum-icon {
@@ -58,30 +59,118 @@
         }
       }
 
-      .forum-details {
-        background-color: darken(@categoryBackground, 3%);
-        border-bottom: 1px solid darken(@categoryBackground, 6%);
-        border-radius: @baseBorderRadius;
+      .dropdown {
         float: right;
-        margin: -2px 0px;
-        margin-top: ((@baseFontSize - @fontSizeSmall) * -1) - 1px;
-        padding: 2px 8px;
-        width: 230px;
+        right: @baseFontSize;
 
-        color: @grayLight;
-        font-size: @fontSizeSmall;
+        .dropdown-toggle {
+          padding: 4px 8px;
+          .opacity(60);
+
+          color: @textColor;
+          font-weight: bold;
 
-        strong, a {
-          color: @gray;
-          font-weight: normal
+          &:hover, &:active &:focus {
+            .opacity(100);
+
+            text-decoration: none;
+          }
         }
 
-        a:hover, a:active {
-          color: @textColor;
+        &.open .dropdown-toggle {
+          background-color: @categoryShadow;
+          border-radius: @baseBorderRadius @baseBorderRadius 0px 0px;
+          .opacity(100);
+          padding-bottom: 6px;
+
+          text-decoration: none;
+        }
+
+        .dropdown-menu {
+          background: none;
+          border: none;
+          box-shadow: none;
+
+          .dropdown-shadow{
+            border-radius: @baseBorderRadius;
+            .box-shadow(0px 0px 3px @grayLight);
+            width: 256px;
+            position: relative;
+            right: 0px;
+            top: -4px;
+
+            ul {
+              background-color: @bodyBackground;
+              border-radius: @baseBorderRadius;
+              margin: 0px;
+              padding: 0px;
+
+              li {
+                margin: 0px;
+                padding: 0px;
+                list-style: none;
+
+                a {
+                  border-bottom: 1px dotted @categoryBorder;
+                  display: block;
+                  .opacity(70);
+                  padding: 6px 8px;
+
+                  color: @textColor;
+                  text-decoration: none;
+
+                  &:hover, &:active {
+                    .opacity(100);
+                  }
+                }
+
+                &:last-child a {
+                  border-bottom: none;
+                }
+              }
+            }
+          }
         }
+      }
 
-        strong.stat-increment {
-          color: @green;
+      .forum-details {
+        border-left: 1px dotted darken(@categoryBackground, 12%);
+        float: right;
+        margin: -10px 0px;
+        margin-top: ((@baseFontSize - @fontSizeSmall) * -1) - 6px;
+        padding-left: @baseFontSize;
+        height: 35px;
+        width: 220px;
+
+        .thread-name {
+          a:link, a:active, a:visited, a:hover {
+            margin-bottom: 1px;
+
+            color: @textColor;
+            font-size: @fontSizeSmall;
+            font-weight: bold;
+          }
+        }
+
+        .muted {
+          font-size: @fontSizeMini;
+          line-height: @fontSizeMini;
+
+          .last-poster, a:link, a:active, a:visited, a:hover {
+            color: @gray;
+          }
+        }
+
+        em, .forum-clicks {
+          position: relative;
+          top: (35px - @baseLineHeight) / 2;
+
+          color: @grayLight;
+
+          strong {
+            color: @textColor;
+            font-weight: normal;
+          }
         }
       }
 

static/cranefly/css/cranefly/forum.less

@@ -34,6 +34,7 @@
     
     td {
       padding: ((@fontSizeLarge / 2) + 6px) (@fontSizeSmall - 2px);
+      padding-bottom: (@fontSizeLarge / 2) + 7px;
     }
 
     .forum-icon {
@@ -73,30 +74,118 @@
         }
       }
 
-      .forum-details {
-        background-color: darken(@categoryBackground, 3%);
-        border-bottom: 1px solid darken(@categoryBackground, 6%);
-        border-radius: @baseBorderRadius;
+      .dropdown {
         float: right;
-        margin: -2px 0px;
-        margin-top: ((@baseFontSize - @fontSizeSmall) * -1) - 1px;
-        padding: 2px 8px;
-        width: 230px;
+        right: @baseFontSize;
 
-        color: @grayLight;
-        font-size: @fontSizeSmall;
+        .dropdown-toggle {
+          padding: 4px 8px;
+          .opacity(60);
 
-        strong, a {
-          color: @gray;
-          font-weight: normal
+          color: @textColor;
+          font-weight: bold;
+
+          &:hover, &:active &:focus {
+            .opacity(100);
+
+            text-decoration: none;
+          }
         }
 
-        a:hover, a:active {
-          color: @textColor;
+        &.open .dropdown-toggle {
+          background-color: @categoryShadow;
+          border-radius: @baseBorderRadius @baseBorderRadius 0px 0px;
+          .opacity(100);
+          padding-bottom: 6px;
+
+          text-decoration: none;
         }
 
-        strong.stat-increment {
-          color: @green;
+        .dropdown-menu {
+          background: none;
+          border: none;
+          box-shadow: none;
+
+          .dropdown-shadow{
+            border-radius: @baseBorderRadius;
+            .box-shadow(0px 0px 3px @grayLight);
+            width: 256px;
+            position: relative;
+            right: 0px;
+            top: -4px;
+
+            ul {
+              background-color: @bodyBackground;
+              border-radius: @baseBorderRadius;
+              margin: 0px;
+              padding: 0px;
+
+              li {
+                margin: 0px;
+                padding: 0px;
+                list-style: none;
+
+                a {
+                  border-bottom: 1px dotted @categoryBorder;
+                  display: block;
+                  .opacity(70);
+                  padding: 6px 8px;
+
+                  color: @textColor;
+                  text-decoration: none;
+
+                  &:hover, &:active {
+                    .opacity(100);
+                  }
+                }
+
+                &:last-child a {
+                  border-bottom: none;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .forum-details {
+        border-left: 1px dotted darken(@categoryBackground, 12%);
+        float: right;
+        margin: -10px 0px;
+        margin-top: ((@baseFontSize - @fontSizeSmall) * -1) - 6px;
+        padding-left: @baseFontSize;
+        height: 35px;
+        width: 220px;
+
+        .thread-name {
+          a:link, a:active, a:visited, a:hover {
+            margin-bottom: 1px;
+
+            color: @textColor;
+            font-size: @fontSizeSmall;
+            font-weight: bold;
+          }
+        }
+
+        .muted {
+          font-size: @fontSizeMini;
+          line-height: @fontSizeMini;
+
+          .last-poster, a:link, a:active, a:visited, a:hover {
+            color: @gray;
+          }
+        }
+
+        em, .forum-clicks {
+          position: relative;
+          top: (35px - @baseLineHeight) / 2;
+
+          color: @grayLight;
+
+          strong {
+            color: @textColor;
+            font-weight: normal;
+          }
         }
       }
 

static/cranefly/css/cranefly/index.less

@@ -41,6 +41,7 @@
     
     td {
       padding: ((@fontSizeLarge / 2) + 6px) (@fontSizeSmall - 2px);
+      padding-bottom: (@fontSizeLarge / 2) + 7px;
     }
 
     .forum-icon {
@@ -80,30 +81,118 @@
         }
       }
 
-      .forum-details {
-        background-color: darken(@categoryBackground, 3%);
-        border-bottom: 1px solid darken(@categoryBackground, 6%);
-        border-radius: @baseBorderRadius;
+      .dropdown {
         float: right;
-        margin: -2px 0px;
-        margin-top: ((@baseFontSize - @fontSizeSmall) * -1) - 1px;
-        padding: 2px 8px;
-        width: 230px;
+        right: @baseFontSize;
 
-        color: @grayLight;
-        font-size: @fontSizeSmall;
+        .dropdown-toggle {
+          padding: 4px 8px;
+          .opacity(60);
 
-        strong, a {
-          color: @gray;
-          font-weight: normal
+          color: @textColor;
+          font-weight: bold;
+
+          &:hover, &:active &:focus {
+            .opacity(100);
+
+            text-decoration: none;
+          }
         }
 
-        a:hover, a:active {
-          color: @textColor;
+        &.open .dropdown-toggle {
+          background-color: @categoryShadow;
+          border-radius: @baseBorderRadius @baseBorderRadius 0px 0px;
+          .opacity(100);
+          padding-bottom: 6px;
+
+          text-decoration: none;
         }
 
-        strong.stat-increment {
-          color: @green;
+        .dropdown-menu {
+          background: none;
+          border: none;
+          box-shadow: none;
+
+          .dropdown-shadow{
+            border-radius: @baseBorderRadius;
+            .box-shadow(0px 0px 3px @grayLight);
+            width: 256px;
+            position: relative;
+            right: 0px;
+            top: -4px;
+
+            ul {
+              background-color: @bodyBackground;
+              border-radius: @baseBorderRadius;
+              margin: 0px;
+              padding: 0px;
+
+              li {
+                margin: 0px;
+                padding: 0px;
+                list-style: none;
+
+                a {
+                  border-bottom: 1px dotted @categoryBorder;
+                  display: block;
+                  .opacity(70);
+                  padding: 6px 8px;
+
+                  color: @textColor;
+                  text-decoration: none;
+
+                  &:hover, &:active {
+                    .opacity(100);
+                  }
+                }
+
+                &:last-child a {
+                  border-bottom: none;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .forum-details {
+        border-left: 1px dotted darken(@categoryBackground, 12%);
+        float: right;
+        margin: -10px 0px;
+        margin-top: ((@baseFontSize - @fontSizeSmall) * -1) - 6px;
+        padding-left: @baseFontSize;
+        height: 35px;
+        width: 220px;
+
+        .thread-name {
+          a:link, a:active, a:visited, a:hover {
+            margin-bottom: 1px;
+
+            color: @textColor;
+            font-size: @fontSizeSmall;
+            font-weight: bold;
+          }
+        }
+
+        .muted {
+          font-size: @fontSizeMini;
+          line-height: @fontSizeMini;
+
+          .last-poster, a:link, a:active, a:visited, a:hover {
+            color: @gray;
+          }
+        }
+
+        em, .forum-clicks {
+          position: relative;
+          top: (35px - @baseLineHeight) / 2;
+
+          color: @grayLight;
+
+          strong {
+            color: @textColor;
+            font-weight: normal;
+          }
         }
       }
 

templates/cranefly/category.html

@@ -28,7 +28,7 @@
   </div>
   {% endif %}
   {% if category.subforums %}
-  <div class="category-forums-list{% if category.style %} category-forums-{{ category.style }}{% endif %}">
+  <div id="subforums" class="category-forums-list{% if category.style %} category-forums-{{ category.style }}{% endif %}">
     <table class="table">
       <tbody>
         {% for forum in category.subforums %}
@@ -36,19 +36,40 @@
           <td class="forum-icon"><span class="forum-icon-wrap{% if forum.type == 'redirect' %} forum-icon-redirect{% elif not forum.is_read %} forum-icon-new{% endif %}"><i class="icon-{% if forum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %} icon-white"></i></span></td>
           <td id="forum-{{ forum.id }}" class="forum-main">
             <h3 class="forum-title{% if not forum.is_read %} forum-title-new{% endif %}"><a href="{{ forum.type|url(slug=forum.slug, forum=forum.id) }}">{{ forum.name }}</a></h3>
-            {% if forum.show_details and forum.type != 'redirect' %}
+            {% if forum.show_details %}
             <div class="forum-details">
+              {% if forum.type != 'redirect' %}
               {% if acl.forums.can_browse(forum) and (acl.threads.can_read_threads(forum) == 2 or (acl.threads.can_read_threads(forum) == 1 and forum.last_poster_id == user.pk)) %}
               {% if forum.last_thread_id -%}
-              {% trans %}Latest{% endtrans %}: <a href="{% url 'thread_new' thread=forum.last_thread_id, slug=forum.last_thread_slug %}" class="tooltip-top" title="{{ forum.last_thread_name }}">{{ forum.last_thread_name|short_string(30) }}</a>
+              <div class="thread-name">
+                <a href="{% url 'thread_new' thread=forum.last_thread_id, slug=forum.last_thread_slug %}"{% if forum.last_thread_name|length > 36 %} class="tooltip-top" title="{{ forum.last_thread_name }}"{% endif %}>{{ forum.last_thread_name|short_string(36) }}</a>
+              </div>
+              <div class="muted">{% if forum.last_poster_id %}<a href="{% url 'user' user=forum.last_poster_id, username=forum.last_poster_slug %}" class="last-poster">{{ forum.last_poster_name }}</a>{% else %}<span class="last-poster">{{ forum.last_poster_name }}</span>{% endif %} - {{ forum.last_thread_date|reldate }}</div>
               {%- else -%}
               <em>{% trans %}This forum is empty{% endtrans %}</em>
               {%- endif %}
               {%- else -%}
               <em>{% trans %}This forum is protected{% endtrans %}</em>
               {%- endif %}
+              {%- else -%}
+              <div class="forum-clicks">{% trans clicks=macros.wrap(forum.redirects|intcomma, 'strong') %}{{ clicks }} clicks{% endtrans %}</div>
+              {%- endif %}
             </div>
             {% endif %}
+            {% if forum.subforums %}
+            <div class="dropdown">
+              <a href="{{ forum.type|url(slug=forum.slug, forum=forum.id) }}#subforums" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-chevron-down"></i> {% trans %}Subforums{% endtrans %}</a>
+              <div class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                <div class="dropdown-shadow">
+                  <ul>
+                    {% for subforum in forum.subforums %}
+                    <li><a href="{{ subforum.type|url(slug=subforum.slug, forum=subforum.id) }}"><i class="icon-{% if subforum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %}"></i> {{ subforum.name }}</a></li>
+                    {% endfor %}
+                  </ul>
+                </div>
+              </div>
+            </div>
+            {% endif%}
             <div class="hide forum-meta">
               {% if forum.description %}<p class="forum-description">{{ forum.description }}</p>{% endif %}
               <div class="forum-stats">

templates/cranefly/index.html

@@ -22,19 +22,40 @@
               <td class="forum-icon"><span class="forum-icon-wrap{% if forum.type == 'redirect' %} forum-icon-redirect{% elif not forum.is_read %} forum-icon-new{% endif %}"><i class="icon-{% if forum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %} icon-white"></i></span></td>
               <td id="forum-{{ forum.id }}" class="forum-main">
                 <h3 class="forum-title{% if not forum.is_read %} forum-title-new{% endif %}"><a href="{{ forum.type|url(slug=forum.slug, forum=forum.id) }}">{{ forum.name }}</a></h3>
-                {% if forum.show_details and forum.type != 'redirect' %}
+                {% if forum.show_details %}
                 <div class="forum-details">
+                  {% if forum.type != 'redirect' %}
                   {% if acl.forums.can_browse(forum) and (acl.threads.can_read_threads(forum) == 2 or (acl.threads.can_read_threads(forum) == 1 and forum.last_poster_id == user.pk)) %}
                   {% if forum.last_thread_id -%}
-                  {% trans %}Latest{% endtrans %}: <a href="{% url 'thread_new' thread=forum.last_thread_id, slug=forum.last_thread_slug %}" class="tooltip-top" title="{{ forum.last_thread_name }}">{{ forum.last_thread_name|short_string(30) }}</a>
+                  <div class="thread-name">
+                    <a href="{% url 'thread_new' thread=forum.last_thread_id, slug=forum.last_thread_slug %}"{% if forum.last_thread_name|length > 36 %} class="tooltip-top" title="{{ forum.last_thread_name }}"{% endif %}>{{ forum.last_thread_name|short_string(36) }}</a>
+                  </div>
+                  <div class="muted">{% if forum.last_poster_id %}<a href="{% url 'user' user=forum.last_poster_id, username=forum.last_poster_slug %}" class="last-poster">{{ forum.last_poster_name }}</a>{% else %}<span class="last-poster">{{ forum.last_poster_name }}</span>{% endif %} - {{ forum.last_thread_date|reldate }}</div>
                   {%- else -%}
                   <em>{% trans %}This forum is empty{% endtrans %}</em>
                   {%- endif %}
                   {%- else -%}
                   <em>{% trans %}This forum is protected{% endtrans %}</em>
                   {%- endif %}
+                  {%- else -%}
+                  <div class="forum-clicks">{% trans clicks=macros.wrap(forum.redirects|intcomma, 'strong') %}{{ clicks }} clicks{% endtrans %}</div>
+                  {%- endif %}
                 </div>
                 {% endif %}
+                {% if forum.subforums %}
+                <div class="dropdown">
+                  <a href="{{ forum.type|url(slug=forum.slug, forum=forum.id) }}#subforums" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-chevron-down"></i> {% trans %}Subforums{% endtrans %}</a>
+                  <div class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                    <div class="dropdown-shadow">
+                      <ul>
+                        {% for subforum in forum.subforums %}
+                        <li><a href="{{ subforum.type|url(slug=subforum.slug, forum=subforum.id) }}"><i class="icon-{% if subforum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %}"></i> {{ subforum.name }}</a></li>
+                        {% endfor %}
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                {% endif%}
                 <div class="hide forum-meta">
                   {% if forum.description %}<p class="forum-description">{{ forum.description }}</p>{% endif %}
                   <div class="forum-stats">

templates/cranefly/macros.html

@@ -43,4 +43,8 @@
 
 {% macro itemprop_bread() -%}
 itemprop="breadcrumb"
+{%- endmacro %}
+
+{% macro wrap(item, wrap) -%}
+<{{ wrap }}>{{ item }}</{{ wrap }}>
 {%- endmacro %}

templates/cranefly/threads/list.html

@@ -31,36 +31,57 @@
   {% endif %}
 
   {% if forum.subforums %}
-  <div class="forum-subforums-list{% if forum.style %} forum-subforums-{{ forum.style }}{% endif %}">
+  <div id="subforums" class="forum-subforums-list{% if forum.style %} forum-subforums-{{ forum.style }}{% endif %}">
     <table class="table">
       <caption>{% trans %}Child forums{% endtrans %}</caption>
       <tbody>
         {% for subforum in forum.subforums %}
         <tr>
-          <td class="forum-icon"><span class="forum-icon-wrap{% if forum.type == 'redirect' %} forum-icon-redirect{% elif not forum.is_read %} forum-icon-new{% endif %}"><i class="icon-{% if forum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %} icon-white"></i></span></td>
-          <td id="forum-{{ forum.id }}" class="forum-main">
-            <h3 class="forum-title{% if not forum.is_read %} forum-title-new{% endif %}"><a href="{{ forum.type|url(slug=forum.slug, forum=forum.id) }}">{{ forum.name }}</a></h3>
-            {% if forum.show_details and forum.type != 'redirect' %}
+          <td class="forum-icon"><span class="forum-icon-wrap{% if subforum.type == 'redirect' %} forum-icon-redirect{% elif not subforum.is_read %} forum-icon-new{% endif %}"><i class="icon-{% if subforum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %} icon-white"></i></span></td>
+          <td id="forum-{{ subforum.id }}" class="forum-main">
+            <h3 class="forum-title{% if not subforum.is_read %} forum-title-new{% endif %}"><a href="{{ subforum.type|url(slug=subforum.slug, forum=subforum.id) }}">{{ subforum.name }}</a></h3>
+            {% if subforum.show_details %}
             <div class="forum-details">
-              {% if acl.forums.can_browse(forum) and (acl.threads.can_read_threads(forum) == 2 or (acl.threads.can_read_threads(forum) == 1 and forum.last_poster_id == user.pk)) %}
-              {% if forum.last_thread_id -%}
-              {% trans %}Latest{% endtrans %}: <a href="{% url 'thread_new' thread=forum.last_thread_id, slug=forum.last_thread_slug %}" class="tooltip-top" title="{{ forum.last_thread_name }}">{{ forum.last_thread_name|short_string(30) }}</a>
+              {% if subforum.type != 'redirect' %}
+              {% if acl.forums.can_browse(subforum) and (acl.threads.can_read_threads(subforum) == 2 or (acl.threads.can_read_threads(subforum) == 1 and subforum.last_poster_id == user.pk)) %}
+              {% if subforum.last_thread_id -%}
+              <div class="thread-name">
+                <a href="{% url 'thread_new' thread=subforum.last_thread_id, slug=subforum.last_thread_slug %}"{% if subforum.last_thread_name|length > 36 %} class="tooltip-top" title="{{ subforum.last_thread_name }}"{% endif %}>{{ subforum.last_thread_name|short_string(36) }}</a>
+              </div>
+              <div class="muted">{% if subforum.last_poster_id %}<a href="{% url 'user' user=subforum.last_poster_id, username=subforum.last_poster_slug %}" class="last-poster">{{ subforum.last_poster_name }}</a>{% else %}<span class="last-poster">{{ subforum.last_poster_name }}</span>{% endif %} - {{ subforum.last_thread_date|reldate }}</div>
               {%- else -%}
               <em>{% trans %}This forum is empty{% endtrans %}</em>
               {%- endif %}
               {%- else -%}
               <em>{% trans %}This forum is protected{% endtrans %}</em>
               {%- endif %}
+              {%- else -%}
+              <div class="forum-clicks">{% trans clicks=macros.wrap(subforum.redirects|intcomma, 'strong') %}{{ clicks }} clicks{% endtrans %}</div>
+              {%- endif %}
             </div>
             {% endif %}
+            {% if subforum.subforums %}
+            <div class="dropdown">
+              <a href="{{ subforum.type|url(slug=subforum.slug, forum=subforum.id) }}#subforums" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-chevron-down"></i> {% trans %}Subforums{% endtrans %}</a>
+              <div class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                <div class="dropdown-shadow">
+                  <ul>
+                    {% for subsubforum in subforum.subforums %}
+                    <li><a href="{{ subsubforum.type|url(slug=subsubforum.slug, forum=subsubforum.id) }}"><i class="icon-{% if subsubforum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %}"></i> {{ subsubforum.name }}</a></li>
+                    {% endfor %}
+                  </ul>
+                </div>
+              </div>
+            </div>
+            {% endif%}
             <div class="hide forum-meta">
-              {% if forum.description %}<p class="forum-description">{{ forum.description }}</p>{% endif %}
+              {% if subforum.description %}<p class="forum-description">{{ subforum.description }}</p>{% endif %}
               <div class="forum-stats">
-                {% if forum.type != 'redirect' %}
-                <span>{% trans %}Posts{% endtrans %}: <strong>{{ forum.posts|intcomma }}</strong></span>
-                {% trans %}Threads{% endtrans %}: <strong>{{ forum.threads|intcomma }}</strong>
+                {% if subforum.type != 'redirect' %}
+                <span>{% trans %}Posts{% endtrans %}: <strong>{{ subforum.posts|intcomma }}</strong></span>
+                {% trans %}Threads{% endtrans %}: <strong>{{ subforum.threads|intcomma }}</strong>
                 {% else %}
-                {% trans %}Clicks{% endtrans %}: <strong>{{ forum.redirects|intcomma }}</strong>
+                {% trans %}Clicks{% endtrans %}: <strong>{{ subforum.redirects|intcomma }}</strong>
                 {% endif %}
               </div>
             </div>