paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 16:14:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

right_sidebar: Refactor user search to match left sidebar approach.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

14
web/styles/right_sidebar.css
View File

@@ -362,17 +362,27 @@ $user_status_emoji_width: 24px;
} }
#user_search_section { #user_search_section {
display: grid;
grid-template-columns: minmax(0, 1fr) 28px;
grid-template-rows: var(--line-height-sidebar-row-prominent);
white-space: nowrap; white-space: nowrap;
margin-bottom: 10px; margin-bottom: 10px;
& .user-list-filter { & .user-list-filter {
grid-area: 1 / 1 / 2 / 3;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; 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 { .clear_search_button {
margin-left: -1px; grid-area: 1 / 2 / 2 / 3;
position: static;
padding: 0;
} }
} }

2
web/templates/right_sidebar.hbs
View File

@@ -7,7 +7,7 @@
</h4> </h4>
<i id="user_filter_icon" class="fa fa-search"></i> <i id="user_filter_icon" class="fa fa-search"></i>
</div> </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' }}" /> <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"> <button type="button" class="btn clear_search_button" id="clear_search_people_button">
<i class="fa fa-remove" aria-hidden="true"></i> <i class="fa fa-remove" aria-hidden="true"></i>