Overlays Misplaced When Wrapping Discourse

Dev
1

Hello :wave:

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
2019-10-03 at 11.17.png1113×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 :beers:

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: https://github.com/discourse/discourse/blob/b3eb67976dd0c0129736fe0b86167d7e512b51f4/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6

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?

4 Likes
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.

1 Like
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.

3 Likes
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.

2 Likes