{ i + 1 }.
{ allKeys.map((k, j)=>{
var renderedSubVal;// = Schemas.Term.toName(k, embeddedRow[k]);
@@ -496,7 +496,7 @@ class SubItemTable extends React.Component {
}
if (!renderedSubVal) {
renderedSubVal = isAnItem(embeddedRow[k]) ?
-
{ itemUtil.getTitleStringFromContext(embeddedRow[k]) }
+
{ itemUtil.getTitleStringFromContext(embeddedRow[k]) }
:
termTransformFxn(k, embeddedRow[k]);
}
@@ -519,7 +519,7 @@ class SubItemTable extends React.Component {
}
}
if (isAnItem(value)) {
- return { 'value' :
{ value.display_title }, 'key' : colKey };
+ return { 'value' :
{ value.display_title }, 'key' : colKey };
}
if (typeof value === 'string' && value.length < 25) {
return { 'value' : termTransformFxn(colKey, value), 'className' : 'no-word-break', 'key' : colKey };
@@ -609,15 +609,15 @@ class SubItemTable extends React.Component {
val =
{ val ? 'True' : 'False' };
}
if (colVal.key === '@id' && val.slice(0,1) === '/') {
- val =
{ val };
+ val =
{ val };
}
if (val && typeof val === 'object' && !React.isValidElement(val) && !Array.isArray(val)) {
if (isAnItem(val)) {
- val =
{val.display_title};
+ val =
{val.display_title};
} else if (isAnAttachment(val) && (val.href.charAt(0) === '/' || rowAtIdValue)) {
const attachmentTitle = SubItemTable.getAttachmentTitle(val.href, 'attached_file');
const attachmentHref = val.href.charAt(0) === '/' ? val.href : rowAtIdValue + val.href;
- val =
{attachmentTitle};
+ val =
{attachmentTitle};
} else {
val = SubItemTable.jsonify(val, columnKeys[j].key);
}
@@ -627,11 +627,11 @@ class SubItemTable extends React.Component {
val = _.map(val, function (v, i) {
let item = null;
if (isAnItem(v)) {
- item =
{v.display_title};
+ item =
{v.display_title};
} else if (isAnAttachment(v) && (val.href.charAt(0) === '/' || rowAtIdValue)) {
const attachmentTitle = SubItemTable.getAttachmentTitle(v.href, 'attached_file');
const attachmentHref = val.href.charAt(0) === '/' ? val.href : rowAtIdValue + val.href;
- val =
{attachmentTitle};
+ val =
{attachmentTitle};
} else {
item = SubItemTable.jsonify(v, columnKeys[j].key + ':' + i);
}
@@ -639,7 +639,7 @@ class SubItemTable extends React.Component {
});
if (renderAsList) {
val =
{val}
;
- className += ' text-left';
+ className += ' text-start';
}
}
return (
@@ -840,23 +840,23 @@ export class Detail extends React.PureComponent {
} else if (typeof item === 'string'){
if (keyPrefix === '@id'){
- return
{item};
+ return
{item};
}
if(item.charAt(0) === '/' && item.indexOf('@@download') > -1){
// This is a download link. Format appropriately
const attach_title = SubItemTable.getAttachmentTitle(item);
- return
{ attach_title || item };
+ return
{ attach_title || item };
} else if (item.charAt(0) === '/') {
- if (popLink) return
{ item };
- else return
{ item };
+ if (popLink) return
{ item };
+ else return
{ item };
} else {
// TODO: more comprehensive regexp url validator needed, look at: https://stackoverflow.com/a/5717133
// Is a URL. Check if we should render it as a link/uri.
const schemaProperty = getSchemaProperty(keyPrefix, schemas || {}, atType);
const schemaPropertyFormat = (schemaProperty && typeof schemaProperty.format === 'string' && schemaProperty.format.toLowerCase()) || null;
if (schemaPropertyFormat && ['uri','url'].indexOf(schemaPropertyFormat) > -1 && item.slice(0,4) === 'http') {
- return
{ item };
+ return
{ item };
} else {
return
{ termTransformFxn(keyPrefix, item) };
}
@@ -936,7 +936,7 @@ export class Detail extends React.PureComponent {
'subscriptions.url' : {
'render' : function(value){
var fullUrl = '/search/' + value;
- return
View Results;
+ return
View Results;
},
'title' : "Link",
'description' : "Link to results matching subscription query."
@@ -962,7 +962,7 @@ export class Detail extends React.PureComponent {
'title' : "E-Mail",
'render' : function(value){
if (typeof value === 'string' && value.indexOf('@') > -1) {
- return
{ value };
+ return
{ value };
}
return value;
}
@@ -1035,21 +1035,25 @@ export class Detail extends React.PureComponent {
const ToggleJSONButton = React.memo(function ToggleJSONButton({ onClick, showingJSON, className }){
return (
-
+
+
+
);
});
const SeeMoreRowsButton = React.memo(function SeeMoreRowsButton({ onClick, collapsed, className }){
return (
-
+
+
+
);
});
diff --git a/src/components/util/layout.js b/src/components/util/layout.js
index 592204bf..3eb94df4 100644
--- a/src/components/util/layout.js
+++ b/src/components/util/layout.js
@@ -78,6 +78,8 @@ export const shortenString = memoize(function(originalText, maxChars = 28, addEl
* in src/encoded/static/scss/bootstrap/_variables.scss.
*
* 2019-07-10 -- updated to Bootstrap v4 breakpoints, added 'xl'.
+ *
+ * 2024-09-06 -- updated to Bootstrap v5 breakpoints, added 'xxl'.
*
* @deprecated
* Will be replaced by portal-specific versions soon/eventually.
@@ -90,8 +92,9 @@ export const responsiveGridState = memoize(function(width = null){
if (typeof width !== 'number') {
// Assumed to be null or undefined which should mean we are
// server-side or not yet mounted.
- return 'xl';
+ return 'xxl';
}
+ if (width >= 1400) return 'xxl';
if (width >= 1200) return 'xl';
if (width >= 992) return 'lg';
if (width >= 768) return 'md';
@@ -118,6 +121,7 @@ export const responsiveGridState = memoize(function(width = null){
export function gridContainerWidth(windowWidth = null){
// Subtract 20 for padding/margins.
switch(responsiveGridState(windowWidth)){
+ case 'xxl': return 1300;
case 'xl': return 1120;
case 'lg': return 940;
case 'md': return 700;
diff --git a/src/components/util/object.js b/src/components/util/object.js
index ff3c97e9..026ce4b0 100644
--- a/src/components/util/object.js
+++ b/src/components/util/object.js
@@ -53,6 +53,7 @@ export function linkFromItem(item, addDescriptionTip = true, propertyForTitle =
propsToInclude.key = href;
}
+ propsToInclude.className = (propsToInclude.className || '') + " link-underline-hover";
if (addDescriptionTip && typeof propsToInclude['data-tip'] === 'undefined' && item.description){
propsToInclude['data-tip'] = item.description;
propsToInclude.className = (propsToInclude.className || '') + ' d-inline-block';