mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-09 01:46:35 +02:00
Code Issues Releases Wiki Activity

Improve appearance of tags page. closes #4

Browse Source
This commit is contained in:
Toby Zerner
2015-06-25 15:43:24 +09:30
parent 0389ea53de
commit e41e50f423
3 changed files with 39 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
extensions/tags/js/src/components/tags-page.js
View File

@@ -37,19 +37,23 @@ export default class TagsPage extends Component {
return parent && parent.id() == tag.id(); 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('a.tag-info', {href: app.route.tag(tag), config: m.route}, [
m('h3.name', tag.name()), m('h3.name', tag.name()),
m('p.description', tag.description()), m('p.description', tag.description()),
children ? m('div.children', children.map(tag => 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 lastDiscussion
? m('a.last-discussion', { ? m('a.last-discussion', {
href: app.route.discussion(lastDiscussion, lastDiscussion.lastPostNumber()), href: app.route.discussion(lastDiscussion, lastDiscussion.lastPostNumber()),
config: m.route config: m.route
}, [m('span.title', lastDiscussion.title()), humanTime(lastDiscussion.lastTime())]) }, [humanTime(lastDiscussion.lastTime()), m('span.title', lastDiscussion.title())])
: m('span.last-discussion') : m('span.last-discussion')
]); ]);
}) })

41
extensions/tags/less/extension.less
View File

@@ -278,10 +278,16 @@
} }
.tag-tile { .tag-tile {
position: relative; position: relative;
background: @fl-body-secondary-color;
&, & a {
color: @fl-body-muted-color;
}
&.colored {
&, & a { &, & a {
color: #fff; color: #fff;
} }
}
& .tag-info, & .last-discussion { & .tag-info, & .last-discussion {
padding: 20px; padding: 20px;
text-decoration: none; text-decoration: none;
@@ -294,15 +300,15 @@
transition: background 0.2s; transition: background 0.2s;
&:hover { &:hover {
background: fade(#000, 10%); background: fade(#000, 5%);
} }
&:active { &:active {
background: fade(#000, 20%); background: fade(#000, 15%);
} }
} }
& .tag-info { & .tag-info {
top: 0; top: 0;
bottom: 55px; bottom: 45px;
padding-right: 20px; padding-right: 20px;
& .name { & .name {
@@ -311,8 +317,9 @@
font-weight: normal; font-weight: normal;
} }
& .description { & .description {
color: fade(#fff, 50%); font-size: 14px;
margin: 0 0 15px; opacity: 0.5;
margin: 0 0 10px;
} }
& .children { & .children {
text-transform: uppercase; text-transform: uppercase;
@@ -326,17 +333,29 @@
} }
& .last-discussion { & .last-discussion {
bottom: 0; bottom: 0;
height: 55px; height: 45px;
border-top: 1px solid rgba(0, 0, 0, 0.1); padding-top: 12px;
padding-top: 17px;
padding-bottom: 17px;
color: fade(#fff, 50%);
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
line-height: 21px;
opacity: 0.5;
&, &:hover, &:active {
background: fade(#000, 10%);
}
& .title { & .title {
margin-right: 15px; margin-right: 10px;
}
&:hover .title {
text-decoration: underline;
}
& time {
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
float: right;
} }
} }
} }

2
extensions/tags/src/TagSerializer.php
View File

@@ -47,6 +47,6 @@ class TagSerializer extends BaseSerializer
protected function lastDiscussion() protected function lastDiscussion()
{ {
return $this->hasOne('Flarum\Api\Serializers\DiscussionBasicSerializer'); return $this->hasOne('Flarum\Api\Serializers\DiscussionSerializer');
} }
} }