UX: Topic cards v2 (#173)
This is the second iteration on the topic card design, in which we bring
back the OP and change the layout.
**Changes**:
* Show OP avatar
* Remove activity avatar and replace by reply icon
* Remove activity icon background
* Move category tag to top left
* Replace long activity copy ("…replied at…") with dot separator
* Change date formatting to `tiny`
* Adjust bulk select styling to new layout + align checkbox to top on
mobile VS keep centred on desktop
* Why: On desktop, the avatar is taking 2 lines (usually) and aligning
the checkbox vertically looks nice. Exception for excerpts, but since
that's only available for pinned topics atm that's a low occurrence. On
mobile, the topic card is 3 lines, with a smaller avatar, which makes
the checkbox "float" around a bit when centred. Hence aligning it to the
top, which for solid avatars aligns nicely too.
* CSS refactor: grid, breakpoints
Messages/bookmarks have not been changed.
| Description | Visual |
|--------|--------|
| Large topic list | |
| Large bulk edit | 
|
| Medium topic list | 
|
| Medium bulk edit | 
|
| Small topic list | 
|
| Small bulk edit | 
|
| Messages page (remains unchanged) | 
|
| Bookmark page (remains unchanged) | 
|
This commit is contained in:
chapoi
@@ -1,9 +1,7 @@
|
||||
import Component from "@glimmer/component";
|
||||
import avatar from "discourse/helpers/avatar";
|
||||
import concatClass from "discourse/helpers/concat-class";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
import formatDate from "discourse/helpers/format-date";
|
||||
import { i18n } from "discourse-i18n";
|
||||
|
||||
export default class TopicActivityColumn extends Component {
|
||||
get topicUser() {
|
||||
@@ -27,37 +25,34 @@ export default class TopicActivityColumn extends Component {
|
||||
};
|
||||
} else if (this.args.topic.posts_count === 1) {
|
||||
return {
|
||||
user: this.args.topic.creator,
|
||||
username: this.args.topic.creator.username,
|
||||
activityText: "user_posted",
|
||||
class: "--posted",
|
||||
user: this.args.topic.firstPosterUser,
|
||||
username: this.args.topic.last_poster_username,
|
||||
class: "--created",
|
||||
};
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
<span class={{concatClass "topic-activity" this.topicUser.class}}>
|
||||
<div class="topic-activity__user">
|
||||
<div class="topic-activity__type">
|
||||
{{#if this.topicUser.user}}
|
||||
{{avatar this.topicUser.user imageSize="small"}}
|
||||
{{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__reason">
|
||||
{{i18n (themePrefix this.topicUser.activityText)}}
|
||||
</div>
|
||||
|
||||
<div class="topic-activity__time">
|
||||
{{formatDate
|
||||
@topic.bumpedAt
|
||||
leaveAgo="true"
|
||||
format="medium-with-ago-and-on"
|
||||
}}
|
||||
{{formatDate @topic.bumpedAt leaveAgo="true" format="tiny"}}
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
import Component from "@glimmer/component";
|
||||
import avatar from "discourse/helpers/avatar";
|
||||
|
||||
export default class TopicCreatorColumn extends Component {
|
||||
get topicCreator() {
|
||||
return {
|
||||
user: this.args.topic.creator,
|
||||
username: this.args.topic.creator.username,
|
||||
class: "--topic-creator",
|
||||
};
|
||||
}
|
||||
|
||||
<template>
|
||||
<div class={{this.topicUser.class}}>
|
||||
{{avatar this.topicCreator.user}}
|
||||
<span class="topic-creator__username">{{this.topicUser.username}}</span>
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
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";
|
||||
@@ -30,6 +31,12 @@ const TopicLikesReplies = <template>
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
const TopicCreator = <template>
|
||||
<td class="topic-creator-data">
|
||||
<TopicCreatorColumn @topic={{@topic}} />
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
export default {
|
||||
name: "topic-list-customizations",
|
||||
|
||||
@@ -52,6 +59,10 @@ export default {
|
||||
item: TopicLikesReplies,
|
||||
after: "topic-author-avatar",
|
||||
});
|
||||
columns.add("topic-creator", {
|
||||
item: TopicCreator,
|
||||
after: "topic-author-avatar",
|
||||
});
|
||||
columns.delete("views");
|
||||
columns.delete("replies");
|
||||
if (!router.currentRouteName.includes("userPrivateMessages")) {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Fixing bulk select (only needed for desktop)
|
||||
.bulk-select-enabled {
|
||||
.topic-list-header .topic-list-data.default {
|
||||
position: sticky;
|
||||
top: 10em;
|
||||
.topic-list-header {
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.topic-author-avatar-data {
|
||||
@@ -47,19 +47,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
// bulk select
|
||||
.bulk-select-topics {
|
||||
position: absolute;
|
||||
right: -1em;
|
||||
right: 0;
|
||||
background: var(--secondary);
|
||||
border-radius: 0 0 0 var(--d-border-radius);
|
||||
padding: 1em;
|
||||
|
||||
@media screen and (max-width: 1048px) {
|
||||
right: 0;
|
||||
}
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem;
|
||||
|
||||
button {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+171
-252
@@ -1,3 +1,5 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.topic-list .topic-list-item-separator {
|
||||
display: none;
|
||||
}
|
||||
@@ -28,96 +30,93 @@
|
||||
}
|
||||
|
||||
.topic-list-body .topic-list-item {
|
||||
position: relative;
|
||||
background: var(--d-content-background);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
text-overflow: ellipsis;
|
||||
padding: 0.75em 1rem;
|
||||
border: 1px solid var(--primary-300);
|
||||
display: grid;
|
||||
grid-template-columns: 20px min-content min-content auto min-content;
|
||||
grid-template-rows: auto minmax(20px, auto);
|
||||
grid-template-columns: min-content min-content auto min-content;
|
||||
grid-template-areas:
|
||||
". . . . status"
|
||||
"activity . . likes-replies category";
|
||||
grid-column-gap: 12px;
|
||||
grid-row-gap: 8px;
|
||||
"creator title title status"
|
||||
"creator category activity likes-replies";
|
||||
grid-column-gap: 0.75rem;
|
||||
grid-row-gap: 0.5rem;
|
||||
border-radius: var(--d-border-radius);
|
||||
cursor: pointer;
|
||||
|
||||
td.main-link .link-top-line {
|
||||
grid-row: 1/2;
|
||||
grid-column: 1/-1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.--has-status-card td.main-link .link-top-line {
|
||||
grid-column: 1/-2;
|
||||
}
|
||||
|
||||
@include breakpoint(extra-large) {
|
||||
.bulk-select-enabled & {
|
||||
grid-template-columns: min-content min-content min-content auto min-content;
|
||||
grid-template-areas:
|
||||
". . . . status"
|
||||
"activity . . likes-replies category";
|
||||
"bulk-select creator title title status"
|
||||
"bulk-select creator category activity likes-replies";
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
td.main-link .link-top-line,
|
||||
&.--has-status-card td.main-link .link-top-line {
|
||||
grid-row: 2/3;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
grid-template-columns: 20px repeat(5, 1fr);
|
||||
grid-template-rows: auto auto auto;
|
||||
@include viewport.until(sm) {
|
||||
grid-template-areas:
|
||||
"category category category category category status"
|
||||
". . . . . ."
|
||||
"activity . . . . likes-replies";
|
||||
"category category category status"
|
||||
"creator title title title"
|
||||
"activity activity activity likes-replies";
|
||||
row-gap: 0.75em;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--primary-200);
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.excerpt-expanded {
|
||||
grid-template-columns: 20px auto auto min-content min-content;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
". . . . status"
|
||||
"activity . . . ."
|
||||
"excerpt excerpt excerpt likes-replies category";
|
||||
|
||||
@include breakpoint(extra-large) {
|
||||
grid-template-areas:
|
||||
". . . . status"
|
||||
"activity . . . ."
|
||||
"excerpt excerpt excerpt likes-replies category";
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
border-color: var(--accent-color);
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
"category category category category status"
|
||||
". . . . ."
|
||||
"activity . . . likes-replies";
|
||||
&.selected {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--accent-color),
|
||||
0 0 12px 1px var(--topic-card-shadow);
|
||||
}
|
||||
|
||||
&.excerpt-expanded {
|
||||
@include viewport.until(sm) {
|
||||
.topic-excerpt,
|
||||
.link-bottom-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-likes-replies-data {
|
||||
align-self: flex-end;
|
||||
@include viewport.from(sm) {
|
||||
grid-template-areas:
|
||||
"creator title title status"
|
||||
"creator category activity likes-replies "
|
||||
"creator 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";
|
||||
}
|
||||
}
|
||||
|
||||
.topic-category-data {
|
||||
align-items: flex-end;
|
||||
// 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";
|
||||
}
|
||||
}
|
||||
|
||||
.badge-category__wrapper {
|
||||
height: min-content;
|
||||
}
|
||||
.link-top-line {
|
||||
grid-area: title;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.link-bottom-line {
|
||||
display: flex;
|
||||
.title {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -126,7 +125,8 @@
|
||||
td.posters,
|
||||
td.posts,
|
||||
td.views,
|
||||
td.activity {
|
||||
td.activity,
|
||||
td.topic-category-status-data {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
@@ -134,59 +134,102 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// topic activity, avatar, text
|
||||
// display:nones
|
||||
td.main-link a.topic-status,
|
||||
.link-bottom-line,
|
||||
.badge-notification.new-topic::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topic-category-data {
|
||||
grid-area: category;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.badge-category__wrapper {
|
||||
border-radius: var(--d-border-radius);
|
||||
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 breakpoint(tablet) {
|
||||
padding: 0.25em 0.5rem;
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
|
||||
.badge-category__name {
|
||||
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)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// OP avatar
|
||||
.topic-creator-data {
|
||||
grid-area: creator;
|
||||
|
||||
.avatar {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: var(--d-border-radius);
|
||||
|
||||
@include viewport.until(sm) {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot-separator {
|
||||
width: 0.25em;
|
||||
height: 0.25em;
|
||||
background-color: var(--primary-500);
|
||||
border-radius: 100%;
|
||||
margin-inline: 0.25em;
|
||||
}
|
||||
|
||||
// topic activity, icon, text
|
||||
.topic-activity-data {
|
||||
@include ellipsis;
|
||||
grid-area: activity;
|
||||
}
|
||||
|
||||
.topic-activity {
|
||||
display: grid;
|
||||
grid-template-columns: 20px auto auto auto;
|
||||
display: flex;
|
||||
font-size: var(--font-down-1);
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.topic-activity__user .avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.topic-activity__user {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 4px;
|
||||
.topic-activity__type {
|
||||
border-radius: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--primary-low);
|
||||
}
|
||||
|
||||
.topic-activity__username {
|
||||
@include ellipsis;
|
||||
margin-left: 0.25em;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
.topic-activity__username {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topic-activity__reason {
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-activity.--updated .topic-activity__reason {
|
||||
margin-left: 0.25em;
|
||||
// timestamp
|
||||
td.activity .post-activity {
|
||||
grid-area: activity;
|
||||
font-size: var(--font-down-1);
|
||||
color: var(--primary-500);
|
||||
margin-left: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// status
|
||||
.topic-status-data {
|
||||
grid-area: status;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topic-status-card {
|
||||
@@ -194,23 +237,30 @@
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
gap: 0.25em;
|
||||
align-items: center;
|
||||
padding: 0 6px;
|
||||
font-size: var(--font-down-2);
|
||||
padding: 0.2em 0.5rem;
|
||||
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 breakpoint("large", min-width) {
|
||||
&.--pinned {
|
||||
--status-color: var(--primary-500);
|
||||
}
|
||||
|
||||
&.--hot {
|
||||
--status-color: #e45735;
|
||||
}
|
||||
|
||||
@include viewport.from(lg) {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -20px;
|
||||
right: 1rem;
|
||||
top: 0;
|
||||
transform: translateY(-45%);
|
||||
background-color: var(--d-content-background);
|
||||
height: 20px;
|
||||
font-size: var(--font-down-3);
|
||||
}
|
||||
|
||||
svg {
|
||||
@@ -219,31 +269,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.topic-status-card.--pinned {
|
||||
--status-color: var(--primary-500);
|
||||
}
|
||||
|
||||
.topic-status-card.--hot {
|
||||
--status-color: #e45735;
|
||||
}
|
||||
|
||||
.link-top-line .event-date {
|
||||
margin-left: 0.5em;
|
||||
font-size: var(--font-down-3);
|
||||
}
|
||||
|
||||
td.main-link a.topic-status {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topic-list-data {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td.main-link .link-top-line a.raw-topic-link {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.topic-post-badges .badge-notification.unread-posts,
|
||||
.topic-post-badges .badge-notification.new-topic {
|
||||
background-color: var(--tertiary);
|
||||
@@ -256,31 +290,13 @@
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.badge-notification.new-topic::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// timestamp
|
||||
td.activity .post-activity {
|
||||
grid-area: activity;
|
||||
font-size: var(--font-down-1);
|
||||
color: var(--primary-500);
|
||||
margin-left: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.link-bottom-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// metadata
|
||||
// metadata - excerpt
|
||||
.topic-excerpt,
|
||||
td.main-link .link-bottom-line {
|
||||
grid-row: 3 / -1;
|
||||
grid-column: 1 / -3;
|
||||
.topic-excerpt {
|
||||
grid-area: excerpt;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: var(--font-down-2);
|
||||
width: 100%;
|
||||
|
||||
.excerpt__contents {
|
||||
color: var(--primary-high);
|
||||
@@ -292,42 +308,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
td.topic-category-status-data {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
td.topic-category-data {
|
||||
grid-area: category;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
td.topic-category-data .badge-category__wrapper,
|
||||
td.main-link .link-bottom-line .badge-category__wrapper {
|
||||
border-radius: var(--d-border-radius);
|
||||
padding: 3px 6px;
|
||||
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 breakpoint(tablet) {
|
||||
padding: 2px 6px;
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
|
||||
.badge-category__name {
|
||||
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)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
td.main-link .discourse-tags {
|
||||
display: none;
|
||||
}
|
||||
@@ -356,28 +336,31 @@
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
color: var(--primary-500);
|
||||
font-size: var(--font-down-1-rem);
|
||||
|
||||
svg {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-item {
|
||||
background: var(--d-content-background);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
.bulk-select {
|
||||
grid-area: bulk-select;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
border-color: var(--accent-color);
|
||||
background: var(--d-content-background);
|
||||
@include viewport.until(sm) {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--accent-color),
|
||||
0 0 12px 1px var(--topic-card-shadow);
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&th {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -619,13 +602,16 @@ body.user-messages-page {
|
||||
grid-template-rows: auto auto;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-low);
|
||||
border-color: var(--primary-200);
|
||||
.discourse-no-touch & {
|
||||
background-color: var(--primary-low);
|
||||
border-color: var(--primary-200);
|
||||
}
|
||||
}
|
||||
|
||||
td.topic-category-data,
|
||||
td.topic-likes-replies-data,
|
||||
td.topic-status-data {
|
||||
td.topic-status-data,
|
||||
td.topic-creator-data {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -661,73 +647,6 @@ body.user-messages-page {
|
||||
}
|
||||
}
|
||||
|
||||
// Bulk select
|
||||
.bulk-select-enabled .topic-list-body .topic-list-item {
|
||||
grid-template-areas:
|
||||
"bulk-select . . . status"
|
||||
"bulk-select activity activity . category";
|
||||
|
||||
@include breakpoint(large) {
|
||||
grid-template-areas:
|
||||
"bulk-select . . . status"
|
||||
"bulk-select activity activity . category";
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-areas:
|
||||
"bulk-select category . . . status"
|
||||
"bulk-select . . . . ."
|
||||
"bulk-select activity activity . . .";
|
||||
|
||||
td.main-link .link-top-line,
|
||||
&.--has-status-card td.main-link .link-top-line {
|
||||
grid-column: 2/-1;
|
||||
grid-row: 2;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
td.topic-likes-replies-data {
|
||||
display: none;
|
||||
}
|
||||
|
||||
td.main-link .link-top-line,
|
||||
&.--has-status-card td.main-link .link-top-line {
|
||||
grid-column: 2/-1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.topic-excerpt {
|
||||
grid-area: excerpt;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.excerpt-expanded {
|
||||
grid-template-areas:
|
||||
"bulk-select . . . status" "bulk-select activity . . ."
|
||||
"bulk-select excerpt excerpt excerpt category";
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-areas:
|
||||
"bulk-select category . . . status"
|
||||
"bulk-select . . . . ."
|
||||
"bulk-select activity activity . . .";
|
||||
}
|
||||
}
|
||||
|
||||
.bulk-select {
|
||||
grid-area: bulk-select;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.event-date-container {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
|
||||
@@ -39,6 +39,7 @@ describe "Horizon theme | High level", type: :system do
|
||||
"topic-status-data",
|
||||
"topic-category-data",
|
||||
"topic-likes-replies-data",
|
||||
"topic-creator-data",
|
||||
"topic-activity-data",
|
||||
],
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user