paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

left_sidebar: Fix the layout for filter names that are long.

Browse Source
This commit is contained in:
Daniil Fadeev
2023-08-10 15:07:22 +03:00
committed by Tim Abbott
parent efa3c4a2c6
commit 198ef43ced
2 changed files with 25 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/styles/left_sidebar.css
View File

@@ -452,6 +452,19 @@ li.active-sub-filter {
#global_filters {
margin-bottom: $sections_vertical_gutter;
.global-filter-container {
display: flex;
padding-right: 20px;
.global-filter-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-grow: 1;
}
}
.filter-icon {
display: inline-block;
min-width: $left_col_size;
@@ -459,7 +472,6 @@ li.active-sub-filter {
}
.top_left_row .unread_count {
margin-right: 20px;
margin-top: 2px;
display: none;
}

24
web/templates/left_sidebar.hbs
View File

@@ -3,64 +3,64 @@
<ul id="global_filters" class="filters">
{{!-- Special-case this link so we don't actually go to page top. --}}
<li class="top_left_all_messages top_left_row">
<a href="#all_messages" class="home-link tippy-left-sidebar-tooltip" data-tooltip-template-id="all-message-tooltip-template">
<a href="#all_messages" class="home-link tippy-left-sidebar-tooltip global-filter-container" data-tooltip-template-id="all-message-tooltip-template">
<span class="filter-icon">
<i class="fa fa-align-left" aria-hidden="true"></i>
</span>
{{~!-- squash whitespace --~}}
<span>{{t 'All messages' }}</span>
<span class="global-filter-name">{{t 'All messages' }}</span>
<span class="unread_count"></span>
</a>
<span class="arrow all-messages-sidebar-menu-icon hidden-for-spectators"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
</li>
<li class="top_left_recent_topics top_left_row">
<a href="#recent" class="tippy-left-sidebar-tooltip" data-tooltip-template-id="recent-conversations-tooltip-template">
<a href="#recent" class="tippy-left-sidebar-tooltip global-filter-container" data-tooltip-template-id="recent-conversations-tooltip-template">
<span class="filter-icon">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</span>
{{~!-- squash whitespace --~}}
<span>{{t 'Recent conversations' }}</span>
<span class="global-filter-name">{{t 'Recent conversations' }}</span>
</a>
</li>
<li class="top_left_mentions top_left_row hidden-for-spectators">
<a href="#narrow/is/mentioned">
<a class="global-filter-container" href="#narrow/is/mentioned">
<span class="filter-icon">
<i class="fa fa-at" aria-hidden="true"></i>
</span>
{{~!-- squash whitespace --~}}
<span>{{t 'Mentions' }}</span>
<span class="global-filter-name">{{t 'Mentions' }}</span>
<span class="unread_count"></span>
</a>
</li>
<li class="top_left_starred_messages top_left_row hidden-for-spectators">
<a href="#narrow/is/starred">
<a class="global-filter-container" href="#narrow/is/starred">
<span class="filter-icon">
<i class="fa fa-star" aria-hidden="true"></i>
</span>
{{~!-- squash whitespace --~}}
<span>{{t 'Starred messages' }}</span>
<span class="global-filter-name">{{t 'Starred messages' }}</span>
<span class="unread_count"></span>
</a>
<span class="arrow starred-messages-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
</li>
<li class="top_left_drafts top_left_row hidden-for-spectators">
<a href="#drafts" class="tippy-left-sidebar-tooltip" data-tooltip-template-id="drafts-tooltip-template">
<a href="#drafts" class="tippy-left-sidebar-tooltip global-filter-container" data-tooltip-template-id="drafts-tooltip-template">
<span class="filter-icon">
<i class="fa fa-pencil" aria-hidden="true"></i>
</span>
{{~!-- squash whitespace --~}}
<span>{{t 'Drafts' }}</span>
<span class="global-filter-name">{{t 'Drafts' }}</span>
<span class="unread_count"></span>
</a>
<span class="arrow drafts-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
</li>
<li class="top_left_scheduled_messages top_left_row hidden-for-spectators">
<a href="#scheduled">
<a class="global-filter-container" href="#scheduled">
<span class="filter-icon">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
{{~!-- squash whitespace --~}}
<span>{{t 'Scheduled messages' }}</span>
<span class="global-filter-name">{{t 'Scheduled messages' }}</span>
<span class="unread_count"></span>
</a>
</li>