Merge pull request #3437 from weseek/imprve/5126-5205-implement-layout-about-change-version

Imprve/5126 5205 implement layout about change version

resource/locales/en_US/translation.json

@@ -76,7 +76,6 @@
   "Go to this version": "View this version",
   "View diff": "View diff",
   "No diff": "No diff",
-  "Shrink versions that have no diffs": "Shrink versions that have no diffs",
   "User ID": "User ID",
   "User Information": "User information",
   "Basic Info": "Basic info",
@@ -332,6 +331,8 @@
     "comparing_source": "Source",
     "comparing_target": "Target",
     "comparing_revisions": "Comparing versions",
+    "compare_latest":"Compare latest revision",
+    "compare_previous":"Compare previous revision",
     "comparing_with_latest": "Always compare with the latest version"
   },
   "modal_rename": {

resource/locales/ja_JP/translation.json

@@ -77,7 +77,6 @@
   "Go to this version": "このバージョンを見る",
   "View diff": "差分を表示",
   "No diff": "差分なし",
-  "Shrink versions that have no diffs": "差分のないバージョンをコンパクトに表示する",
   "User ID": "ユーザーID",
   "User Information": "ユーザー情報",
   "Basic Info": "ユーザーの基本情報",
@@ -334,6 +333,8 @@
     "comparing_source": "ソース",
     "comparing_target": "ターゲット",
     "comparing_revisions": "比較",
+    "compare_latest":"最新と比較",
+    "compare_previous":"1つ前のバージョンと比較",
     "comparing_with_latest": "常に最新バージョンと比較する"
   },
   "modal_rename": {

resource/locales/zh_CN/translation.json

@@ -80,7 +80,6 @@
 	"Go to this version": "查看此版本",
 	"View diff": "查看差异",
 	"No diff": "无差异",
-	"Shrink versions that have no diffs": "收缩没有差异的版本",
 	"User ID": "用户ID",
 	"Home": "首页",
 	"My Drafts": "My Drafts",
@@ -313,6 +312,8 @@
     "comparing_source": "源头",
     "comparing_target": "目标",
     "comparing_revisions": "比较版本",
+    "compare_latest":"比較最新版本",
+    "compare_previous":"比較以前的版本",
     "comparing_with_latest": "一定要与最新版本进行比较"
   },
 	"modal_rename": {

src/client/js/components/PageAccessoriesModal.jsx

@@ -109,10 +109,10 @@ const PageAccessoriesModal = (props) => {
             hideBorderBottom
           />
         </ModalHeader>
-        <ModalBody className="overflow-auto grw-modal-body-style p-0">
+        <ModalBody className="overflow-auto grw-modal-body-style">
           {/* Do not use CustomTabContent because of performance problem:
               the 'navTabMapping[tabId].Content' for PageAccessoriesModal depends on activeComponents */}
-          <TabContent activeTab={activeTab} className="p-5">
+          <TabContent activeTab={activeTab}>
             <TabPane tabId="pagelist">
               {activeComponents.has('pagelist') && <PageList />}
             </TabPane>

src/client/js/components/PageHistory.jsx

@@ -2,11 +2,12 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import loggerFactory from '@alias/logger';
 
+import { withTranslation } from 'react-i18next';
 import { withUnstatedContainers } from './UnstatedUtils';
 import { toastError } from '../util/apiNotification';
 
 import { withLoadingSppiner } from './SuspenseUtils';
-import PageRevisionList from './PageHistory/PageRevisionList';
+import PageRevisionTable from './PageHistory/PageRevisionTable';
 
 import PageHistroyContainer from '../services/PageHistoryContainer';
 import PaginationWrapper from './PaginationWrapper';
@@ -16,8 +17,8 @@ import RevisionComparerContainer from '../services/RevisionComparerContainer';
 const logger = loggerFactory('growi:PageHistory');
 
 function PageHistory(props) {
-  const { pageHistoryContainer } = props;
-  const { getPreviousRevision, onDiffOpenClicked } = pageHistoryContainer;
+  const { pageHistoryContainer, revisionComparerContainer, t } = props;
+  const { getPreviousRevision } = pageHistoryContainer;
   const {
     activePage, totalPages, pagingLimit, revisions, diffOpened,
   } = pageHistoryContainer.state;
@@ -69,14 +70,17 @@ function PageHistory(props) {
 
   return (
     <div className="revision-history">
-      <PageRevisionList
+      <h3 className="pb-3">{t('page_history.revision_list')}</h3>
+      <PageRevisionTable
         pageHistoryContainer={pageHistoryContainer}
+        revisionComparerContainer={revisionComparerContainer}
         revisions={revisions}
         diffOpened={diffOpened}
         getPreviousRevision={getPreviousRevision}
-        onDiffOpenClicked={onDiffOpenClicked}
       />
-      {pager()}
+      <div className="my-3">
+        {pager()}
+      </div>
       <RevisionComparer />
     </div>
   );
@@ -86,8 +90,10 @@ function PageHistory(props) {
 const RenderPageHistoryWrapper = withUnstatedContainers(withLoadingSppiner(PageHistory), [PageHistroyContainer, RevisionComparerContainer]);
 
 PageHistory.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
   pageHistoryContainer: PropTypes.instanceOf(PageHistroyContainer).isRequired,
   revisionComparerContainer: PropTypes.instanceOf(RevisionComparerContainer).isRequired,
 };
 
-export default RenderPageHistoryWrapper;
+export default withTranslation()(RenderPageHistoryWrapper);

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

@@ -1,159 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { withTranslation } from 'react-i18next';
-import PageHistroyContainer from '../../services/PageHistoryContainer';
-
-import Revision from './Revision';
-import RevisionDiff from './RevisionDiff';
-import RevisionSelector from '../RevisionComparer/RevisionSelector';
-
-class PageRevisionList extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isCompactNodiffRevisions: true,
-    };
-
-    this.cbCompactizeChangeHandler = this.cbCompactizeChangeHandler.bind(this);
-  }
-
-  cbCompactizeChangeHandler() {
-    this.setState({ isCompactNodiffRevisions: !this.state.isCompactNodiffRevisions });
-  }
-
-  /**
-   * render a row (Revision component and RevisionDiff component)
-   * @param {Revison} revision
-   * @param {Revision} previousRevision
-   * @param {boolean} hasDiff whether revision has difference to previousRevision
-   * @param {boolean} isContiguousNodiff true if the current 'hasDiff' and one of previous row is both false
-   */
-  renderRow(revision, previousRevision, hasDiff, isContiguousNodiff) {
-    const { latestRevision } = this.props.pageHistoryContainer.state;
-    const revisionId = revision._id;
-    const revisionDiffOpened = this.props.diffOpened[revisionId] || false;
-
-    const classNames = ['revision-history-outer', 'row', 'no-gutters'];
-    if (isContiguousNodiff) {
-      classNames.push('revision-history-outer-contiguous-nodiff');
-    }
-
-    return (
-      <div className={classNames.join(' ')} key={`revision-history-${revisionId}`}>
-        <div className="col-8" key={`revision-history-top-${revisionId}`}>
-          <Revision
-            t={this.props.t}
-            revision={revision}
-            isLatestRevision={revision === latestRevision}
-            revisionDiffOpened={revisionDiffOpened}
-            hasDiff={hasDiff}
-            isCompactNodiffRevisions={this.state.isCompactNodiffRevisions}
-            onDiffOpenClicked={this.props.onDiffOpenClicked}
-            key={`revision-history-rev-${revisionId}`}
-          />
-        </div>
-        <div className="col-4 align-self-center">
-          <RevisionSelector
-            revision={revision}
-            hasDiff={hasDiff}
-            key={`revision-compare-target-selector-${revisionId}`}
-          />
-        </div>
-        { hasDiff
-          && (
-          <RevisionDiff
-            revisionDiffOpened={revisionDiffOpened}
-            currentRevision={revision}
-            previousRevision={previousRevision}
-            key={`revision-deff-${revisionId}`}
-          />
-          )
-        }
-      </div>
-    );
-  }
-
-  render() {
-    const { t, pageHistoryContainer } = this.props;
-
-    const revisions = this.props.revisions;
-    const revisionCount = this.props.revisions.length;
-
-    let hasDiffPrev;
-
-    const revisionList = this.props.revisions.map((revision, idx) => {
-      // Returns null because the last revision is for the bottom diff display
-      if (idx === pageHistoryContainer.state.pagingLimit) {
-        return null;
-      }
-
-      let previousRevision;
-      if (idx + 1 < revisionCount) {
-        previousRevision = revisions[idx + 1];
-      }
-      else {
-        previousRevision = revision; // if it is the first revision, show full text as diff text
-      }
-
-      const hasDiff = revision.hasDiffToPrev !== false; // set 'true' if undefined for backward compatibility
-      const isContiguousNodiff = !hasDiff && !hasDiffPrev;
-
-      hasDiffPrev = hasDiff;
-
-      return this.renderRow(revision, previousRevision, hasDiff, isContiguousNodiff);
-    });
-
-    const classNames = ['revision-history-list'];
-    if (this.state.isCompactNodiffRevisions) {
-      classNames.push('revision-history-list-compact');
-    }
-
-    return (
-      <React.Fragment>
-        <div className="d-flex">
-          <h3>{t('page_history.revision_list')}</h3>
-          <div className="custom-control custom-checkbox custom-checkbox-info ml-auto">
-            <input
-              type="checkbox"
-              id="cbCompactize"
-              className="custom-control-input"
-              checked={this.state.isCompactNodiffRevisions}
-              onChange={this.cbCompactizeChangeHandler}
-            />
-            <label className="custom-control-label" htmlFor="cbCompactize">{ t('Shrink versions that have no diffs') }</label>
-          </div>
-        </div>
-        <hr />
-        <div className={classNames.join(' ')}>
-          <div className="revision-history-list-container">
-            <div className="revision-history-list-content-header sticky-top bg-white">
-              <div className="row no-gutters">
-                <div className="col-8">{ t('page_history.revision') }</div>
-                <div className="col-2 text-center">{ t('page_history.comparing_source') }</div>
-                <div className="col-2 text-center">{ t('page_history.comparing_target') }</div>
-              </div>
-            </div>
-            <div className="revision-history-list-content-body">
-              {revisionList}
-            </div>
-          </div>
-        </div>
-      </React.Fragment>
-    );
-  }
-
-}
-
-PageRevisionList.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  pageHistoryContainer: PropTypes.instanceOf(PageHistroyContainer).isRequired,
-
-  revisions: PropTypes.array,
-  diffOpened: PropTypes.object,
-  onDiffOpenClicked: PropTypes.func.isRequired,
-};
-
-export default withTranslation()(PageRevisionList);

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

