Compare commits

..

1 Commits

Author SHA1 Message Date
Jordan Vidrine d887ad9475 UX: Adjust bulk select action placement 2025-04-24 12:16:01 -05:00
33 changed files with 1461 additions and 1627 deletions
+42 -58
View File
@@ -1,9 +1,8 @@
GEM
remote: https://rubygems.org/
specs:
activesupport (8.0.2)
activesupport (7.2.1.1)
base64
benchmark (>= 0.3)
bigdecimal
concurrent-ruby (~> 1.0, >= 1.3.1)
connection_pool (>= 2.2.5)
@@ -13,83 +12,68 @@ GEM
minitest (>= 5.1)
securerandom (>= 0.3)
tzinfo (~> 2.0, >= 2.0.5)
uri (>= 0.13.1)
ast (2.4.3)
ast (2.4.2)
base64 (0.2.0)
benchmark (0.4.0)
bigdecimal (3.1.9)
concurrent-ruby (1.3.5)
connection_pool (2.5.3)
bigdecimal (3.1.8)
concurrent-ruby (1.3.4)
connection_pool (2.4.1)
drb (2.2.1)
i18n (1.14.7)
i18n (1.14.6)
concurrent-ruby (~> 1.0)
json (2.11.3)
language_server-protocol (3.17.0.4)
lint_roller (1.1.0)
logger (1.7.0)
minitest (5.25.5)
parallel (1.27.0)
parser (3.3.8.0)
json (2.7.2)
language_server-protocol (3.17.0.3)
logger (1.6.1)
minitest (5.25.1)
parallel (1.26.3)
parser (3.3.5.0)
ast (~> 2.4.1)
racc
prettier_print (1.2.1)
prism (1.4.0)
racc (1.8.1)
rack (3.1.13)
rack (3.1.10)
rainbow (3.1.1)
regexp_parser (2.10.0)
rubocop (1.75.4)
regexp_parser (2.9.2)
rubocop (1.67.0)
json (~> 2.3)
language_server-protocol (~> 3.17.0.2)
lint_roller (~> 1.1.0)
language_server-protocol (>= 3.17.0)
parallel (~> 1.10)
parser (>= 3.3.0.2)
rainbow (>= 2.2.2, < 4.0)
regexp_parser (>= 2.9.3, < 3.0)
rubocop-ast (>= 1.44.0, < 2.0)
regexp_parser (>= 2.4, < 3.0)
rubocop-ast (>= 1.32.2, < 2.0)
ruby-progressbar (~> 1.7)
unicode-display_width (>= 2.4.0, < 4.0)
rubocop-ast (1.44.1)
parser (>= 3.3.7.2)
prism (~> 1.4)
rubocop-capybara (2.22.1)
lint_roller (~> 1.1)
rubocop (~> 1.72, >= 1.72.1)
rubocop-discourse (3.12.1)
unicode-display_width (>= 2.4.0, < 3.0)
rubocop-ast (1.32.3)
parser (>= 3.3.1.0)
rubocop-capybara (2.21.0)
rubocop (~> 1.41)
rubocop-discourse (3.8.2)
activesupport (>= 6.1)
lint_roller (>= 1.1.0)
rubocop (>= 1.73.2)
rubocop-capybara (>= 2.22.0)
rubocop-factory_bot (>= 2.27.0)
rubocop-rails (>= 2.30.3)
rubocop (>= 1.59.0)
rubocop-capybara (>= 2.0.0)
rubocop-factory_bot (>= 2.0.0)
rubocop-rails (>= 2.25.0)
rubocop-rspec (>= 3.0.1)
rubocop-rspec_rails (>= 2.31.0)
rubocop-factory_bot (2.27.1)
lint_roller (~> 1.1)
rubocop (~> 1.72, >= 1.72.1)
rubocop-rails (2.31.0)
rubocop-rspec_rails (>= 2.30.0)
rubocop-factory_bot (2.26.1)
rubocop (~> 1.61)
rubocop-rails (2.26.2)
activesupport (>= 4.2.0)
lint_roller (~> 1.1)
rack (>= 1.1)
rubocop (>= 1.75.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)
rubocop-rspec_rails (2.31.0)
lint_roller (~> 1.1)
rubocop (~> 1.72, >= 1.72.1)
rubocop-rspec (~> 3.5)
rubocop (>= 1.52.0, < 2.0)
rubocop-ast (>= 1.31.1, < 2.0)
rubocop-rspec (3.1.0)
rubocop (~> 1.61)
rubocop-rspec_rails (2.30.0)
rubocop (~> 1.61)
rubocop-rspec (~> 3, >= 3.0.1)
ruby-progressbar (1.13.0)
securerandom (0.4.1)
securerandom (0.3.1)
syntax_tree (6.2.0)
prettier_print (>= 1.2.0)
tzinfo (2.0.6)
concurrent-ruby (~> 1.0)
unicode-display_width (3.1.4)
unicode-emoji (~> 4.0, >= 4.0.4)
unicode-emoji (4.0.4)
uri (1.0.3)
unicode-display_width (2.6.0)
PLATFORMS
ruby
@@ -99,4 +83,4 @@ DEPENDENCIES
syntax_tree
BUNDLED WITH
2.6.8
2.5.21
+1 -3
View File
@@ -6,9 +6,7 @@
"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": {
+5 -3
View File
@@ -1,7 +1,6 @@
html {
--accent-color: #{$tertiary} !important;
--accent-text-color: #fff;
--accent-text-color: #ffffff;
// Background Colors
--background-color: light-dark(
oklch(from #{$tertiary} 96% calc(c * 0.125) h),
@@ -11,7 +10,6 @@ html {
oklch(from #{$secondary} calc(2 * l) c h),
oklch(from #{$secondary} l c h)
) !important;
// HeaderColors
--header_primary-low-mid: light-dark(
oklch(from #{$tertiary} 73.5% calc(c * 0.5) h),
@@ -42,14 +40,17 @@ html {
oklch(from #{$tertiary} 92% calc(c * 0.5) h),
oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
) !important;
--d-nav-color--active: light-dark(
oklch(from #{$tertiary} l c h),
oklch(from #{$tertiary} calc(l * 1.2) c h)
) !important;
--d-nav-color--hover: light-dark(
oklch(from #{$tertiary} l c h),
oklch(from #{$tertiary} calc(l * 1.2) c h)
) !important;
--link-color: light-dark(
oklch(from #{$tertiary} l c h),
oklch(from #{$tertiary} calc(l * 0.95) c h)
@@ -77,6 +78,7 @@ html {
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.35) h),
oklch(from #{$tertiary} calc(l * 0.75) calc(c * 0.5) h)
) !important;
--d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color) !important;
--d-sidebar-highlight-hover-background: var(--d-selected) !important;
--d-sidebar-link-icon-color: var(--d-sidebar-link-color) !important;
@@ -1,10 +0,0 @@
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer("0.8", (api) => {
api.registerValueTransformer(
"hamburger-dropdown-click-outside-exceptions",
({ value }) => {
return [...value, ".topic-drafts-menu-content"];
}
);
});
@@ -10,7 +10,6 @@ const DO_NOT_RENDER_LIST = ["login"];
export default class ExperimentalScreen extends Component {
@service router;
@tracked left = 0;
@tracked right = 0;
resizeObserver;
@@ -3,7 +3,6 @@ import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
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 } from "truth-helpers";
import CreateTopicButton from "discourse/components/create-topic-button";
@@ -14,8 +13,6 @@ export default class SidebarNewTopicButton extends Component {
@service currentUser;
@service siteSettings;
@service router;
@service header;
@service appEvents;
@tracked category;
@tracked tag;
@@ -77,30 +74,12 @@ export default class SidebarNewTopicButton extends Component {
this.tag = this.router.currentRoute.attributes?.tag || null;
}
@action
watchForComposer() {
// this covers opening drafts from the hamburger menu
this.appEvents.on("composer:will-open", this, this.closeHamburger);
}
@action
stopWatchingForComposer() {
this.appEvents.off("composer:will-open", this, this.closeHamburger);
}
@action
closeHamburger() {
this.header.hamburgerVisible = false;
}
<template>
{{#if this.shouldRender}}
<div
class="sidebar-new-topic-button__wrapper"
{{didInsert this.getCategoryandTag}}
{{didUpdate this.getCategoryandTag this.router.currentRoute}}
{{didInsert this.watchForComposer}}
{{willDestroy this.stopWatchingForComposer}}
>
<CreateTopicButton
@canCreateTopic={{this.canCreateTopic}}
@@ -31,14 +31,13 @@ export default class UserColorPaletteSelector extends Component {
@service site;
@service session;
@service interfaceColor;
@tracked anonColorPaletteId = this.#loadAnonColorPalette();
@tracked userColorPaletteId = this.session.userColorSchemeId;
@tracked cssLoaded = true;
get userColorPalettes() {
const availablePalettes = listColorSchemes(this.site)
?.map((userPalette) => {
.map((userPalette) => {
return {
...userPalette,
accent: `#${
@@ -56,7 +55,7 @@ export default class UserColorPaletteSelector extends Component {
// Match the light scheme with the corresponding dark id based in the name
return (
availablePalettes
?.map((palette) => {
.map((palette) => {
if (palette.is_dark) {
return palette;
}
+1
View File
@@ -6,3 +6,4 @@ en:
user_replied: "replied"
user_posted: "posted"
user_updated: "updated"
+5 -6
View File
@@ -1,14 +1,13 @@
{
"private": true,
"devDependencies": {
"@discourse/lint-configs": "2.11.1",
"ember-template-lint": "7.0.1",
"eslint": "9.22.0",
"prettier": "3.5.3",
"stylelint": "16.16.0"
"@discourse/lint-configs": "2.4.0",
"ember-template-lint": "6.1.0",
"eslint": "9.19.0",
"prettier": "2.8.8"
},
"engines": {
"node": ">= 22",
"node": ">= 18",
"npm": "please-use-pnpm",
"yarn": "please-use-pnpm",
"pnpm": "9.x"
+1311 -1177
View File
File diff suppressed because it is too large Load Diff
View File
+9 -19
View File
@@ -19,7 +19,6 @@
.has-full-page-chat .chat-replying-indicator-container {
margin-bottom: var(--main-grid-gap);
@include breakpoint(medium) {
margin-bottom: 0;
}
@@ -27,13 +26,15 @@
.has-full-page-chat .chat-selection-management {
margin-bottom: var(--main-grid-gap);
@include breakpoint(medium) {
margin-bottom: 0;
}
}
.experimental-screen {
@include breakpoint(medium) {
display: none;
}
max-width: unset !important;
width: 100%;
display: block;
@@ -41,25 +42,17 @@
padding: 0;
position: relative;
container: content-width / inline-size;
@include breakpoint(medium) {
display: none;
}
@media screen and (max-width: 488px) {
display: none;
}
@include breakpoint(tablet) {
display: none;
}
li {
list-style: none;
margin: 0;
padding: 0;
}
&__top-left,
&__top-right,
&__bottom-left,
@@ -75,39 +68,38 @@
transparent var(--d-border-radius-large),
black var(--d-border-radius-large)
);
-webkit-mask: radial-gradient(
circle at var(--d-border-radius-large) var(--d-border-radius-large),
transparent var(--d-border-radius-large),
transparent var(--d-border-radius-large),
black var(--d-border-radius-large)
);
}
&__top-left {
top: var(--header-offset);
left: var(--left-distance);
}
&__top-right {
top: var(--header-offset);
transform: rotate(90deg);
left: calc(var(--right-distance) - var(--d-border-radius-large));
}
&__bottom-left {
transform: rotate(-90deg);
bottom: var(--main-grid-gap);
left: var(--left-distance);
@media screen and (max-width: 768px) {
bottom: calc(var(--d-border-radius-large) * 2);
}
}
&__bottom-right {
transform: rotate(180deg);
bottom: var(--main-grid-gap);
left: calc(var(--right-distance) - var(--d-border-radius-large));
@media screen and (max-width: 768px) {
bottom: calc(var(--d-border-radius-large) * 2);
}
}
&__bottom-bar {
position: fixed;
width: 100%;
@@ -116,11 +108,9 @@
bottom: 0;
left: var(--left-distance);
height: var(--main-grid-gap);
@media screen and (max-width: 768px) {
height: calc(var(--d-border-radius-large) * 2);
}
@container content-width (width > 1px) {
width: 100cqw;
}
+5 -19
View File
@@ -8,13 +8,11 @@
.sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
background: var(--accent-color);
&:hover,
&:focus-visible {
background: oklch(from var(--accent-color) 40% c h) !important;
box-shadow: none;
}
.d-icon {
color: var(--accent-text-color);
}
@@ -28,37 +26,31 @@
.discourse-no-touch .btn-default,
.discourse-no-touch .select-kit .select-kit-header.btn-default {
background: var(--primary-100);
.d-icon {
color: var(--accent-color);
}
&:hover {
border-color: transparent;
box-shadow: 0 0 8px 1px var(--button-box-shadow);
box-shadow: 0px 0px 8px 1px var(--button-box-shadow);
background: var(--d-content-background);
color: var(--accent-color);
.d-icon {
color: var(--accent-color);
}
}
&:focus-visible {
background: var(--d-content-background);
color: var(--accent-color);
box-shadow: 0 0 0 3px var(--button-box-shadow);
box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
.d-icon {
color: var(--accent-color);
}
}
&:active:not(:hover, :focus) {
color: var(--primary);
background: var(--tertiary-300);
background-image: none;
.d-icon {
color: var(--tertiary-high);
}
@@ -66,41 +58,35 @@
}
.btn-primary,
#create-topic.btn,
.discourse-no-touch .btn-default.ai-new-question-button {
#create-topic.btn {
background-color: var(--accent-color);
color: var(--accent-text-color);
.d-icon {
color: var(--accent-text-color);
}
&:hover {
.discourse-no-touch & {
background: light-dark(
oklch(from var(--accent-color) 40% c h),
oklch(from var(--accent-color) 50% c h)
);
box-shadow: 0 0 6px 1px var(--button-box-shadow);
box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
color: var(--accent-text-color);
.d-icon {
color: var(--accent-text-color);
}
}
}
&:focus-visible {
.discourse-no-touch & {
background: light-dark(
oklch(from var(--accent-color) 40% c h),
oklch(from var(--accent-color) 50% c h)
);
box-shadow: 0 0 0 4px var(--button-box-shadow);
box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
color: var(--accent-text-color);
}
}
&:active {
background: light-dark(
oklch(from var(--accent-color) 40% c h),
+1 -3
View File
@@ -13,9 +13,8 @@ body.has-full-page-chat {
.chat-drawer-container {
.is-expanded & {
box-shadow: 0 0 0 2px var(--tertiary-medium);
box-shadow: 0px 0px 0px 2px var(--tertiary-medium);
}
.chat-drawer.is-expanded & {
border: none;
}
@@ -29,7 +28,6 @@ body.has-full-page-chat {
margin-bottom: var(--spacing-block-xs);
font-size: var(--font-up-1);
border-bottom: none;
&:hover {
background-color: var(--d-sidebar-active-background);
}
-4
View File
@@ -4,21 +4,17 @@
width: 100%;
justify-content: flex-start;
}
&__item .btn-icon-text.btn-flat:hover {
background-color: var(--d-selected);
box-shadow: none;
color: var(--primary);
}
&__item .btn-icon-text.btn-flat:hover svg {
color: var(--icon-color);
}
&__item .btn-icon-text.btn-flat svg {
color: var(--icon-color);
}
&__item-choice.active.btn-icon-text.btn-flat {
background-color: var(--d-selected);
}
-1
View File
@@ -18,7 +18,6 @@
transition: none;
box-shadow: none;
border-radius: var(--d-border-radius-large);
.grippie {
display: none;
}
+1 -28
View File
@@ -3,7 +3,6 @@
.select-kit-header {
border: 1px solid var(--tertiary-700);
background: var(--secondary);
&:hover {
.d-icon {
color: var(--accent-color);
@@ -14,6 +13,7 @@
#reply-control.hide-preview:not(.draft) {
@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);
@@ -43,7 +43,6 @@
.reply-area {
padding-inline: 0;
}
.reply-to,
.submit-panel {
padding-inline: var(--spacing-inline-sm);
@@ -60,7 +59,6 @@
}
}
}
.d-editor-button-bar {
.btn:hover,
.toolbar-popup-menu-options.is-expanded {
@@ -77,7 +75,6 @@
.d-icon {
color: var(--primary-high);
}
&:hover {
.d-icon {
color: var(--primary);
@@ -91,27 +88,3 @@
border-radius: var(--d-border-radius);
}
}
.discourse-no-touch .translation-selector-dropdown {
.select-kit-header.btn-default {
background: var(--background-color);
}
}
#reply-control.composer-action-add_translation {
.d-editor-preview .d-editor-translation-preview-wrapper {
border-color: var(--d-sidebar-border-color);
}
.d-editor-preview .d-editor-translation-preview-wrapper__header {
top: 6.5rem;
padding: 0.25rem 0.75rem;
background: var(--background-color);
color: var(--accent-color);
border-radius: var(--d-border-radius-large);
}
.topic-title-translator input {
width: 47.25vw;
}
}
+3 -22
View File
@@ -13,31 +13,12 @@ $sidebar-width: 17em;
}
.d-header #site-logo {
// constraining the logo to fit its grid container
// this prevents the logo from shifting header content
// when the sidebar is opened
max-height: 100%;
max-width: 100%;
object-fit: contain; // contains logo without squishing/stretching
// allows some flexibility for wide logos
body:not(.has-sidebar-page) & {
max-width: unset;
@include breakpoint("mobile-extra-large") {
max-width: 25vw;
}
}
}
.d-header #site-text-logo {
font-size: clamp(var(--font-0), 2.5vw, var(--font-up-2));
.has-sidebar-page & {
white-space: wrap;
line-height: var(--line-height-medium);
@include line-clamp(2);
}
}
#main-outlet-wrapper {
@@ -157,7 +138,7 @@ $sidebar-width: 17em;
.d-header-mode {
.bootstrap-mode {
display: none;
margin: 0;
}
}
@@ -169,7 +150,7 @@ $sidebar-width: 17em;
overflow: visible;
.title {
flex: 1 1 auto;
flex: 1 0 auto;
}
}
+5 -5
View File
@@ -1,10 +1,10 @@
// Fixing bulk select (only needed for desktop)
.bulk-select-enabled {
.topic-list-header .topic-list-data.default {
position: sticky;
top: 10em;
}
.topic-author-avatar-data {
display: none;
}
@@ -15,7 +15,6 @@
@media screen and (max-width: 576px) {
margin-top: 0;
label {
padding-block: 0.345em;
}
@@ -40,6 +39,8 @@
}
&.default {
position: absolute;
right: 0;
.bulk-select,
span:not(.bulk-select-topics, .d-button-label) {
display: none;
@@ -49,15 +50,14 @@
.bulk-select-topics {
position: absolute;
right: -1em;
right: 0;
bottom: 0;
background: var(--secondary);
border-radius: 0 0 0 var(--d-border-radius);
padding: 1em;
@media screen and (max-width: 1048px) {
right: 0;
}
button {
white-space: nowrap;
}
+4 -3
View File
@@ -1,7 +1,6 @@
.d-header {
box-shadow: none;
background: var(--background-color);
@include breakpoint(extra-large, $rule: min-width) {
padding-bottom: var(--main-grid-gap);
}
@@ -49,10 +48,8 @@
.discourse-no-touch .interface-color-selector-content {
border: none;
border-radius: var(--d-border-radius);
.btn {
border: none;
&:hover {
box-shadow: none;
}
@@ -62,6 +59,10 @@
.drop-down-mode .d-header-icons .active .icon,
.drop-down-mode .d-header-icons .header-color-scheme-toggle .-expanded {
border-color: transparent;
}
.drop-down-mode .d-header-icons .active .icon,
.drop-down-mode .d-header-icons .header-color-scheme-toggle .-expanded {
background-color: transparent;
}
-1
View File
@@ -6,7 +6,6 @@ body.static-login {
"sidebar below-content";
grid-template-rows: auto 1fr auto;
}
.login-welcome {
border-radius: none;
border: none;
+4 -16
View File
@@ -12,12 +12,10 @@ html:not(:has(.has-full-page-chat)) {
body {
-webkit-font-smoothing: antialiased;
@include breakpoint("mobile-extra-large") {
background-color: var(--d-content-background);
}
}
#main-outlet-wrapper {
gap: var(--main-grid-gap);
}
@@ -31,10 +29,8 @@ body.has-full-page-chat:not(.has-sidebar-page) {
.d-header {
background-color: var(--background-color);
}
#main-outlet-wrapper {
gap: var(--main-grid-gap);
@include breakpoint(medium) {
gap: 0;
}
@@ -42,8 +38,7 @@ body.has-full-page-chat:not(.has-sidebar-page) {
}
body.has-sidebar-page #main-outlet-wrapper {
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) 0;
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) 0px;
#main-outlet {
max-width: unset;
}
@@ -51,39 +46,33 @@ body.has-sidebar-page #main-outlet-wrapper {
body:not(.has-sidebar-page) #main-outlet-wrapper {
@include breakpoint(medium, $rule: min-width) {
grid-template-columns: 0 minmax(0, 1fr) 0;
grid-template-columns: 0px minmax(0, 1fr) 0px;
}
}
body:not(.has-full-page-chat, .wizard) {
body:not(.has-full-page-chat) {
@include breakpoint(extra-large, $rule: min-width) {
background-color: var(--background-color);
}
#main-outlet-wrapper {
@include breakpoint(medium) {
--main-grid-gap: 0;
}
@media screen and (min-width: 768px) {
gap: var(--main-grid-gap);
}
#main-outlet {
width: 100%;
max-width: unset;
padding-bottom: var(--spacing-block-l);
border-radius: var(--d-border-radius-large);
background-color: var(--d-content-background);
@include breakpoint(medium) {
border-radius: 0;
border-radius: 0px;
}
html.composer-open & {
padding-bottom: var(--composer-height);
}
> *:not(.experimental-screen, .activate-account) {
@include breakpoint(medium, $rule: min-width) {
box-sizing: border-box;
@@ -110,7 +99,6 @@ body:not(.has-full-page-chat, .wizard) {
}
}
}
.topic-list-body {
padding-top: var(--spacing-block-m);
}
+1 -5
View File
@@ -85,7 +85,7 @@ input[type="color"]:focus,
.user-main .about .details {
padding: 1em 1em 0;
border-bottom: 0;
border-bottom: 0px;
border-radius: var(--d-border-radius);
background-color: var(--primary-50);
}
@@ -105,7 +105,3 @@ input[type="color"]:focus,
.period-chooser-header {
border-radius: 0;
}
.d-modal__container {
border-radius: var(--d-border-radius);
}
+4 -29
View File
@@ -1,11 +1,10 @@
// temp separate file to avoid merge hell… to be distributed later
//temp sepeate file to avoid merge hell… to be distributed later
@include breakpoint(medium) {
html,
.d-header {
background-color: var(--d-content-background);
}
}
#main-outlet-wrapper {
*[class*="navigation-"] & {
@include breakpoint(mobile-extra-large) {
@@ -13,7 +12,6 @@
}
}
}
#main-outlet {
@include breakpoint(mobile-extra-large) {
padding-top: var(--spacing-block-sm);
@@ -27,53 +25,44 @@
padding-block: var(--spacing-block-s);
border-bottom: 1px solid var(--primary-200);
}
.navigation-container {
@include breakpoint(mobile-extra-large) {
gap: var(--spacing-inline-s);
// don't know why we even hide this crucial navigation on mobile
//dont know why we even hide this crucial navigation on mobile
.category-breadcrumb.hidden,
.category-breadcrumb {
display: flex !important;
column-gap: var(--spacing-inline-s);
row-gap: var(--spacing-block-xs);
flex-basis: 100%;
li {
margin-right: 0;
margin-left: calc(
(var(--spacing-block-s) - 2px) * -1
); // 2px is width of the outline
}
.select-kit-header {
background: var(--d-content-background);
border: 0;
}
}
.btn-default {
border: 0;
margin-right: 0;
.d-icon {
font-size: var(--font-up-1);
}
}
.fk-d-button-tooltip {
margin-right: 0;
margin-left: var(
--spacing-inline-xs
); // pure visual correction for horizontal alignment
); //pure visual correction for horitzontal alignment
&:has(#create-topic) {
order: 1;
}
}
}
#navigation-bar,
.navigation-controls,
.category-breadcrumb {
@@ -81,7 +70,6 @@
margin-bottom: 0;
}
}
.navigation-controls {
@include breakpoint(mobile-extra-large) {
gap: var(--spacing-inline-s);
@@ -110,11 +98,9 @@
.title-wrapper {
gap: var(--spacing-block-s);
}
.topic-category {
order: -1;
}
//make mixin of this
.badge-category__wrapper {
font-size: var(--font-down-2-rem);
@@ -137,15 +123,12 @@
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
);
}
.discourse-tags {
gap: var(--spacing-inline-xs);
&__tag-separator {
display: none;
}
}
.discourse-tag {
font-size: var(--font-down-2-rem);
padding: var(--spacing-inline-xs) var(--spacing-inline-s);
@@ -156,7 +139,6 @@
}
}
}
.container.posts {
@include breakpoint(mobile-extra-large) {
padding-inline: var(--spacing-inline-xs) !important;
@@ -172,22 +154,18 @@
font-size: var(--font-0-rem);
}
}
.contents {
padding-top: var(--spacing-block-m);
}
}
.small-action {
&-desc {
padding: var(--spacing-block-xs) 0;
}
//for core eventually, better way imo
.topic-avatar {
padding-top: 0;
align-items: center;
.d-icon {
font-size: var(--font-up-1);
}
@@ -204,25 +182,22 @@
}
//should be changed in core, should not be a primary btn
// changing this into straight buttons to match the progress one, which doesn't work well with rounded corners
//changing this into straight buttons to match the progress one, which doesnt work well with rounded corners
#topic-progress-wrapper {
.progress-back-container {
margin-right: 0;
margin-bottom: var(--spacing-block-xs);
.btn-primary.progress-back {
border-radius: 0;
background: var(--secondary);
border: 1px solid var(--tertiary-low);
color: var(--accent-color);
padding: var(--spacing-inline-s) var(--spacing-inline-m);
.d-icon {
color: var(--accent-color);
}
}
}
.topic-admin-menu-trigger {
border-radius: 0;
background: var(--secondary);
+2 -9
View File
@@ -8,35 +8,29 @@
.navigation-container {
gap: 1rem;
.category-breadcrumb {
order: 1;
}
}
.combo-box .combo-box-header {
// needs more specificity than just in the button file
// needs more specificy than just in the button file
background-color: var(--secondary);
border-radius: var(--d-border-radius-large);
border: 1px solid var(--primary-300);
&:hover {
border: 1px solid var(--accent-color);
}
&:focus-visible {
.discourse-no-touch & {
background: var(--secondary);
color: var(--accent-color);
box-shadow: 0 0 0 3px var(--button-box-shadow);
box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
.d-icon {
color: var(--accent-color);
}
}
}
}
.select-kit.combo-box.category-drop.has-selection
.category-drop-header:hover {
border-color: transparent;
@@ -53,7 +47,6 @@
.discourse-no-touch & {
background: transparent;
color: var(--d-nav-color--hover);
&::after {
content: "";
position: absolute;
-7
View File
@@ -5,12 +5,6 @@
}
}
.has-ai-conversations-sidebar {
.sidebar-new-topic-button__wrapper {
display: none;
}
}
.sidebar-new-topic-button {
flex: 1 1 auto;
@@ -51,7 +45,6 @@
border-radius: 0 var(--d-button-border-radius)
var(--d-button-border-radius) 0;
padding-right: 0.65em;
.d-icon {
color: var(--secondary);
}
+3 -23
View File
@@ -1,24 +1,18 @@
@use "lib/viewport";
.sidebar-wrapper,
.sidebar-hamburger-dropdown {
@include breakpoint(medium) {
background: var(--secondary);
.sidebar-footer-wrapper {
background: var(--secondary);
.sidebar-footer-container::before {
display: none;
}
}
}
.has-full-page-chat &,
.has-full-page-chat & .sidebar-footer-wrapper {
background: transparent;
}
.sidebar-container {
border-right: none;
}
@@ -26,37 +20,30 @@
.sidebar-sections {
padding: 0;
}
.sidebar-section-link {
transition: none;
border-radius: var(--d-border-radius);
}
.dropdown-menu__item .sidebar-section-link {
border-radius: 0;
border-radius: 0px;
}
}
.sidebar-section-wrapper {
@include breakpoint(extra-large, $rule: min-width) {
padding-block: 0.45em;
}
@include breakpoint(mobile-extra-large) {
.hamburger-panel .revamped & {
margin-bottom: var(--spacing-block-m);
}
}
.sidebar-section-header {
font-size: var(--font-down-2);
}
.sidebar-section-content {
margin: 0;
display: flex;
flex-direction: column;
@include breakpoint(extra-large, $rule: min-width) {
gap: var(--spacing-block-xs);
}
@@ -65,7 +52,6 @@
.sidebar-wrapper .sidebar-sections {
--scrollbarThumbBg: var(--d-selected);
padding: 0 1rem;
}
.sidebar-section-link-wrapper .sidebar-section-link:focus,
@@ -77,17 +63,11 @@
.sidebar-new-topic-button__wrapper {
margin: 0 var(--spacing-inline-m) var(--spacing-block-l);
.sidebar-new-topic-button .d-icon {
display: none;
}
}
// put the draft menu above the slide-out hamburger on small desktop screens
@include viewport.until(md) {
html:not(.mobile-view) {
.topic-drafts-menu-content {
z-index: z("modal", "overlay");
}
}
.sidebar-wrapper .sidebar-sections {
padding: 0 1rem;
}
+39 -117
View File
@@ -4,7 +4,6 @@
.topic-list > .topic-list-body > .topic-list-item.last-visit {
border-bottom: 1px solid var(--primary-300);
&:hover {
border-color: var(--accent-color);
}
@@ -15,12 +14,10 @@
display: flex;
flex-direction: column;
gap: 1em;
@include breakpoint(medium) {
gap: 0.5em;
padding: 0 0.5em;
}
@include breakpoint(mobile-extra-large) {
gap: 0;
padding: 0;
@@ -40,23 +37,19 @@
grid-column-gap: 12px;
grid-row-gap: 8px;
border-radius: var(--d-border-radius);
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) {
grid-template-areas:
". . . . 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 {
@@ -74,7 +67,6 @@
box-shadow: none;
border-radius: 0;
}
&.excerpt-expanded {
grid-template-columns: 20px auto auto min-content min-content;
grid-template-rows: auto auto auto;
@@ -82,39 +74,32 @@
". . . . 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;
}
}
.topic-likes-replies-data {
align-self: flex-end;
}
.topic-category-data {
align-items: flex-end;
}
.badge-category__wrapper {
height: min-content;
}
.link-bottom-line {
display: flex;
}
@@ -137,7 +122,6 @@
.topic-activity-data {
grid-area: activity;
}
.topic-activity {
display: grid;
grid-template-columns: 20px auto auto auto;
@@ -172,7 +156,6 @@
.topic-activity__username {
display: none;
}
.topic-activity__reason {
margin-left: 0.25em;
}
@@ -183,11 +166,13 @@
}
// status
.topic-status-data {
grid-area: status;
}
.topic-status-data {
grid-area: status;
position: relative;
}
.topic-status-card {
height: min-content;
margin-left: auto;
@@ -202,16 +187,14 @@
border: 1px solid var(--status-color);
color: var(--status-color);
width: min-content;
@include breakpoint("large", min-width) {
position: absolute;
right: 0;
right: 0px;
top: -20px;
background-color: var(--d-content-background);
height: 20px;
font-size: var(--font-down-3);
}
svg {
font-size: var(--font-down-1);
color: var(--status-color);
@@ -221,7 +204,6 @@
.topic-status-card.--pinned {
--status-color: var(--primary-500);
}
.topic-status-card.--hot {
--status-color: #e45735;
}
@@ -290,17 +272,14 @@
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);
@@ -322,7 +301,6 @@
);
}
}
td.main-link .discourse-tags {
display: none;
}
@@ -343,7 +321,6 @@
height: min-content;
align-self: center;
}
.topic-likes-replies-data .topic-likes,
.topic-likes-replies-data .topic-replies {
display: flex;
@@ -351,7 +328,6 @@
gap: 0.5em;
align-items: center;
color: var(--primary-500);
svg {
color: var(--primary-600);
}
@@ -360,53 +336,45 @@
.topic-list-item {
background: var(--d-content-background);
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
box-shadow: 0px 0px 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);
box-shadow: 0px 0px 0px 2px var(--accent-color),
0px 0px 12px 1px var(--topic-card-shadow);
}
}
// 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 breakpoint(mobile-extra-large) {
grid-template-columns: min-content min-content auto min-content min-content min-content min-content;
grid-template-areas:
" . . . . . . dropdown"
"update metadata metadata metadata metadata category category";
.avatar {
display: none;
}
}
&.has-metadata {
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
@include breakpoint(mobile-extra-large) {
grid-template-areas:
". . . . . . . dropdown"
"update update metadata metadata metadata metadata category category";
.avatar {
display: none;
}
@@ -422,6 +390,12 @@
"excerpt excerpt excerpt ."
"excerpt excerpt excerpt category";
.badge-category__wrapper {
align-self: flex-end;
height: min-content;
max-width: 100%;
}
@include breakpoint(extra-large, $rule: min-width) {
grid-template-columns: 20px min-content auto min-content;
}
@@ -431,7 +405,6 @@
grid-template-areas:
". dropdown"
"category category";
.post-excerpt,
.avatar {
display: none;
@@ -445,7 +418,6 @@
"avatar update metadata metadata"
"excerpt excerpt excerpt . "
"excerpt excerpt excerpt category";
@include breakpoint(mobile-extra-large) {
grid-template-columns: auto min-content;
grid-template-areas:
@@ -457,21 +429,13 @@
}
}
}
.badge-category__wrapper {
align-self: flex-end;
height: min-content;
max-width: 100%;
}
}
td.author-avatar {
grid-area: avatar;
}
td.main-link .link-bottom-line {
display: contents;
.badge-category__wrapper {
grid-area: category;
display: flex;
@@ -480,10 +444,8 @@
justify-self: flex-end;
}
}
td.main-link .link-top-line {
display: contents;
.bookmark-metadata {
grid-area: metadata;
margin: 0;
@@ -491,12 +453,10 @@
align-items: center;
gap: var(--spacing-inline-xs);
}
.bookmark-metadata-item {
margin: 0;
vertical-align: middle;
}
.bookmark-status-with-link {
grid-column: 1/-2;
grid-row: 1/2;
@@ -507,10 +467,8 @@
grid-area: excerpt;
margin: 0;
}
.topic-list-data:last-of-type {
display: contents;
.bookmark-actions-dropdown {
grid-area: dropdown;
align-self: flex-start;
@@ -522,7 +480,6 @@
align-items: center;
background: transparent;
}
.select-kit-header-wrapper {
height: 1em;
width: 1em;
@@ -533,7 +490,6 @@
.post-metadata.topic-list-data.updated-at {
grid-area: update;
}
td.activity .post-activity {
display: none;
}
@@ -543,11 +499,7 @@
.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;
}
@@ -555,7 +507,6 @@
grid-template-areas:
". . . . . status dropdown"
"activity . . . . likes-replies category";
@include breakpoint(mobile-extra-large) {
grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
grid-template-areas:
@@ -563,10 +514,8 @@
". . . . . . . . "
"activity . . . . . . likes-replies";
}
.assign-topic-buttons {
display: contents;
.assign-actions-dropdown {
grid-area: dropdown;
justify-content: flex-end;
@@ -578,29 +527,31 @@
align-items: center;
background: transparent;
}
.select-kit-header-wrapper {
height: 1em;
width: 1em;
}
}
}
td.topic-category-status-data {
display: contents;
}
.topic-status-card {
position: relative;
top: unset;
right: unset;
}
}
// User Messages
body.user-messages-page {
.topic-list-body {
gap: 0;
}
.topic-list .topic-list-data.posters a:not(.latest) {
display: block;
}
.topic-list-item {
border-radius: 0;
box-shadow: none;
@@ -612,37 +563,30 @@ body.user-messages-page {
grid-template-areas: "title activity" "posters .";
grid-template-columns: auto auto;
grid-template-rows: auto auto;
&:hover {
background-color: var(--primary-low);
border-color: var(--primary-200);
}
td.topic-category-data,
td.topic-likes-replies-data,
td.topic-status-data {
display: none;
}
&.visited .main-link .link-top-line {
font-weight: normal;
grid-area: title;
}
&:hover {
background-color: var(--primary-low);
border-color: var(--primary-200);
}
td.topic-activity-data {
grid-area: activity;
}
td.topic-list-data.posters {
grid-area: posters;
display: flex;
align-items: center;
height: 100%;
a {
margin-right: 4px;
}
.avatar {
width: 20px;
height: 20px;
@@ -654,51 +598,27 @@ 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"
@@ -706,29 +626,31 @@ body.user-messages-page {
"bulk-select activity activity . . .";
}
}
.bulk-select {
grid-area: bulk-select;
padding: 0;
margin: 0;
align-self: center;
justify-self: center;
label {
margin: 0;
}
}
@include breakpoint(large) {
grid-template-areas:
"bulk-select . . . status"
"bulk-select activity activity . category";
}
.mobile-view {
.link-top-line .event-date-container {
display: inline;
margin-top: 0;
@include breakpoint(mobile-extra-large) {
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;
}
.topic-list-body .topic-list-item .link-top-line .event-date {
position: relative;
margin-left: 0;
top: -0.125em;
grid-template-areas:
"bulk-select category . . . status"
"bulk-select . . . . ."
"bulk-select activity activity . . .";
}
}
+1 -5
View File
@@ -7,7 +7,7 @@
}
.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…)
// super fragile because new sticky topic title doesnt have a calculated value (= 53px with this font and size but…)
top: calc(
var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
);
@@ -16,7 +16,6 @@
.timeline-container .topic-timeline {
min-width: unset; // why we have this?
.timeline-scrollarea {
border-left: 1px solid var(--accent-color);
@@ -32,10 +31,8 @@
line-height: 1;
}
}
.timeline-handle {
background-color: var(--accent-color);
@include breakpoint("medium", $rule: min-width) {
width: 8px;
border-radius: 10px;
@@ -59,7 +56,6 @@
.container.posts {
grid-template-columns: auto 8em;
@media screen and (max-width: 924px) {
grid-template-columns: auto auto;
}
+1 -1
View File
@@ -3,7 +3,7 @@
--d-border-radius-large: 20px;
--d-border-radius: 8px;
--d-input-border-radius: 6px;
// --d-sidebar-row-height: 2.8em;
//the idea is: block spacing can grow with font-size, but inline spacing should not to maintain horizontal (text) alignment
--spacing-block-xs: 0.25em;
--spacing-block-s: 0.5em;
-14
View File
@@ -24,27 +24,22 @@
grid-row: 1/-1;
width: 100%;
align-self: center;
@media screen and (max-width: 1028px) {
grid-row: 2/-1;
grid-column: 1/-1;
}
@media screen and (max-width: 768px) {
grid-column: 2/-1;
grid-row: 1/-1;
}
@media screen and (max-width: 600px) {
grid-row: 2/-1;
grid-column: 1/-1;
}
@include breakpoint("mobile-extra-large") {
display: none;
}
}
p {
display: none;
}
@@ -56,27 +51,22 @@
border: 1px solid var(--search-color);
box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
}
.search-menu .search-input:focus-within,
.search-menu-container .search-input:focus-within {
border: 1px solid var(--search-color);
outline: 2px solid var(--search-color);
}
.search-menu .d-icon,
.search-menu .searching .d-icon,
.search-menu .searching .show-advanced-search .d-icon {
color: var(--search-color);
}
.panel-body {
z-index: z("dropdown");
}
.results {
background: var(--d-content-background);
}
&__title {
grid-column: 1/2;
grid-row: 1/-1;
@@ -85,7 +75,6 @@
margin: 0;
font-weight: 400;
color: var(--search-color);
@media screen and (max-width: 1028px) {
font-size: var(--font-up-4);
grid-column: 1/-1;
@@ -93,21 +82,18 @@
text-align: center;
margin-bottom: 0.5em;
}
@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 (max-width: 600px) {
grid-column: 1/-1;
grid-row: 1;
text-align: center;
margin-bottom: 0.5em;
}
@include breakpoint("mobile-extra-large") {
font-size: var(--font-up-2);
}
-3
View File
@@ -1,3 +0,0 @@
export default {
extends: ["@discourse/lint-configs/stylelint"],
};