New look for discussion reply/unread count

Also decrease the max page width by 100px

framework/core/js/forum/src/components/discussion-list-item.js

@@ -39,6 +39,7 @@ export default class DiscussionListItem extends Component {
 
     return this.subtree.retain() || m('div.discussion-list-item', {className: this.active() ? 'active' : ''}, [
       controls.length ? DropdownButton.component({
+        icon: 'ellipsis-h',
         items: controls,
         className: 'contextual-controls',
         buttonClass: 'btn btn-default btn-icon btn-sm btn-naked slidable-underneath slidable-underneath-right',
@@ -70,9 +71,8 @@ export default class DiscussionListItem extends Component {
           m('ul.info', listItems(this.infoItems().toArray()))
         ]),
 
-        m('span.count', {onclick: this.markAsRead.bind(this)}, [
-          abbreviateNumber(discussion[displayUnread ? 'unreadCount' : 'repliesCount']()),
-          m('span.label', displayUnread ? 'unread' : 'replies')
+        m('span.count', {onclick: this.markAsRead.bind(this), title: displayUnread ? 'Mark as Read' : ''}, [
+          abbreviateNumber(discussion[displayUnread ? 'unreadCount' : 'repliesCount']())
         ]),
 
         (relevantPosts && relevantPosts.length)

framework/core/less/forum/index.less

@@ -90,10 +90,13 @@
         &.active {
           background: @fl-body-control-bg;
         }
+        & .contextual-controls {
+          display: none;
+        }
       }
       & .discussion-summary {
-        padding-left: 57px + 15px;
-        padding-right: 65px + 15px;
+        padding-left: 52px + 15px;
+        padding-right: 60px + 15px;
 
         & .title {
           font-size: 14px;
@@ -101,6 +104,9 @@
         & .relevant-posts {
           display: none;
         }
+        & .count {
+          margin-top: 11px;
+        }
       }
     }
   }
@@ -189,7 +195,7 @@
     padding: 12px 0;
   }
   &:hover .title {
-    text-decoration: underline;
+    // text-decoration: underline;
   }
   & .title {
     margin: 0 0 5px;
@@ -369,37 +375,43 @@
 @media @tablet, @desktop, @desktop-hd {
   .discussion-list-item {
     position: relative;
-    margin-right: -25px;
-    padding-right: 25px;
+    margin-right: -15px;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-left: -15px;
+    border-radius: @border-radius-base;
 
     & .contextual-controls {
       visibility: hidden;
       position: absolute;
-      right: 0;
-      top: 8px;
+      right: 90px;
+      top: 15px;
       z-index: 1;
 
       & .dropdown-toggle {
         display: block;
       }
     }
+    &:hover {
+      background: lighten(@fl-body-secondary-color, 3%);
+    }
     &:hover .contextual-controls, & .contextual-controls.open {
       visibility: visible;
     }
   }
   .discussion-summary {
-    padding-left: 57px;
-    padding-right: 65px;
+    padding-left: 52px;
+    padding-right: 60px;
 
     & .author {
-      margin-left: -57px;
+      margin-left: -52px;
     }
     & .badges {
       margin-left: -55px;
       width: 48px;
     }
     & .avatar {
-      .avatar-size(40px);
+      .avatar-size(36px);
     }
     & .main {
       margin-right: -65px;
@@ -408,22 +420,27 @@
       font-size: 16px;
     }
     & .count {
-      margin-right: -65px;
-      width: 60px;
-      text-align: center;
-      text-transform: uppercase;
+      margin-top: 21px;
+      margin-right: -60px;
+      width: 55px;
       color: @fl-body-muted-color;
-      font-size: 20px;
-      font-weight: 300;
+      font-size: 15px;
+      padding-left: 24px;
 
-      & .label {
-        font-size: 11px;
-        display: block;
-        font-weight: normal;
+      &:before {
+        .fa();
+        content: @fa-var-comment-o;
+        float: left;
+        margin-left: -24px;
+        margin-top: 2px;
       }
       .unread& {
         color: @fl-body-heading-color;
         font-weight: bold;
+
+        &:before {
+          content: @fa-var-comment;
+        }
       }
     }
   }

framework/core/less/lib/buttons.less

@@ -69,9 +69,9 @@
   & .label, & .icon-caret {
     display: none;
   }
-  & .fa-ellipsis-v {
-    font-size: 17px;
-    vertical-align: middle;
+  & .icon {
+    font-size: 16px;
+    vertical-align: -1px;
   }
 
   @media @phone {

framework/core/less/lib/variables.less

@@ -22,7 +22,7 @@
 
   @fl-body-bg:                        #fff;
   @fl-body-color:                     #333;
-  @fl-body-muted-color:               hsl(@fl-secondary-hue, min(25%, @fl-secondary-sat), 60%);
+  @fl-body-muted-color:               hsl(@fl-secondary-hue, min(25%, @fl-secondary-sat), 63%);
   @fl-body-muted-more-color:          #bbb;
   @fl-shadow-color:                   rgba(0, 0, 0, 0.35);
 }
@@ -87,6 +87,8 @@
 // ---------------------------------
 // BOOTSTRAP
 
+@container-large-desktop: (1040px + @grid-gutter-width);
+
 @brand-primary:         @fl-body-primary-color;
 
 @body-bg:               @fl-body-bg;