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

design: Fixes poor line wrapping of long stream names using ellipses.

Browse Source 
Earlier, on narrowing the window to some particular sizes,
long stream names used to overlap with the subscribe and view stream
buttons.
The issue was resolved by cutting the stream name short and putting
ellipses at the end. A title was provided to the stream name div so that
the entire stream name would be visible on hovering over it.

Fixes: #13139
This commit is contained in:
Vaibhav Raj Singh
2019-10-03 21:15:46 +05:30
committed by Tim Abbott
parent 3dc7d60ffe
commit 3dec7f6f6f
2 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
static/styles/subscriptions.scss
View File

@@ -794,11 +794,15 @@ form#add_new_subscription {
.stream-name { .stream-name {
display: inline-block; display: inline-block;
position: relative;
font-size: 1.5em; font-size: 1.5em;
font-weight: 600; font-weight: 600;
margin-left: -3px; margin-left: -3px;
white-space: normal; padding-bottom: 5px;
word-break: break-all; white-space: nowrap;
width: 270px;
overflow: hidden;
text-overflow: ellipsis;
} }
.deactivate, .deactivate,
@@ -844,7 +848,6 @@ form#add_new_subscription {
margin-right: 5px; margin-right: 5px;
text-decoration: none; text-decoration: none;
line-height: 16px; line-height: 16px;
vertical-align: middle;
} }
.editable-section { .editable-section {

2
static/templates/subscription_settings.hbs
View File

@@ -15,7 +15,7 @@
<div class="large-icon hash" style="color: {{color}}"></div> <div class="large-icon hash" style="color: {{color}}"></div>
{{/if}} {{/if}}
<div class="stream-name"> <div class="stream-name">
<span class="stream-name-editable editable-section">{{name}}</span> <span title="{{name}}" class="stream-name-editable editable-section" >{{name}}</span>
{{#if can_change_name_description}} {{#if can_change_name_description}}
<span class="editable" data-make-editable=".stream-name-editable"></span> <span class="editable" data-make-editable=".stream-name-editable"></span>
<span class="checkmark" data-finish-editing=".stream-name-editable">✓</span> <span class="checkmark" data-finish-editing=".stream-name-editable">✓</span>