right_sidebar: Refactor user search to match left sidebar approach.

This commit is contained in:
Karl Stolley
2024-08-08 12:42:36 -04:00
committed by Tim Abbott
parent c4dfa7890e
commit 70fd334b2f
2 changed files with 13 additions and 3 deletions

View File

@@ -362,17 +362,27 @@ $user_status_emoji_width: 24px;
}
#user_search_section {
display: grid;
grid-template-columns: minmax(0, 1fr) 28px;
grid-template-rows: var(--line-height-sidebar-row-prominent);
white-space: nowrap;
margin-bottom: 10px;
& .user-list-filter {
grid-area: 1 / 1 / 2 / 3;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: var(100% - var(--right-sidebar-padding-right));
/* Prevent text from colliding with .clear_search_button */
padding-right: 28px;
/* Push back against inherited styles; let CSS Grid be in
charge of the height. */
height: auto;
}
.clear_search_button {
margin-left: -1px;
grid-area: 1 / 2 / 2 / 3;
position: static;
padding: 0;
}
}

View File

@@ -7,7 +7,7 @@
</h4>
<i id="user_filter_icon" class="fa fa-search"></i>
</div>
<div class="input-append notdisplayed" id="user_search_section">
<div class="notdisplayed" id="user_search_section">
<input class="user-list-filter home-page-input filter_text_input" type="text" autocomplete="off" placeholder="{{t 'Search people' }}" />
<button type="button" class="btn clear_search_button" id="clear_search_people_button">
<i class="fa fa-remove" aria-hidden="true"></i>