Open simurai opened 9 years ago
:+1: Yessssss looks good!
Yeah, this is nice :+1:
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:
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.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.
@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 ...
@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.
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/
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.