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

user_profile: Use grid layout for stream search input.

Browse Source 
This commit updates CSS to use grid layout for stream
search input in user profile modal so that we can have
clean CSS and do not have different values for padding,
right and margin properties at different places.

This also fixes the alignment of "x" button.

Also, the heading and search input were not aligned
perfectly, so changed the CSS to they align better.
This commit is contained in:
Sahil Batra
2024-12-06 15:27:34 +05:30
committed by Tim Abbott
parent 835bedb515
commit c4058ffc22
3 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/user_profile.ts
View File

@@ -1312,10 +1312,8 @@ export function initialize(): void {
const $input = $<HTMLInputElement>("#user-profile-streams-tab input.stream-search");
if ($input.val()!.trim().length > 0) {
$("#user-profile-streams-tab #clear_stream_search").show();
$input.css("margin-right", "-20px");
} else {
$("#user-profile-streams-tab #clear_stream_search").hide();
$input.css("margin-right", "0");
}
});

19
web/styles/popovers.css
View File

@@ -617,21 +617,32 @@ ul.popover-group-menu-member-list {
.stream-list-top-section {
display: flex;
margin-top: 12px;
align-items: center;
margin-bottom: 5px;
.stream-search-container {
margin-left: auto;
display: grid;
grid-template:
"search-input clear-search" auto / minmax(0, 1fr)
30px;
}
.stream-search {
margin-left: auto;
align-self: center;
grid-column: search-input-start / clear-search-end;
grid-row: search-input;
padding-right: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 0;
}
#clear_stream_search {
display: none;
padding: 5px 8px 5px 4px;
position: relative;
grid-area: clear-search;
right: 0;
padding: 0;
}
}

10
web/templates/user_profile_modal.hbs
View File

@@ -117,10 +117,12 @@
<div class="header-section">
<h3 class="stream-tab-element-header">{{t 'Subscribed channels' }}</h3>
</div>
<input type="text" class="stream-search modal_text_input" placeholder="{{t 'Filter channels' }}" />
<button type="button" class="clear_search_button" id="clear_stream_search">
<i class="fa fa-remove" aria-hidden="true"></i>
</button>
<div class="stream-search-container">
<input type="text" class="stream-search modal_text_input" placeholder="{{t 'Filter channels' }}" />
<button type="button" class="clear_search_button" id="clear_stream_search">
<i class="fa fa-remove" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="subscription-stream-list empty-list">
<table class="user-stream-list" data-empty="{{t 'No channel subscriptions.'}}" data-search-results-empty="{{t 'No matching channels' }}"></table>