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();
});
});
|