Convert latest-topic-list to components and remove nested tables
This commit is contained in:
Robin Ward
parent
9e475860e0
commit
8ccde140e5
|
|
@ -0,0 +1,3 @@
|
|||
export default Ember.Component.extend({
|
||||
tagName: ''
|
||||
});
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { showEntrance } from "discourse/components/topic-list-item";
|
||||
|
||||
export default Ember.Component.extend({
|
||||
tagName: "tr",
|
||||
click: showEntrance,
|
||||
attributeBindings: ['topic.id:data-topic-id'],
|
||||
classNameBindings: [':latest-topic-list-item', 'topic.archived']
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
export default Ember.Component.extend({
|
||||
classNames: ['latest-topic-list']
|
||||
});
|
||||
|
|
@ -1,29 +1,7 @@
|
|||
{{categories-only categories=categories}}
|
||||
<div class='column categories'>
|
||||
{{categories-only categories=categories}}
|
||||
</div>
|
||||
|
||||
<table class="topic-list topic-list-latest">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="latest">{{i18n "filters.latest.title"}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#if topics}}
|
||||
{{#each topics as |t|}}
|
||||
{{latest-topic-list-item topic=t}}
|
||||
{{/each}}
|
||||
<tr class="more-topics">
|
||||
<td>
|
||||
<a href="/latest" class="btn pull-right">{{i18n "more"}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr class="no-topics">
|
||||
<td>
|
||||
<h3>{{i18n "topics.none.latest"}}</h3>
|
||||
</td>
|
||||
</tr>
|
||||
{{/if}}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
<div class='column'>
|
||||
{{latest-topic-list topics=topics}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,25 @@
|
|||
<table>
|
||||
<tbody>
|
||||
<tr data-topic-id={{topic.id}} class="{{if topic.archived 'archived'}}">
|
||||
<td class="topic-poster">
|
||||
{{#with topic.lastPoster as |lastPoster|}}
|
||||
{{#user-link user=lastPoster}}
|
||||
{{avatar lastPoster imageSize="large"}}
|
||||
{{/user-link}}
|
||||
{{/with}}
|
||||
</td>
|
||||
<td class="main-link">
|
||||
<tr>
|
||||
{{raw "topic-status" topic=topic}}
|
||||
{{topic-link topic}}
|
||||
{{#if topic.featured_link}}
|
||||
{{topic-featured-link topic}}
|
||||
{{/if}}
|
||||
{{topic-post-badges newPosts=topic.totalUnread unseen=topic.unseen url=topic.lastUnreadUrl}}
|
||||
</tr>
|
||||
<tr>
|
||||
{{category-link topic.category}}
|
||||
{{discourse-tags topic mode="list"}}
|
||||
</tr>
|
||||
</td>
|
||||
<td class="topic-stats">
|
||||
{{raw "list/posts-count-column" topic=topic tagName="div"}}
|
||||
<div class="topic-last-activity">
|
||||
<a href="{{topic.lastPostUrl}}" title="{{topic.bumpedAtTitle}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class='topic-poster'>
|
||||
{{#user-link user=topic.lastPoster}}
|
||||
{{avatar topic.lastPoster imageSize="large"}}
|
||||
{{/user-link}}
|
||||
</div>
|
||||
<div class='main-link'>
|
||||
<div class='top-row'>
|
||||
{{raw "topic-status" topic=topic}}
|
||||
{{topic-link topic}}
|
||||
{{#if topic.featured_link}}
|
||||
{{topic-featured-link topic}}
|
||||
{{/if}}
|
||||
{{topic-post-badges newPosts=topic.totalUnread unseen=topic.unseen url=topic.lastUnreadUrl}}
|
||||
</div>
|
||||
<div class='bottom-row'>
|
||||
{{category-link topic.category}}
|
||||
{{discourse-tags topic mode="list"}}
|
||||
</div>
|
||||
</div>
|
||||
<div class='topic-stats'>
|
||||
{{raw "list/posts-count-column" topic=topic tagName="div"}}
|
||||
<div class="topic-last-activity">
|
||||
<a href="{{topic.lastPostUrl}}" title="{{topic.bumpedAtTitle}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<div class='table-heading'>
|
||||
{{i18n "filters.latest.title"}}
|
||||
</div>
|
||||
|
||||
{{#if topics}}
|
||||
{{#each topics as |t|}}
|
||||
{{latest-topic-list-item topic=t}}
|
||||
{{/each}}
|
||||
<div class="more-topics">
|
||||
<a href="/latest" class="btn pull-right">{{i18n "more"}}</a>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class='no-topics'>
|
||||
<h3>{{i18n "topics.none.latest"}}</h3>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -19,6 +19,25 @@
|
|||
html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-medium; }
|
||||
.topic-list a.title.visited:not(.badge-notification) {color: $primary-medium; }
|
||||
|
||||
.topic-list-main-link {
|
||||
font-size: 1.143em;
|
||||
a.title {
|
||||
padding: 15px 0;
|
||||
word-break: break-word;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.anon & {
|
||||
a.title:visited:not(.badge-notification) {
|
||||
color: $primary-medium;
|
||||
}
|
||||
}
|
||||
|
||||
a.title.visited:not(.badge-notification) {
|
||||
color: $primary-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
|
@ -58,7 +77,7 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-
|
|||
}
|
||||
|
||||
> tbody > tr:first-of-type {
|
||||
border-top: 3px solid $primary-low;
|
||||
border-top: 3px solid $primary-low;
|
||||
}
|
||||
|
||||
th,
|
||||
|
|
@ -81,11 +100,7 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-
|
|||
}
|
||||
|
||||
.main-link {
|
||||
font-size: 1.143em;
|
||||
a.title {
|
||||
padding: 15px 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
@extend .topic-list-main-link;
|
||||
}
|
||||
|
||||
.topic-featured-link {
|
||||
|
|
@ -344,3 +359,14 @@ ol.category-breadcrumb {
|
|||
div.education {
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
|
||||
}
|
||||
|
||||
.list-cell {
|
||||
padding: 12px 5px;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
|
||||
}
|
||||
|
||||
.table-heading {
|
||||
@extend .list-cell;
|
||||
border-bottom: 2px solid $primary-low;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
@import "desktop/modal";
|
||||
@import "desktop/user-card";
|
||||
@import "desktop/category-list";
|
||||
@import "desktop/latest-topic-list";
|
||||
@import "desktop/topic-list";
|
||||
@import "desktop/topic-post";
|
||||
@import "desktop/topic";
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
width: 100%;
|
||||
|
||||
td, th {
|
||||
padding: 12px 5px;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
|
||||
@extend .list-cell;
|
||||
}
|
||||
|
||||
td {
|
||||
|
|
@ -90,9 +89,9 @@
|
|||
|
||||
tbody {
|
||||
tr {
|
||||
border-bottom: 1px solid $primary-low;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
&:first-of-type {
|
||||
border-top: 3px solid $primary-low;
|
||||
border-top: 3px solid $primary-low;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -116,38 +115,15 @@
|
|||
}
|
||||
|
||||
.categories-and-latest {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.category-list,
|
||||
.topic-list-latest {
|
||||
width: 48%;
|
||||
div.column {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.topic-list-latest {
|
||||
float: right;
|
||||
th.latest {
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.new-posts {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.topic-stats {
|
||||
text-align: right;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
|
||||
}
|
||||
|
||||
.topic-last-activity a {
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
|
||||
div.column.categories {
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
.discourse-tag {
|
||||
|
|
@ -157,25 +133,5 @@
|
|||
.topic-featured-link {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.topic-list {
|
||||
.posts {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.num.posts a {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.more-topics,
|
||||
.no-topics {
|
||||
border-bottom: none;
|
||||
td {
|
||||
padding-right: 0;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
.latest-topic-list {
|
||||
@extend .topic-list-icons;
|
||||
|
||||
.table-heading {
|
||||
padding: 12px 5px;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
|
||||
}
|
||||
|
||||
.no-topics, .more-topics {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.latest-topic-list-item {
|
||||
padding: 1em;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
.topic-poster {
|
||||
width: 60px;
|
||||
}
|
||||
.main-link {
|
||||
@extend .topic-list-main-link;
|
||||
flex: 15;
|
||||
|
||||
.top-row {
|
||||
margin-bottom: 0.1em;
|
||||
}
|
||||
}
|
||||
.topic-stats {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
|
||||
}
|
||||
|
||||
.topic-last-activity a {
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
|
||||
}
|
||||
}
|
||||
|
|
@ -33,12 +33,17 @@
|
|||
// Base list
|
||||
// --------------------------------------------------
|
||||
|
||||
.topic-list {
|
||||
margin: 0 0 10px;
|
||||
.topic-list-icons {
|
||||
.d-icon-thumb-tack { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
|
||||
.d-icon-thumb-tack.unpinned { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
|
||||
a.title {color: $primary;}
|
||||
.d-icon-bookmark { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
|
||||
}
|
||||
|
||||
.topic-list {
|
||||
@extend .topic-list-icons;
|
||||
|
||||
margin: 0 0 10px;
|
||||
th,
|
||||
td {
|
||||
padding: 12px 5px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue