Skip to content

UX: Fix more-topics tabs interaction with --space #34047

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 7, 2025
Merged

UX: Fix more-topics tabs interaction with --space #34047

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ba0632
UX: Fix more-topics tabs interaction with `--space`
CvX Aug 3, 2025
a928b45
cleanup
CvX Aug 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
UX: Fix more-topics tabs interaction with --space 
Changing `--space` css var would result in incorrect size of the tabs and wrong placement of the border:

The implementation isn't ideal, there are sub-pixel height differences between the tabs and table header cells, but it's difficult to match `display: block/flex` and `display: table-cell`.

---

This also removes sizing down the font size on smaller screens. (the smaller font looked out of place between other, larger sized UI elements)
  • Loading branch information
@CvX
CvX committed Aug 3, 2025
commit 8ba06326341b24d94e343d184ab9c493db478b8f
10 changes: 5 additions & 5 deletions app/assets/stylesheets/common/components/more-topics.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,16 @@
.nav {
margin-block: 0;

@include viewport.until(lg) {
font-size: var(--font-down-1);
}

li {
.btn {
box-sizing: content-box;
color: var(--primary);
background-color: transparent;
padding: calc(0.8em - var(--d-nav-underline-height)) 0.8em; // match th block padding minus border
padding: var(--d-topic-list-header-data-padding-y) 0.8em;
border: none;
border-radius: 0;
font-size: var(--d-topic-list-data-font-size);
line-height: var(--line-height-medium);

.discourse-no-touch & {
&:hover {
Expand Down
5 changes: 0 additions & 5 deletions app/assets/stylesheets/desktop/components/more-topics.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,6 @@

li {
margin-right: 0;

.btn {
font-size: var(--font-0);
line-height: var(--line-height-large);
}
}
}

Expand Down
22 changes: 22 additions & 0 deletions ...ins/styleguide/assets/javascripts/discourse/components/sections/organisms/more-topics.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import Component from "@glimmer/component";
import MoreTopics from "discourse/components/more-topics";
import RelatedMessages from "discourse/components/related-messages";
import SuggestedTopics from "discourse/components/suggested-topics";
import { cloneJSON } from "discourse/lib/object";
import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";

export default class MoreTopicsOrganism extends Component {
<template>
<StyleguideExample @title="<SuggestedTopics>">
<SuggestedTopics @topic={{@dummy.topic}} />
</StyleguideExample>

<StyleguideExample @title="<RelatedMessages>">
<RelatedMessages @topic={{@dummy.pmTopic}} />
</StyleguideExample>

<StyleguideExample @title="<SuggestedTopics> - with tabs">
<MoreTopics @topic={{@dummy.pmTopic}} />
</StyleguideExample>
</template>
}
10 changes: 0 additions & 10 deletions ...tyleguide/assets/javascripts/discourse/components/sections/organisms/suggested-topics.gjs
View file
Open in desktop

This file was deleted.

6 changes: 6 additions & 0 deletions plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,11 @@ export function createData(store) {
pinnedTopic.set("category_id", categories[2].id);
let unpinnedTopic = createTopic({ unpinned: true });
let warningTopic = createTopic({ is_warning: true });
let pmTopic = createTopic({
archetype: "private_message",
related_messages: [topic, topic],
suggested_topics: [topic],
});

const bunchOfTopics = [
topic,
Expand Down Expand Up @@ -378,6 +383,7 @@ export function createData(store) {
pinnedTopic,
unpinnedTopic,
warningTopic,
pmTopic,

topics: bunchOfTopics,

Expand Down
4 changes: 2 additions & 2 deletions plugins/styleguide/assets/javascripts/discourse/lib/styleguide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ import topicList from "../components/sections/organisms/04-topic-list";
import basicTopicList from "../components/sections/organisms/basic-topic-list";
import categoriesList from "../components/sections/organisms/categories-list";
import modal from "../components/sections/organisms/modal";
import moreTopics from "../components/sections/organisms/more-topics";
import navigation from "../components/sections/organisms/navigation";
import siteHeader from "../components/sections/organisms/site-header";
import suggestedTopics from "../components/sections/organisms/suggested-topics";
import userAbout from "../components/sections/organisms/user-about";
import bem from "../components/sections/syntax/00-bem";

Expand Down Expand Up @@ -106,7 +106,7 @@ const SECTIONS = [
{ component: modal, category: "organisms", id: "modal" },
{ component: navigation, category: "organisms", id: "navigation" },
{ component: siteHeader, category: "organisms", id: "site-header" },
{ component: suggestedTopics, category: "organisms", id: "suggested-topics" },
{ component: moreTopics, category: "organisms", id: "more-topics" },
{ component: userAbout, category: "organisms", id: "user-about" },
];

Expand Down
5 changes: 2 additions & 3 deletions plugins/styleguide/config/locales/client.en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,8 @@ en:
title: "Topic Map"
site_header:
title: "Site Header"
suggested_topics:
title: "Suggested Topics"
more_topics:
title: "More Topics"
post_menu:
title: "Post Menu"
modal:
Expand All @@ -109,4 +109,3 @@ en:
char_counter:
title: "Character Counter"
placeholder: "Enter your text here..."

2 changes: 1 addition & 1 deletion plugins/styleguide/spec/system/smoke_test_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
{ href: "/organisms/modal", title: "Modal" },
{ href: "/organisms/navigation", title: "Navigation" },
{ href: "/organisms/site-header", title: "Site Header" },
{ href: "/organisms/suggested-topics", title: "Suggested Topics" },
{ href: "/organisms/more-topics", title: "More Topics" },
{ href: "/organisms/user-about", title: "User About Box" },
],
}
Expand Down
Loading