From e2330bd222a7085807201ac93622fcc74286454f Mon Sep 17 00:00:00 2001 From: Onurcankaratay Date: Thu, 5 Sep 2024 15:53:46 +0300 Subject: [PATCH] bs5 text align upgrades --- .../components/CustomColumnController.js | 4 +-- .../components/FacetList/FacetTermsList.js | 6 ++-- .../browse/components/FacetList/RangeFacet.js | 4 +-- .../components/SelectedItemsController.js | 6 ++-- .../browse/components/SortController.js | 24 +++++++++------- .../browse/components/StackedBlockTable.js | 10 +++---- .../AboveSearchViewTableControls.js | 4 +-- .../RightButtonsSection.js | 6 ++-- .../components/table-commons/HeadersRow.js | 2 +- .../table-commons/basicColumnExtensionMap.js | 9 +++--- es/components/forms/SubmissionView.js | 4 +-- es/components/forms/components/Checkbox.js | 2 +- .../forms/components/DragAndDropUpload.js | 4 +-- .../forms/components/EditableField.js | 6 ++-- .../forms/components/LinkToDropdown.js | 4 +-- .../forms/components/SearchAsYouTypeAjax.js | 2 +- .../forms/components/submission-fields.js | 6 ++-- es/components/static-pages/TableOfContents.js | 14 ++++++---- es/components/ui/Alerts.js | 4 +-- es/components/ui/ItemDetailList.js | 20 +++++++------ scss/editable-fields.scss | 4 +-- scss/stacked-block-table.scss | 6 ++-- .../components/CustomColumnController.js | 4 +-- .../components/FacetList/FacetTermsList.js | 6 ++-- .../browse/components/FacetList/RangeFacet.js | 4 +-- .../components/SelectedItemsController.js | 6 ++-- .../browse/components/SortController.js | 26 +++++++++-------- .../browse/components/StackedBlockTable.js | 10 +++---- .../AboveSearchViewTableControls.js | 4 +-- .../RightButtonsSection.js | 6 ++-- .../components/table-commons/HeadersRow.js | 2 +- .../table-commons/basicColumnExtensionMap.js | 10 +++---- src/components/forms/SubmissionView.js | 4 +-- src/components/forms/components/Checkbox.js | 2 +- .../forms/components/DragAndDropUpload.js | 4 +-- .../forms/components/EditableField.js | 6 ++-- .../forms/components/LinkToDropdown.js | 4 +-- .../forms/components/SearchAsYouTypeAjax.js | 2 +- .../forms/components/submission-fields.js | 6 ++-- .../static-pages/TableOfContents.js | 12 ++++---- src/components/ui/Alerts.js | 3 +- src/components/ui/ItemDetailList.js | 28 +++++++++++-------- 42 files changed, 158 insertions(+), 142 deletions(-) diff --git a/es/components/browse/components/CustomColumnController.js b/es/components/browse/components/CustomColumnController.js index f455aab4..605a7fdf 100644 --- a/es/components/browse/components/CustomColumnController.js +++ b/es/components/browse/components/CustomColumnController.js @@ -257,9 +257,9 @@ var ColumnOption = /*#__PURE__*/React.memo(function (props) { var showDescription = description; if (sameTitleColExists) { if (!description) { - showDescription = '' + field + ''; + showDescription = '' + field + ''; } else { - showDescription += '
' + field + ''; + showDescription += '
' + field + ''; } } return /*#__PURE__*/React.createElement("div", { diff --git a/es/components/browse/components/FacetList/FacetTermsList.js b/es/components/browse/components/FacetList/FacetTermsList.js index 059bbc4d..c4e0f5e0 100644 --- a/es/components/browse/components/FacetList/FacetTermsList.js +++ b/es/components/browse/components/FacetList/FacetTermsList.js @@ -250,7 +250,7 @@ export var Term = /*#__PURE__*/function (_React$PureComponent) { return subTermComponents; } return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", { - className: "facet-list-element" + statusClassName + (groupingTermKey && !facetSearchActive ? " pl-3" : ""), + className: "facet-list-element" + statusClassName + (groupingTermKey && !facetSearchActive ? " ps-3" : ""), key: term.key, "data-key": term.key, "data-is-grouping": isGroupingTerm, @@ -733,7 +733,7 @@ var ListOfTerms = /*#__PURE__*/React.memo(function (props) { var facetSearch = null; if (searchType === 'basic') { facetSearch = /*#__PURE__*/React.createElement("div", { - className: "text-small p-2" + className: "fs-6 p-2" }, /*#__PURE__*/React.createElement("input", { className: "form-control", autoComplete: "off", @@ -750,7 +750,7 @@ var ListOfTerms = /*#__PURE__*/React.memo(function (props) { itemType = typeof itemType === 'string' && itemType.length > 0 ? itemType : 'Item'; var baseHref = "/search/?type=" + itemType; facetSearch = /*#__PURE__*/React.createElement("div", { - className: "d-flex flex-wrap text-small p-2" + className: "d-flex flex-wrap fs-6 p-2" }, /*#__PURE__*/React.createElement(SearchAsYouTypeAjax, { baseHref: baseHref, showTips: true, diff --git a/es/components/browse/components/FacetList/RangeFacet.js b/es/components/browse/components/FacetList/RangeFacet.js index 723ddee1..9d4016d7 100644 --- a/es/components/browse/components/FacetList/RangeFacet.js +++ b/es/components/browse/components/FacetList/RangeFacet.js @@ -473,7 +473,7 @@ export var RangeFacet = /*#__PURE__*/function (_React$PureComponent) { }, /*#__PURE__*/React.createElement("div", { className: "range-drop col-12 col-sm-6" }, /*#__PURE__*/React.createElement("label", { - className: "mb-0 small mr-07" + className: "mb-0 small me-07" }, "From:"), /*#__PURE__*/React.createElement(RangeDropdown, { title: fromTitle, value: fromVal, @@ -490,7 +490,7 @@ export var RangeFacet = /*#__PURE__*/function (_React$PureComponent) { })), /*#__PURE__*/React.createElement("div", { className: "range-drop col-12 col-sm-6" }, /*#__PURE__*/React.createElement("label", { - className: "mb-0 small ml-05 mr-07" + className: "mb-0 small ms-05 me-07" }, "To:"), /*#__PURE__*/React.createElement(RangeDropdown, { title: toTitle, value: toVal, diff --git a/es/components/browse/components/SelectedItemsController.js b/es/components/browse/components/SelectedItemsController.js index 65457abb..e781b16f 100644 --- a/es/components/browse/components/SelectedItemsController.js +++ b/es/components/browse/components/SelectedItemsController.js @@ -242,7 +242,7 @@ export var SelectionItemCheckbox = /*#__PURE__*/React.memo(function (props) { type: "checkbox", checked: isChecked, onChange: onChange, - className: "mr-2" + className: "me-2" }); }); @@ -321,7 +321,7 @@ export var SelectStickyFooter = /*#__PURE__*/React.memo(function (props) { className: "icon icon-fw fas icon-check" }), "\xA0 Apply"), /*#__PURE__*/React.createElement("button", { type: "button", - className: "btn btn-outline-warning ml-1", + className: "btn btn-outline-warning ms-1", onClick: onCancel, "data-tip": "Cancel selection and close window" }, /*#__PURE__*/React.createElement("i", { @@ -347,7 +347,7 @@ export var BackNavigationStickyFooter = /*#__PURE__*/React.memo(function (props) className: "col-12 col-md-auto" }, /*#__PURE__*/React.createElement("button", { type: "button", - className: "btn btn-outline-warning ml-1", + className: "btn btn-outline-warning ms-1", onClick: onBackButtonClick, "data-tip": tooltip || '' }, /*#__PURE__*/React.createElement("i", { diff --git a/es/components/browse/components/SortController.js b/es/components/browse/components/SortController.js index 1f7b2182..94c4c202 100644 --- a/es/components/browse/components/SortController.js +++ b/es/components/browse/components/SortController.js @@ -352,7 +352,7 @@ var MultiColumnSortOption = /*#__PURE__*/React.memo(function (props) { title = foundSortDefinition.title; } else { title = /*#__PURE__*/React.createElement("span", { - className: "text-monospace small" + className: "font-monospace small" }, useCol); } } @@ -377,7 +377,7 @@ var MultiColumnSortOption = /*#__PURE__*/React.memo(function (props) { }, /*#__PURE__*/React.createElement(DropdownButton, { title: title, size: size, - variant: (variant ? variant + " " : "") + "btn-block text-left", + variant: (variant ? variant + " " : "") + "w-100 text-start", onSelect: handleSortColumnSelection }, allSortFields.map(function (col, idx) { var field = col.field, @@ -391,10 +391,10 @@ var MultiColumnSortOption = /*#__PURE__*/React.memo(function (props) { disabled: !!noSort }, title) : null; }))), /*#__PURE__*/React.createElement("div", { - className: "col-3 pl-0" + className: "col-3 ps-0" }, /*#__PURE__*/React.createElement(DropdownButton, { title: sortOrderTitle, - variant: (variant ? variant + " " : "") + "btn-block text-left", + variant: (variant ? variant + " " : "") + "w-100 text-start", size: size, onSelect: handleSortOrderSelection }, /*#__PURE__*/React.createElement(DropdownItem, { @@ -404,20 +404,24 @@ var MultiColumnSortOption = /*#__PURE__*/React.memo(function (props) { key: "sort-direction-desc", eventKey: index + "|desc" }, "Descending"))), /*#__PURE__*/React.createElement("div", { - className: "col-lg-1 col-2 pl-0" - }, !(rowCount - 1 === index) ? /*#__PURE__*/React.createElement("button", { + className: "col-lg-1 col-2 ps-0" + }, !(rowCount - 1 === index) ? /*#__PURE__*/React.createElement("div", { + className: "d-grid gap-1" + }, /*#__PURE__*/React.createElement("button", { type: "button", - className: "btn btn-".concat(variant, " btn-").concat(size, " btn-block"), + className: "btn btn-".concat(variant, " btn-").concat(size), onClick: onRemoveClick, "data-tip": "Remove sort column" }, /*#__PURE__*/React.createElement("i", { className: "icon icon-fw fas icon-minus w-100" - })) : /*#__PURE__*/React.createElement("button", { + }))) : /*#__PURE__*/React.createElement("div", { + className: "d-grid gap-1" + }, /*#__PURE__*/React.createElement("button", { type: "button", - className: "btn btn-primary btn-".concat(size, " btn-block"), + className: "btn btn-primary btn-".concat(size), onClick: handleSettingsApply, "data-tip": "Re-sort columns" }, /*#__PURE__*/React.createElement("i", { className: "icon icon-fw fas icon-check w-100" - })))); + }))))); }); \ No newline at end of file diff --git a/es/components/browse/components/StackedBlockTable.js b/es/components/browse/components/StackedBlockTable.js index 2562a49e..c932d481 100644 --- a/es/components/browse/components/StackedBlockTable.js +++ b/es/components/browse/components/StackedBlockTable.js @@ -127,7 +127,7 @@ export var StackedBlockListViewMoreButton = /*#__PURE__*/function (_React$PureCo return /*#__PURE__*/React.createElement("div", { className: "view-more-button" }, /*#__PURE__*/React.createElement("i", { - className: "icon fas icon-plus mr-1 ml-02 small" + className: "icon fas icon-plus me-1 ms-02 small" }), collapsibleChildrenLen + " More" + (title ? ' ' + title : ''), showMoreExtTitle ? /*#__PURE__*/React.createElement("span", { className: "ext text-400" }, " ", showMoreExtTitle) : null); @@ -138,7 +138,7 @@ export var StackedBlockListViewMoreButton = /*#__PURE__*/function (_React$PureCo className: cls, onClick: preventExpand ? null : handleCollapseToggle }, /*#__PURE__*/React.createElement("i", { - className: "mr-1 icon fas icon-" + (collapsed ? 'plus' : 'minus') + className: "me-1 icon fas icon-" + (collapsed ? 'plus' : 'minus') }), titleStr, showMoreExtTitle ? /*#__PURE__*/React.createElement("span", { className: "ext text-400" }, " ", showMoreExtTitle) : null); @@ -293,7 +293,7 @@ export var StackedBlockList = /*#__PURE__*/function (_React$PureComponent3) { className: "view-more-button clickable", onClick: this.handleIncrementalExpandClick.bind(this, nextCount) }, /*#__PURE__*/React.createElement("i", { - className: "mr-1 icon fas icon-" + (nextCount >= incrementalExpandVisibleCount ? "plus" : "minus") + className: "me-1 icon fas icon-" + (nextCount >= incrementalExpandVisibleCount ? "plus" : "minus") }), /*#__PURE__*/React.createElement("span", null, " ", titleStr, " ")); } else { viewMoreButton = /*#__PURE__*/React.createElement(StackedBlockListViewMoreButton, _extends({}, this.props, { @@ -555,12 +555,12 @@ _defineProperty(StackedBlockTable, "propTypes", { _defineProperty(StackedBlockTable, "defaultProps", { 'columnHeaders': [{ columnClass: 'biosample', - className: 'text-left', + className: 'text-start', title: 'Biosample', initialWidth: 115 }, { columnClass: 'experiment', - className: 'text-left', + className: 'text-start', title: 'Experiment', initialWidth: 145 }, { diff --git a/es/components/browse/components/above-table-controls/AboveSearchViewTableControls.js b/es/components/browse/components/above-table-controls/AboveSearchViewTableControls.js index 7dcdaa8e..a1d4ef91 100644 --- a/es/components/browse/components/above-table-controls/AboveSearchViewTableControls.js +++ b/es/components/browse/components/above-table-controls/AboveSearchViewTableControls.js @@ -34,11 +34,11 @@ export var AboveSearchViewTableControls = /*#__PURE__*/React.memo(function (prop }); if (addAction && typeof addAction.href === 'string') { addButton = /*#__PURE__*/React.createElement("a", { - className: "btn btn-primary btn-xs" + (total ? " ml-1" : ""), + className: "btn btn-primary btn-xs" + (total ? " ms-1" : ""), href: addAction.href, "data-skiprequest": "true" }, /*#__PURE__*/React.createElement("i", { - className: "icon icon-fw icon-plus fas mr-03 fas" + className: "icon icon-fw icon-plus fas me-03 fas" }), "Create New \xA0"); } } diff --git a/es/components/browse/components/above-table-controls/RightButtonsSection.js b/es/components/browse/components/above-table-controls/RightButtonsSection.js index d0fe71cd..182f32a9 100644 --- a/es/components/browse/components/above-table-controls/RightButtonsSection.js +++ b/es/components/browse/components/above-table-controls/RightButtonsSection.js @@ -59,7 +59,7 @@ export var ConfigureVisibleColumnsButton = /*#__PURE__*/React.memo(function (_re }, /*#__PURE__*/React.createElement("i", { className: "icon icon-fw icon-table fas" }), /*#__PURE__*/React.createElement("i", { - className: "icon icon-fw icon-angle-down ml-03 fas" + className: "icon icon-fw icon-angle-down ms-03 fas" })); }); export var MultiColumnSortButton = /*#__PURE__*/React.memo(function (_ref2) { @@ -78,7 +78,7 @@ export var MultiColumnSortButton = /*#__PURE__*/React.memo(function (_ref2) { }, /*#__PURE__*/React.createElement("i", { className: "icon icon-fw icon-sort fas" }), /*#__PURE__*/React.createElement("i", { - className: "icon icon-fw icon-angle-down ml-03 fas" + className: "icon icon-fw icon-angle-down ms-03 fas" })); }); @@ -121,7 +121,7 @@ export var ToggleLayoutButton = /*#__PURE__*/function (_React$PureComponent) { }, /*#__PURE__*/React.createElement("i", { className: "icon icon-fw fas icon-" + (!isFullscreen ? 'arrows-alt-h icon-expand' : 'compress') }), /*#__PURE__*/React.createElement("span", { - className: "ml-05 d-none d-xl-inline" + className: "ms-05 d-none d-xl-inline" }, !isFullscreen ? "Full Screen" : "Collapse Table Width")); } }]); diff --git a/es/components/browse/components/table-commons/HeadersRow.js b/es/components/browse/components/table-commons/HeadersRow.js index 080e6341..06ed4704 100644 --- a/es/components/browse/components/table-commons/HeadersRow.js +++ b/es/components/browse/components/table-commons/HeadersRow.js @@ -779,7 +779,7 @@ var SortOptionsMenu = /*#__PURE__*/React.memo(function (_ref16) { key: field, onClick: onClick }, title || field, !isActive ? null : /*#__PURE__*/React.createElement("i", { - className: "small icon fas ml-12 icon-arrow-".concat(descend ? "down" : "up") + className: "small icon fas ms-12 icon-arrow-".concat(descend ? "down" : "up") })); }); return /*#__PURE__*/React.createElement("div", { diff --git a/es/components/browse/components/table-commons/basicColumnExtensionMap.js b/es/components/browse/components/table-commons/basicColumnExtensionMap.js index b018a6d6..44f5bd77 100644 --- a/es/components/browse/components/table-commons/basicColumnExtensionMap.js +++ b/es/components/browse/components/table-commons/basicColumnExtensionMap.js @@ -72,7 +72,7 @@ export var basicColumnExtensionMap = { return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { className: "icon-container" }, /*#__PURE__*/React.createElement("i", { - className: "icon icon-fw fas icon-filter clickable mr-08", + className: "icon icon-fw fas icon-filter clickable me-08", onClick: function onClick(e) { // Preserve search query, if any, but remove filters (which are usually per-type). if (!href || href.indexOf('/search/') === -1) return; @@ -107,7 +107,7 @@ export var basicColumnExtensionMap = { date_created = _result$date_created === void 0 ? null : _result$date_created; if (!date_created) return null; return /*#__PURE__*/React.createElement("span", { - className: "value text-right" + className: "value text-end" }, /*#__PURE__*/React.createElement(LocalizedTime, { timestamp: date_created, formatType: "date-sm" @@ -130,7 +130,7 @@ export var basicColumnExtensionMap = { date_modified = _result$last_modified3 === void 0 ? null : _result$last_modified3; if (!date_modified) return null; return /*#__PURE__*/React.createElement("span", { - className: "value text-right" + className: "value text-end" }, /*#__PURE__*/React.createElement(LocalizedTime, { timestamp: date_modified, formatType: "date-sm" @@ -203,12 +203,13 @@ export var DisplayTitleColumnDefault = /*#__PURE__*/React.memo(function (props) link = "".concat(propLink, "#").concat(targetTabKey); } title = /*#__PURE__*/React.createElement("a", { + className: "link-underline link-underline-opacity-0 link-underline-opacity-100-hover", key: "title", href: link || '#', onClick: onClick }, title); } - var cls = "title-block text-truncate" + (shouldMonospace ? " text-monospace text-small" : "") + (className ? " " + className : ""); + var cls = "title-block text-truncate" + (shouldMonospace ? " font-monospace fs-6" : "") + (className ? " " + className : ""); return /*#__PURE__*/React.createElement("div", { key: "title-container", className: cls, diff --git a/es/components/forms/SubmissionView.js b/es/components/forms/SubmissionView.js index 3eac9d4e..f20d64be 100644 --- a/es/components/forms/SubmissionView.js +++ b/es/components/forms/SubmissionView.js @@ -1936,7 +1936,7 @@ var WarningBanner = /*#__PURE__*/React.memo(function (props) { }, "Please note: your work will be lost if you navigate away from, refresh or close this page while submitting. The submission process is under active development and features may change."), /*#__PURE__*/React.createElement("div", { className: "col-md-auto" }, /*#__PURE__*/React.createElement("div", { - className: "action-buttons-container text-right" + className: "action-buttons-container text-end" }, children)))); }); var DetailTitleBanner = /*#__PURE__*/function (_React$PureComponent2) { @@ -2237,7 +2237,7 @@ var AliasSelectModal = /*#__PURE__*/function (_TypeSelectModal) { 'fontSize': '1.2em' } }, creatingAliasMessage) : null, /*#__PURE__*/React.createElement("div", { - className: "text-right" + className: "text-end" }, /*#__PURE__*/React.createElement("button", { type: "button", className: "btn btn-primary", diff --git a/es/components/forms/components/Checkbox.js b/es/components/forms/components/Checkbox.js index da6e6d4e..dc10e152 100644 --- a/es/components/forms/components/Checkbox.js +++ b/es/components/forms/components/Checkbox.js @@ -13,7 +13,7 @@ export var Checkbox = /*#__PURE__*/React.memo(function (props) { labelClassName = _props$labelClassName === void 0 ? "mb-0" : _props$labelClassName, title = props.title, _props$inputClassName = props.inputClassName, - inputClassName = _props$inputClassName === void 0 ? "mr-08 align-middle" : _props$inputClassName, + inputClassName = _props$inputClassName === void 0 ? "me-08 align-middle" : _props$inputClassName, _props$indeterminate = props.indeterminate, indeterminate = _props$indeterminate === void 0 ? false : _props$indeterminate, passProps = _objectWithoutProperties(props, _excluded); diff --git a/es/components/forms/components/DragAndDropUpload.js b/es/components/forms/components/DragAndDropUpload.js index 83d6c0d5..58a679ab 100644 --- a/es/components/forms/components/DragAndDropUpload.js +++ b/es/components/forms/components/DragAndDropUpload.js @@ -669,7 +669,7 @@ function RequestVerification(props) { checked: isVerified, onChange: toggleVerification }), /*#__PURE__*/React.createElement("label", { - className: "d-inline ml-05", + className: "d-inline ms-05", htmlFor: "file-verification" }, requestVerificationMsg, " ")); } @@ -797,7 +797,7 @@ export var DragAndDropZone = /*#__PURE__*/function (_React$Component5) { alignSelf: "center" } }, files.length === 0 ? "Click or drag a file here to upload" : null), /*#__PURE__*/React.createElement("ul", { - className: "d-flex flex-wrap m-0 pt-1 pl-0 justify-content-center" + className: "d-flex flex-wrap m-0 pt-1 ps-0 justify-content-center" }, files.map(function (file) { return /*#__PURE__*/React.createElement("li", { key: file.download, diff --git a/es/components/forms/components/EditableField.js b/es/components/forms/components/EditableField.js index d7478f7d..3370fda5 100644 --- a/es/components/forms/components/EditableField.js +++ b/es/components/forms/components/EditableField.js @@ -630,7 +630,7 @@ export var EditableField = /*#__PURE__*/function (_React$Component) { return /*#__PURE__*/React.createElement("div", { className: "row editable-field-entry " + labelID }, /*#__PURE__*/React.createElement("div", { - className: "col col-md-3 text-left text-md-right" + className: "col col-md-3 text-start text-md-end" }, /*#__PURE__*/React.createElement("label", { htmlFor: labelID }, label)), this.renderSavedValue()); @@ -650,7 +650,7 @@ export var EditableField = /*#__PURE__*/function (_React$Component) { return /*#__PURE__*/React.createElement("div", { className: "row editable-field-entry " + labelID }, /*#__PURE__*/React.createElement("div", { - className: "col col-md-2 text-left text-md-right" + className: "col col-md-2 text-start text-md-end" }, /*#__PURE__*/React.createElement("label", { htmlFor: labelID }, label)), this.renderSavedValue()); @@ -751,7 +751,7 @@ export var EditableField = /*#__PURE__*/function (_React$Component) { return /*#__PURE__*/React.createElement("div", { className: outerBaseClass + labelID + ' row' }, /*#__PURE__*/React.createElement("div", { - className: "col col-md-3 text-left text-md-right" + className: "col col-md-3 text-start text-md-end" }, /*#__PURE__*/React.createElement("label", { htmlFor: labelID }, label)), /*#__PURE__*/React.createElement("div", { diff --git a/es/components/forms/components/LinkToDropdown.js b/es/components/forms/components/LinkToDropdown.js index 8f3e16a3..3282fa55 100644 --- a/es/components/forms/components/LinkToDropdown.js +++ b/es/components/forms/components/LinkToDropdown.js @@ -197,9 +197,9 @@ export var LinkToDropdown = /*#__PURE__*/function (_React$PureComponent) { }, display_title)), /*#__PURE__*/React.createElement("div", { className: "col-auto d-none d-md-inline-block" }, /*#__PURE__*/React.createElement("i", { - className: "icon icon-fw icon-link fas small mr-05" + className: "icon icon-fw icon-link fas small me-05" }), /*#__PURE__*/React.createElement("span", { - className: "text-monospace small" + className: "font-monospace small" }, itemID)))); }); } diff --git a/es/components/forms/components/SearchAsYouTypeAjax.js b/es/components/forms/components/SearchAsYouTypeAjax.js index 8fb206b3..1d697062 100644 --- a/es/components/forms/components/SearchAsYouTypeAjax.js +++ b/es/components/forms/components/SearchAsYouTypeAjax.js @@ -735,7 +735,7 @@ export var LinkedObj = /*#__PURE__*/function (_React$PureComponent2) { target: "_blank", rel: "noopener noreferrer" }, thisDisplay), /*#__PURE__*/React.createElement("i", { - className: "icon icon-fw icon-external-link-alt ml-05 fas" + className: "icon icon-fw icon-external-link-alt ms-05 fas" })); } else { return /*#__PURE__*/React.createElement("div", { diff --git a/es/components/forms/components/submission-fields.js b/es/components/forms/components/submission-fields.js index 61cc7138..4d9ccf83 100644 --- a/es/components/forms/components/submission-fields.js +++ b/es/components/forms/components/submission-fields.js @@ -151,7 +151,7 @@ export var BuildField = /*#__PURE__*/function (_React$PureComponent) { inputMode: "latin", rows: 8, wrap: "off", - className: "form-control text-small mb-08 mt-08", + className: "form-control fs-6 mb-08 mt-08", style: { 'fontFamily': "Source Code Pro, monospace", 'fontSize': 'small' @@ -419,7 +419,7 @@ export var BuildField = /*#__PURE__*/function (_React$PureComponent) { }, /*#__PURE__*/React.createElement("h5", { className: "submission-field-title text-truncate" }, this.labelTypeDescriptor(), fieldTip ? /*#__PURE__*/React.createElement(InfoIcon, { - className: "mr-07", + className: "me-07", title: title, fieldType: fieldType, schema: schema @@ -1385,7 +1385,7 @@ export var AliasInputField = /*#__PURE__*/function (_React$Component4) { onChange: this.onAliasSecondPartChange, className: "form-control" + (errorMessage ? " is-invalid" : isValid ? " is-valid" : "") })), showErrorMsg && errorMessage ? /*#__PURE__*/React.createElement("div", { - className: "invalid-feedback d-block text-right" + className: "invalid-feedback d-block text-end" }, errorMessage) : null); } }], [{ diff --git a/es/components/static-pages/TableOfContents.js b/es/components/static-pages/TableOfContents.js index a72f7579..b29dcdf7 100644 --- a/es/components/static-pages/TableOfContents.js +++ b/es/components/static-pages/TableOfContents.js @@ -188,7 +188,7 @@ var TableEntry = /*#__PURE__*/function (_React$Component) { title = /*#__PURE__*/React.createElement("div", { className: "title-link-wrapper" }, collapsibleButton, /*#__PURE__*/React.createElement("a", { - className: depth === 0 ? 'text-500' : 'text-400', + className: "link-underline link-underline-opacity-0 ", href: (link.charAt(0) === '/' ? '' : '#') + link, onClick: function onClick(e) { e.preventDefault(); @@ -514,13 +514,13 @@ export var TableOfContents = /*#__PURE__*/function (_React$Component3) { key: "parent-link", className: "col col-xs-" + (windowInnerWidth && windowInnerWidth >= 1600 ? '9' : '12') }, /*#__PURE__*/React.createElement("a", { - className: "text-500", + className: "link-underline link-underline-opacity-0", href: context.parent['@id'] }, context.parent['display_title']))); if (windowInnerWidth && windowInnerWidth >= 1600) { cols.push( /*#__PURE__*/React.createElement("div", { key: "expand-btn", - className: "col col-xs-3 text-right expand-button-container" + className: "col col-xs-3 text-end expand-button-container" }, /*#__PURE__*/React.createElement("button", { type: "button", className: "btn btn-xs btn-outline-dark", @@ -836,7 +836,7 @@ export var NextPreviousPageSection = /*#__PURE__*/React.memo(function (props) { }, /*#__PURE__*/React.createElement("div", { className: "row" }, previous ? /*#__PURE__*/React.createElement("div", { - className: "previous-section text-right col-" + colSize + className: "previous-section text-end col-" + colSize }, /*#__PURE__*/React.createElement("h6", { className: "text-400 mb-02 mt-12" }, /*#__PURE__*/React.createElement("i", { @@ -844,7 +844,8 @@ export var NextPreviousPageSection = /*#__PURE__*/React.memo(function (props) { }), " ", previousTitle), /*#__PURE__*/React.createElement("h6", { className: "text-500 mt-0" }, /*#__PURE__*/React.createElement("a", { - href: previous['@id'] || '/' + (previous.name || previous.identifier) + href: previous['@id'] || '/' + (previous.name || previous.identifier), + className: "link-underline link-underline-opacity-0 link-underline-opacity-100-hover" }, previous.display_title))) : null, next ? /*#__PURE__*/React.createElement("div", { className: "next-section col-" + colSize }, /*#__PURE__*/React.createElement("h6", { @@ -854,7 +855,8 @@ export var NextPreviousPageSection = /*#__PURE__*/React.memo(function (props) { })), /*#__PURE__*/React.createElement("h6", { className: "text-500 mt-0" }, /*#__PURE__*/React.createElement("a", { - href: next['@id'] || '/' + (next.name || previous.identifier) + href: next['@id'] || '/' + (next.name || previous.identifier), + className: "link-underline link-underline-opacity-0 link-underline-opacity-100-hover" }, next.display_title))) : null)); }); diff --git a/es/components/ui/Alerts.js b/es/components/ui/Alerts.js index 66e2ecd2..56dff5bc 100644 --- a/es/components/ui/Alerts.js +++ b/es/components/ui/Alerts.js @@ -353,11 +353,9 @@ var AlertItem = /*#__PURE__*/function (_React$PureComponent) { className: "alert alert-dismissable alert-" + (bsStyle || 'danger') + (noCloseButton === true ? ' no-close-button' : '') }, noCloseButton !== true ? /*#__PURE__*/React.createElement("button", { type: "button", - className: "close", + className: "btn-close float-end", onClick: this.dismiss }, /*#__PURE__*/React.createElement("span", { - "aria-hidden": "true" - }, "\xD7"), /*#__PURE__*/React.createElement("span", { className: "sr-only" }, "Close alert")) : null, /*#__PURE__*/React.createElement("h4", { className: "alert-heading mt-0" + (hasMessage ? " mb-05" : " mb-0") diff --git a/es/components/ui/ItemDetailList.js b/es/components/ui/ItemDetailList.js index bf8346cf..fcd31dab 100644 --- a/es/components/ui/ItemDetailList.js +++ b/es/components/ui/ItemDetailList.js @@ -243,7 +243,7 @@ var SubItemTable = /*#__PURE__*/function (_React$Component) { style: { whiteSpace: "nowrap" }, - className: "text-left child-list-row", + className: "text-start child-list-row", key: colKey + '--row-' + i }, /*#__PURE__*/React.createElement("div", { className: "d-inline-block child-list-row-number" @@ -419,7 +419,7 @@ var SubItemTable = /*#__PURE__*/function (_React$Component) { }); if (renderAsList) { val = /*#__PURE__*/React.createElement("ol", null, val); - className += ' text-left'; + className += ' text-start'; } } return /*#__PURE__*/React.createElement("td", { @@ -1167,25 +1167,29 @@ var ToggleJSONButton = /*#__PURE__*/React.memo(function (_ref3) { var onClick = _ref3.onClick, showingJSON = _ref3.showingJSON, className = _ref3.className; - return /*#__PURE__*/React.createElement("button", { + return /*#__PURE__*/React.createElement("div", { + className: "d-grid gap-1" + }, /*#__PURE__*/React.createElement("button", { type: "button", - className: "btn btn-block btn-outline-secondary", + className: "btn btn-outline-secondary", onClick: onClick }, showingJSON ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", { className: "icon fas icon-fw icon-list" }), " View as List") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", { className: "icon fas icon-fw icon-code" - }), " View as JSON")); + }), " View as JSON"))); }); var SeeMoreRowsButton = /*#__PURE__*/React.memo(function (_ref4) { var onClick = _ref4.onClick, collapsed = _ref4.collapsed, className = _ref4.className; - return /*#__PURE__*/React.createElement("button", { + return /*#__PURE__*/React.createElement("div", { + className: "d-grid gap-1" + }, /*#__PURE__*/React.createElement("button", { type: "button", - className: "btn btn-block btn-outline-secondary", + className: "btn btn-outline-secondary", onClick: onClick - }, collapsed ? "See advanced information" : "Hide"); + }, collapsed ? "See advanced information" : "Hide")); }); /** diff --git a/scss/editable-fields.scss b/scss/editable-fields.scss index 3e81819c..cdf84a64 100644 --- a/scss/editable-fields.scss +++ b/scss/editable-fields.scss @@ -39,7 +39,7 @@ div.fieldset.editable-fields { // large text inputBorder .input-lg { - @include font-size(1.42rem, true); + @include font-size(1.42rem); font-weight: normal; height: 36px !important; line-height: 30px !important; @@ -48,7 +48,7 @@ div.fieldset.editable-fields { // medium text inputBorder .input-md { - @include font-size(1.21rem, true); + @include font-size(1.21rem); font-weight: normal; height: 28px !important; line-height: 22px !important; diff --git a/scss/stacked-block-table.scss b/scss/stacked-block-table.scss index 51b46726..60da02d9 100644 --- a/scss/stacked-block-table.scss +++ b/scss/stacked-block-table.scss @@ -93,11 +93,11 @@ $font-family-sans-serif : sans-serif !default; border-top-color: #ccc; } - &.text-left { + &.text-start { text-align: left; padding-left: 0; } - &.text-right { + &.text-end { text-align: right; padding-right: 0; } @@ -181,7 +181,7 @@ $font-family-sans-serif : sans-serif !default; justify-content: center; .mono-text, - .text-monospace { + .font-monospace { font-size: 0.85rem; } diff --git a/src/components/browse/components/CustomColumnController.js b/src/components/browse/components/CustomColumnController.js index e89e27d2..751a1125 100644 --- a/src/components/browse/components/CustomColumnController.js +++ b/src/components/browse/components/CustomColumnController.js @@ -195,9 +195,9 @@ const ColumnOption = React.memo(function ColumnOption(props){ if (sameTitleColExists){ if (!description){ - showDescription = '' + field + ''; + showDescription = '' + field + ''; } else { - showDescription += '
' + field + ''; + showDescription += '
' + field + ''; } } diff --git a/src/components/browse/components/FacetList/FacetTermsList.js b/src/components/browse/components/FacetList/FacetTermsList.js index 1957126d..8baacf41 100644 --- a/src/components/browse/components/FacetList/FacetTermsList.js +++ b/src/components/browse/components/FacetList/FacetTermsList.js @@ -208,7 +208,7 @@ export class Term extends React.PureComponent { } return ( -
  • @@ -526,7 +526,7 @@ const ListOfTerms = React.memo(function ListOfTerms(props){ let facetSearch = null; if (searchType === 'basic') { facetSearch = ( -
    +
    ); @@ -535,7 +535,7 @@ const ListOfTerms = React.memo(function ListOfTerms(props){ itemType = typeof itemType === 'string' && (itemType.length > 0) ? itemType : 'Item'; const baseHref = "/search/?type=" + itemType; facetSearch = ( -
    +
    ); diff --git a/src/components/browse/components/FacetList/RangeFacet.js b/src/components/browse/components/FacetList/RangeFacet.js index e30b8c65..72c133b2 100644 --- a/src/components/browse/components/FacetList/RangeFacet.js +++ b/src/components/browse/components/FacetList/RangeFacet.js @@ -501,7 +501,7 @@ export class RangeFacet extends React.PureComponent { collapsible={[
    -
    -
    diff --git a/src/components/browse/components/SortController.js b/src/components/browse/components/SortController.js index 69fc6533..826eea78 100644 --- a/src/components/browse/components/SortController.js +++ b/src/components/browse/components/SortController.js @@ -265,7 +265,7 @@ const MultiColumnSortOption = React.memo(function MultiColumnSortOption(props){ // eslint-disable-next-line prefer-destructuring title = foundSortDefinition.title; } else { - title = { useCol }; + title = { useCol }; } } @@ -284,7 +284,7 @@ const MultiColumnSortOption = React.memo(function MultiColumnSortOption(props){ return (
    - { allSortFields.map(function (col, idx) { @@ -300,21 +300,25 @@ const MultiColumnSortOption = React.memo(function MultiColumnSortOption(props){ }
    -
    - + Ascending Descending
    -
    +
    {!isLastRow ? - : - } +
    + +
    : +
    + +
    }
    ); diff --git a/src/components/browse/components/StackedBlockTable.js b/src/components/browse/components/StackedBlockTable.js index ea68ee36..4df8b9d7 100644 --- a/src/components/browse/components/StackedBlockTable.js +++ b/src/components/browse/components/StackedBlockTable.js @@ -105,7 +105,7 @@ export class StackedBlockListViewMoreButton extends React.PureComponent { // Show information label instead of button. return (
    - + { collapsibleChildrenLen + " More" + (title ? ' ' + title : '') } { showMoreExtTitle ? { showMoreExtTitle } : null }
    @@ -121,7 +121,7 @@ export class StackedBlockListViewMoreButton extends React.PureComponent { return (
    - + { titleStr } { showMoreExtTitle ? { showMoreExtTitle } : null }
    @@ -244,7 +244,7 @@ export class StackedBlockList extends React.PureComponent { } viewMoreButton = (
    - = incrementalExpandVisibleCount ? "plus" : "minus")} /> + = incrementalExpandVisibleCount ? "plus" : "minus")} /> { {titleStr} }
    ); } else { @@ -411,8 +411,8 @@ export class StackedBlockTable extends React.PureComponent { static defaultProps = { 'columnHeaders' : [ - { columnClass: 'biosample', className: 'text-left', title: 'Biosample', initialWidth: 115 }, - { columnClass: 'experiment', className: 'text-left', title: 'Experiment', initialWidth: 145 }, + { columnClass: 'biosample', className: 'text-start', title: 'Biosample', initialWidth: 115 }, + { columnClass: 'experiment', className: 'text-start', title: 'Experiment', initialWidth: 145 }, { columnClass: 'file-group', title: 'File Group', initialWidth: 40, visibleTitle : }, { columnClass: 'file', title: 'File', initialWidth: 125 } ], diff --git a/src/components/browse/components/above-table-controls/AboveSearchViewTableControls.js b/src/components/browse/components/above-table-controls/AboveSearchViewTableControls.js index ee4b0185..78d6558f 100644 --- a/src/components/browse/components/above-table-controls/AboveSearchViewTableControls.js +++ b/src/components/browse/components/above-table-controls/AboveSearchViewTableControls.js @@ -27,8 +27,8 @@ export const AboveSearchViewTableControls = React.memo(function AboveSearchViewT const addAction = _.findWhere(context.actions, { 'name' : 'add' }); if (addAction && typeof addAction.href === 'string'){ addButton = ( -     - + + Create New   diff --git a/src/components/browse/components/above-table-controls/RightButtonsSection.js b/src/components/browse/components/above-table-controls/RightButtonsSection.js index 884df77f..ed7f6038 100644 --- a/src/components/browse/components/above-table-controls/RightButtonsSection.js +++ b/src/components/browse/components/above-table-controls/RightButtonsSection.js @@ -24,7 +24,7 @@ export const ConfigureVisibleColumnsButton = React.memo(function ConfigureVisibl ); }); @@ -34,7 +34,7 @@ export const MultiColumnSortButton = React.memo(function MultiColumnSortButton({ ); }); @@ -64,7 +64,7 @@ export class ToggleLayoutButton extends React.PureComponent { diff --git a/src/components/browse/components/table-commons/HeadersRow.js b/src/components/browse/components/table-commons/HeadersRow.js index e3e336fe..dba291da 100644 --- a/src/components/browse/components/table-commons/HeadersRow.js +++ b/src/components/browse/components/table-commons/HeadersRow.js @@ -601,7 +601,7 @@ const SortOptionsMenu = React.memo(function SortOptionsMenu({ return (
    { title || field } - { !isActive ? null : } + { !isActive ? null : }
    ); }); diff --git a/src/components/browse/components/table-commons/basicColumnExtensionMap.js b/src/components/browse/components/table-commons/basicColumnExtensionMap.js index 2a6e6a15..ad185c7f 100644 --- a/src/components/browse/components/table-commons/basicColumnExtensionMap.js +++ b/src/components/browse/components/table-commons/basicColumnExtensionMap.js @@ -58,7 +58,7 @@ export const basicColumnExtensionMap = { return (
    - +
    { itemTypeTitle }     @@ -73,7 +73,7 @@ export const basicColumnExtensionMap = { const { date_created = null } = result; if (!date_created) return null; return ( - + ); @@ -88,7 +88,7 @@ export const basicColumnExtensionMap = { const { last_modified : { date_modified = null } = {} } = result; if (!date_modified) return null; return ( - + ); @@ -156,12 +156,12 @@ export const DisplayTitleColumnDefault = React.memo(function DisplayTitleColumnD if (targetTabKey && typeof targetTabKey === 'string'){ link = `${propLink}#${targetTabKey}`; } - title = {title}; + title = {title}; } const cls = ( "title-block text-truncate" - + (shouldMonospace ? " text-monospace text-small" : "") + + (shouldMonospace ? " font-monospace fs-6" : "") + (className ? " " + className : "") ); diff --git a/src/components/forms/SubmissionView.js b/src/components/forms/SubmissionView.js index 5b85bed5..e15b7dda 100644 --- a/src/components/forms/SubmissionView.js +++ b/src/components/forms/SubmissionView.js @@ -1635,7 +1635,7 @@ const WarningBanner = React.memo(function WarningBanner(props){ Please note: your work will be lost if you navigate away from, refresh or close this page while submitting. The submission process is under active development and features may change.
    -
    { children }
    +
    { children }
    @@ -1881,7 +1881,7 @@ class AliasSelectModal extends TypeSelectModal { { creatingAliasMessage }
    : null } -
    +
    {/* {' '} diff --git a/src/components/forms/components/Checkbox.js b/src/components/forms/components/Checkbox.js index 046da3bc..341adbe1 100644 --- a/src/components/forms/components/Checkbox.js +++ b/src/components/forms/components/Checkbox.js @@ -9,7 +9,7 @@ export const Checkbox = React.memo(function Checkbox(props){ children, labelClassName = "mb-0", title, - inputClassName = "mr-08 align-middle", + inputClassName = "me-08 align-middle", indeterminate = false, ...passProps } = props; diff --git a/src/components/forms/components/DragAndDropUpload.js b/src/components/forms/components/DragAndDropUpload.js index 3e4804d7..ced89d3f 100644 --- a/src/components/forms/components/DragAndDropUpload.js +++ b/src/components/forms/components/DragAndDropUpload.js @@ -506,7 +506,7 @@ function RequestVerification(props) { return (
    - +
    ); } @@ -629,7 +629,7 @@ export class DragAndDropZone extends React.Component { {/* TODO: Consider making the file list a separate component... think about potential future features like listing files without icons/in rows or even sorting... would be best to have this be separate if implementing those */} -
      +
        { files.map((file) => (
      • -
        +
        {this.renderSavedValue()} @@ -612,7 +612,7 @@ export class EditableField extends React.Component { } else if (style === 'minimal-row') { return (
        -
        +
        {this.renderSavedValue()} @@ -693,7 +693,7 @@ export class EditableField extends React.Component { if (style == 'row' ) { return (
        -
        +
        diff --git a/src/components/forms/components/LinkToDropdown.js b/src/components/forms/components/LinkToDropdown.js index 5033eb99..4d4973b0 100644 --- a/src/components/forms/components/LinkToDropdown.js +++ b/src/components/forms/components/LinkToDropdown.js @@ -160,8 +160,8 @@ export class LinkToDropdown extends React.PureComponent { { display_title }
        - - { itemID } + + { itemID }
        diff --git a/src/components/forms/components/SearchAsYouTypeAjax.js b/src/components/forms/components/SearchAsYouTypeAjax.js index 369ebbcf..fede6ae2 100644 --- a/src/components/forms/components/SearchAsYouTypeAjax.js +++ b/src/components/forms/components/SearchAsYouTypeAjax.js @@ -606,7 +606,7 @@ export class LinkedObj extends React.PureComponent { return( ); } else { diff --git a/src/components/forms/components/submission-fields.js b/src/components/forms/components/submission-fields.js index dfc99b10..5be54f0c 100644 --- a/src/components/forms/components/submission-fields.js +++ b/src/components/forms/components/submission-fields.js @@ -133,7 +133,7 @@ export class BuildField extends React.PureComponent { return