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

Fix text overflow in lightbox.

Browse Source 
This fixes the user’s name to not fall on the next line. Instead it
appears on the same line and overflows properly into an ellipsis so it
theoretically should never overflow on to the next line.
This commit is contained in:
brockwhittaker
2017-01-10 11:49:12 -08:00
committed by Tim Abbott
parent 914d9a3412
commit 4d10c4274b
2 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
static/styles/overlay.css
View File

@@ -125,16 +125,23 @@
#overlay .image-description { #overlay .image-description {
/* approx width of screen minus action buttons on the side. */ /* approx width of screen minus action buttons on the side. */
width: calc(100% - 320px); width: calc(100% - 260px);
/* add some extra margin top and remove some bottom to keep the
height the same. and vertically center the text with the buttons. */
margin-top: 25px;
margin-bottom: 15px;
font-size: 1.3rem; font-size: 1.3rem;
color: #fff; color: #fff;
} }
#overlay .image-description .title { #overlay .image-description .title {
display: inline-block;
vertical-align: top;
font-weight: 500; font-weight: 500;
line-height: normal; line-height: normal;
max-width: calc(100%); max-width: calc(100% - 210px);
/* Required for text-overflow */ /* Required for text-overflow */
white-space: nowrap; white-space: nowrap;
@@ -142,6 +149,11 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
#overlay .image-description .user::before {
margin-right: 5px;
content: "–";
}
#overlay .player-container { #overlay .player-container {
height: calc(100vh - 71px); height: calc(100vh - 71px);
display: flex; display: flex;
@@ -157,7 +169,14 @@
} }
#overlay .image-description .user { #overlay .image-description .user {
max-width: 200px;
display: inline-block;
vertical-align: top;
font-weight: 300; font-weight: 300;
line-height: normal;
text-overflow: ellipsis;
overflow: hidden;
white-space: pre;
} }
.image-actions .button { .image-actions .button {
@@ -198,4 +217,8 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
#overlay .image-description .title {
max-width: calc(100% - 60px);
}
} }

3
templates/zerver/image-overlay.html
View File

@@ -2,8 +2,7 @@
<div class="image-info-wrapper"> <div class="image-info-wrapper">
<div class="image-description"> <div class="image-description">
<div class="title"></div> <div class="title"></div>
&mdash; <div class="user"></div>
<span class="user"></span>
</div> </div>
<div class="exit">x</div> <div class="exit">x</div>
<div class="image-actions"> <div class="image-actions">