fix layout

src/client/js/components/PageHistory/Revision.jsx

@@ -16,7 +16,8 @@ export default class Revision extends React.Component {
   componentDidMount() {
   }
 
-  _onDiffOpenClicked() {
+  _onDiffOpenClicked(e) {
+    e.preventDefault();
     this.props.onDiffOpenClicked(this.props.revision);
   }
 
@@ -35,7 +36,7 @@ export default class Revision extends React.Component {
         <div className="picture-container">
           {pic}
         </div>
-        <div className="m-l-10">
+        <div className="ml-3">
           <div className="revision-history-meta">
             <span className="text-muted small">
               <UserDate dateTime={revision.createdAt} /> ({ t('No diff') })
@@ -56,15 +57,15 @@ export default class Revision extends React.Component {
       pic = <UserPicture user={author} size="lg" />;
     }
 
-    const iconClass = this.props.revisionDiffOpened ? 'caret caret-opened' : 'caret';
+    const iconClass = this.props.revisionDiffOpened ? 'fa fa-caret-down caret caret-opened' : 'fa fa-caret-down caret';
     return (
       <div className="revision-history-main d-flex mt-3">
-        <div className="mt-2">
-          {pic}
-        </div>
-        <div className="m-l-10">
+        <div className="mt-2">{pic}</div>
+        <div className="ml-2">
           <div className="revision-history-author">
-            <strong><Username user={author}></Username></strong>
+            <strong>
+              <Username user={author}></Username>
+            </strong>
           </div>
           <div className="revision-history-meta">
             <p>
@@ -72,19 +73,16 @@ export default class Revision extends React.Component {
             </p>
             <p>
               <span className="d-inline-block" style={{ minWidth: '90px' }}>
-                { !this.props.hasDiff
-                  && <span className="text-muted">{ t('No diff') }</span>
-                }
-                { this.props.hasDiff
-                  && (
-                  <a className="diff-view" onClick={this._onDiffOpenClicked}>
-                    <i className={iconClass}></i> { t('View diff') }
+                {!this.props.hasDiff && <span className="text-muted">{t('No diff')}</span>}
+                {this.props.hasDiff && (
+                  // use dummy href attr (by preventDefault()), because don't apply style by a:not([href])
+                  <a className="diff-view" href="" onClick={this._onDiffOpenClicked}>
+                    <i className={iconClass}></i> {t('View diff')}
                   </a>
-                  )
-                }
+                )}
               </span>
-              <a href={`?revision=${revision._id}`} className="m-l-10">
-                <i className="icon-login"></i> { t('Go to this version') }
+              <a href={`?revision=${revision._id}`} className="ml-2">
+                <i className="icon-login"></i> {t('Go to this version')}
               </a>
             </p>
           </div>