diff --git a/js/forum/src/components/discussion-list-item.js b/js/forum/src/components/discussion-list-item.js index 319debb89..87f650ca7 100644 --- a/js/forum/src/components/discussion-list-item.js +++ b/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) diff --git a/less/forum/index.less b/less/forum/index.less index 85b3e5d1b..939d3a067 100644 --- a/less/forum/index.less +++ b/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; + } } } } diff --git a/less/lib/buttons.less b/less/lib/buttons.less index e6e024424..4177eda46 100644 --- a/less/lib/buttons.less +++ b/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 { diff --git a/less/lib/variables.less b/less/lib/variables.less index 7dc335727..c6cca657e 100644 --- a/less/lib/variables.less +++ b/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;