Overlays Misplaced When Wrapping Discourse

Development

AI-generated summary

The discussion revolves around the issue of overlays being misplaced when wrapping the entire Discourse forum to add differently colored sides. p0fi shared an example of the user card being horizontally misplaced by the width of the added sides.

p0fi is looking for a solution to avoid these misplacements while still achieving the side bars. merefield shared a similar experience and suggested overriding a function to adjust the positioning of overlays, such as the user card.

However, p0fi mentioned that overriding every positioning method for all overlays is not a feasible solution, as almost all overlays are misplaced.

Instead, awesomerobot suggested adding a background color to #main-outlet and the background color for the sides on body, which merefield agreed with, providing an example of the CSS code:

body {
   background-color: red;
}

#main-outlet {
    background-color: white;
}

This solution could potentially resolve the issue without requiring extensive overrides.

1

Hello :waving_hand:

When I try to wrap the complete discourse to enable differently colored sides I get a misplacement problem with overlays like the user card for example.

17
171113×780 58.9 KB

The user card is supposed to be opened right next to the user which got clicked. But in fact its horizontally misplaced by exactly the width of my sides. Thus the question how is the positioning of this overlays realized and how could I avoid such misplacements while still achieving the side bars?

Thanks a lot :clinking_beer_mugs:

2

Yeah, I’ve hit this when adding an extra large banner whilst developing a big plugin for a client. In my case the offset was completely ridiculous (it was off screen!)

There may be a simpler solution, but it turns out this is a little involved and requires you to override a function, e.g. for user card:

          api.modifyClass('component:user-card-contents',  {
            _positionCard(target) {

That comes from a mixin, located here: discourse/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6 at b3eb67976dd0c0129736fe0b86167d7e512b51f4 · discourse/discourse · GitHub

I used jquery to determine whether or not to apply the modification depending on the visibility of the banner: on some pages I had the big ‘banner’, on others I did not. You could use a similar strategy.

tbh, your example doesn’t look that bad - I’d consider letting it be?

3

The problem is that basically all overlays are misplaced. I don’t really want to override every positioning method of all overlays that may exist.

It looks passable on the example image since the browser window was not full sized. The sides are usually bigger and therefore the misplacement is worse. Some overlays are almost off screen.

4

Yeah, it’s annoying. Perhaps restrict customisations to Topic List and try and leave the Topic view alone as much as possible and don’t have too many ‘variants’ to make your life simple.

5

I did not customize any particular view. I want to put the entire forum into an container in order to color the sides differently.

6

How are you accomplishing this? are you adding a new container around the #main div?

It might be easier if you instead add a background color to #main-outlet and then add your background color for the sides on body.

7

Yes, later on I was thinking that! So:

body {
   background-color: red;
}

#main-outlet {
    background-color: white;
}

There’s still the issue of the chunky banner though, but it’s not that big.