Multiple UI improvements (#3220)

* Multiple UI improvements

* Pushing time fix

* Fixing absolute time stamps on IOS

3 files changed, 22 insertions, 18 deletions

diff --git a/webapp/components/post_view/components/post_attachment.jsx b/webapp/components/post_view/components/post_attachment.jsx
index 8b5ff91f2..4442b735a 100644
--- a/webapp/components/post_view/components/post_attachment.jsx
+++ b/webapp/components/post_view/components/post_attachment.jsx
@@ -9,11 +9,11 @@ import {intlShape, injectIntl, defineMessages} from 'react-intl';
 const holders = defineMessages({
     collapse: {
         id: 'post_attachment.collapse',
-        defaultMessage: '▲ collapse text'
+        defaultMessage: 'Show less...'
     },
     more: {
         id: 'post_attachment.more',
-        defaultMessage: '▼ read more'
+        defaultMessage: 'Show more...'
     }
 });
 
@@ -44,7 +44,7 @@ class PostAttachment extends React.Component {
     getInitState() {
         const shouldCollapse = this.shouldCollapse();
         const text = TextFormatting.formatText(this.props.attachment.text || '');
-        const uncollapsedText = text + (shouldCollapse ? `<a class="attachment-link-more" href="#">${this.props.intl.formatMessage(holders.collapse)}</a>` : '');
+        const uncollapsedText = text + (shouldCollapse ? `<div><a class="attachment-link-more" href="#">${this.props.intl.formatMessage(holders.collapse)}</a></div>` : '');
         const collapsedText = shouldCollapse ? this.getCollapsedText() : text;
 
         return {
@@ -78,7 +78,7 @@ class PostAttachment extends React.Component {
             text = text.substr(0, 700);
         }
 
-        return TextFormatting.formatText(text) + `<a class="attachment-link-more" href="#">${this.props.intl.formatMessage(holders.more)}</a>`;
+        return TextFormatting.formatText(text) + `<div><a class="attachment-link-more" href="#">${this.props.intl.formatMessage(holders.more)}</a></div>`;
     }
 
     getFieldsTable() {
@@ -99,7 +99,7 @@ class PostAttachment extends React.Component {
             if (rowPos === 2 || !(field.short === true) || lastWasLong) {
                 fieldTables.push(
                     <table
-                        className='attachment___fields'
+                        className='attachment-fields'
                         key={'attachment__table__' + nrTables}
                     >
                         <thead>
@@ -122,7 +122,7 @@ class PostAttachment extends React.Component {
             }
             headerCols.push(
                 <th
-                    className='attachment___field-caption'
+                    className='attachment-field__caption'
                     key={'attachment__field-caption-' + i + '__' + nrTables}
                     width='50%'
                 >
@@ -131,7 +131,7 @@ class PostAttachment extends React.Component {
             );
             bodyCols.push(
                 <td
-                    className='attachment___field'
+                    className='attachment-field'
                     key={'attachment__field-' + i + '__' + nrTables}
                     dangerouslySetInnerHTML={{__html: TextFormatting.formatText(field.value || '')}}
                 >
@@ -143,7 +143,7 @@ class PostAttachment extends React.Component {
         if (headerCols.length > 0) { // Flush last fields
             fieldTables.push(
                 <table
-                    className='attachment___fields'
+                    className='attachment-fields'
                     key={'attachment__table__' + nrTables}
                 >
                     <thead>
diff --git a/webapp/components/post_view/components/post_body.jsx b/webapp/components/post_view/components/post_body.jsx
index 75ba30f23..eba62ad77 100644
--- a/webapp/components/post_view/components/post_body.jsx
+++ b/webapp/components/post_view/components/post_body.jsx
@@ -171,6 +171,7 @@ export default class PostBody extends React.Component {
                 <PostBodyAdditionalContent
                     post={this.props.post}
                     message={messageWrapper}
+                    compactDisplay={this.props.compactDisplay}
                 />
             );
         }
diff --git a/webapp/components/post_view/components/post_body_additional_content.jsx b/webapp/components/post_view/components/post_body_additional_content.jsx
index 89941f5b2..ea6e1cb49 100644
--- a/webapp/components/post_view/components/post_body_additional_content.jsx
+++ b/webapp/components/post_view/components/post_body_additional_content.jsx
@@ -97,16 +97,18 @@ export default class PostBodyAdditionalContent extends React.Component {
             );
         }
 
-        for (let i = 0; i < Constants.IMAGE_TYPES.length; i++) {
-            const imageType = Constants.IMAGE_TYPES[i];
-            const suffix = link.substring(link.length - (imageType.length + 1));
-            if (suffix === '.' + imageType || suffix === '=' + imageType) {
-                return (
-                    <PostImage
-                        channelId={this.props.post.channel_id}
-                        link={link}
-                    />
-                );
+        if (!this.props.compactDisplay) {
+            for (let i = 0; i < Constants.IMAGE_TYPES.length; i++) {
+                const imageType = Constants.IMAGE_TYPES[i];
+                const suffix = link.substring(link.length - (imageType.length + 1));
+                if (suffix === '.' + imageType || suffix === '=' + imageType) {
+                    return (
+                        <PostImage
+                            channelId={this.props.post.channel_id}
+                            link={link}
+                        />
+                    );
+                }
             }
         }
 
@@ -158,5 +160,6 @@ export default class PostBodyAdditionalContent extends React.Component {
 
 PostBodyAdditionalContent.propTypes = {
     post: React.PropTypes.object.isRequired,
+    compactDisplay: React.PropTypes.bool,
     message: React.PropTypes.element.isRequired
 };