Просмотр исходного кода

Fix layout to support scrollable messages.

Paulo Reis 10 лет назад
Родитель
Сommit
2f93a102fd

+ 6 - 5
services/web/app/views/project/editor/chat.jade

@@ -41,11 +41,12 @@ aside.chat(
 							}"
 							}"
 						)
 						)
 							.arrow(ng-style="{'border-color': 'hsl({{ hue(message.user) }}, 70%, 70%)'}")
 							.arrow(ng-style="{'border-color': 'hsl({{ hue(message.user) }}, 70%, 70%)'}")
-							p(
-								mathjax,
-								ng-repeat="content in message.contents track by $index"
-							)
-								span(ng-bind-html="content | linky:'_blank'")
+							.message-content
+								p(
+									mathjax,
+									ng-repeat="content in message.contents track by $index"
+								)
+									span(ng-bind-html="content | linky:'_blank'")
 
 
 	.new-message
 	.new-message
 		textarea(
 		textarea(

+ 8 - 2
services/web/public/stylesheets/app/editor/chat.less

@@ -47,6 +47,7 @@
 			}
 			}
 			.message-wrapper {
 			.message-wrapper {
 				margin-left: 50px + @line-height-computed/2;
 				margin-left: 50px + @line-height-computed/2;
+
 				.name {
 				.name {
 					font-size: 12px;
 					font-size: 12px;
 					color: @gray-light;
 					color: @gray-light;
@@ -54,12 +55,17 @@
 					min-height: 16px;
 					min-height: 16px;
 				}
 				}
 				.message {
 				.message {
-					padding: @line-height-computed / 2;
 					border-left: 3px solid transparent;
 					border-left: 3px solid transparent;
-					position: relative;
 					font-size: 14px;
 					font-size: 14px;
 					box-shadow: -1px 2px 3px #ddd;
 					box-shadow: -1px 2px 3px #ddd;
 					border-raduis: @border-radius-base;
 					border-raduis: @border-radius-base;
+					position: relative;
+					
+					.message-content {
+						padding: @line-height-computed / 2;
+						overflow-x: scroll;
+					}
+
 					.arrow {
 					.arrow {
 						right: 100%;
 						right: 100%;
 						top: @line-height-computed / 4;
 						top: @line-height-computed / 4;