-
-
+const TopicActivity =
+ |
+
|
;
-const TopicAuthorAvatar =
-
-
- |
-;
-
-const TopicCategoryStatus =
-
-
+const TopicStatus =
+ |
|
;
+const TopicCategory =
+
+
+ |
+;
+
const TopicLikesReplies =
@@ -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;
}
);
diff --git a/locales/en.yml b/locales/en.yml
index 4b5c64a..f5a0366 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -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"
+
diff --git a/scss/mobile-stuff.scss b/scss/mobile-stuff.scss
index b2aa8ea..2dd871e 100644
--- a/scss/mobile-stuff.scss
+++ b/scss/mobile-stuff.scss
@@ -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 {
diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss
index 6fb8768..82c580e 100644
--- a/scss/topic-cards.scss
+++ b/scss/topic-cards.scss
@@ -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";
+ }
+}
diff --git a/spec/system/horizon_high_level_spec.rb b/spec/system/horizon_high_level_spec.rb
index be61bfe..22a90e9 100644
--- a/spec/system/horizon_high_level_spec.rb
+++ b/spec/system/horizon_high_level_spec.rb
@@ -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",
],
)
| | |