diff --git a/client/src/components/HistoryViewer/HistoryViewer.scss b/client/src/components/HistoryViewer/HistoryViewer.scss index becf19ea..fdcec8da 100644 --- a/client/src/components/HistoryViewer/HistoryViewer.scss +++ b/client/src/components/HistoryViewer/HistoryViewer.scss @@ -12,6 +12,11 @@ cursor: pointer; } +// In detail views, pulls the content (and content tabs) closer to the selected version table +.history-viewer__table--current { + margin-bottom: $panel-padding-y / 2; +} + // Used in conjunction with .panel--padded, removes top and bottom padding .panel--padded-side { padding-bottom: 0; @@ -38,12 +43,6 @@ } } -.history-viewer__table--compare { - margin-left: 0; - margin-right: 0; - min-width: 100%; -} - .history-viewer__version-detail--compare { margin-left: $panel-padding-x; margin-right: $panel-padding-x; @@ -133,37 +132,32 @@ } } -.history-viewer__heading { - .author-compare-toggle__container { - display: flex; - - .author-span { - align-self: flex-end; - } - - .compare-dropdown { - margin-left: auto; +// Don't let the actions column take up an equal portion of the calculated table width, +// and ensure that its height doesn't push out the heading +.table th.history-viewer-heading__toggle { + width: 1%; + padding-top: 0; + padding-bottom: 0; + vertical-align: middle; + text-align: right; +} - button { - &::before { - margin-right: 0; - } - } +// Labels are capitalised by default +.history-viewer-heading__toggle-dropdown .form-check-label { + text-transform: none; +} - &.show { - .dropdown-menu { - min-width: 14rem; - } - } +.history-viewer-heading__toggle-dropdown { + .btn[class*=font-icon-]:before { + margin-right: 0; + } - .form-check { - margin-top: .5rem; - } - } + &.show .dropdown-menu { + min-width: 14rem; + } - .form-check-label { - text-transform: none; - } + .form-check { + margin-top: .5rem; } } diff --git a/client/src/components/HistoryViewer/HistoryViewerHeading.js b/client/src/components/HistoryViewer/HistoryViewerHeading.js index 86b41a2e..b3ad33a7 100644 --- a/client/src/components/HistoryViewer/HistoryViewerHeading.js +++ b/client/src/components/HistoryViewer/HistoryViewerHeading.js @@ -39,14 +39,12 @@ class HistoryViewerHeading extends Component { # {i18n._t('HistoryViewer.Record', 'Record')} - - {i18n._t('HistoryViewer.Author', 'Author')} - - + {i18n._t('HistoryViewer.Author', 'Author')} + @@ -54,7 +52,7 @@ class HistoryViewerHeading extends Component { diff --git a/client/src/components/HistoryViewer/HistoryViewerVersionDetail.js b/client/src/components/HistoryViewer/HistoryViewerVersionDetail.js index e9df6703..f95ec1e7 100644 --- a/client/src/components/HistoryViewer/HistoryViewerVersionDetail.js +++ b/client/src/components/HistoryViewer/HistoryViewerVersionDetail.js @@ -122,17 +122,28 @@ class HistoryViewerVersionDetail extends PureComponent { render() { const { ListComponent, schemaUrl, CompareWarningComponent } = this.props; - const containerClasses = this.isPreviewable() ? 'panel panel--padded panel--padded-side panel--scrollable' : ''; - - const extraListClasses = classnames({ 'history-viewer__table--compare': this.isCompareMode() }, 'history-viewer__table--current'); - const formClasses = classnames({ 'history-viewer__version-detail--compare': this.isCompareMode() }, 'history-viewer__version-detail'); + const containerClasses = [ + 'flexbox-area-grow', + 'panel', + 'panel--scrollable', + 'panel--padded', + 'panel--padded-side', + ]; + const extraListClasses = { + 'history-viewer__table--current': true, + 'history-viewer__table--compare': this.isCompareMode(), + }; + const formClasses = { + 'history-viewer__version-detail': true, + 'history-viewer__version-detail--compare': this.isCompareMode(), + }; return (
-
+
diff --git a/client/src/components/HistoryViewer/tests/HistoryViewerHeading-test.js b/client/src/components/HistoryViewer/tests/HistoryViewerHeading-test.js index 1e6b549c..782131a8 100644 --- a/client/src/components/HistoryViewer/tests/HistoryViewerHeading-test.js +++ b/client/src/components/HistoryViewer/tests/HistoryViewerHeading-test.js @@ -24,7 +24,7 @@ describe('HistoryViewerHeading', () => { ); it('should dispatch an action to disable the compare mode', () => { - wrapper.find('.compare-mode__checkbox').at(0).simulate('change'); + wrapper.find('.history-viewer-heading__compare-mode-checkbox').at(0).simulate('change'); expect(mockOnCompareModeUnselect).toHaveBeenCalled(); }); }); @@ -39,7 +39,7 @@ describe('HistoryViewerHeading', () => { ); it('should dispatch an action to enable the compare mode', () => { - wrapper.find('.compare-mode__checkbox').at(0).simulate('change'); + wrapper.find('.history-viewer-heading__compare-mode-checkbox').at(0).simulate('change'); expect(mockOnCompareModeSelect).toHaveBeenCalled(); }); });