@@ -0,0 +1,155 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+import PageHistroyContainer from '../../services/PageHistoryContainer';
+import RevisionComparerContainer from '../../services/RevisionComparerContainer';
+
+import Revision from './Revision';
+
+class PageRevisionTable extends React.Component {
+
+  /**
+   * render a row (Revision component and RevisionDiff component)
+   * @param {Revison} revision
+   * @param {Revision} previousRevision
+   * @param {boolean} hasDiff whether revision has difference to previousRevision
+   * @param {boolean} isContiguousNodiff true if the current 'hasDiff' and one of previous row is both false
+   */
+  renderRow(revision, previousRevision, hasDiff, isContiguousNodiff) {
+    const { revisionComparerContainer, t } = this.props;
+    const { latestRevision } = this.props.pageHistoryContainer.state;
+    const revisionId = revision._id;
+    const revisionDiffOpened = this.props.diffOpened[revisionId] || false;
+    const { sourceRevision, targetRevision } = revisionComparerContainer.state;
+
+    const handleCompareLatestRevisionButton = () => {
+      revisionComparerContainer.setState({ sourceRevision: revision });
+      revisionComparerContainer.setState({ targetRevision: latestRevision });
+    };
+
+    const handleComparePreviousRevisionButton = () => {
+      revisionComparerContainer.setState({ sourceRevision: previousRevision });
+      revisionComparerContainer.setState({ targetRevision: revision });
+    };
+
+    return (
+      <tr className="d-flex" key={`revision-history-${revisionId}`}>
+        <td className="col" key={`revision-history-top-${revisionId}`}>
+          <div className="d-lg-flex">
+            <Revision
+              t={this.props.t}
+              revision={revision}
+              isLatestRevision={revision === latestRevision}
+              revisionDiffOpened={revisionDiffOpened}
+              hasDiff={hasDiff}
+              key={`revision-history-rev-${revisionId}`}
+            />
+            {hasDiff && (
+              <div className="ml-md-3 mt-auto">
+                <div className="btn-group">
+                  <button type="button" className="btn btn-outline-secondary btn-sm" onClick={handleCompareLatestRevisionButton}>
+                    {t('page_history.compare_latest')}
+                  </button>
+                  <button type="button" className="btn btn-outline-secondary btn-sm" onClick={handleComparePreviousRevisionButton}>
+                    {t('page_history.compare_previous')}
+                  </button>
+                </div>
+              </div>
+           )}
+          </div>
+        </td>
+        <td className="col-1">
+          {(hasDiff || revision._id === sourceRevision?._id) && (
+            <div className="custom-control custom-radio custom-control-inline mr-0">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id={`compareSource-${revision._id}`}
+                name="compareSource"
+                value={revision._id}
+                checked={revision._id === sourceRevision?._id}
+                onChange={() => revisionComparerContainer.setState({ sourceRevision: revision })}
+              />
+              <label className="custom-control-label" htmlFor={`compareSource-${revision._id}`} />
+            </div>
+          )}
+        </td>
+        <td className="col-2">
+          {(hasDiff || revision._id === targetRevision?._id) && (
+            <div className="custom-control custom-radio custom-control-inline mr-0">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id={`compareTarget-${revision._id}`}
+                name="compareTarget"
+                value={revision._id}
+                checked={revision._id === targetRevision?._id}
+                onChange={() => revisionComparerContainer.setState({ targetRevision: revision })}
+              />
+              <label className="custom-control-label" htmlFor={`compareTarget-${revision._id}`} />
+            </div>
+          )}
+        </td>
+      </tr>
+    );
+  }
+
+  render() {
+    const { t, pageHistoryContainer } = this.props;
+
+    const revisions = this.props.revisions;
+    const revisionCount = this.props.revisions.length;
+
+    let hasDiffPrev;
+
+    const revisionList = this.props.revisions.map((revision, idx) => {
+      // Returns null because the last revision is for the bottom diff display
+      if (idx === pageHistoryContainer.state.pagingLimit) {
+        return null;
+      }
+
+      let previousRevision;
+      if (idx + 1 < revisionCount) {
+        previousRevision = revisions[idx + 1];
+      }
+      else {
+        previousRevision = revision; // if it is the first revision, show full text as diff text
+      }
+
+      const hasDiff = revision.hasDiffToPrev !== false; // set 'true' if undefined for backward compatibility
+      const isContiguousNodiff = !hasDiff && !hasDiffPrev;
+
+      hasDiffPrev = hasDiff;
+
+      return this.renderRow(revision, previousRevision, hasDiff, isContiguousNodiff);
+    });
+
+    return (
+      <table className="table revision-history-table">
+        <thead>
+          <tr className="d-flex">
+            <th className="col">{ t('page_history.revision') }</th>
+            <th className="col-1">{ t('page_history.comparing_source') }</th>
+            <th className="col-2">{ t('page_history.comparing_target') }</th>
+          </tr>
+        </thead>
+        <tbody className="overflow-auto d-block">
+          {revisionList}
+        </tbody>
+      </table>
+    );
+  }
+
+}
+
+PageRevisionTable.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  pageHistoryContainer: PropTypes.instanceOf(PageHistroyContainer).isRequired,
+  revisionComparerContainer: PropTypes.instanceOf(RevisionComparerContainer).isRequired,
+
+  revisions: PropTypes.array,
+  diffOpened: PropTypes.object,
+};
+
+export default withTranslation()(PageRevisionTable);

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

