Improve inline previews for links and images

This commit is contained in:
Maxime Poulin 2016-07-22 23:01:55 -04:00 committed by Jérémie Astori
parent 10bafb8b5d
commit 6a273d825a
2 changed files with 18 additions and 5 deletions

View File

@ -1105,6 +1105,7 @@ kbd {
max-width: 100%; max-width: 100%;
padding: 6px 8px; padding: 6px 8px;
margin-top: 2px; margin-top: 2px;
overflow: hidden;
} }
#chat .toggle-content a { #chat .toggle-content a {
@ -1113,18 +1114,23 @@ kbd {
#chat .toggle-content img { #chat .toggle-content img {
max-width: 100%; max-width: 100%;
max-height: 250px; max-height: 128px;
display: block; display: block;
margin: 2px 0; margin: 2px 0;
} }
#chat .toggle-content .thumb { #chat .toggle-content .thumb {
max-height: 110px; float: left;
max-width: 210px; margin-right: 10px;
max-width: 48px;
max-height: 36px;
} }
#chat .toggle-content .head { #chat .toggle-content .head {
font-weight: bold; font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} }
#chat .toggle-content .body { #chat .toggle-content .body {
@ -1132,10 +1138,17 @@ kbd {
max-width: 460px; max-width: 460px;
word-break: normal; word-break: normal;
word-wrap: break-word; word-wrap: break-word;
overflow: hidden;
max-height: 30px;
text-overflow: ellipsis;
} }
#chat .toggle-content.show { #chat .toggle-content.show {
display: inline-block !important; display: block;
}
#chat .toggle-content.toggle-type-image.show {
display: inline;
} }
#chat .count { #chat .count {

View File

@ -1,5 +1,5 @@
{{#toggle}} {{#toggle}}
<div class="toggle-content"> <div class="toggle-content toggle-type-{{type}}">
{{#equal type "image"}} {{#equal type "image"}}
<a href="{{link}}" target="_blank"> <a href="{{link}}" target="_blank">
<img src="{{link}}"> <img src="{{link}}">