Sticky headers

[simurai]

From a discussion in #318, if you have a lot of packages installed, it's easy to scroll past the next category (Community, Core, Dev).

An option is to make the headers "sticky", so they stay at the top until you reach the next category.

[mnquintana]

:+1: Yessssss looks good!

[kevinsawicki]

Yeah, this is nice :+1:

[simurai]

I shouldn't post animated gifs without a deeper look into implementation. :grin:

I tried the following:

@import "ui-variables";
.settings-view .installed-packages .sub-section-heading {
  @_padding: @component-padding*1.5;
  position: fixed;
  z-index: 1;
  margin: 0 -@_padding;
  top: @tab-height + 1px;
  width: 800px + @_padding*2;
  padding: @_padding;
  border-radius: 0 0 @component-border-radius*2 @component-border-radius*2;
  background-color: lighten(@base-background-color, 4%);
  box-shadow: 0 2px 4px hsla(0,0%,0%,.2);
}

using position: fixed to pull the header out of the scrolling. But already running into issues:

• The top property would need to be calculated by JS, not just because themes might change the tabs height.. also some packages add stuff on top of the tabs.
• width doesn't shrink when resizing. We could use right but then we would have to calculate left, also when resizing.
• Once you make a header fixed, the space used is removed, causing the scroll to jump

Maybe a better option is to clone the headers and have them positioned absolute outside of the scrollable .panels. Then the size and position is based on the parent.

Anyways, it's not as easy as it first seemed. Chrome once had a flagged position: sticky feature, that would be perfect, but they removed it again. Alternatively we could think about a sub-nav instead.. or wait till we take a look at the "side panel" thing.

[gu-stav]

@simurai Isn't the new shiny stuff position: sticky what you want? If you're able to force webkit to set this option mentioned here this could be an easy way to go ...

[simurai]

@gustavpursche Yeah, it would be the perfect use case. Chrome/Chromium had it behind a flag until v37 but removed it again: http://caniuse.com/#feat=css-sticky Not sure if/when they will add it back.

[jerone]

position: sticky seems to return in Chrome/Chromium 52.

Ref: http://caniuse.com/#feat=css-sticky https://www.chromestatus.com/features/6190250464378880 https://bugs.chromium.org/p/chromium/issues/detail?id=231752 https://codereview.chromium.org/1308273010/