Discourse Category Sidebars

theme-component

(Kris) #1

This theme component takes a topic and applies it as a sidebar for a category’s topic list. These sidebars are only visible when the browser is 767px or wider (most tablets and monitors).

:eye: Preview it on theme creator

:hammer_and_wrench: Github repo: https://github.com/awesomerobot/discourse-category-sidebars

:thinking: How do I install a Theme or Theme Component?

What can I do with this theme component?

  • Choose a topic and display its content as a sidebar for a category.

  • Set a sidebar to be displayed on the /latest, /new, /unread, and /top pages by using all as the category name in your settings.

  • Choose for the sidebars to appear on the left or the right of the topic list.

  • By default a category’s sidebar will also display for all its subcategories unless a subcategory has its own sidebar defined (you can disable this by unchecking the inherit parent sidebar setting).

How do I configure it?

Simply insert the category slug (from the category url, e.g. example.com/c/staff) and the id of the topic (e.g. example.com/t/example-topic/57)

I recommend creating sidebar topics in their respective categories, closing the topic so there are no replies, and unlisting it (so it doesn’t appear in the topic list).

Note that you can not use a topic in a private category as a sidebar in a public category (you can, but users without access to that private topic will just see a blank sidebar!).

Custom CSS

Each category sidebar is wrapped with a class that contains the category slug, so for the staff category that would be .category-sidebar-staff. You can use these classes to style the individual sidebars.

The body tag on pages with sidebars also has a class added so you can use body.custom-sidebar to apply styles on all pages that have a sidebar.


:heart: Special thanks to @xrav3nz for laying the groundwork to make this component possible!


Versatile Banner
(Christoph) #2

As far as I can see, this does nothing on mobile, right?


#3

In case of long posts, the scroll is rather weird: the sidebar scrolls down only when the page is almost scrolled down, as if the bottom of the sidebar is linked with the bottom of the page. But since we have infinite scrolling, as soon as more posts are loaded, the sidebar is reset to the top again.

This feels weird. What could work (maybe?) is make the sidebar scroll position remain the same: eg. i scroll down until i read the whole post and stop there even if new posts are loaded in the normal list. But when i scroll up, then scroll the sidebar normally up, just like the topic list does. This would help (i think) with reading the whole sidebar post more easily.


If you wanna check what i’m talking about: https://forum.duplicacy.com/


(Kris) #4

ah - I see… this is due to the way position: sticky; works (it’s a fairly new CSS feature).

I think there are a few possible solutions…

  1. I could add a setting to optionally disable position: sticky, so the sidebar scrolls like normal content.

  2. I could restrict the sidebar height to never be taller than the viewport and make it scrollable if the content is too long. You’d end up with double scrollbars though… which isn’t the best

  3. I could abandon using CSS for positioning entirely and use JS instead… I think this way I could accomplish what you’re describing.

  4. Of course, you could also just use a shorter sidebar :wink: (I think I should have something in here for longer sidebars either way to avoid the current issue)

I’ll figure something out this week.

For now if you want to disable the sticky functionality entirely you can add this CSS:

.custom-sidebar .topic-list.with-sidebar>.category-sidebar {
  position: relative;
  top: 0;
}

(Kris) #5

I just pushed an update that makes both options 1 & 2 available.

  1. I’ve added a “stick on scroll” option in the settings. When it’s disabled sidebars will no longer be sticky on scroll and have no height restriction (so you can view the full sidebar content by scrolling the page).

  2. When enabled (default) the sidebars will remain sticky on scroll but aren’t allowed to be taller than the browser (if it is taller than the browser it will get its own scrollbar).

I gave a JS solution a shot and made some progress, but I’m not an engineer and scrolling is pretty tricky. It’s definitely possible, so if anyone wants to make a PR I’d be happy to take a look and merge it in.


(Bart) #6

We discussed the Category Sidebars with our moderators and one thing we feel is missing is the option to ‘fold’ or ‘close’ the block once you’ve read it. Personally I prefer folding as this lets users access it again at a later time. Would you consider adding that?


#7

Yes. And would be nice if that was optional for the admin so you could prevent folding if desired.


(Kris) #8

Sure, that shouldn’t be too difficult to add as an option.


(Dave McClure) #9

How hard would it be to use the ideas in here to build a “tags sidebar”?

I’m thinking it’d be like this, and sidebars for each tag with an associated topic would just stack on top of each other.