Impact of component positioning with 2.5.0.beta6

[Alec]

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:

GitHub - oerog/widescreen2: makes topic posts page wider

GitHub - pacharanero/discourse-topic-width-desktop: A very simple theme...

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)

Big Header - Little Header

This theme component will provide a stationary header with a large logo when scrolled at the top of the page. As you scroll down the page, the normal Discourse header bar will appear. This allows a large site logo to be cleanly displayed at the top of the page. On mobile, the header bar will only display when the phone is in portrait orientation. Vertical space is usually fairly limited when you are in landscape orientation, so this will keep things open. To see the header again, you can either…

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.

[justin (Justin DiRose)]

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.

[pacharanero (Marcus Baw)]

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.

[smrtey]

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;
   }
}

[tshenry (Taylor)]

@Alec

It also inadvertently had a negative effect on the Big Header - Little header theme

Hey there . 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.