left_sidebar: Make topics list header sticky.

Fixes #22911

`Back to streams`, stream name and filter topics are all sticky
now and their color changes based on which filter is active and
the currently applied theme.
This commit is contained in:
Aman Agrawal 2022-10-27 12:04:02 +00:00 committed by Tim Abbott
parent 8ccd416e3b
commit 925fa4ca50
2 changed files with 38 additions and 0 deletions

View File

@ -615,6 +615,21 @@ body.dark-theme {
} }
} }
#stream_filters .narrow-filter.active-filter {
.topic-list .filter-topics,
> .bottom_left_row {
background-color: hsl(208, 31%, 24%);
}
}
.zoom-in {
#topics_header,
.narrow-filter > .bottom_left_row,
#stream_filters .topic-list .filter-topics {
background-color: hsl(212, 28%, 18%);
}
}
#user_presences li:hover, #user_presences li:hover,
#user_presences li.highlighted_user { #user_presences li.highlighted_user {
background-color: hsla(136, 25%, 73%, 0.2); background-color: hsla(136, 25%, 73%, 0.2);

View File

@ -118,6 +118,10 @@ li.show-more-topics {
&.filter-topics { &.filter-topics {
padding-bottom: 0; padding-bottom: 0;
position: sticky;
top: 43px;
z-index: 2;
background-color: hsl(0, 0%, 100%);
} }
.input-append.topic_search_section { .input-append.topic_search_section {
@ -373,6 +377,13 @@ li.active-sub-filter {
border-radius: 4px; border-radius: 4px;
} }
#stream_filters .narrow-filter.active-filter {
.topic-list .filter-topics,
> .bottom_left_row {
background-color: hsl(202, 56%, 91%);
}
}
#global_filters { #global_filters {
margin-bottom: $sections_vertical_gutter; margin-bottom: $sections_vertical_gutter;
@ -611,6 +622,10 @@ li.topic-list-item {
} }
#topics_header { #topics_header {
position: sticky;
top: 0;
background-color: hsl(0, 0%, 100%);
z-index: 2;
margin-right: 10px; margin-right: 10px;
color: hsl(0, 0%, 43%); color: hsl(0, 0%, 43%);
@ -702,6 +717,14 @@ li.topic-list-item {
} }
.zoom-in { .zoom-in {
.narrow-filter > .bottom_left_row {
position: sticky;
top: 20px;
z-index: 2;
padding-bottom: 1px;
background-color: hsl(0, 0%, 100%);
}
.show-more-topics { .show-more-topics {
display: none; display: none;
} }