Plugin with sidebar: how to modify small-width, medium-width, large-width?

Dev
1

I am working on a plugin that adds a sidebar to discourse. Because of this sidebar, the width of the topic list is reduced.

The consequence is that the small-width, medium-width and large-width media queries are now wrong. For example, I need to trigger the small-width below 900px instead of 800px, for all elements except the header.

How can I do that? I have tried to override the scss variables and mixins with register_asset "stylesheets/mixins.scss", but it doesn’t work…

2

My current understanding is:

  • Values I need to change are in the 3 first mixins of file mixins.scss.
  • But those values are hardcoded in the mixins.
  • Because there is no !default mechanism for mixins (like there is for variables), whenever I provide my own mixins with same names, they are overwritten by discourse’s ones. So that is not the way to go.
  • I then tried to replace the full mixins.scss file with my own modified one, hoping the file replacement mechanism used for templates would also work for scss (putting a file with the same name in the same folder hierarchy). But it seems it doesn’t…

Anyone on this?

3

you do know there are other sidebar plugins out there dont you - for example

Might be worth looking at how they do it - if you want to create your own that is.

4

Thanks @mikechristopher.

I think the most interesting thread about sidebars (listing several plugins, including the one you mention), is:

I have been through some of those plugins, but it seems they don’t resize correctly.

1 Like
5

Discourse team, do you confirm there is currently no way to override, let’s say, the 850px small screen limit? (I see it hardcoded in 3 files)

6

You can just write CSS that is more specific than what’s in the core Discourse scss files and it will take precedence. That is, you don’t need to override anything in core to add your own css to either the plugin or the site customizations.

Further, you don’t need to use the core mixins. If you need to add css for, say, browsers smaller than 500px, you can use this:

  @media all and (max-width: 500px) {
     /* css here */
  }
7

Thanks @pmusaraj. Of course I can override all styles that depend on small-width, medium-width and large-width. But it is a lot of work and it might cause maintenance issues when there will be a new Discourse version. For now I think my best option is to modify my Discourse instance.