shiran/discourse_theme_ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DEV: Update linting (#153)

Browse Source
This commit is contained in:
Jarek Radosz
2025-05-06 17:53:12 +02:00
committed by GitHub
parent ec532d356e
commit c2b71c04a8
31 changed files with 1527 additions and 1464 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Gemfile.lock
+58 -42
View File
@@ -1,8 +1,9 @@
GEM
remote: https://rubygems.org/
specs:
activesupport (7.2.1.1)
activesupport (8.0.2)
base64
benchmark (>= 0.3)
bigdecimal
concurrent-ruby (~> 1.0, >= 1.3.1)
connection_pool (>= 2.2.5)
@@ -12,68 +13,83 @@ GEM
minitest (>= 5.1)
securerandom (>= 0.3)
tzinfo (~> 2.0, >= 2.0.5)
ast (2.4.2)
uri (>= 0.13.1)
ast (2.4.3)
base64 (0.2.0)
bigdecimal (3.1.8)
concurrent-ruby (1.3.4)
connection_pool (2.4.1)
benchmark (0.4.0)
bigdecimal (3.1.9)
concurrent-ruby (1.3.5)
connection_pool (2.5.3)
drb (2.2.1)
i18n (1.14.6)
i18n (1.14.7)
concurrent-ruby (~> 1.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)
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)
ast (~> 2.4.1)
racc
prettier_print (1.2.1)
prism (1.4.0)
racc (1.8.1)
rack (3.1.10)
rack (3.1.13)
rainbow (3.1.1)
regexp_parser (2.9.2)
rubocop (1.67.0)
regexp_parser (2.10.0)
rubocop (1.75.4)
json (~> 2.3)
language_server-protocol (>= 3.17.0)
language_server-protocol (~> 3.17.0.2)
lint_roller (~> 1.1.0)
parallel (~> 1.10)
parser (>= 3.3.0.2)
rainbow (>= 2.2.2, < 4.0)
regexp_parser (>= 2.4, < 3.0)
rubocop-ast (>= 1.32.2, < 2.0)
regexp_parser (>= 2.9.3, < 3.0)
rubocop-ast (>= 1.44.0, < 2.0)
ruby-progressbar (~> 1.7)
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)
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)
activesupport (>= 6.1)
rubocop (>= 1.59.0)
rubocop-capybara (>= 2.0.0)
rubocop-factory_bot (>= 2.0.0)
rubocop-rails (>= 2.25.0)
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-rspec (>= 3.0.1)
rubocop-rspec_rails (>= 2.30.0)
rubocop-factory_bot (2.26.1)
rubocop (~> 1.61)
rubocop-rails (2.26.2)
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)
activesupport (>= 4.2.0)
lint_roller (~> 1.1)
rack (>= 1.1)
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)
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)
ruby-progressbar (1.13.0)
securerandom (0.3.1)
securerandom (0.4.1)
syntax_tree (6.2.0)
prettier_print (>= 1.2.0)
tzinfo (2.0.6)
concurrent-ruby (~> 1.0)
unicode-display_width (2.6.0)
unicode-display_width (3.1.4)
unicode-emoji (~> 4.0, >= 4.0.4)
unicode-emoji (4.0.4)
uri (1.0.3)
PLATFORMS
ruby
@@ -83,4 +99,4 @@ DEPENDENCIES
syntax_tree
BUNDLED WITH
2.5.21
2.6.8
about.json
+3 -1
View File
@@ -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": {
common/color_definitions.scss
+3 -5
View File
@@ -1,6 +1,7 @@
html {
--accent-color: #{$tertiary} !important;
--accent-text-color: #ffffff;
--accent-text-color: #fff;
// Background Colors
--background-color: light-dark(
oklch(from #{$tertiary} 96% calc(c * 0.125) h),
@@ -10,6 +11,7 @@ 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),
@@ -40,17 +42,14 @@ 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)
@@ -78,7 +77,6 @@ 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;
javascripts/discourse/components/experimental-screen.gjs
+1
View File
@@ -10,6 +10,7 @@ const DO_NOT_RENDER_LIST = ["login"];
export default class ExperimentalScreen extends Component {
@service router;
@tracked left = 0;
@tracked right = 0;
resizeObserver;
javascripts/discourse/components/user-color-palette-selector.gjs
+1
View File
@@ -31,6 +31,7 @@ export default class UserColorPaletteSelector extends Component {
@service site;
@service session;
@service interfaceColor;
@tracked anonColorPaletteId = this.#loadAnonColorPalette();
@tracked userColorPaletteId = this.session.userColorSchemeId;
@tracked cssLoaded = true;
locales/en.yml
-1
View File
@@ -6,4 +6,3 @@ en:
user_replied: "replied"
user_posted: "posted"
user_updated: "updated"
package.json
+6 -5
View File
@@ -1,13 +1,14 @@
{
"private": true,
"devDependencies": {
"@discourse/lint-configs": "2.4.0",
"ember-template-lint": "6.1.0",
"eslint": "9.19.0",
"prettier": "2.8.8"
"@discourse/lint-configs": "2.11.1",
"ember-template-lint": "7.0.1",
"eslint": "9.22.0",
"prettier": "3.5.3",
"stylelint": "16.16.0"
},
"engines": {
"node": ">= 18",
"node": ">= 22",
"npm": "please-use-pnpm",
"yarn": "please-use-pnpm",
"pnpm": "9.x"
pnpm-lock.yaml
Generated
+1187 -1321
View File
File diff suppressed because it is too large Load Diff
scss/.gitkeep
View File
scss/box-view.scss
+19 -9
View File
@@ -19,6 +19,7 @@
.has-full-page-chat .chat-replying-indicator-container {
margin-bottom: var(--main-grid-gap);
@include breakpoint(medium) {
margin-bottom: 0;
}
@@ -26,15 +27,13 @@
.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;
@@ -42,17 +41,25 @@
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,
@@ -68,38 +75,39 @@
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%;
@@ -108,9 +116,11 @@
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;
}
scss/buttons.scss
+17 -4
View File
@@ -8,11 +8,13 @@
.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);
}
@@ -26,31 +28,37 @@
.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: 0px 0px 8px 1px var(--button-box-shadow);
box-shadow: 0 0 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: 0px 0px 0px 3px var(--button-box-shadow);
box-shadow: 0 0 0 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);
}
@@ -62,32 +70,37 @@
.discourse-no-touch .btn-default.ai-new-question-button {
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: 0px 0px 6px 1px var(--button-box-shadow);
box-shadow: 0 0 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: 0px 0px 0px 4px var(--button-box-shadow);
box-shadow: 0 0 0 4px var(--button-box-shadow);
color: var(--accent-text-color);
}
}
&:active {
background: light-dark(
oklch(from var(--accent-color) 40% c h),
scss/chat.scss
+3 -1
View File
@@ -13,8 +13,9 @@ body.has-full-page-chat {
.chat-drawer-container {
.is-expanded & {
box-shadow: 0px 0px 0px 2px var(--tertiary-medium);
box-shadow: 0 0 0 2px var(--tertiary-medium);
}
.chat-drawer.is-expanded & {
border: none;
}
@@ -28,6 +29,7 @@ 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);
}
scss/color-choice.scss
+4
View File
@@ -4,17 +4,21 @@
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);
}
scss/composer-peek-mode.scss
+1
View File
@@ -18,6 +18,7 @@
transition: none;
box-shadow: none;
border-radius: var(--d-border-radius-large);
.grippie {
display: none;
}
scss/composer.scss
+5 -2
View File
@@ -3,6 +3,7 @@
.select-kit-header {
border: 1px solid var(--tertiary-700);
background: var(--secondary);
&:hover {
.d-icon {
color: var(--accent-color);
@@ -13,7 +14,6 @@
#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,6 +43,7 @@
.reply-area {
padding-inline: 0;
}
.reply-to,
.submit-panel {
padding-inline: var(--spacing-inline-sm);
@@ -59,6 +60,7 @@
}
}
}
.d-editor-button-bar {
.btn:hover,
.toolbar-popup-menu-options.is-expanded {
@@ -70,11 +72,12 @@
color: inherit;
}
//to have parity with regular select-kit styling used elsewhere
// to have parity with regular select-kit styling used elsewhere
.select-kit-row {
.d-icon {
color: var(--primary-high);
}
&:hover {
.d-icon {
color: var(--primary);
scss/desktop-full-width.scss
+3
View File
@@ -22,6 +22,7 @@ $sidebar-width: 17em;
// allows some flexibility for wide logos
body:not(.has-sidebar-page) & {
max-width: unset;
@include breakpoint("mobile-extra-large") {
max-width: 25vw;
}
@@ -30,9 +31,11 @@ $sidebar-width: 17em;
.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);
}
}
scss/desktop-horizon-fixes.scss
+4 -1
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,6 +15,7 @@
@media screen and (max-width: 576px) {
margin-top: 0;
label {
padding-block: 0.345em;
}
@@ -52,9 +53,11 @@
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;
}
scss/header.scss
+3 -4
View File
@@ -1,6 +1,7 @@
.d-header {
box-shadow: none;
background: var(--background-color);
@include breakpoint(extra-large, $rule: min-width) {
padding-bottom: var(--main-grid-gap);
}
@@ -48,8 +49,10 @@
.discourse-no-touch .interface-color-selector-content {
border: none;
border-radius: var(--d-border-radius);
.btn {
border: none;
&:hover {
box-shadow: none;
}
@@ -59,10 +62,6 @@
.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;
}
scss/hiddenstuff.scss
+1 -1
View File
@@ -3,7 +3,7 @@
.notifications-button-footer .reason .text,
.pinned-button .reason .text,
.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 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;
}
scss/login.scss
+1
View File
@@ -6,6 +6,7 @@ body.static-login {
"sidebar below-content";
grid-template-rows: auto 1fr auto;
}
.login-welcome {
border-radius: none;
border: none;
scss/main.scss
+15 -3
View File
@@ -12,10 +12,12 @@ 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);
}
@@ -29,8 +31,10 @@ 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;
}
@@ -38,7 +42,8 @@ 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) 0px;
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) 0;
#main-outlet {
max-width: unset;
}
@@ -46,7 +51,7 @@ body.has-sidebar-page #main-outlet-wrapper {
body:not(.has-sidebar-page) #main-outlet-wrapper {
@include breakpoint(medium, $rule: min-width) {
grid-template-columns: 0px minmax(0, 1fr) 0px;
grid-template-columns: 0 minmax(0, 1fr) 0;
}
}
@@ -54,25 +59,31 @@ body:not(.has-full-page-chat, .wizard) {
@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: 0px;
border-radius: 0;
}
html.composer-open & {
padding-bottom: var(--composer-height);
}
> *:not(.experimental-screen, .activate-account) {
@include breakpoint(medium, $rule: min-width) {
box-sizing: border-box;
@@ -99,6 +110,7 @@ body:not(.has-full-page-chat, .wizard) {
}
}
}
.topic-list-body {
padding-top: var(--spacing-block-m);
}
scss/misc.scss
+1 -1
View File
@@ -85,7 +85,7 @@ input[type="color"]:focus,
.user-main .about .details {
padding: 1em 1em 0;
border-bottom: 0px;
border-bottom: 0;
border-radius: var(--d-border-radius);
background-color: var(--primary-50);
}
scss/mobile-stuff.scss
+33 -8
View File
@@ -1,10 +1,11 @@
//temp sepeate file to avoid merge hell… to be distributed later
// temp separate 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) {
@@ -12,6 +13,7 @@
}
}
}
#main-outlet {
@include breakpoint(mobile-extra-large) {
padding-top: var(--spacing-block-sm);
@@ -21,48 +23,57 @@
@include breakpoint(mobile-extra-large) {
padding-inline: var(
--spacing-inline-m
) !important; //override will be fixed when the whole chat page shenanigans is resolved
) !important; // override will be fixed when the whole chat page shenanigans is resolved
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);
//dont know why we even hide this crucial navigation on mobile
// 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-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 horitzontal alignment
); // pure visual correction for horizontal alignment
&:has(#create-topic) {
order: 1;
}
}
}
#navigation-bar,
.navigation-controls,
.category-breadcrumb {
@@ -70,6 +81,7 @@
margin-bottom: 0;
}
}
.navigation-controls {
@include breakpoint(mobile-extra-large) {
gap: var(--spacing-inline-s);
@@ -98,10 +110,12 @@
.title-wrapper {
gap: var(--spacing-block-s);
}
.topic-category {
order: -1;
}
//make mixin of this
// make mixin of this
.badge-category__wrapper {
font-size: var(--font-down-2-rem);
border-radius: var(--d-border-radius);
@@ -123,12 +137,15 @@
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);
@@ -139,6 +156,7 @@
}
}
}
.container.posts {
@include breakpoint(mobile-extra-large) {
padding-inline: var(--spacing-inline-xs) !important;
@@ -154,18 +172,22 @@
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
// for core eventually, better way imo
.topic-avatar {
padding-top: 0;
align-items: center;
.d-icon {
font-size: var(--font-up-1);
}
@@ -181,23 +203,26 @@
}
}
//should be changed in core, should not be a primary btn
//changing this into straight buttons to match the progress one, which doesnt work well with rounded corners
// 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
#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);
scss/nav-pills.scss
+9 -2
View File
@@ -8,29 +8,35 @@
.navigation-container {
gap: 1rem;
.category-breadcrumb {
order: 1;
}
}
.combo-box .combo-box-header {
// needs more specificy than just in the button file
// needs more specificity 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: 0px 0px 0px 3px var(--button-box-shadow);
box-shadow: 0 0 0 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;
@@ -47,6 +53,7 @@
.discourse-no-touch & {
background: transparent;
color: var(--d-nav-color--hover);
&::after {
content: "";
position: absolute;
scss/sidebar-new-topic-button.scss
+1
View File
@@ -51,6 +51,7 @@
border-radius: 0 var(--d-button-border-radius)
var(--d-button-border-radius) 0;
padding-right: 0.65em;
.d-icon {
color: var(--secondary);
}
scss/sidebar.scss
+14 -5
View File
@@ -2,17 +2,21 @@
.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;
}
@@ -20,30 +24,37 @@
.sidebar-sections {
padding: 0;
}
.sidebar-section-link {
transition: none;
border-radius: var(--d-border-radius);
}
.dropdown-menu__item .sidebar-section-link {
border-radius: 0px;
border-radius: 0;
}
}
.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);
}
@@ -52,6 +63,7 @@
.sidebar-wrapper .sidebar-sections {
--scrollbarThumbBg: var(--d-selected);
padding: 0 1rem;
}
.sidebar-section-link-wrapper .sidebar-section-link:focus,
@@ -63,11 +75,8 @@
.sidebar-new-topic-button__wrapper {
margin: 0 var(--spacing-inline-m) var(--spacing-block-l);
.sidebar-new-topic-button .d-icon {
display: none;
}
}
.sidebar-wrapper .sidebar-sections {
padding: 0 1rem;
}
scss/topic-cards.scss
+109 -44
View File
@@ -4,6 +4,7 @@
.topic-list > .topic-list-body > .topic-list-item.last-visit {
border-bottom: 1px solid var(--primary-300);
&:hover {
border-color: var(--accent-color);
}
@@ -14,10 +15,12 @@
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;
@@ -37,19 +40,23 @@
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 {
@@ -67,6 +74,7 @@
box-shadow: none;
border-radius: 0;
}
&.excerpt-expanded {
grid-template-columns: 20px auto auto min-content min-content;
grid-template-rows: auto auto auto;
@@ -74,32 +82,39 @@
". . . . 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;
}
@@ -122,6 +137,7 @@
.topic-activity-data {
grid-area: activity;
}
.topic-activity {
display: grid;
grid-template-columns: 20px auto auto auto;
@@ -156,6 +172,7 @@
.topic-activity__username {
display: none;
}
.topic-activity__reason {
margin-left: 0.25em;
}
@@ -166,13 +183,11 @@
}
// status
.topic-status-data {
grid-area: status;
}
.topic-status-data {
grid-area: status;
position: relative;
}
.topic-status-card {
height: min-content;
margin-left: auto;
@@ -187,14 +202,16 @@
border: 1px solid var(--status-color);
color: var(--status-color);
width: min-content;
@include breakpoint("large", min-width) {
position: absolute;
right: 0px;
right: 0;
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);
@@ -204,6 +221,7 @@
.topic-status-card.--pinned {
--status-color: var(--primary-500);
}
.topic-status-card.--hot {
--status-color: #e45735;
}
@@ -272,14 +290,17 @@
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);
@@ -301,6 +322,7 @@
);
}
}
td.main-link .discourse-tags {
display: none;
}
@@ -321,6 +343,7 @@
height: min-content;
align-self: center;
}
.topic-likes-replies-data .topic-likes,
.topic-likes-replies-data .topic-replies {
display: flex;
@@ -328,6 +351,7 @@
gap: 0.5em;
align-items: center;
color: var(--primary-500);
svg {
color: var(--primary-600);
}
@@ -336,52 +360,60 @@
.topic-list-item {
background: var(--d-content-background);
box-shadow: 0px 0px 12px 1px var(--topic-card-shadow);
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: 0px 0px 0px 2px var(--accent-color),
0px 0px 12px 1px var(--topic-card-shadow);
box-shadow:
0 0 0 2px var(--accent-color),
0 0 12px 1px var(--topic-card-shadow);
}
}
// Bookmarks
.topic-list-item.bookmark-list-item {
.link-bottom-line {
font-size: unset;
}
//regular card without excerpt class
// 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;
}
}
}
//card with excerpt (all in horizon since the toggle is gone)
// 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:
@@ -390,12 +422,6 @@
"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;
}
@@ -405,6 +431,7 @@
grid-template-areas:
". dropdown"
"category category";
.post-excerpt,
.avatar {
display: none;
@@ -418,6 +445,7 @@
"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:
@@ -429,13 +457,21 @@
}
}
}
.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;
@@ -444,8 +480,10 @@
justify-self: flex-end;
}
}
td.main-link .link-top-line {
display: contents;
.bookmark-metadata {
grid-area: metadata;
margin: 0;
@@ -453,10 +491,12 @@
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;
@@ -467,8 +507,10 @@
grid-area: excerpt;
margin: 0;
}
.topic-list-data:last-of-type {
display: contents;
.bookmark-actions-dropdown {
grid-area: dropdown;
align-self: flex-start;
@@ -480,6 +522,7 @@
align-items: center;
background: transparent;
}
.select-kit-header-wrapper {
height: 1em;
width: 1em;
@@ -490,6 +533,7 @@
.post-metadata.topic-list-data.updated-at {
grid-area: update;
}
td.activity .post-activity {
display: none;
}
@@ -499,7 +543,11 @@
.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;
}
@@ -507,6 +555,7 @@
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:
@@ -514,8 +563,10 @@
". . . . . . . . "
"activity . . . . . . likes-replies";
}
.assign-topic-buttons {
display: contents;
.assign-actions-dropdown {
grid-area: dropdown;
justify-content: flex-end;
@@ -527,31 +578,29 @@
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;
@@ -563,30 +612,37 @@ 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;
@@ -598,27 +654,51 @@ 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"
@@ -626,31 +706,16 @@ 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";
}
@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;
}
grid-template-areas:
"bulk-select category . . . status"
"bulk-select . . . . ."
"bulk-select activity activity . . .";
}
}
scss/topic.scss
+6 -2
View File
@@ -7,7 +7,7 @@
}
.container.posts .topic-navigation:not(.with-topic-progress) {
// super fragile because new sticky topic title doesnt have a calculated value (= 53px with this font and size but…)
// 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)
);
@@ -16,6 +16,7 @@
.timeline-container .topic-timeline {
min-width: unset; // why we have this?
.timeline-scrollarea {
border-left: 1px solid var(--accent-color);
@@ -31,8 +32,10 @@
line-height: 1;
}
}
.timeline-handle {
background-color: var(--accent-color);
@include breakpoint("medium", $rule: min-width) {
width: 8px;
border-radius: 10px;
@@ -42,7 +45,7 @@
}
}
//should probably get rid of this extra specificity class in core?
// should probably get rid of this extra specificity class in core?
.timeline-container.timeline-fullscreen {
@include breakpoint("medium", $rule: max-width) {
.topic-timeline
@@ -56,6 +59,7 @@
.container.posts {
grid-template-columns: auto 8em;
@media screen and (max-width: 924px) {
grid-template-columns: auto auto;
}
scss/variables.scss
+2 -2
View File
@@ -3,8 +3,8 @@
--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
// 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;
--spacing-block-sm: 0.75em;
scss/welcome-banner.scss
+14
View File
@@ -24,22 +24,27 @@
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;
}
@@ -51,22 +56,27 @@
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;
@@ -75,6 +85,7 @@
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;
@@ -82,18 +93,21 @@
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);
}
stylelint.config.mjs
+3
View File
@@ -0,0 +1,3 @@
export default {
extends: ["@discourse/lint-configs/stylelint"],
};