@@ -7,20 +7,9 @@ import UserPicture from '../User/UserPicture';
 
 export default class Revision extends React.Component {
 
-  constructor(props) {
-    super(props);
-
-    this._onDiffOpenClicked = this._onDiffOpenClicked.bind(this);
-  }
-
   componentDidMount() {
   }
 
-  _onDiffOpenClicked(e) {
-    e.preventDefault();
-    this.props.onDiffOpenClicked(this.props.revision);
-  }
-
   renderSimplifiedNodiff(revision) {
     const { t } = this.props;
 
@@ -37,11 +26,9 @@ export default class Revision extends React.Component {
           {pic}
         </div>
         <div className="ml-3">
-          <div className="revision-history-meta">
-            <span className="text-muted small">
-              <UserDate dateTime={revision.createdAt} /> ({ t('No diff') })
-            </span>
-          </div>
+          <span className="text-muted small">
+            <UserDate dateTime={revision.createdAt} /> ({ t('No diff') })
+          </span>
         </div>
       </div>
     );
@@ -57,43 +44,22 @@ export default class Revision extends React.Component {
       pic = <UserPicture user={author} size="lg" />;
     }
 
-    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">
+      <div className="revision-history-main d-flex">
+        <div className="picture-container">
           {pic}
         </div>
         <div className="ml-2">
-          <div className="revision-history-author">
+          <div className="revision-history-author mb-1">
             <strong><Username user={author}></Username></strong>
-            { this.props.isLatestRevision
-              && (
-              <span className="badge badge-info ml-2">Latest</span>
-              )
-            }
+            {this.props.isLatestRevision && <span className="badge badge-info ml-2">Latest</span>}
           </div>
-          <div className="revision-history-meta">
-            <p>
-              <UserDate dateTime={revision.createdAt} />
-            </p>
-            <p>
-              <span className="d-inline-block" style={{ minWidth: '90px' }}>
-                { !this.props.hasDiff
-                  && <span className="text-muted">{ t('No diff') }</span>
-                }
-                { this.props.hasDiff
-                  && (
-                  // use dummy href attr (with 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="ml-2">
-                <i className="icon-login"></i> { t('Go to this version') }
-              </a>
-            </p>
+          <div className="mb-1">
+            <UserDate dateTime={revision.createdAt} />
+            <br className="d-xl-none d-block" />
+            <a className="ml-xl-3" href={`?revision=${revision._id}`}>
+              <i className="icon-login"></i> { t('Go to this version') }
+            </a>
           </div>
         </div>
       </div>
@@ -103,7 +69,7 @@ export default class Revision extends React.Component {
   render() {
     const revision = this.props.revision;
 
-    if (this.props.isCompactNodiffRevisions && !this.props.hasDiff) {
+    if (!this.props.hasDiff) {
       return this.renderSimplifiedNodiff(revision);
     }
 
@@ -119,6 +85,4 @@ Revision.propTypes = {
   isLatestRevision: PropTypes.bool.isRequired,
   revisionDiffOpened: PropTypes.bool.isRequired,
   hasDiff: PropTypes.bool.isRequired,
-  isCompactNodiffRevisions: PropTypes.bool.isRequired,
-  onDiffOpenClicked: PropTypes.func.isRequired,
 };

src/client/js/components/RevisionComparer/RevisionComparer.jsx

@@ -62,7 +62,6 @@ const RevisionComparer = (props) => {
               type="checkbox"
               className="custom-control-input"
               id="comparingWithLatest"
-              checked={revisionComparerContainer.state.compareWithLatest}
               onChange={() => revisionComparerContainer.toggleCompareWithLatest()}
             />
             <label className="custom-control-label" htmlFor="comparingWithLatest">

src/client/js/components/RevisionComparer/RevisionSelector.jsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { withUnstatedContainers } from '../UnstatedUtils';
-import { withLoadingSppiner } from '../SuspenseUtils';
-
-import RevisionComparerContainer from '../../services/RevisionComparerContainer';
-
-const RevisionSelector = (props) => {
-
-  const { revision, hasDiff, revisionComparerContainer } = props;
-  const { sourceRevision, targetRevision } = revisionComparerContainer.state;
-
-  if (!hasDiff) {
-    return <></>;
-  }
-
-  return (
-    <React.Fragment>
-      <div className="container-fluid px-0">
-        <div className="row no-gutters">
-          <div className="col text-center">
-            <div className="custom-control custom-radio custom-control-inline mr-0">
-              <input
-                type="radio"
-                className="custom-control-input"
-                id={`compareSource-${revision._id}`}
-                name="compareSource"
-                value={revision._id}
-                checked={revision._id === sourceRevision?._id}
-                onChange={() => revisionComparerContainer.setState({ sourceRevision: revision })}
-              />
-              <label className="custom-control-label" htmlFor={`compareSource-${revision._id}`} />
-            </div>
-          </div>
-          <div className="col text-center">
-            <div className="custom-control custom-radio custom-control-inline mr-0">
-              <input
-                type="radio"
-                className="custom-control-input"
-                id={`compareTarget-${revision._id}`}
-                name="compareTarget"
-                value={revision._id}
-                checked={revision._id === targetRevision?._id}
-                onChange={() => revisionComparerContainer.setState({ targetRevision: revision })}
-                disabled={revisionComparerContainer.state.compareWithLatest}
-              />
-              <label className="custom-control-label" htmlFor={`compareTarget-${revision._id}`} />
-            </div>
-          </div>
-        </div>
-      </div>
-    </React.Fragment>
-  );
-
-};
-
-const RevisionSelectorWrapper = withUnstatedContainers(withLoadingSppiner(RevisionSelector), [RevisionComparerContainer]);
-
-RevisionSelector.propTypes = {
-  revisionComparerContainer: PropTypes.instanceOf(RevisionComparerContainer).isRequired,
-
-  revision: PropTypes.object,
-  hasDiff: PropTypes.bool.isRequired,
-};
-
-export default RevisionSelectorWrapper;

src/client/js/services/PageHistoryContainer.js

@@ -33,7 +33,6 @@ export default class PageHistoryContainer extends Container {
     };
 
     this.retrieveRevisions = this.retrieveRevisions.bind(this);
-    this.onDiffOpenClicked = this.onDiffOpenClicked.bind(this);
     this.getPreviousRevision = this.getPreviousRevision.bind(this);
     this.fetchPageRevisionBody = this.fetchPageRevisionBody.bind(this);
   }
@@ -115,17 +114,6 @@ export default class PageHistoryContainer extends Container {
     return;
   }
 
-  onDiffOpenClicked(revision) {
-    const { diffOpened } = this.state;
-    const revisionId = revision._id;
-
-    diffOpened[revisionId] = !(diffOpened[revisionId]);
-    this.setState(diffOpened);
-
-    this.fetchPageRevisionBody(revision);
-    this.fetchPageRevisionBody(this.getPreviousRevision(revision));
-  }
-
   getPreviousRevision(currentRevision) {
     let cursor = null;
     for (const revision of this.state.revisions) {

src/client/js/services/RevisionComparerContainer.js

@@ -24,7 +24,6 @@ export default class RevisionComparerContainer extends Container {
       sourceRevision: null,
       targetRevision: null,
       latestRevision: null,
-      compareWithLatest: true,
     };
 
     this.initRevisions = this.initRevisions.bind(this);

src/client/styles/scss/_page-accessories-modal.scss

@@ -5,6 +5,10 @@
     }
   }
 
+  .modal-body {
+    padding: 25px 30px;
+  }
+
   .grw-modal-body-style {
     max-height: calc(100vh - 100px);
   }

src/client/styles/scss/_page-history.scss

@@ -1,73 +1,33 @@
-.revision-history {
-  .revision-history-list {
-    .revision-history-list-container {
-      min-height: 200px;
-      max-height: calc(100vh - 100px - 550px);
-      overflow: auto;
-    }
-
-    .revision-history-list-content-body {
-      .revision-history-outer {
-        // add border-top except of first element
-        &:not(:first-of-type) {
-          @extend .border-top;
-        }
-
-        .revision-history-main {
-          .picture-lg {
-            width: 32px;
-            height: 32px;
-          }
-
-          .revision-history-meta {
-            a:hover {
-              cursor: pointer;
-            }
-          }
-
-          .caret {
-            transition: 0.4s;
-            transform: rotate(-90deg);
-
-            &.caret-opened {
-              transform: rotate(0deg);
-            }
-          }
-        }
-
-        .revision-history-main-nodiff {
-          .picture-container {
-            min-width: 32px;
-            text-align: center; // centering .picture
-          }
-        }
-
-        .revision-history-diff {
-          padding-left: 40px;
-          color: $gray-900;
-          table-layout: fixed;
-        }
-      }
+.revision-history-table {
+  tbody {
+    max-height: 250px;
+  }
+}
 
-      li {
-        position: relative;
-        list-style: none;
-      }
-    }
+.revision-history-main {
+  img.picture-lg {
+    width: 32px;
+    height: 32px;
   }
+}
 
-  // compacted list
-  .revision-history-list-compact {
-    .revision-history-outer-contiguous-nodiff {
-      border-top: unset !important; // force unset border
-    }
+.revision-history-main-nodiff {
+  .picture-container {
+    min-width: 32px;
+    text-align: center; // centering .picture
   }
+}
+
+.revision-history-diff {
+  padding-left: 40px;
+  color: $gray-900;
+  table-layout: fixed;
+}
 
-  .revision-compare {
-    .revision-compare-outer {
-      min-height: 100px;
-      max-height: 250px;
-      overflow: auto;
-    }
+.revision-compare {
+  .revision-compare-outer {
+    min-height: 100px;
+    max-height: 250px;
+    overflow: auto;
   }
 }