Merge pull request #524 from thelounge/PR/inline-preview

Improve inline previews for links and images

client/css/style.css

@@ -933,6 +933,7 @@ kbd {
 
 #chat .text {
 	flex: 1 1 auto;
+	overflow: hidden;
 }
 
 #loading a,
@@ -1103,8 +1104,9 @@ kbd {
 	color: #222;
 	font-size: 12px;
 	max-width: 100%;
-	padding: 6px 8px;
+	padding: 6px;
 	margin-top: 2px;
+	overflow: hidden;
 }
 
 #chat .toggle-content a {
@@ -1113,14 +1115,22 @@ kbd {
 
 #chat .toggle-content img {
 	max-width: 100%;
-	max-height: 250px;
+	max-height: 128px;
 	display: block;
-	margin: 2px 0;
 }
 
 #chat .toggle-content .thumb {
-	max-height: 110px;
-	max-width: 210px;
+	float: left;
+	margin-right: 6px;
+	max-width: 48px;
+	max-height: 32px;
+}
+
+#chat .toggle-content .head,
+#chat .toggle-content .body {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
 }
 
 #chat .toggle-content .head {
@@ -1129,9 +1139,6 @@ kbd {
 
 #chat .toggle-content .body {
 	color: #999;
-	max-width: 460px;
-	word-break: normal;
-	word-wrap: break-word;
 }
 
 #chat .toggle-content.show {

client/views/toggle.tpl

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