Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 chapoi
|
8e0e2e1a8a |
@@ -1,7 +1,6 @@
|
||||
@import "box-view";
|
||||
@import "buttons";
|
||||
@import "chat";
|
||||
@import "categories-view";
|
||||
@import "color-choice";
|
||||
@import "composer";
|
||||
@import "composer-peek-mode";
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import Component from "@glimmer/component";
|
||||
import concatClass from "discourse/helpers/concat-class";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
import formatDate from "discourse/helpers/format-date";
|
||||
|
||||
export default class TopicActivityColumn extends Component {
|
||||
@@ -35,12 +36,21 @@ 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>
|
||||
|
||||
@@ -5,13 +5,15 @@ 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.topicCreator.class}}>
|
||||
<div class={{this.topicUser.class}}>
|
||||
{{avatar this.topicCreator.user}}
|
||||
<span class="topic-creator__username">{{this.topicUser.username}}</span>
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
import { gt } from "truth-helpers";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
import number from "discourse/helpers/number";
|
||||
|
||||
const TopicRepliesColumn = <template>
|
||||
{{#if (gt @topic.replyCount 1)}}
|
||||
<span class="topic-replies">{{icon "reply"}}{{number
|
||||
@topic.posts_count
|
||||
}}</span>
|
||||
<span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
|
||||
{{/if}}
|
||||
</template>;
|
||||
|
||||
|
||||
@@ -30,9 +30,7 @@ export default class TopicStatusColumn extends Component {
|
||||
{{#if this.badge}}
|
||||
<span class="topic-status-card {{this.badge.className}}">{{icon
|
||||
this.badge.icon
|
||||
}}<p class="topic-status-card__name">{{i18n
|
||||
(themePrefix this.badge.text)
|
||||
}}</p></span>
|
||||
}}{{i18n (themePrefix this.badge.text)}}</span>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
|
||||
@@ -2,6 +2,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";
|
||||
|
||||
@@ -23,8 +24,9 @@ const TopicCategory = <template>
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
const TopicReplies = <template>
|
||||
const TopicLikesReplies = <template>
|
||||
<td class="topic-likes-replies-data">
|
||||
<TopicLikesColumn @topic={{@topic}} />
|
||||
<TopicRepliesColumn @topic={{@topic}} />
|
||||
</td>
|
||||
</template>;
|
||||
@@ -54,7 +56,7 @@ export default {
|
||||
});
|
||||
|
||||
columns.add("topic-likes-replies", {
|
||||
item: TopicReplies,
|
||||
item: TopicLikesReplies,
|
||||
after: "topic-author-avatar",
|
||||
});
|
||||
columns.add("topic-creator", {
|
||||
@@ -85,9 +87,6 @@ export default {
|
||||
) {
|
||||
classes.push("--has-status-card");
|
||||
}
|
||||
if (context.topic.replyCount > 1) {
|
||||
classes.push("has-replies");
|
||||
}
|
||||
return classes;
|
||||
}
|
||||
);
|
||||
|
||||
@@ -1,357 +0,0 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.categories-and-latest {
|
||||
.category-list {
|
||||
border-collapse: separate;
|
||||
|
||||
th.topics {
|
||||
display: none;
|
||||
}
|
||||
|
||||
thead tr th {
|
||||
font-size: var(--font-up-1-rem);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
padding-top: 1em;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"title topics"
|
||||
"category category"
|
||||
"subcategory subcategory";
|
||||
row-gap: 1em;
|
||||
border: 1px solid var(--primary-300);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
}
|
||||
|
||||
td.category {
|
||||
display: contents;
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
border-bottom-left-radius: var(--d-border-radius-large);
|
||||
border-width: 2px;
|
||||
padding: 1em 1.5rem;
|
||||
}
|
||||
|
||||
tbody h3 {
|
||||
grid-area: title;
|
||||
padding: 1em 0 0 1.5rem;
|
||||
font-size: var(--font-up-1-rem);
|
||||
|
||||
.category-name {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.badge-category {
|
||||
gap: 0.25em;
|
||||
align-items: center;
|
||||
font-size: var(--font-up-1-rem);
|
||||
|
||||
.d-icon:first-of-type:not(.d-icon-lock),
|
||||
&.--style-square::before,
|
||||
&.--style-emoji .emoji {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
&.--style-square::before {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.d-icon.d-icon-lock {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.topics {
|
||||
width: auto;
|
||||
padding: 1em 1.5rem 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.category-description {
|
||||
grid-area: category;
|
||||
padding: 0 1.5rem;
|
||||
margin: 0;
|
||||
font-size: var(--font-down-1-rem);
|
||||
}
|
||||
|
||||
.subcategories {
|
||||
grid-area: subcategory;
|
||||
gap: 0.25em 0.5em;
|
||||
padding: 0 1.5rem 1em;
|
||||
margin: 0;
|
||||
|
||||
.badge-category__wrapper {
|
||||
background-color: light-dark(
|
||||
oklch(from var(--category-badge-color) 98% calc(c * 0.2) h),
|
||||
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
|
||||
);
|
||||
padding: 0.25em 0.5rem;
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.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)
|
||||
);
|
||||
}
|
||||
|
||||
.badge-category.--style-square::before {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.latest-topic-list {
|
||||
.table-heading {
|
||||
border: 0;
|
||||
font-size: var(--font-up-1-rem);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: grid;
|
||||
grid-template-columns: min-content min-content auto min-content;
|
||||
grid-template-areas:
|
||||
"creator title title status"
|
||||
". category activity activity";
|
||||
grid-column-gap: 0.75rem;
|
||||
grid-row-gap: 0.5rem;
|
||||
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);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.main-link,
|
||||
.topic-stats {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
.bottom-row {
|
||||
grid-area: category;
|
||||
|
||||
.discourse-tags {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.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 viewport.until(md) {
|
||||
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)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-data {
|
||||
grid-area: likes-replies;
|
||||
}
|
||||
|
||||
.num.posts-map {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topic-last-activity {
|
||||
grid-area: activity;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
font-size: var(--font-down-1-rem);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0.25em;
|
||||
height: 0.25em;
|
||||
background-color: var(--primary-500);
|
||||
border-radius: 100%;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-poster {
|
||||
grid-area: creator;
|
||||
width: auto;
|
||||
align-self: flex-start;
|
||||
|
||||
.avatar {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border-radius: var(--d-border-radius-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
.category-list.with-topics {
|
||||
margin-inline: 1rem;
|
||||
|
||||
.num.posts,
|
||||
.category-topics-count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
&-item {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-top: 0 !important;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
tr:first-of-type {
|
||||
order: -2;
|
||||
}
|
||||
|
||||
tr.subcategories-list {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
tr:nth-last-of-type(2) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th.main-link {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-boxes.with-subcategories {
|
||||
@include viewport.from(sm) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@include viewport.until(md) {
|
||||
padding-inline: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.category {
|
||||
border: 0;
|
||||
|
||||
&-box-inner {
|
||||
border-radius: var(--d-border-radius-large);
|
||||
border: 1px solid var(--primary-300);
|
||||
background: var(--d-content-background);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
border-color: var(--accent-color);
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--accent-color),
|
||||
0 0 12px 1px var(--topic-card-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
&-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-box-heading {
|
||||
h3 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.badge-category {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 1em;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.--style-square::before {
|
||||
aspect-ratio: 1 / 1;
|
||||
height: auto;
|
||||
width: 13%;
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
&__name {
|
||||
flex-basis: 100%;
|
||||
font-size: var(--font-up-1-rem);
|
||||
}
|
||||
|
||||
.d-icon:not(.d-icon-lock),
|
||||
img.emoji {
|
||||
aspect-ratio: 1 / 1;
|
||||
height: auto;
|
||||
width: 13%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
font-size: var(--font-down-1-rem);
|
||||
}
|
||||
|
||||
.subcategories {
|
||||
margin-top: auto;
|
||||
row-gap: 0.5em;
|
||||
|
||||
.subcategory {
|
||||
margin-bottom: 0;
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,8 @@
|
||||
.list-controls #create-topic,
|
||||
.notifications-button-footer .reason .text,
|
||||
.pinned-button .reason .text,
|
||||
.more-topics__browse-more {
|
||||
.more-topics__browse-more,
|
||||
// footer-message might cause issues, not sure what possible stuff can be in there, but the general idea is to hide it bcs having an ugly H3 (what?) CTA at the bottom is just… ugly imo
|
||||
.footer-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -98,19 +98,6 @@ body:not(.has-full-page-chat, .wizard) {
|
||||
}
|
||||
}
|
||||
|
||||
body.users-page {
|
||||
// very specific to overcome the above rules
|
||||
#main #main-outlet-wrapper #main-outlet > section {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
.welcome-banner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#list-area {
|
||||
.show-more.has-topics {
|
||||
@include viewport.from(lg) {
|
||||
|
||||
+23
-1
@@ -1,14 +1,36 @@
|
||||
@use "lib/viewport";
|
||||
.list-controls {
|
||||
position: sticky;
|
||||
top: var(--header-offset);
|
||||
background: var(--d-content-background);
|
||||
z-index: z("base");
|
||||
padding: 1.5rem 0 1rem 0;
|
||||
padding: 1.5rem 0 0 0;
|
||||
max-width: unset;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.navigation-container {
|
||||
position: relative;
|
||||
gap: 1rem;
|
||||
|
||||
@include viewport.from(sm) {
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -1rem;
|
||||
height: 1rem;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--d-content-background),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.category-breadcrumb {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
+214
-312
@@ -1,9 +1,5 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
:root {
|
||||
--d-border-radius-small: calc(var(--d-border-radius) * 0.5);
|
||||
}
|
||||
|
||||
.topic-list .topic-list-item-separator {
|
||||
display: none;
|
||||
}
|
||||
@@ -16,43 +12,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list,
|
||||
.category-boxes .subcategories {
|
||||
.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 viewport.until(md) {
|
||||
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)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// undo all the above for the few instances that arent styled like traditional badges
|
||||
.category-text-title {
|
||||
.badge-category__wrapper {
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
|
||||
.badge-category__name {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-body {
|
||||
border: none;
|
||||
display: flex;
|
||||
@@ -75,72 +34,35 @@
|
||||
background: var(--d-content-background);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
text-overflow: ellipsis;
|
||||
padding: var(--space-3);
|
||||
padding: 0.75em 1rem;
|
||||
border: 1px solid var(--primary-300);
|
||||
display: grid;
|
||||
grid-template-columns: min-content min-content min-content auto min-content;
|
||||
grid-template-columns: min-content min-content auto min-content;
|
||||
grid-template-areas:
|
||||
"creator title title title status"
|
||||
". category activity activity .";
|
||||
grid-gap: var(--space-3);
|
||||
"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;
|
||||
|
||||
&.has-replies {
|
||||
.bulk-select-enabled & {
|
||||
grid-template-columns: min-content min-content min-content auto min-content;
|
||||
grid-template-areas:
|
||||
"creator title title title status"
|
||||
". category likes-replies activity .";
|
||||
}
|
||||
|
||||
&:not(.has-replies) {
|
||||
.topic-likes-replies-data {
|
||||
display: none;
|
||||
}
|
||||
"bulk-select creator title title status"
|
||||
"bulk-select creator category activity likes-replies";
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
max-width: 100vw;
|
||||
box-sizing: border-box;
|
||||
grid-template-areas:
|
||||
"creator title title title status"
|
||||
". category activity activity . ";
|
||||
"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;
|
||||
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-areas:
|
||||
"bulk-select creator title title title status"
|
||||
"bulk-select . category likes-replies activity . ";
|
||||
}
|
||||
}
|
||||
|
||||
@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 . ";
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -166,34 +88,32 @@
|
||||
|
||||
@include viewport.from(sm) {
|
||||
grid-template-areas:
|
||||
"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";
|
||||
}
|
||||
"creator title title status"
|
||||
"creator category activity likes-replies "
|
||||
"creator excerpt excerpt excerpt";
|
||||
|
||||
.bulk-select-enabled & {
|
||||
grid-template-areas:
|
||||
"bulk-select creator title title title status"
|
||||
"bulk-select category category activity likes-replies likes-replies "
|
||||
" bulk-select excerpt excerpt excerpt excerpt excerpt";
|
||||
"bulk-select creator title title status"
|
||||
"bulk-select creator category activity likes-replies "
|
||||
" bulk-select creator 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;
|
||||
line-height: calc(var(--space-3) * 2); // avatar sizing
|
||||
|
||||
@include viewport.until(sm) {
|
||||
line-height: normal;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
padding: 0;
|
||||
@@ -228,11 +148,6 @@
|
||||
|
||||
.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),
|
||||
@@ -244,25 +159,11 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -271,12 +172,14 @@
|
||||
grid-area: creator;
|
||||
|
||||
.avatar {
|
||||
height: calc(var(--space-3) * 2);
|
||||
width: calc(var(--space-3) * 2);
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: var(--d-border-radius);
|
||||
|
||||
@include viewport.until(sm) {
|
||||
border-radius: var(--d-border-radius-small);
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -326,11 +229,6 @@
|
||||
|
||||
// status
|
||||
.topic-status-data {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.--has-status-card .topic-status-data {
|
||||
display: block;
|
||||
grid-area: status;
|
||||
}
|
||||
|
||||
@@ -342,22 +240,13 @@
|
||||
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-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);
|
||||
}
|
||||
@@ -375,31 +264,14 @@
|
||||
}
|
||||
|
||||
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 {
|
||||
@@ -451,15 +323,13 @@
|
||||
grid-area: likes-replies;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--space-3);
|
||||
gap: 0.5em;
|
||||
justify-content: flex-end;
|
||||
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;
|
||||
@@ -492,186 +362,221 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Assigned List
|
||||
&.assigned-list-item {
|
||||
.topic-status-data {
|
||||
display: none;
|
||||
}
|
||||
// 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;
|
||||
grid-template-areas:
|
||||
". . . . . . dropdown"
|
||||
"avatar update metadata metadata metadata . category";
|
||||
|
||||
@include viewport.until(sm) {
|
||||
grid-template-columns: min-content min-content auto min-content min-content min-content min-content;
|
||||
grid-template-areas:
|
||||
"creator title title title dropdown"
|
||||
". category activity activity .";
|
||||
" . . . . . . dropdown"
|
||||
"update metadata metadata metadata metadata category category";
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
.avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Bookmarks
|
||||
&.bookmark-list-item {
|
||||
grid-template-areas:
|
||||
"creator title title title dropdown"
|
||||
"category category activity . . ";
|
||||
&.has-metadata {
|
||||
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
grid-template-areas:
|
||||
"title title title title dropdown"
|
||||
"category category activity activity . ";
|
||||
". . . . . . . dropdown"
|
||||
"update update metadata metadata metadata metadata category category";
|
||||
|
||||
.avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.excerpt-expanded {
|
||||
// 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;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
grid-template-columns: auto min-content;
|
||||
grid-template-areas:
|
||||
"creator title title title dropdown"
|
||||
"category category activity . . "
|
||||
"excerpt excerpt excerpt excerpt excerpt";
|
||||
". dropdown"
|
||||
"category category";
|
||||
|
||||
@include viewport.until(sm) {
|
||||
grid-template-areas:
|
||||
"title title title title dropdown"
|
||||
"category category activity activity . "
|
||||
"excerpt excerpt excerpt excerpt excerpt";
|
||||
.post-excerpt,
|
||||
.avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-metadata {
|
||||
grid-template-columns: 20px min-content auto min-content;
|
||||
grid-template-areas:
|
||||
"creator title title title dropdown"
|
||||
"category category activity metadata . ";
|
||||
". . . dropdown"
|
||||
"avatar update metadata metadata"
|
||||
"excerpt excerpt excerpt . "
|
||||
"excerpt excerpt excerpt category";
|
||||
|
||||
@include viewport.until(sm) {
|
||||
grid-template-columns: auto min-content;
|
||||
grid-template-areas:
|
||||
"metadata metadata metadata metadata dropdown"
|
||||
"title title title title ."
|
||||
"category category activity activity . ";
|
||||
}
|
||||
" . dropdown"
|
||||
"metadata category";
|
||||
|
||||
&.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-areas:
|
||||
"metadata metadata metadata metadata dropdown"
|
||||
"title title title title ."
|
||||
"category category activity activity . "
|
||||
"excerpt excerpt excerpt excerpt excerpt";
|
||||
.bookmark-metadata {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.author-avatar {
|
||||
grid-area: creator;
|
||||
.badge-category__wrapper {
|
||||
align-self: flex-end;
|
||||
height: min-content;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
td.main-link .link-bottom-line {
|
||||
display: contents;
|
||||
td.author-avatar {
|
||||
grid-area: avatar;
|
||||
}
|
||||
|
||||
.badge-category__wrapper {
|
||||
grid-area: category;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: min-content;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
td.main-link .link-bottom-line {
|
||||
display: contents;
|
||||
|
||||
td.main-link .link-top-line {
|
||||
display: contents;
|
||||
|
||||
.bookmark-metadata {
|
||||
grid-area: metadata;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-inline-s);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bookmark-metadata-item {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bookmark-status-with-link {
|
||||
grid-area: title;
|
||||
}
|
||||
}
|
||||
|
||||
.post-excerpt {
|
||||
grid-area: excerpt;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.topic-list-data:last-of-type {
|
||||
display: contents;
|
||||
|
||||
.bookmark-actions-dropdown {
|
||||
grid-area: dropdown;
|
||||
align-self: flex-start;
|
||||
height: 1em;
|
||||
|
||||
.select-kit-header {
|
||||
padding-top: 0;
|
||||
margin-left: auto;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.select-kit-header-wrapper {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-metadata.topic-list-data.updated-at {
|
||||
grid-area: activity;
|
||||
.badge-category__wrapper {
|
||||
grid-area: category;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--font-down-1-rem);
|
||||
width: min-content;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
td.main-link .link-top-line {
|
||||
display: contents;
|
||||
|
||||
.bookmark-metadata {
|
||||
grid-area: metadata;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-inline-xs);
|
||||
}
|
||||
|
||||
td.activity .post-activity {
|
||||
display: none;
|
||||
.bookmark-metadata-item {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bookmark-status-with-link {
|
||||
grid-column: 1/-2;
|
||||
grid-row: 1/2;
|
||||
}
|
||||
}
|
||||
|
||||
.post-excerpt {
|
||||
grid-area: excerpt;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.topic-list-data:last-of-type {
|
||||
display: contents;
|
||||
|
||||
.bookmark-actions-dropdown {
|
||||
grid-area: dropdown;
|
||||
align-self: flex-start;
|
||||
height: 1em;
|
||||
|
||||
.select-kit-header {
|
||||
padding-top: 0;
|
||||
margin-left: auto;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.select-kit-header-wrapper {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-metadata.topic-list-data.updated-at {
|
||||
grid-area: update;
|
||||
}
|
||||
|
||||
td.activity .post-activity {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// bulk-select overrule for j/k nav
|
||||
.topic-list tr.selected td:first-of-type,
|
||||
.topic-list-item.selected td:first-of-type {
|
||||
box-shadow: 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
|
||||
@@ -696,10 +601,6 @@ body.user-messages-page {
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: auto auto;
|
||||
|
||||
&.has-replies {
|
||||
grid-template-areas: "title activity" "posters .";
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
background-color: var(--primary-low);
|
||||
@@ -749,4 +650,5 @@ body.user-messages-page {
|
||||
.event-date-container {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
top: -0.25em; // optical alignment
|
||||
}
|
||||
|
||||
@@ -36,7 +36,9 @@ describe "Horizon theme | High level", type: :system do
|
||||
expect(topic_item.all("td").map { |el| el["class"] }).to eq(
|
||||
[
|
||||
"main-link topic-list-data",
|
||||
"topic-status-data",
|
||||
"topic-category-data",
|
||||
"topic-likes-replies-data",
|
||||
"topic-creator-data",
|
||||
"topic-activity-data",
|
||||
],
|
||||
@@ -48,7 +50,7 @@ describe "Horizon theme | High level", type: :system do
|
||||
|
||||
# Can change site colors from the sidebar palette, which are remembered
|
||||
# across page reloads.
|
||||
marigold_palette = theme.color_schemes.find_by(name: "Marigold")
|
||||
marigold_palette = ColorScheme.find_by(name: "Marigold")
|
||||
palette_selector.open_palette_menu
|
||||
palette_selector.click_palette_menu_item(marigold_palette.name)
|
||||
expect(palette_selector).to have_no_palette_menu
|
||||
|
||||
@@ -26,9 +26,7 @@ module PageObjects
|
||||
end
|
||||
|
||||
def has_selected_palette?(palette)
|
||||
has_css?(
|
||||
".user-color-palette-selector-trigger[data-selected-color-palette-id=\"#{palette.id}\"]",
|
||||
)
|
||||
has_css?(".user-color-palette-selector[data-selected-color-palette-id='#{palette.id}']")
|
||||
end
|
||||
|
||||
def has_loaded_css?
|
||||
|
||||
@@ -6,7 +6,7 @@ describe "Horizon theme | User color palette selector", type: :system do
|
||||
let(:set_theme_as_default) { true }
|
||||
let!(:theme) do
|
||||
horizon_theme = upload_theme(set_theme_as_default: set_theme_as_default)
|
||||
horizon_theme.color_schemes.update_all(user_selectable: true)
|
||||
ColorScheme.where(theme_id: horizon_theme.id).update_all(user_selectable: true)
|
||||
horizon_theme
|
||||
end
|
||||
fab!(:current_user) { Fabricate(:user) }
|
||||
@@ -16,8 +16,8 @@ describe "Horizon theme | User color palette selector", type: :system do
|
||||
let(:interface_color_selector) do
|
||||
PageObjects::Components::InterfaceColorSelector.new(".sidebar-footer-actions")
|
||||
end
|
||||
let(:marigold_palette) { theme.color_schemes.find_by(name: "Marigold") }
|
||||
let(:marigold_palette_dark) { theme.color_schemes.find_by(name: "Marigold Dark") }
|
||||
let(:marigold_palette) { ColorScheme.find_by(name: "Marigold") }
|
||||
let(:marigold_palette_dark) { ColorScheme.find_by(name: "Marigold Dark") }
|
||||
|
||||
before { SiteSetting.interface_color_selector = "sidebar_footer" }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user