shiran/discourse_theme_ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX: New topic card layout (#79)

Browse Source
This commit is contained in:
Jordan Vidrine
2025-03-26 10:47:52 -05:00
committed by GitHub
parent 6766b94232
commit d300cf9d0f
6 changed files with 249 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascripts/discourse/components/card/topic-activity-column.gjs
+52
View File
@@ -0,0 +1,52 @@
import Component from "@glimmer/component";
import avatar from "discourse/helpers/avatar";
import formatDate from "discourse/helpers/format-date";
import { i18n } from "discourse-i18n";
import gt from "truth-helpers/helpers/gt";
export default class TopicActivityColumn extends Component {
get displayUnreadPosts() {
return this.args.topic.unread_posts || this.args.topic.new_posts;
}
get activityText() {
if (this.args.topic.posts_count > 1) {
return "user_replied";
} else if (this.args.topic.posts_count === 1) {
return "user_posted";
}
}
<template>
<span class="topic-activity">
<div class="topic-activity__user">
{{#if (gt @topic.replyCount 1)}}
{{avatar @topic.lastPosterUser imageSize="small"}}
<span
class="topic-activity__username"
>@{{@topic.last_poster_username}}</span>
{{else}}
{{avatar @topic.creator imageSize="small"}}
<span
class="topic-activity__username"
>@{{@topic.creator.username}}</span>
{{/if}}
</div>
<div class="topic-activity__reason">
{{i18n (themePrefix this.activityText)}}
</div>
<div class="topic-activity__time">
{{formatDate @topic.bumpedAt}}
</div>
{{#if this.displayUnreadPosts}}
<span class="topic-post-badges">
<a
href={{@topic.url}}
title={{i18n "topic.unread_posts" count=this.displayUnreadPosts}}
class="badge badge-notification unread-posts"
>{{this.displayUnreadPosts}}</a>
</span>
{{/if}}
</span>
</template>
}
javascripts/discourse/initializers/topic-list-columns.gjs
+21 -22
View File
@@ -1,30 +1,28 @@
import { withPluginApi } from "discourse/lib/plugin-api";
import TopicAuthorAvatarColumn from "../components/card/topic-author-avatar-column";
import TopicAuthorColumn from "../components/card/topic-author-column";
import TopicActivityColumn from "../components/card/topic-activity-column";
import TopicCategoryColumn from "../components/card/topic-category-column";
import TopicLikesColumn from "../components/card/topic-likes-column";
import TopicRepliesColumn from "../components/card/topic-replies-column";
import TopicStatusColumn from "../components/card/topic-status-column";
const TopicAuthor = <template>
<td class="topic-author-data">
<TopicAuthorColumn @topic={{@topic}} />
const TopicActivity = <template>
<td class="topic-activity-data">
<TopicActivityColumn @topic={{@topic}} />
</td>
</template>;
const TopicAuthorAvatar = <template>
<td class="topic-author-avatar-data">
<TopicAuthorAvatarColumn @topic={{@topic}} />
</td>
</template>;
const TopicCategoryStatus = <template>
<td class="topic-category-status-data">
<TopicCategoryColumn @topic={{@topic}} />
const TopicStatus = <template>
<td class="topic-status-data">
<TopicStatusColumn @topic={{@topic}} />
</td>
</template>;
const TopicCategory = <template>
<td class="topic-category-data">
<TopicCategoryColumn @topic={{@topic}} />
</td>
</template>;
const TopicLikesReplies = <template>
<td class="topic-likes-replies-data">
<TopicLikesColumn @topic={{@topic}} />
@@ -40,17 +38,17 @@ export default {
api.registerValueTransformer(
"topic-list-columns",
({ value: columns }) => {
columns.add("topic-author", {
item: TopicAuthor,
after: "activity",
columns.add("topic-activity", {
item: TopicActivity,
after: "title",
});
columns.add("topic-category-status", {
item: TopicCategoryStatus,
columns.add("topic-status", {
item: TopicStatus,
after: "topic-author",
});
columns.add("topic-author-avatar", {
item: TopicAuthorAvatar,
after: "topic-category-status",
columns.add("topic-category", {
item: TopicCategory,
after: "topic-status",
});
columns.add("topic-likes-replies", {
item: TopicLikesReplies,
@@ -59,6 +57,7 @@ export default {
columns.delete("posters");
columns.delete("views");
columns.delete("replies");
columns.delete("activity");
return columns;
}
);
locales/en.yml
+3 -7
View File
@@ -1,12 +1,8 @@
en:
theme_metadata:
description: "A simple, beautiful theme that improves the out of the box experience for Discourse sites."
topic_bookmarked: "Bookmarked"
topic_closed_archived: "Closed and archived"
topic_closed: "Closed"
topic_archived: "Archived"
topic_warning: "Warning"
topic_personal_message: "Personal message"
topic_pinned: "Pinned"
topic_unpinned: "Unpinned"
topic_hot: "Hot"
user_replied: "replied"
user_posted: "posted"
scss/mobile-stuff.scss
-13
View File
@@ -85,19 +85,6 @@
padding-top: 0;
}
}
.topic-list-item {
@include breakpoint(mobile-extra-large) {
box-shadow: none;
border-radius: 0;
//to be moved to topic card segment for general use
// .navigation-category & {
// .badge-category__wrapper {
// display: none;
// }
// }
}
}
}
#topic-title {
scss/topic-cards.scss
+170 -149
View File
@@ -24,132 +24,67 @@
}
}
.bulk-select-enabled .topic-list-item {
grid-template-areas:
"avatar author status status . activity"
". topic-title topic-title topic-title likes-replies likes-replies category";
.bulk-select {
grid-area: bulk-select;
padding: 0;
margin: 0;
align-self: center;
justify-self: center;
label {
margin: 0;
}
}
@include breakpoint(large) {
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
grid-template-rows: 22px minmax(22px, auto);
grid-template-areas:
"avatar author status status . activity"
". topic-title topic-title topic-title . . likes-replies"
". topic-title topic-title topic-title . . category";
}
@include breakpoint(mobile-extra-large) {
grid-template-columns: 25px auto repeat(6, 1fr);
grid-template-rows: auto auto auto;
grid-template-areas:
"avatar category-status category-status . . . . activity"
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
"avatar author . . . . . likes-replies";
}
}
body.user-messages-page .topic-list-item {
.topic-category-status-data {
display: none;
}
grid-template-areas:
"avatar author status status . . activity"
". topic-title topic-title topic-title likes-replies likes-replies likes-replies";
&.excerpt-expanded {
grid-template-columns: 44px repeat(6, 1fr) auto;
grid-template-rows: 22px auto auto 30px;
grid-template-areas:
"avatar author status status . . . activity"
"avatar topic-title topic-title topic-title topic-title . . ."
". excerpt excerpt excerpt excerpt excerpt . ."
". excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
@include breakpoint(extra-large) {
grid-template-areas:
"avatar author status status . . . activity"
"avatar topic-title topic-title topic-title topic-title . . ."
". excerpt excerpt excerpt excerpt excerpt . likes-replies"
". excerpt excerpt excerpt excerpt excerpt . likes-replies";
}
}
@include breakpoint(mobile-extra-large) {
grid-template-columns: 25px auto repeat(6, 1fr);
grid-template-rows: auto auto;
grid-template-areas:
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title activity"
"avatar author . . . . . likes-replies";
.topic-excerpt {
display: none;
}
}
}
.topic-list-item {
.topic-list-body .topic-list-item {
text-overflow: ellipsis;
padding: 0.75em 1rem;
border: 1px solid var(--primary-300);
display: grid;
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
grid-template-columns: 22px min-content min-content auto min-content min-content min-content;
grid-template-rows: 22px minmax(22px, auto);
grid-template-areas:
"avatar author status status . . activity"
". topic-title topic-title topic-title likes-replies likes-replies category";
"activity activity activity activity . . status"
"topic-title topic-title topic-title topic-title likes-replies likes-replies category";
grid-column-gap: 12px;
grid-row-gap: 8px;
border-radius: var(--d-border-radius);
&.excerpt-expanded {
grid-template-columns: 44px auto repeat(5, 1fr) auto;
grid-template-columns: 22px auto repeat(5, 1fr) auto;
grid-template-rows: 22px auto auto 30px;
grid-template-areas:
"avatar author status status . . . activity"
"avatar topic-title topic-title topic-title topic-title . . ."
". excerpt excerpt excerpt excerpt excerpt . ."
". excerpt excerpt excerpt excerpt excerpt likes-replies category";
"activity activity activity activity . . . status"
"topic-title topic-title topic-title topic-title topic-title topic-title . ."
"excerpt excerpt excerpt excerpt excerpt excerpt . ."
"excerpt excerpt excerpt excerpt excerpt excerpt likes-replies category";
@include breakpoint(extra-large) {
grid-template-areas:
"avatar author status status . . . activity"
"avatar topic-title topic-title topic-title topic-title . . ."
". excerpt excerpt excerpt excerpt excerpt . likes-replies"
". excerpt excerpt excerpt excerpt excerpt . category";
"activity activity activity activity . . . status"
"topic-title topic-title topic-title topic-title topic-title topic-title . ."
"excerpt excerpt excerpt excerpt excerpt excerpt excerpt likes-replies"
"excerpt excerpt excerpt excerpt excerpt excerpt excerpt category";
}
@include breakpoint(mobile-extra-large) {
grid-template-columns: 25px auto repeat(6, 1fr);
grid-template-rows: auto auto auto;
grid-template-areas:
"category-status category-status category-status . . . . activity"
"activity activity activity activity activity activity activity status"
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
"avatar author . . . . . likes-replies";
"category . . . . . . likes-replies";
.topic-excerpt {
display: none;
}
}
}
@include breakpoint(large) {
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
grid-template-columns: 22px repeat(6, 1fr);
grid-template-rows: 22px minmax(22px, auto);
grid-template-areas:
"avatar author status status . . activity"
". topic-title topic-title topic-title . . likes-replies"
". topic-title topic-title topic-title . . category";
"activity activity activity activity activity activity status"
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
"category . . . . . likes-replies";
}
@include breakpoint(mobile-extra-large) {
grid-template-columns: 25px auto repeat(6, 1fr);
grid-template-columns: 25px repeat(7, 1fr);
grid-template-rows: auto auto auto;
grid-template-areas:
"category-status category-status category-status . . . . activity"
"activity activity activity activity activity activity activity status"
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
"avatar author . . . . . likes-replies";
"category . . . . . . likes-replies";
}
@include breakpoint(mobile-extra-large) {
border: none;
border-bottom: 1px solid var(--primary-200);
box-shadow: none;
border-radius: 0;
}
// display contents
@@ -165,34 +100,42 @@ body.user-messages-page .topic-list-item {
padding: 0;
}
// avatar & author
.topic-author-avatar-data,
.author-avatar {
grid-area: avatar;
margin: 0;
// topic activity, avatar, text
.topic-activity-data {
grid-area: activity;
}
.topic-author-avatar img.avatar,
.author-avatar img.avatar {
width: 44px;
height: 44px;
border-radius: var(--d-border-radius);
@include breakpoint(mobile-extra-large) {
width: 25px;
height: 25px;
}
}
td.topic-author-data {
grid-area: author;
.topic-activity {
display: flex;
gap: 0.5em;
align-items: center;
gap: 0.25em;
}
.topic-author-data .topic-author {
color: var(--primary-500);
.topic-activity__user {
display: flex;
gap: 0.25em;
}
.topic-activity__user .avatar {
width: 22px;
height: 22px;
border-radius: 4px;
}
// status
.topic-status-data {
grid-area: status;
position: relative;
}
.topic-status-card {
@include breakpoint("large", min-width) {
position: absolute;
right: 0px;
top: -22px;
background-color: var(--d-content-background);
height: 85%;
font-size: var(--font-down-3);
}
height: 100%;
margin-left: auto;
display: flex;
flex-direction: row;
gap: 4px;
@@ -203,7 +146,6 @@ body.user-messages-page .topic-list-item {
border-radius: var(--d-border-radius);
border: 1px solid var(--status-color);
color: var(--status-color);
grid-area: status;
width: min-content;
@include breakpoint(mobile-extra-large) {
height: calc(100% - 2px);
@@ -216,8 +158,6 @@ body.user-messages-page .topic-list-item {
.topic-status-card.--pinned {
--status-color: var(--primary-500);
background-color: transparent;
line-height: unset;
}
.topic-status-card.--hot {
--status-color: #e45735;
@@ -225,7 +165,7 @@ body.user-messages-page .topic-list-item {
// title
td.main-link .link-top-line {
font-size: var(--font-0);
font-size: var(--font-up-1);
grid-area: topic-title;
font-weight: 500;
}
@@ -245,7 +185,9 @@ body.user-messages-page .topic-list-item {
td.main-link .link-top-line a.raw-topic-link {
padding: 0;
}
.link-top-line .topic-post-badges .badge-notification.unread-posts {
display: none;
}
.topic-post-badges .badge-notification.unread-posts {
background-color: var(--tertiary);
color: var(--tertiary);
@@ -281,17 +223,13 @@ body.user-messages-page .topic-list-item {
td.topic-category-status-data {
display: contents;
@include breakpoint(mobile-extra-large) {
grid-area: category-status;
display: flex;
gap: 0.5em;
align-items: center;
}
}
td.topic-category-status-data .badge-category__wrapper,
td.main-link .link-bottom-line .badge-category__wrapper {
td.topic-category-data {
grid-area: category;
overflow: unset;
align-self: flex-end;
}
td.topic-category-data .badge-category__wrapper,
td.main-link .link-bottom-line .badge-category__wrapper {
border-radius: var(--d-border-radius);
padding: 6px;
align-self: flex-end;
@@ -300,7 +238,7 @@ body.user-messages-page .topic-list-item {
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
);
@include breakpoint(mobile-extra-large) {
@include breakpoint(tablet) {
padding: 2px 6px;
}
@@ -360,45 +298,47 @@ body.user-messages-page .topic-list-item {
}
}
// Bookmarks
.topic-list-item.bookmark-list-item {
@include breakpoint(mobile-extra-large) {
grid-template-columns: 25px auto repeat(5, 1fr) min-content;
}
grid-template-columns: 22px min-content min-content auto min-content min-content 36px;
grid-template-areas:
"avatar . . . . update dropdown"
". topic-title topic-title topic-title topic-title category dropdown";
"avatar update metadata metadata metadata metadata dropdown"
"topic-title topic-title topic-title topic-title topic-title category dropdown";
@include breakpoint(mobile-extra-large) {
grid-template-columns: 22px min-content min-content auto min-content min-content min-content 36px;
grid-template-areas:
"avatar . . . . . update dropdown"
". topic-title topic-title topic-title topic-title . category dropdown";
"avatar update metadata metadata metadata metadata metadata dropdown"
"topic-title topic-title topic-title topic-title topic-title likes-replies category dropdown";
}
&.has-metadata {
grid-template-areas:
"avatar metadata metadata metadata metadata update dropdown"
". topic-title topic-title topic-title likes-replies category dropdown";
"avatar update metadata metadata metadata metadata dropdown"
"topic-title topic-title topic-title topic-title likes-replies category dropdown";
@include breakpoint(mobile-extra-large) {
grid-template-areas:
"avatar metadata metadata metadata metadata . update dropdown"
". topic-title topic-title topic-title likes-replies . category dropdown";
"avatar update metadata metadata metadata metadata metadata dropdown"
"topic-title topic-title topic-title topic-title likes-replies . category dropdown";
}
}
&.excerpt-expanded {
grid-template-areas:
"avatar topic-title topic-title topic-title topic-title topic-title update dropdown"
"avatar excerpt excerpt excerpt excerpt excerpt . dropdown"
". excerpt excerpt excerpt excerpt excerpt . dropdown"
". excerpt excerpt excerpt excerpt excerpt category dropdown";
"avatar update metadata metadata metadata metadata metadata dropdown"
"topic-title topic-title topic-title topic-title topic-title topic-title . dropdown"
"excerpt excerpt excerpt excerpt excerpt excerpt . dropdown"
"excerpt excerpt excerpt excerpt excerpt excerpt category dropdown";
@include breakpoint(mobile-extra-large) {
grid-template-columns: 22px min-content min-content auto min-content min-content min-content 36px;
.post-excerpt {
display: none;
}
}
&.has-metadata {
grid-template-areas:
"avatar metadata metadata metadata metadata metadata update dropdown"
"avatar topic-title topic-title topic-title topic-title topic-title topic-title dropdown"
". excerpt excerpt excerpt excerpt excerpt . dropdown"
". excerpt excerpt excerpt excerpt excerpt category dropdown";
"avatar update metadata metadata metadata metadata metadata dropdown"
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title dropdown"
"excerpt excerpt excerpt excerpt excerpt excerpt . dropdown"
"excerpt excerpt excerpt excerpt excerpt excerpt category dropdown";
}
}
td.main-link .link-bottom-line {
@@ -418,6 +358,7 @@ body.user-messages-page .topic-list-item {
}
.post-excerpt {
grid-area: excerpt;
margin: 0;
}
.topic-list-data:last-of-type {
display: contents;
@@ -435,15 +376,24 @@ body.user-messages-page .topic-list-item {
}
}
// Assigned List
.topic-list-item.assigned-list-item {
grid-template-columns: 22px min-content min-content auto min-content min-content 36px;
grid-template-areas:
"avatar author status status . activity dropdown"
". topic-title topic-title topic-title likes-replies category dropdown";
"activity activity activity activity activity status dropdown"
"topic-title topic-title topic-title topic-title likes-replies category dropdown";
@include breakpoint(large) {
grid-template-areas:
"activity activity activity activity activity status dropdown"
"topic-title topic-title topic-title topic-title topic-title topic-title dropdown"
"category . . . . likes-replies dropdown";
}
@include breakpoint(mobile-extra-large) {
grid-template-areas:
"avatar author status status . . . activity dropdown"
". topic-title topic-title topic-title . . . . dropdown"
". topic-title topic-title topic-title likes-replies likes-replies likes-replies category dropdown";
"activity activity activity activity activity activity status dropdown"
"topic-title topic-title topic-title topic-title topic-title topic-title . dropdown"
"category . . . . . likes-replies dropdown";
}
.assign-topic-buttons {
display: contents;
@@ -456,3 +406,74 @@ body.user-messages-page .topic-list-item {
display: contents;
}
}
// User Messages
body.user-messages-page .topic-list-item {
td.topic-category-data,
td.topic-likes-replies-data,
td.topic-status-data {
display: none;
}
grid-template-areas:
"activity activity activity activity activity activity activity"
"topic-title topic-title topic-title topic-title likes-replies likes-replies likes-replies";
&.excerpt-expanded {
grid-template-columns: 22px repeat(6, 1fr) auto;
grid-template-rows: 22px auto auto 30px;
grid-template-areas:
"activity activity activity activity activity activity activity activity"
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
"excerpt excerpt excerpt excerpt excerpt excerpt . ."
"excerpt excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
@include breakpoint(extra-large) {
grid-template-areas:
"avatar author status status . . . activity"
"avatar topic-title topic-title topic-title topic-title . . ."
". excerpt excerpt excerpt excerpt excerpt . likes-replies"
". excerpt excerpt excerpt excerpt excerpt . likes-replies";
}
}
@include breakpoint(mobile-extra-large) {
grid-template-columns: 25px auto repeat(6, 1fr);
grid-template-rows: auto auto;
grid-template-areas:
"activity activity activity activity activity activity activity activity"
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title";
.topic-excerpt {
display: none;
}
}
}
.bulk-select-enabled .topic-list-item {
grid-template-areas:
"avatar author status status . activity"
". topic-title topic-title topic-title likes-replies likes-replies category";
.bulk-select {
grid-area: bulk-select;
padding: 0;
margin: 0;
align-self: center;
justify-self: center;
label {
margin: 0;
}
}
@include breakpoint(large) {
grid-template-columns: 22px min-content min-content auto min-content min-content min-content;
grid-template-rows: 22px minmax(22px, auto);
grid-template-areas:
"avatar author status status . activity"
". topic-title topic-title topic-title . . likes-replies"
". topic-title topic-title topic-title . . category";
}
@include breakpoint(mobile-extra-large) {
grid-template-columns: 25px auto repeat(6, 1fr);
grid-template-rows: auto auto auto;
grid-template-areas:
"avatar category-status category-status . . . . activity"
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
"avatar author . . . . . likes-replies";
}
}
spec/system/horizon_high_level_spec.rb
+3 -4
View File
@@ -26,10 +26,9 @@ describe "Horizon theme | High level", type: :system do
expect(topic_item.all("td").map { |el| el["class"] }).to eq(
[
"main-link clearfix topic-list-data",
"activity num topic-list-data age",
"topic-author-data",
"topic-category-status-data",
"topic-author-avatar-data",
"topic-activity-data",
"topic-status-data",
"topic-category-data",
"topic-likes-replies-data",
],
)