Merge pull request #1313 from mattermost/plt-992

PLT-992 / PLT-984 Fixed center channel height magic. Fixes tutorial.

web/react/components/center_panel.jsx

@@ -61,9 +61,7 @@ export default class CenterPanel extends React.Component {
                         <div id='channel-header'>
                             <ChannelHeader />
                         </div>
-                        <div id='post-list'>
+                        {postsContainer}
-                            {postsContainer}
-                        </div>
                         <div
                             className='post-create__container'
                             id='post-create'

web/react/components/create_post.jsx

@@ -236,8 +236,6 @@ export default class CreatePost extends React.Component {
         PostStore.storeCurrentDraft(draft);
     }
     resizePostHolder() {
-        const height = this.state.windowHeight - $(ReactDOM.findDOMNode(this.refs.topDiv)).height() - 50;
-        $('.post-list-holder-by-time').css('height', `${height}px`);
         if (this.state.windowWidth > 960) {
             $('#post_textbox').focus();
         }

web/react/components/posts_view_container.jsx

@@ -261,7 +261,7 @@ export default class PostsViewContainer extends React.Component {
         }
 
         return (
-            <div>{postListCtls}</div>
+            <div id='post-list'>{postListCtls}</div>
         );
     }
 }

web/sass-files/sass/partials/_content.scss

@@ -18,15 +18,15 @@
 	margin-left: 220px;
 	position: relative;
 	background: #fff;
+    display: flex;
+    flex-direction: column;
 	.channel__wrap & {
 		padding-top: 0;
 	}
 }
 #post-create {
+    flex: 0 0 auto;
 	background: #fff;
-	position: absolute;
-	bottom: 0;
-	left: 0;
 	width: 100%;
 	z-index: 3;
 }
@@ -61,4 +61,4 @@
 
 .delete-message-text {
 	margin-top: 10px;
-}
+}

web/sass-files/sass/partials/_headers.scss

@@ -1,6 +1,7 @@
 #channel-header {
     padding: 3px 0;
     height: 58px;
+    flex: 0 0 58px;
 }
 .row {
 	&.header {

web/sass-files/sass/partials/_markdown.scss

@@ -9,6 +9,7 @@
 	}
 }
 .markdown-inline-img {
+    -moz-force-broken-image-icon: 1;
     max-height: 500px;
     height: 500px;
 }

web/sass-files/sass/partials/_post.scss

@@ -182,12 +182,16 @@ body.ios {
 }
 
 #post-list {
+    flex: 1 1 auto;
+    position: relative;
+    overflow-y: hidden;
 	.post-list-holder-by-time {
 		background: #fff;
 		overflow-y: scroll;
 		width: 100%;
 		padding: 1em 0 0;
-		position: relative;
+		position: absolute;
+        height: 100%;
 		-webkit-overflow-scrolling: touch;
 		&::-webkit-scrollbar {
 			width: 0px !important;

web/sass-files/sass/partials/_videos.scss

@@ -52,6 +52,7 @@
 }
 
 .gif-div {
+    -moz-force-broken-image-icon: 1;
     position:relative;
     max-width: 450px;
     max-height: 500px;