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

UX: topic cards v3 (#182)

Browse Source 
* Bringing back the OP
* Removed reason why topic appears (again) in topic list (="activity")
* Removed likes
* New layout with indention + moved all elements left (on desktop)

| Mobile | Desktop |
|--------|--------|
| ![CleanShot 2025-06-13 at 11 00
19@2x](https://github.com/user-attachments/assets/f43a773d-c8ba-4573-b16a-940e9fc3d901)
| ![CleanShot 2025-06-13 at 11 05
10@2x](https://github.com/user-attachments/assets/6bb152df-9ed3-4866-8c0a-95ddf94cd773)
|
| ![CleanShot 2025-06-13 at 11 02
25@2x](https://github.com/user-attachments/assets/3d9fb41c-a894-4b07-8737-6bd03e513f2f)
| ![CleanShot 2025-06-13 at 11 06
59@2x](https://github.com/user-attachments/assets/c54b9efe-fd1d-40aa-b8ad-2e4eab54eb90)
|
| ![CleanShot 2025-06-13 at 11 03
28@2x](https://github.com/user-attachments/assets/cdad49e8-ae6d-4f2c-9ef5-f6fa42705764)
| ![CleanShot 2025-06-13 at 11 07
10@2x](https://github.com/user-attachments/assets/91fee5ad-71b7-400c-a2c7-80339438b8de)
|
| ![CleanShot 2025-06-13 at 11 04
09@2x](https://github.com/user-attachments/assets/85296a16-f052-4787-a260-81fa54cd6191)
| ![CleanShot 2025-06-13 at 11 07
24@2x](https://github.com/user-attachments/assets/ffcaecb0-767a-4a72-8244-a3baa56d3cc2)
|
| ![CleanShot 2025-06-13 at 11 04
26@2x](https://github.com/user-attachments/assets/48a05ef5-366f-4543-bf0e-441ecae39877)
| ![CleanShot 2025-06-13 at 11 04
48@2x](https://github.com/user-attachments/assets/50499b4d-60bf-4b41-8a42-6fba8e0a41d8)
|

---------

Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
This commit is contained in:
chapoi
2025-06-13 11:08:57 +02:00
committed by GitHub
parent 05416abe70
commit 2bcd04d4f4
4 changed files with 278 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascripts/discourse/components/card/topic-activity-column.gjs
-9
View File
@@ -36,21 +36,12 @@ export default class TopicActivityColumn extends Component {
<template>
<span class={{concatClass "topic-activity" this.topicUser.class}}>
<div class="topic-activity__type">
{{#if this.topicUser.user}}
{{icon "reply"}}
{{else}}
{{icon "pencil"}}
{{/if}}
</div>
{{#if this.topicUser.username}}
<span
class="topic-activity__username"
>{{this.topicUser.username}}</span>
<span class="dot-separator"></span>
{{/if}}
<div class="topic-activity__time">
{{formatDate @topic.bumpedAt leaveAgo="true" format="tiny"}}
</div>
javascripts/discourse/components/card/topic-status-column.gjs
+1 -1
View File
@@ -30,7 +30,7 @@ export default class TopicStatusColumn extends Component {
{{#if this.badge}}
<span class="topic-status-card {{this.badge.className}}">{{icon
this.badge.icon
}}{{i18n (themePrefix this.badge.text)}}</span>
}}<p class="topic-status-card__name">{{i18n (themePrefix this.badge.text)}}</p></span>
{{/if}}
</template>
}
javascripts/discourse/initializers/topic-list-columns.gjs
+5 -4
View File
@@ -2,7 +2,6 @@ import { withPluginApi } from "discourse/lib/plugin-api";
import TopicActivityColumn from "../components/card/topic-activity-column";
import TopicCategoryColumn from "../components/card/topic-category-column";
import TopicCreatorColumn from "../components/card/topic-creator-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";
@@ -24,9 +23,8 @@ const TopicCategory = <template>
</td>
</template>;
const TopicLikesReplies = <template>
const TopicReplies = <template>
<td class="topic-likes-replies-data">
<TopicLikesColumn @topic={{@topic}} />
<TopicRepliesColumn @topic={{@topic}} />
</td>
</template>;
@@ -56,7 +54,7 @@ export default {
});
columns.add("topic-likes-replies", {
item: TopicLikesReplies,
item: TopicReplies,
after: "topic-author-avatar",
});
columns.add("topic-creator", {
@@ -87,6 +85,9 @@ export default {
) {
classes.push("--has-status-card");
}
if (context.topic.replyCount > 1) {
classes.push("has-replies");
}
return classes;
}
);
scss/topic-cards.scss
+211 -160
View File
@@ -1,5 +1,9 @@
@use "lib/viewport";
:root {
--d-border-radius-small: calc(var(--d-border-radius) * 0.5);
}
.topic-list .topic-list-item-separator {
display: none;
}
@@ -18,12 +22,12 @@
flex-direction: column;
gap: 1.25em;
@include viewport.until(lg) {
@include breakpoint(medium) {
gap: 0.5em;
padding: 0 0.5em;
}
@include viewport.until(sm) {
@include breakpoint(mobile-extra-large) {
gap: 0;
padding: 0;
}
@@ -34,35 +38,74 @@
background: var(--d-content-background);
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
text-overflow: ellipsis;
padding: 0.75em 1rem;
padding: var(--space-3);
border: 1px solid var(--primary-300);
display: grid;
grid-template-columns: min-content min-content auto min-content;
grid-template-columns: min-content min-content min-content auto min-content;
grid-template-areas:
"creator title title status"
"creator category activity likes-replies";
grid-column-gap: 0.75rem;
grid-row-gap: 0.5rem;
"creator title title title status"
". category activity activity .";
grid-gap: var(--space-3);
border-radius: var(--d-border-radius);
cursor: pointer;
.bulk-select-enabled & {
grid-template-columns: min-content min-content min-content auto min-content;
&.has-replies {
grid-template-areas:
"bulk-select creator title title status"
"bulk-select creator category activity likes-replies";
"creator title title title status"
". category likes-replies activity .";
}
&:not(.has-replies) {
.topic-likes-replies-data {
display: none;
}
}
@include viewport.until(sm) {
max-width: 100vw;
box-sizing: border-box;
grid-template-areas:
"category category category status"
"creator title title title"
"activity activity activity likes-replies";
row-gap: 0.75em;
"creator title title title status"
". category activity activity . ";
border: none;
border-bottom: 1px solid var(--primary-200);
box-shadow: none;
border-radius: 0;
padding: var(--space-4) var(--space-3);
&.has-replies {
grid-template-areas:
"creator title title title status"
". category likes-replies activity . ";
}
}
.bulk-select-enabled & {
grid-template-columns: min-content min-content min-content auto min-content min-content;
grid-template-areas:
"bulk-select creator title title title status"
"bulk-select category category activity activity .";
&.has-replies {
grid-template-areas:
"bulk-select creator title title title status"
"bulk-select category category activity likes-replies likes-replies";
}
@include viewport.until(sm) {
grid-template-columns: min-content min-content min-content min-content auto min-content;
grid-template-areas:
"bulk-select creator title title title status"
"bulk-select . category activity activity . ";
}
&.has-replies {
@include viewport.until(sm) {
grid-template-areas:
"bulk-select creator title title title status"
"bulk-select . category likes-replies activity . ";
}
}
}
&:hover {
@@ -88,32 +131,34 @@
@include viewport.from(sm) {
grid-template-areas:
"creator title title status"
"creator category activity likes-replies "
"creator excerpt excerpt excerpt";
"creator title title title status"
". category activity activity . "
". excerpt excerpt excerpt excerpt";
&.has-replies {
grid-template-areas:
"creator title title title status"
". category likes-replies activity ."
". excerpt excerpt excerpt excerpt";
}
.bulk-select-enabled & {
grid-template-areas:
"bulk-select creator title title status"
"bulk-select creator category activity likes-replies "
" bulk-select creator excerpt excerpt excerpt";
"bulk-select creator title title title status"
"bulk-select category category activity likes-replies likes-replies "
" bulk-select excerpt excerpt excerpt excerpt excerpt";
}
}
// when there is enough space, excerpt can be next to likes-replies
@include viewport.from(lg) {
grid-template-areas:
"creator title title status"
"creator category activity ."
"creator excerpt excerpt likes-replies";
}
}
.link-top-line {
grid-area: title;
font-weight: 500;
display: flex;
align-items: center;
line-height: calc(var(--space-3) * 2); // avatar sizing
@include viewport.until(sm) {
line-height: normal;
}
.title {
padding: 0;
@@ -148,22 +193,41 @@
.badge-category__wrapper {
border-radius: var(--d-border-radius);
@include viewport.until(sm) {
border-radius: var(--d-border-radius-small);
max-width: 125px;
}
padding: 0.25em 0.5rem;
background-color: light-dark(
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
);
@include viewport.until(md) {
@include breakpoint(tablet) {
padding: 0.25em 0.5rem;
font-size: var(--font-down-2);
}
.badge-category {
align-items: center;
}
.badge-category__name {
font-size: var(--font-down-1);
color: light-dark(
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
);
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.d-icon {
width: var(--font-down-1);
height: var(--font-down-1);
}
}
@@ -172,14 +236,12 @@
grid-area: creator;
.avatar {
height: 50px;
width: 50px;
height: calc(var(--space-3) * 2);
width: calc(var(--space-3) * 2);
border-radius: var(--d-border-radius);
@include viewport.until(sm) {
height: 30px;
width: 30px;
border-radius: 0.25rem;
border-radius: var(--d-border-radius-small);
}
}
}
@@ -229,6 +291,11 @@
// status
.topic-status-data {
display: none;
}
&.--has-status-card .topic-status-data {
display: block;
grid-area: status;
}
@@ -240,13 +307,21 @@
gap: 0.25em;
align-items: center;
padding: 0.2em 0.5rem;
font-size: var(--font-down-2);
@include viewport.from(lg) {
font-size: var(--font-down-3);
}
font-weight: 600;
border-radius: var(--d-border-radius);
border: 1px solid var(--status-color);
color: var(--status-color);
width: min-content;
@include viewport.until(sm) {
border-radius: var(--d-border-radius-small);
padding: 0.35em;
}
&.--pinned {
--status-color: var(--primary-500);
}
@@ -264,14 +339,30 @@
}
svg {
font-size: var(--font-down-1);
color: var(--status-color);
@include viewport.from(lg) {
font-size: var(--font-down-1);
}
}
&__name {
margin: 0;
@include viewport.until(sm) {
display: none;
}
}
}
.link-top-line .event-date {
margin-left: 0.5em;
font-size: var(--font-down-3);
white-space: nowrap;
}
.link-top-line .event-date-container {
top: -0.25rem;
line-height: normal;
}
.topic-list-data {
@@ -323,13 +414,15 @@
grid-area: likes-replies;
display: flex;
flex-direction: row;
gap: 0.5em;
justify-content: flex-end;
gap: var(--space-3);
height: min-content;
align-self: center;
.topic-likes {
display: none;
}
}
.topic-likes-replies-data .topic-likes,
.topic-likes-replies-data .topic-replies {
display: flex;
flex-direction: row;
@@ -362,99 +455,105 @@
display: none;
}
}
// Assigned List
&.assigned-list-item {
.topic-status-data {
display: none;
}
grid-template-areas:
"creator title title title dropdown"
". category activity activity .";
&.has-replies {
grid-template-areas:
"creator title title title dropdown"
"category category likes-replies activity .";
}
.assign-topic-buttons {
display: contents;
.assign-actions-dropdown {
grid-area: dropdown;
justify-content: flex-end;
height: 1em;
.select-kit-header {
padding-top: 0;
margin-left: auto;
align-items: center;
background: transparent;
}
.select-kit-header-wrapper {
height: 1em;
width: 1em;
}
}
}
}
// Bookmarks
.topic-list-item.bookmark-list-item {
.link-bottom-line {
font-size: unset;
}
// regular card without excerpt class
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
&.bookmark-list-item {
grid-template-areas:
". . . . . . dropdown"
"avatar update metadata metadata metadata . category";
"creator title title title dropdown"
"category category activity . . ";
@include viewport.until(sm) {
grid-template-columns: min-content min-content auto min-content min-content min-content min-content;
grid-template-areas:
" . . . . . . dropdown"
"update metadata metadata metadata metadata category category";
"title title title title dropdown"
"category category activity activity . ";
.avatar {
display: none;
}
}
&.has-metadata {
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
@include viewport.until(sm) {
grid-template-areas:
". . . . . . . dropdown"
"update update metadata metadata metadata metadata category category";
.avatar {
display: none;
}
}
}
// card with excerpt (all in horizon since the toggle is gone)
&.excerpt-expanded {
grid-template-columns: 20px min-content auto minmax(0, 100px);
grid-template-areas:
". . . dropdown"
"avatar update metadata metadata"
"excerpt excerpt excerpt ."
"excerpt excerpt excerpt category";
@include viewport.from(xl) {
grid-template-columns: 20px min-content auto min-content;
}
"creator title title title dropdown"
"category category activity . . "
"excerpt excerpt excerpt excerpt excerpt";
@include viewport.until(sm) {
grid-template-columns: auto min-content;
grid-template-areas:
". dropdown"
"category category";
.post-excerpt,
.avatar {
display: none;
"title title title title dropdown"
"category category activity activity . "
"excerpt excerpt excerpt excerpt excerpt";
}
}
&.has-metadata {
grid-template-columns: 20px min-content auto min-content;
grid-template-areas:
". . . dropdown"
"avatar update metadata metadata"
"excerpt excerpt excerpt . "
"excerpt excerpt excerpt category";
"creator title title title dropdown"
"category category activity metadata . ";
@include viewport.until(sm) {
grid-template-areas:
"metadata metadata metadata metadata dropdown"
"title title title title ."
"category category activity activity . ";
}
&.excerpt-expanded {
grid-template-areas:
"creator title title title dropdown"
"category category activity metadata . "
"excerpt excerpt excerpt excerpt excerpt";
@include viewport.until(sm) {
grid-template-columns: auto min-content;
grid-template-areas:
" . dropdown"
"metadata category";
.bookmark-metadata {
flex-wrap: wrap;
"metadata metadata metadata metadata dropdown"
"title title title title ."
"category category activity activity . "
"excerpt excerpt excerpt excerpt excerpt";
}
}
}
.badge-category__wrapper {
align-self: flex-end;
height: min-content;
max-width: 100%;
}
}
td.author-avatar {
grid-area: avatar;
grid-area: creator;
}
td.main-link .link-bottom-line {
@@ -477,7 +576,9 @@
margin: 0;
display: flex;
align-items: center;
gap: var(--spacing-inline-xs);
flex-wrap: wrap;
gap: var(--spacing-inline-s);
white-space: nowrap;
}
.bookmark-metadata-item {
@@ -486,8 +587,7 @@
}
.bookmark-status-with-link {
grid-column: 1/-2;
grid-row: 1/2;
grid-area: title;
}
}
@@ -519,64 +619,16 @@
}
.post-metadata.topic-list-data.updated-at {
grid-area: update;
grid-area: activity;
display: flex;
align-items: center;
font-size: var(--font-down-1-rem);
}
td.activity .post-activity {
display: none;
}
}
// Assigned List
.topic-list-item.assigned-list-item {
.topic-status-card {
display: none;
position: relative;
top: unset;
right: unset;
}
td.main-link .link-top-line {
grid-column: 1/-3;
}
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
grid-template-areas:
". . . . . status dropdown"
"activity . . . . likes-replies category";
@include viewport.until(sm) {
grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
grid-template-areas:
"category category . . . . status dropdown"
". . . . . . . . "
"activity . . . . . . likes-replies";
}
.assign-topic-buttons {
display: contents;
.assign-actions-dropdown {
grid-area: dropdown;
justify-content: flex-end;
height: 1em;
.select-kit-header {
padding-top: 0;
margin-left: auto;
align-items: center;
background: transparent;
}
.select-kit-header-wrapper {
height: 1em;
width: 1em;
}
}
}
td.topic-category-status-data {
display: contents;
}
}
// User Messages
@@ -650,5 +702,4 @@ body.user-messages-page {
.event-date-container {
display: inline-flex;
position: relative;
top: -0.25em; // optical alignment
}