Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Jordan Vidrine
|
4e6b4a6c80 |
@@ -1,2 +0,0 @@
|
||||
< 3.5.0.beta5-dev: 31249c4f27d93e83c6b83d42d93974522a9a612e
|
||||
|
||||
|
||||
+13
-13
@@ -15,16 +15,16 @@ GEM
|
||||
tzinfo (~> 2.0, >= 2.0.5)
|
||||
uri (>= 0.13.1)
|
||||
ast (2.4.3)
|
||||
base64 (0.3.0)
|
||||
benchmark (0.4.1)
|
||||
bigdecimal (3.2.2)
|
||||
base64 (0.2.0)
|
||||
benchmark (0.4.0)
|
||||
bigdecimal (3.1.9)
|
||||
concurrent-ruby (1.3.5)
|
||||
connection_pool (2.5.3)
|
||||
drb (2.2.3)
|
||||
drb (2.2.1)
|
||||
i18n (1.14.7)
|
||||
concurrent-ruby (~> 1.0)
|
||||
json (2.12.2)
|
||||
language_server-protocol (3.17.0.5)
|
||||
json (2.11.3)
|
||||
language_server-protocol (3.17.0.4)
|
||||
lint_roller (1.1.0)
|
||||
logger (1.7.0)
|
||||
minitest (5.25.5)
|
||||
@@ -35,10 +35,10 @@ GEM
|
||||
prettier_print (1.2.1)
|
||||
prism (1.4.0)
|
||||
racc (1.8.1)
|
||||
rack (3.1.15)
|
||||
rack (3.1.13)
|
||||
rainbow (3.1.1)
|
||||
regexp_parser (2.10.0)
|
||||
rubocop (1.76.0)
|
||||
rubocop (1.75.4)
|
||||
json (~> 2.3)
|
||||
language_server-protocol (~> 3.17.0.2)
|
||||
lint_roller (~> 1.1.0)
|
||||
@@ -46,10 +46,10 @@ GEM
|
||||
parser (>= 3.3.0.2)
|
||||
rainbow (>= 2.2.2, < 4.0)
|
||||
regexp_parser (>= 2.9.3, < 3.0)
|
||||
rubocop-ast (>= 1.45.0, < 2.0)
|
||||
rubocop-ast (>= 1.44.0, < 2.0)
|
||||
ruby-progressbar (~> 1.7)
|
||||
unicode-display_width (>= 2.4.0, < 4.0)
|
||||
rubocop-ast (1.45.0)
|
||||
rubocop-ast (1.44.1)
|
||||
parser (>= 3.3.7.2)
|
||||
prism (~> 1.4)
|
||||
rubocop-capybara (2.22.1)
|
||||
@@ -67,12 +67,12 @@ GEM
|
||||
rubocop-factory_bot (2.27.1)
|
||||
lint_roller (~> 1.1)
|
||||
rubocop (~> 1.72, >= 1.72.1)
|
||||
rubocop-rails (2.32.0)
|
||||
rubocop-rails (2.31.0)
|
||||
activesupport (>= 4.2.0)
|
||||
lint_roller (~> 1.1)
|
||||
rack (>= 1.1)
|
||||
rubocop (>= 1.75.0, < 2.0)
|
||||
rubocop-ast (>= 1.44.0, < 2.0)
|
||||
rubocop-ast (>= 1.38.0, < 2.0)
|
||||
rubocop-rspec (3.6.0)
|
||||
lint_roller (~> 1.1)
|
||||
rubocop (~> 1.72, >= 1.72.1)
|
||||
@@ -99,4 +99,4 @@ DEPENDENCIES
|
||||
syntax_tree
|
||||
|
||||
BUNDLED WITH
|
||||
2.6.9
|
||||
2.6.8
|
||||
|
||||
+4
-3
@@ -6,7 +6,9 @@
|
||||
"learn_more": "https://meta.discourse.org/t/installing-a-theme-or-theme-component/63682",
|
||||
"theme_version": "0.0.1",
|
||||
"modifiers": {
|
||||
"svg_icons": ["fire"],
|
||||
"svg_icons": [
|
||||
"fire"
|
||||
],
|
||||
"serialize_topic_is_hot": true
|
||||
},
|
||||
"color_schemes": {
|
||||
@@ -130,6 +132,5 @@
|
||||
"header_primary": "ffffff",
|
||||
"hover": "584B3E"
|
||||
}
|
||||
},
|
||||
"screenshots": ["screenshots/light.png", "screenshots/dark.png"]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script>
|
||||
if (!CSS.supports("(color: hsl(from white h s l))")) {
|
||||
if(!CSS.supports("(color: hsl(from white h s l))")){
|
||||
window.unsupportedBrowser = true;
|
||||
window.I18n.translations[I18n.locale].js.browser_update =
|
||||
'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
|
||||
window.I18n.translations[I18n.locale].js.browser_update = 'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
@@ -1,7 +1,9 @@
|
||||
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() {
|
||||
@@ -25,34 +27,37 @@ export default class TopicActivityColumn extends Component {
|
||||
};
|
||||
} else if (this.args.topic.posts_count === 1) {
|
||||
return {
|
||||
user: this.args.topic.firstPosterUser,
|
||||
username: this.args.topic.last_poster_username,
|
||||
class: "--created",
|
||||
user: this.args.topic.creator,
|
||||
username: this.args.topic.creator.username,
|
||||
activityText: "user_posted",
|
||||
class: "--posted",
|
||||
};
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
<span class={{concatClass "topic-activity" this.topicUser.class}}>
|
||||
<div class="topic-activity__type">
|
||||
<div class="topic-activity__user">
|
||||
{{#if this.topicUser.user}}
|
||||
{{icon "reply"}}
|
||||
{{avatar this.topicUser.user imageSize="small"}}
|
||||
{{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="tiny"}}
|
||||
{{formatDate
|
||||
@topic.bumpedAt
|
||||
leaveAgo="true"
|
||||
format="medium-with-ago-and-on"
|
||||
}}
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
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,5 +1,5 @@
|
||||
import { gt } from "truth-helpers";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
import gt from "truth-helpers/helpers/gt";
|
||||
|
||||
const TopicRepliesColumn = <template>
|
||||
{{#if (gt @topic.replyCount 1)}}
|
||||
|
||||
@@ -5,8 +5,9 @@ import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
||||
import didUpdate from "@ember/render-modifiers/modifiers/did-update";
|
||||
import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
|
||||
import { service } from "@ember/service";
|
||||
import { gt, not } from "truth-helpers";
|
||||
import { gt } from "truth-helpers";
|
||||
import CreateTopicButton from "discourse/components/create-topic-button";
|
||||
import not from "truth-helpers/helpers/not";
|
||||
|
||||
export default class SidebarNewTopicButton extends Component {
|
||||
@service composer;
|
||||
|
||||
@@ -1,7 +1,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";
|
||||
@@ -31,12 +30,6 @@ const TopicLikesReplies = <template>
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
const TopicCreator = <template>
|
||||
<td class="topic-creator-data">
|
||||
<TopicCreatorColumn @topic={{@topic}} />
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
export default {
|
||||
name: "topic-list-customizations",
|
||||
|
||||
@@ -59,10 +52,6 @@ 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")) {
|
||||
@@ -94,34 +83,6 @@ export default {
|
||||
api.registerValueTransformer("topic-list-item-mobile-layout", () => {
|
||||
return false;
|
||||
});
|
||||
|
||||
api.registerBehaviorTransformer(
|
||||
"topic-list-item-click",
|
||||
({ context: { event }, next }) => {
|
||||
if (event.target.closest("a, button, input")) {
|
||||
return next();
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const topicLink = event.target
|
||||
.closest("tr")
|
||||
.querySelector("a.raw-topic-link");
|
||||
|
||||
// Redespatch the click on the topic link, so that all key-handing is sorted
|
||||
topicLink.dispatchEvent(
|
||||
new MouseEvent("click", {
|
||||
ctrlKey: event.ctrlKey,
|
||||
metaKey: event.metaKey,
|
||||
shiftKey: event.shiftKey,
|
||||
button: event.button,
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
+4
-4
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"@discourse/lint-configs": "2.25.0",
|
||||
"ember-template-lint": "7.8.1",
|
||||
"eslint": "9.28.0",
|
||||
"@discourse/lint-configs": "2.11.1",
|
||||
"ember-template-lint": "7.0.1",
|
||||
"eslint": "9.22.0",
|
||||
"prettier": "3.5.3",
|
||||
"stylelint": "16.20.0"
|
||||
"stylelint": "16.16.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 22",
|
||||
|
||||
Generated
+873
-326
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 129 KiB |
+13
-44
@@ -1,6 +1,4 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
@media screen and (width >= 1300px) {
|
||||
@media screen and (min-width: 1300px) {
|
||||
#main-outlet {
|
||||
border-top-right-radius: var(--d-border-radius-large);
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
@@ -22,7 +20,7 @@
|
||||
.has-full-page-chat .chat-replying-indicator-container {
|
||||
margin-bottom: var(--main-grid-gap);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
@include breakpoint(medium) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -30,7 +28,7 @@
|
||||
.has-full-page-chat .chat-selection-management {
|
||||
margin-bottom: var(--main-grid-gap);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
@include breakpoint(medium) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -42,16 +40,17 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
container: content-width / inline-size;
|
||||
|
||||
@include viewport.until(lg) {
|
||||
@include breakpoint(medium) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (width <= 488px) {
|
||||
@media screen and (max-width: 488px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include viewport.until(md) {
|
||||
@include breakpoint(tablet) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -94,7 +93,7 @@
|
||||
bottom: var(--main-grid-gap);
|
||||
left: var(--left-distance);
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
@@ -104,7 +103,7 @@
|
||||
bottom: var(--main-grid-gap);
|
||||
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
@@ -118,7 +117,7 @@
|
||||
left: var(--left-distance);
|
||||
height: var(--main-grid-gap);
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
height: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
|
||||
@@ -128,37 +127,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.rtl .experimental-screen {
|
||||
&__top-left {
|
||||
right: var(--left-distance);
|
||||
left: unset;
|
||||
}
|
||||
|
||||
&__top-right {
|
||||
transform: rotate(-90deg) !important;
|
||||
right: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
left: unset;
|
||||
}
|
||||
|
||||
&__bottom-left {
|
||||
transform: rotate(90deg);
|
||||
right: var(--left-distance);
|
||||
left: unset;
|
||||
}
|
||||
|
||||
&__bottom-right {
|
||||
transform: rotate(180deg);
|
||||
left: unset;
|
||||
right: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
}
|
||||
|
||||
&__bottom-bar {
|
||||
right: var(--left-distance);
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width >= 768px) {
|
||||
@media screen and (min-width: 768px) {
|
||||
.with-topic-progress {
|
||||
bottom: calc(
|
||||
env(safe-area-inset-bottom) + var(--composer-height, 0px) +
|
||||
@@ -167,7 +136,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
.with-topic-progress {
|
||||
bottom: calc(
|
||||
env(safe-area-inset-bottom) + var(--composer-height, 0px) +
|
||||
@@ -176,7 +145,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 400px) {
|
||||
@media screen and (max-width: 400px) {
|
||||
.with-topic-progress {
|
||||
bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
|
||||
}
|
||||
|
||||
+2
-32
@@ -1,13 +1,9 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.full-page-chat.full-page-chat-sidebar-enabled {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c-navbar-container {
|
||||
.full-page-chat & {
|
||||
padding: 0 1.5em;
|
||||
}
|
||||
padding: 0 1.5em;
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
@@ -23,30 +19,10 @@ body.has-full-page-chat {
|
||||
.chat-drawer.is-expanded & {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c-navbar__title {
|
||||
padding-left: 0.33em; // visual alignment for chat index, which does not havea a backarrow
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer-outlet-container {
|
||||
z-index: z("composer", "content");
|
||||
|
||||
.peek-mode-active & {
|
||||
padding-bottom: 0;
|
||||
left: unset;
|
||||
right: var(--main-grid-gap);
|
||||
|
||||
&:has(.is-expanded) {
|
||||
z-index: calc(z("composer", "dropdown") + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer {
|
||||
.peek-mode-active & {
|
||||
max-width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer .channels-list-container .chat-channel-row {
|
||||
@@ -78,11 +54,5 @@ body.has-full-page-chat {
|
||||
}
|
||||
|
||||
.chat-drawer-active.chat-drawer-expanded .chat-composer-dropdown__menu-content {
|
||||
z-index: z("modal", "dialog");
|
||||
}
|
||||
|
||||
.chat-replying-indicator-container {
|
||||
@include viewport.from(sm) {
|
||||
margin-left: calc(0.65em + 0.2rem);
|
||||
}
|
||||
z-index: z("composer", "content") + 1;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
--d-sidebar-header-icon-color: var(--d-sidebar-link-color);
|
||||
--d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color);
|
||||
--d-sidebar-background: var(--background-color);
|
||||
--d-sidebar-footer-fade: rgb(var(--tertiary-50-rgb), 1);
|
||||
--d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
|
||||
--d-sidebar-prefix-background: var(--d-selected);
|
||||
--d-sidebar-active-prefix-background: light-dark(
|
||||
oklch(from var(--d-selected) calc(l * 0.85) c h),
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (width >= 1300px) {
|
||||
@media screen and (min-width: 1300px) {
|
||||
html:not(.fullscreen-composer) {
|
||||
.peek-mode-toggle svg {
|
||||
transform: scaleX(-1);
|
||||
|
||||
+1
-5
@@ -1,5 +1,3 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
#reply-control
|
||||
.select-kit.dropdown-select-box.composer-actions
|
||||
.select-kit-header {
|
||||
@@ -14,15 +12,13 @@
|
||||
}
|
||||
|
||||
#reply-control.hide-preview:not(.draft) {
|
||||
@include viewport.from(sm) {
|
||||
@include breakpoint("mobile-extra-large", $rule: min-width) {
|
||||
background: var(--d-content-background);
|
||||
border-top-right-radius: var(--d-border-radius);
|
||||
border-top-left-radius: var(--d-border-radius);
|
||||
|
||||
.grippie {
|
||||
background: var(--tertiary-low);
|
||||
border-top-right-radius: var(--d-border-radius);
|
||||
border-top-left-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.user-selector,
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
// Full width layout. Ported from the Discourse Full Width theme component here
|
||||
// https://meta.discourse.org/t/discourse-full-width-component/292496, which we
|
||||
// intend to move into core over time.
|
||||
@@ -25,7 +23,7 @@ $sidebar-width: 17em;
|
||||
body:not(.has-sidebar-page) & {
|
||||
max-width: unset;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
max-width: 25vw;
|
||||
}
|
||||
}
|
||||
@@ -105,7 +103,7 @@ $sidebar-width: 17em;
|
||||
grid-area: extra-info;
|
||||
white-space: nowrap;
|
||||
|
||||
@include viewport.until(md) {
|
||||
@include breakpoint("tablet") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -129,7 +127,7 @@ $sidebar-width: 17em;
|
||||
// at narrower widths, when 1fr = 0
|
||||
// we can center without matching the sidebar's width
|
||||
// which allows the title to take up the remaining width
|
||||
@media screen and (width <= 1400px) {
|
||||
@media screen and (max-width: 1400px) {
|
||||
grid-template-columns:
|
||||
calc(var(--d-sidebar-width) - 11px)
|
||||
1fr
|
||||
@@ -138,7 +136,7 @@ $sidebar-width: 17em;
|
||||
auto;
|
||||
}
|
||||
|
||||
@media screen and (width <= 1000px) {
|
||||
@media screen and (max-width: 1000px) {
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
@@ -191,11 +189,11 @@ $sidebar-width: 17em;
|
||||
.header-search--enabled .floating-search-input-wrapper {
|
||||
grid-area: extra-info;
|
||||
|
||||
@include viewport.until(md) {
|
||||
@include breakpoint(tablet) {
|
||||
grid-area: rspace;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -210,7 +208,7 @@ body.has-sidebar-page {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (width >= calc($reply-area-max-width + ($sidebar-width * 2))) {
|
||||
@media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
|
||||
#reply-control.show-preview {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@@ -221,7 +219,7 @@ body.has-sidebar-page {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= calc($reply-area-max-width + ($sidebar-width * 2))) and (width >= calc($reply-area-max-width + calc($sidebar-width / 2))) {
|
||||
@media screen and (max-width: calc($reply-area-max-width + ($sidebar-width * 2))) and (min-width: calc($reply-area-max-width + calc($sidebar-width / 2))) {
|
||||
#reply-control.show-preview:not(.fullscreen) {
|
||||
margin-left: $sidebar-width;
|
||||
width: auto;
|
||||
@@ -267,7 +265,7 @@ body.sidebar-animate {
|
||||
}
|
||||
|
||||
// provides some extra space for login buttons
|
||||
@media screen and (width >= 1400px) {
|
||||
@media screen and (min-width: 1400px) {
|
||||
.anon {
|
||||
.d-header .panel {
|
||||
grid-column-start: -4;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Fixing bulk select (only needed for desktop)
|
||||
.bulk-select-enabled {
|
||||
.topic-list-header {
|
||||
position: relative;
|
||||
top: 0;
|
||||
.topic-list-header .topic-list-data.default {
|
||||
position: sticky;
|
||||
top: 10em;
|
||||
}
|
||||
|
||||
.topic-author-avatar-data {
|
||||
@@ -13,7 +13,7 @@
|
||||
grid-area: bulk-select;
|
||||
margin-left: -0.5em;
|
||||
|
||||
@media screen and (width <= 576px) {
|
||||
@media screen and (max-width: 576px) {
|
||||
margin-top: 0;
|
||||
|
||||
label {
|
||||
@@ -47,19 +47,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
// bulk select
|
||||
.bulk-select-topics {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
right: -1em;
|
||||
background: var(--secondary);
|
||||
border-radius: 0 0 0 var(--d-border-radius);
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem;
|
||||
padding: 1em;
|
||||
|
||||
@media screen and (max-width: 1048px) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+1
-3
@@ -1,10 +1,8 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.d-header {
|
||||
box-shadow: none;
|
||||
background: var(--background-color);
|
||||
|
||||
@include viewport.from(xl) {
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
padding-bottom: var(--main-grid-gap);
|
||||
}
|
||||
}
|
||||
|
||||
+10
-12
@@ -1,5 +1,3 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
:root {
|
||||
--main-grid-gap: 0.5em;
|
||||
}
|
||||
@@ -7,7 +5,7 @@
|
||||
html:not(:has(.has-full-page-chat)) {
|
||||
background-color: var(--background-color);
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
@@ -15,7 +13,7 @@ html:not(:has(.has-full-page-chat)) {
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
@@ -37,7 +35,7 @@ body.has-full-page-chat:not(.has-sidebar-page) {
|
||||
#main-outlet-wrapper {
|
||||
gap: var(--main-grid-gap);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
@include breakpoint(medium) {
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
@@ -52,22 +50,22 @@ body.has-sidebar-page #main-outlet-wrapper {
|
||||
}
|
||||
|
||||
body:not(.has-sidebar-page) #main-outlet-wrapper {
|
||||
@include viewport.from(lg) {
|
||||
@include breakpoint(medium, $rule: min-width) {
|
||||
grid-template-columns: 0 minmax(0, 1fr) 0;
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.has-full-page-chat, .wizard) {
|
||||
@include viewport.from(xl) {
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
@include viewport.until(lg) {
|
||||
@include breakpoint(medium) {
|
||||
--main-grid-gap: 0;
|
||||
}
|
||||
|
||||
@media screen and (width >= 768px) {
|
||||
@media screen and (min-width: 768px) {
|
||||
gap: var(--main-grid-gap);
|
||||
}
|
||||
|
||||
@@ -78,7 +76,7 @@ body:not(.has-full-page-chat, .wizard) {
|
||||
border-radius: var(--d-border-radius-large);
|
||||
background-color: var(--d-content-background);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
@include breakpoint(medium) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@@ -87,7 +85,7 @@ body:not(.has-full-page-chat, .wizard) {
|
||||
}
|
||||
|
||||
> *:not(.experimental-screen, .activate-account) {
|
||||
@include viewport.from(lg) {
|
||||
@include breakpoint(medium, $rule: min-width) {
|
||||
box-sizing: border-box;
|
||||
max-width: 1000px;
|
||||
margin-inline: auto;
|
||||
@@ -100,7 +98,7 @@ body:not(.has-full-page-chat, .wizard) {
|
||||
|
||||
#list-area {
|
||||
.show-more.has-topics {
|
||||
@include viewport.from(lg) {
|
||||
@include breakpoint(medium, $rule: min-width) {
|
||||
width: auto;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
|
||||
+3
-33
@@ -1,5 +1,3 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.user-main .about.collapsed-info .details {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
@@ -71,7 +69,7 @@ input[type="color"]:focus,
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
// pinned topic excerpts are hidden on small screens too
|
||||
.fk-d-menu__trigger.topic-list-layout-trigger {
|
||||
display: none;
|
||||
@@ -108,34 +106,6 @@ input[type="color"]:focus,
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// compatibility with the top contributors sidebar theme component
|
||||
// https://meta.discourse.org/t/top-contributors-sidebar/215110
|
||||
.list-container
|
||||
#list-area
|
||||
> .contents
|
||||
> .topic-list:has(.discourse-top-contributors) {
|
||||
grid-template-areas: "head head" "body sidebar";
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
@include viewport.until(lg) {
|
||||
grid-template-areas: "head head" "body body";
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.discourse-top-contributors {
|
||||
width: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include viewport.until(lg) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-contributors-heading {
|
||||
font-size: var(--font-up-2);
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
.d-modal__container {
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
+15
-19
@@ -1,7 +1,5 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
// temp separate file to avoid merge hell… to be distributed later
|
||||
@include viewport.until(lg) {
|
||||
@include breakpoint(medium) {
|
||||
html,
|
||||
.d-header {
|
||||
background-color: var(--d-content-background);
|
||||
@@ -10,19 +8,19 @@
|
||||
|
||||
#main-outlet-wrapper {
|
||||
*[class*="navigation-"] & {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-top: var(--spacing-block-sm);
|
||||
}
|
||||
|
||||
.list-controls {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-inline: var(
|
||||
--spacing-inline-m
|
||||
) !important; // override will be fixed when the whole chat page shenanigans is resolved
|
||||
@@ -31,13 +29,14 @@
|
||||
}
|
||||
|
||||
.navigation-container {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
gap: var(--spacing-inline-s);
|
||||
|
||||
// don't know why we even hide this crucial navigation on mobile
|
||||
.category-breadcrumb.hidden,
|
||||
.category-breadcrumb {
|
||||
display: flex !important;
|
||||
column-gap: var(--spacing-inline-m);
|
||||
column-gap: var(--spacing-inline-s);
|
||||
row-gap: var(--spacing-block-xs);
|
||||
flex-basis: 100%;
|
||||
|
||||
@@ -48,12 +47,9 @@
|
||||
); // 2px is width of the outline
|
||||
}
|
||||
|
||||
.select-kit-header-wrapper {
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.select-kit-header {
|
||||
background: var(--d-content-background);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -81,13 +77,13 @@
|
||||
#navigation-bar,
|
||||
.navigation-controls,
|
||||
.category-breadcrumb {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-controls {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
gap: var(--spacing-inline-s);
|
||||
}
|
||||
}
|
||||
@@ -95,12 +91,12 @@
|
||||
}
|
||||
|
||||
.list-container {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-inline: 0 !important;
|
||||
}
|
||||
|
||||
.topic-list-body {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
@@ -108,7 +104,7 @@
|
||||
}
|
||||
|
||||
#topic-title {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-inline: var(--spacing-inline-s) !important;
|
||||
|
||||
.title-wrapper {
|
||||
@@ -162,7 +158,7 @@
|
||||
}
|
||||
|
||||
.container.posts {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-inline: var(--spacing-inline-xs) !important;
|
||||
|
||||
.main-avatar .avatar {
|
||||
@@ -201,7 +197,7 @@
|
||||
}
|
||||
|
||||
#topic-footer-buttons {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-inline: var(--spacing-inline-xs) !important;
|
||||
}
|
||||
}
|
||||
|
||||
+2
-24
@@ -1,36 +1,14 @@
|
||||
@use "lib/viewport";
|
||||
.list-controls {
|
||||
position: sticky;
|
||||
top: var(--header-offset);
|
||||
background: var(--d-content-background);
|
||||
z-index: z("base");
|
||||
padding: 1.5rem 0 0 0;
|
||||
padding: 1.5rem 0 1rem 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;
|
||||
}
|
||||
@@ -39,7 +17,7 @@
|
||||
.combo-box .combo-box-header {
|
||||
// needs more specificity than just in the button file
|
||||
background-color: var(--secondary);
|
||||
border-radius: var(--d-border-radius);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
border: 1px solid var(--primary-300);
|
||||
|
||||
&:hover {
|
||||
|
||||
+4
-4
@@ -2,7 +2,7 @@
|
||||
|
||||
.sidebar-wrapper,
|
||||
.sidebar-hamburger-dropdown {
|
||||
@include viewport.until(lg) {
|
||||
@include breakpoint(medium) {
|
||||
background: var(--secondary);
|
||||
|
||||
.sidebar-footer-wrapper {
|
||||
@@ -38,11 +38,11 @@
|
||||
}
|
||||
|
||||
.sidebar-section-wrapper {
|
||||
@include viewport.from(xl) {
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
padding-block: 0.45em;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
.hamburger-panel .revamped & {
|
||||
margin-bottom: var(--spacing-block-m);
|
||||
}
|
||||
@@ -57,7 +57,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include viewport.from(xl) {
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
gap: var(--spacing-block-xs);
|
||||
}
|
||||
}
|
||||
|
||||
+273
-193
@@ -1,5 +1,3 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.topic-list .topic-list-item-separator {
|
||||
display: none;
|
||||
}
|
||||
@@ -16,107 +14,109 @@
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25em;
|
||||
gap: 1em;
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
.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: min-content min-content auto min-content;
|
||||
grid-template-columns: 20px min-content min-content auto min-content;
|
||||
grid-template-rows: auto minmax(20px, auto);
|
||||
grid-template-areas:
|
||||
"creator title title status"
|
||||
"creator category activity likes-replies";
|
||||
grid-column-gap: 0.75rem;
|
||||
grid-row-gap: 0.5rem;
|
||||
". . . . status"
|
||||
"activity . . likes-replies category";
|
||||
grid-column-gap: 12px;
|
||||
grid-row-gap: 8px;
|
||||
border-radius: var(--d-border-radius);
|
||||
cursor: pointer;
|
||||
|
||||
.bulk-select-enabled & {
|
||||
grid-template-columns: min-content min-content min-content auto min-content;
|
||||
grid-template-areas:
|
||||
"bulk-select creator title title status"
|
||||
"bulk-select creator category activity likes-replies";
|
||||
td.main-link .link-top-line {
|
||||
grid-row: 1/2;
|
||||
grid-column: 1/-1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
&.--has-status-card td.main-link .link-top-line {
|
||||
grid-column: 1/-2;
|
||||
}
|
||||
|
||||
@include breakpoint(extra-large) {
|
||||
grid-template-areas:
|
||||
"category category category status"
|
||||
"creator title title title"
|
||||
"activity activity activity likes-replies";
|
||||
row-gap: 0.75em;
|
||||
". . . . status"
|
||||
"activity . . likes-replies category";
|
||||
}
|
||||
|
||||
@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;
|
||||
grid-template-areas:
|
||||
"category category category category category status"
|
||||
". . . . . ."
|
||||
"activity . . . . likes-replies";
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--primary-200);
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&: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);
|
||||
}
|
||||
|
||||
&.excerpt-expanded {
|
||||
@include viewport.until(sm) {
|
||||
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";
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
"category category category category status"
|
||||
". . . . ."
|
||||
"activity . . . likes-replies";
|
||||
|
||||
.topic-excerpt,
|
||||
.link-bottom-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@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-likes-replies-data {
|
||||
align-self: 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";
|
||||
.topic-category-data {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.link-top-line {
|
||||
grid-area: title;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.badge-category__wrapper {
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 0;
|
||||
.link-bottom-line {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -125,8 +125,7 @@
|
||||
td.posters,
|
||||
td.posts,
|
||||
td.views,
|
||||
td.activity,
|
||||
td.topic-category-status-data {
|
||||
td.activity {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
@@ -134,102 +133,59 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// 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 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)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// 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, avatar, text
|
||||
.topic-activity-data {
|
||||
@include ellipsis;
|
||||
grid-area: activity;
|
||||
}
|
||||
|
||||
.topic-activity {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 20px auto auto auto;
|
||||
font-size: var(--font-down-1);
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.topic-activity__type {
|
||||
border-radius: 0.25rem;
|
||||
.topic-activity__user .avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.topic-activity__user {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 4px;
|
||||
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;
|
||||
}
|
||||
|
||||
// timestamp
|
||||
td.activity .post-activity {
|
||||
grid-area: activity;
|
||||
font-size: var(--font-down-1);
|
||||
color: var(--primary-500);
|
||||
margin-left: auto;
|
||||
padding: 0;
|
||||
@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;
|
||||
}
|
||||
|
||||
// status
|
||||
.topic-status-data {
|
||||
grid-area: status;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topic-status-card {
|
||||
@@ -237,30 +193,23 @@
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.25em;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
padding: 0.2em 0.5rem;
|
||||
font-size: var(--font-down-3);
|
||||
padding: 0 6px;
|
||||
font-size: var(--font-down-2);
|
||||
font-weight: 600;
|
||||
border-radius: var(--d-border-radius);
|
||||
border: 1px solid var(--status-color);
|
||||
color: var(--status-color);
|
||||
width: min-content;
|
||||
|
||||
&.--pinned {
|
||||
--status-color: var(--primary-500);
|
||||
}
|
||||
|
||||
&.--hot {
|
||||
--status-color: #e45735;
|
||||
}
|
||||
|
||||
@include viewport.from(lg) {
|
||||
@include breakpoint("large", min-width) {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 0;
|
||||
transform: translateY(-45%);
|
||||
right: 0;
|
||||
top: -20px;
|
||||
background-color: var(--d-content-background);
|
||||
height: 20px;
|
||||
font-size: var(--font-down-3);
|
||||
}
|
||||
|
||||
svg {
|
||||
@@ -269,15 +218,31 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
@@ -290,13 +255,27 @@
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
// metadata - excerpt
|
||||
.topic-excerpt {
|
||||
grid-area: excerpt;
|
||||
margin: 0;
|
||||
// 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;
|
||||
margin: 0;
|
||||
font-size: var(--font-down-2);
|
||||
width: 100%;
|
||||
|
||||
.excerpt__contents {
|
||||
color: var(--primary-high);
|
||||
@@ -308,6 +287,42 @@
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
@@ -336,31 +351,28 @@
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
color: var(--primary-500);
|
||||
font-size: var(--font-down-1-rem);
|
||||
|
||||
svg {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bulk-select {
|
||||
grid-area: bulk-select;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
.topic-list-item {
|
||||
background: var(--d-content-background);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
|
||||
@include viewport.until(sm) {
|
||||
align-self: flex-start;
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
border-color: var(--accent-color);
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&th {
|
||||
display: none;
|
||||
}
|
||||
&.selected {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--accent-color),
|
||||
0 0 12px 1px var(--topic-card-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -376,7 +388,7 @@
|
||||
". . . . . . dropdown"
|
||||
"avatar update metadata metadata metadata . category";
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: min-content min-content auto min-content min-content min-content min-content;
|
||||
grid-template-areas:
|
||||
" . . . . . . dropdown"
|
||||
@@ -390,7 +402,7 @@
|
||||
&.has-metadata {
|
||||
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-areas:
|
||||
". . . . . . . dropdown"
|
||||
"update update metadata metadata metadata metadata category category";
|
||||
@@ -410,11 +422,11 @@
|
||||
"excerpt excerpt excerpt ."
|
||||
"excerpt excerpt excerpt category";
|
||||
|
||||
@include viewport.from(xl) {
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
grid-template-columns: 20px min-content auto min-content;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: auto min-content;
|
||||
grid-template-areas:
|
||||
". dropdown"
|
||||
@@ -434,7 +446,7 @@
|
||||
"excerpt excerpt excerpt . "
|
||||
"excerpt excerpt excerpt category";
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: auto min-content;
|
||||
grid-template-areas:
|
||||
" . dropdown"
|
||||
@@ -544,7 +556,7 @@
|
||||
". . . . . status dropdown"
|
||||
"activity . . . . likes-replies category";
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
|
||||
grid-template-areas:
|
||||
"category category . . . . status dropdown"
|
||||
@@ -602,25 +614,19 @@ body.user-messages-page {
|
||||
grid-template-rows: auto auto;
|
||||
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
background-color: var(--primary-low);
|
||||
border-color: var(--primary-200);
|
||||
}
|
||||
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-creator-data {
|
||||
td.topic-status-data {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-link .link-top-line {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
&.visited .main-link .link-top-line {
|
||||
font-weight: normal;
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
td.topic-activity-data {
|
||||
@@ -647,8 +653,82 @@ body.user-messages-page {
|
||||
}
|
||||
}
|
||||
|
||||
.event-date-container {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
top: -0.25em; // optical alignment
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-view {
|
||||
.link-top-line .event-date-container {
|
||||
display: inline;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.topic-list-body .topic-list-item .link-top-line .event-date {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
top: -0.125em;
|
||||
}
|
||||
}
|
||||
|
||||
+12
-6
@@ -1,5 +1,3 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.post-stream {
|
||||
.contents {
|
||||
font-size: var(--font-up-1);
|
||||
@@ -8,6 +6,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.container.posts .topic-navigation:not(.with-topic-progress) {
|
||||
// super fragile because new sticky topic title doesn't have a calculated value (= 53px with this font and size but…)
|
||||
top: calc(
|
||||
var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
|
||||
);
|
||||
z-index: 300;
|
||||
}
|
||||
|
||||
.timeline-container .topic-timeline {
|
||||
min-width: unset; // why we have this?
|
||||
|
||||
@@ -15,7 +21,7 @@
|
||||
border-left: 1px solid var(--accent-color);
|
||||
|
||||
.timeline-scroller {
|
||||
@include viewport.from(lg) {
|
||||
@include breakpoint("medium", $rule: min-width) {
|
||||
margin-left: -4.5px;
|
||||
background: var(--d-content-background);
|
||||
height: 40px !important; // height is coming from element style have no other choice
|
||||
@@ -30,7 +36,7 @@
|
||||
.timeline-handle {
|
||||
background-color: var(--accent-color);
|
||||
|
||||
@include viewport.from(lg) {
|
||||
@include breakpoint("medium", $rule: min-width) {
|
||||
width: 8px;
|
||||
border-radius: 10px;
|
||||
height: calc(100% - 6px);
|
||||
@@ -41,7 +47,7 @@
|
||||
|
||||
// should probably get rid of this extra specificity class in core?
|
||||
.timeline-container.timeline-fullscreen {
|
||||
@include viewport.until(lg) {
|
||||
@include breakpoint("medium", $rule: max-width) {
|
||||
.topic-timeline
|
||||
.timeline-scrollarea
|
||||
.timeline-scroller
|
||||
@@ -54,7 +60,7 @@
|
||||
.container.posts {
|
||||
grid-template-columns: auto 8em;
|
||||
|
||||
@media screen and (width <= 924px) {
|
||||
@media screen and (max-width: 924px) {
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
|
||||
+11
-13
@@ -1,5 +1,3 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.welcome-banner {
|
||||
&__wrap {
|
||||
display: grid;
|
||||
@@ -11,11 +9,11 @@
|
||||
padding: 1.5em 0 2.5em;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
margin-top: 0;
|
||||
@@ -27,22 +25,22 @@
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
|
||||
@media screen and (width <= 1028px) {
|
||||
@media screen and (max-width: 1028px) {
|
||||
grid-row: 2/-1;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
grid-column: 2/-1;
|
||||
grid-row: 1/-1;
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
@media screen and (max-width: 600px) {
|
||||
grid-row: 2/-1;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -56,7 +54,7 @@
|
||||
.search-menu-container .search-input {
|
||||
background: var(--d-content-background);
|
||||
border: 1px solid var(--search-color);
|
||||
box-shadow: 0 4px 10px rgb(52, 6, 121, 15%);
|
||||
box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
|
||||
}
|
||||
|
||||
.search-menu .search-input:focus-within,
|
||||
@@ -88,7 +86,7 @@
|
||||
font-weight: 400;
|
||||
color: var(--search-color);
|
||||
|
||||
@media screen and (width <= 1028px) {
|
||||
@media screen and (max-width: 1028px) {
|
||||
font-size: var(--font-up-4);
|
||||
grid-column: 1/-1;
|
||||
grid-row: 1;
|
||||
@@ -96,21 +94,21 @@
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
text-align: left;
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/-1;
|
||||
font-size: var(--font-up-3);
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
@media screen and (max-width: 600px) {
|
||||
grid-column: 1/-1;
|
||||
grid-row: 1;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
font-size: var(--font-up-2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,7 +39,6 @@ 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