Impact of component positioning with 2.5.0.beta6

Not a massive issue, but just thought I would let people know if they are using custom positioning in their themes they might be adversely impacted by the latest update.

The latest update seems to have broken the code of @smrtey or @pacharanero for displaying discourse in widescreen:

https://github.com/oerog/widescreen2

https://github.com/pacharanero/discourse-topic-width-desktop

The navigation bar (within topics) for the most part is in the correct (wide screen position). But when scrolling upwards it defaults back to the normal position, before flipping back.

It also inadvertently had a negative effect on the Big Header - Little header theme (by @Taylor_Troxtel)

Which in my instance caused the banner to block the buttons at top. (Catagories, Latest, New)

I have removed them from my site for now, but thought I would let others know before updating.

1 Like

Our header now uses position: sticky in CSS so it’s possible these themes were affected by that change. Versatile Banner and Discourse Category Banners were both updated to fix issues if you’re looking for a place to start.

5 Likes

Thanks @Alec for bringing this to my attention. I had noticed some oddities recently since 2.5.0.beta6 with spacing below headers, on some Discourse instances I run where I had made the header bar taller to accord better with a site design, and had put some padding in to push #main-outlet down a bit. After 2.5.0.beta6 this extra padding wasn’t needed any longer.

I’ll look into what I need to update to fix this, when I have time. I have 2 instances which use this TC, and although one is looking a bit weird, the other is fine. And of course, PR welcome on a fix if anyone’s got the time.

Thanks @justin for the pointer on fixing.

3 Likes

This didn’t effect widescreen on my site where I have a bunch of other stuff going on that’s not included in the component you link to, but it did break my customization of desktop view so that it fits on mobile screens to allow user to use embedded replied to/replies on mobile devices. For whatever reason, position: sticky didn’t stick when the width was < 768px. No idea why sticky wouldn’t work so I ended up having to go with

@media (max-width: 767px) {
   .d-header-wrap {
      position: fixed;
      top: 0;
      width: 100%;
   }
   #main-outlet {
       margin-top: 48px;
   }
}

Hey there :wave:. Just letting you know that I should have a fix in place for this component a little later today!

Edit: I just pushed an update to the component. Please update it through your admin dashboard.

4 Likes