diff --git a/extensions/tags/js/src/components/tags-page.js b/extensions/tags/js/src/components/tags-page.js index f64f16524..6c7ec39d1 100644 --- a/extensions/tags/js/src/components/tags-page.js +++ b/extensions/tags/js/src/components/tags-page.js @@ -37,19 +37,23 @@ export default class TagsPage extends Component { return parent && parent.id() == tag.id(); }); - return m('li.tag-tile', {style: 'background-color: '+tag.color()}, [ + return m('li.tag-tile', {className: tag.color() ? 'colored' : '', style: 'background-color: '+tag.color()}, [ m('a.tag-info', {href: app.route.tag(tag), config: m.route}, [ m('h3.name', tag.name()), m('p.description', tag.description()), children ? m('div.children', children.map(tag => - m('a', {href: app.route.tag(tag), config: m.route, onclick: (e) => e.stopPropagation()}, tag.name()) + m('a', {href: app.route.tag(tag), config: function(element, isInitialized) { + if (isInitialized) return; + $(element).on('click', e => e.stopPropagation()); + m.route.apply(this, arguments); + }}, tag.name()) )) : '' ]), lastDiscussion ? m('a.last-discussion', { href: app.route.discussion(lastDiscussion, lastDiscussion.lastPostNumber()), config: m.route - }, [m('span.title', lastDiscussion.title()), humanTime(lastDiscussion.lastTime())]) + }, [humanTime(lastDiscussion.lastTime()), m('span.title', lastDiscussion.title())]) : m('span.last-discussion') ]); }) diff --git a/extensions/tags/less/extension.less b/extensions/tags/less/extension.less index e33987af8..90984629e 100644 --- a/extensions/tags/less/extension.less +++ b/extensions/tags/less/extension.less @@ -278,9 +278,15 @@ } .tag-tile { position: relative; + background: @fl-body-secondary-color; &, & a { - color: #fff; + color: @fl-body-muted-color; + } + &.colored { + &, & a { + color: #fff; + } } & .tag-info, & .last-discussion { padding: 20px; @@ -294,15 +300,15 @@ transition: background 0.2s; &:hover { - background: fade(#000, 10%); + background: fade(#000, 5%); } &:active { - background: fade(#000, 20%); + background: fade(#000, 15%); } } & .tag-info { top: 0; - bottom: 55px; + bottom: 45px; padding-right: 20px; & .name { @@ -311,8 +317,9 @@ font-weight: normal; } & .description { - color: fade(#fff, 50%); - margin: 0 0 15px; + font-size: 14px; + opacity: 0.5; + margin: 0 0 10px; } & .children { text-transform: uppercase; @@ -326,17 +333,29 @@ } & .last-discussion { bottom: 0; - height: 55px; - border-top: 1px solid rgba(0, 0, 0, 0.1); - padding-top: 17px; - padding-bottom: 17px; - color: fade(#fff, 50%); + height: 45px; + padding-top: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; + line-height: 21px; + opacity: 0.5; + + &, &:hover, &:active { + background: fade(#000, 10%); + } & .title { - margin-right: 15px; + margin-right: 10px; + } + &:hover .title { + text-decoration: underline; + } + & time { + text-transform: uppercase; + font-size: 11px; + font-weight: bold; + float: right; } } } diff --git a/extensions/tags/src/TagSerializer.php b/extensions/tags/src/TagSerializer.php index 27c58e39e..cda168248 100644 --- a/extensions/tags/src/TagSerializer.php +++ b/extensions/tags/src/TagSerializer.php @@ -47,6 +47,6 @@ class TagSerializer extends BaseSerializer protected function lastDiscussion() { - return $this->hasOne('Flarum\Api\Serializers\DiscussionBasicSerializer'); + return $this->hasOne('Flarum\Api\Serializers\DiscussionSerializer'); } }