Better formatting document summary with images (#111987)
* Better formatting document summary with images * Improve styling * Address review feedback
This commit is contained in:
parent
13de9f598e
commit
a4b28a61ef
|
@ -0,0 +1,7 @@
|
|||
// Special handling for images coming from the image field formatter
|
||||
// See discover_grid.scss for more explanation on those values
|
||||
.rowFormatter__value img {
|
||||
vertical-align: middle;
|
||||
max-height: lineHeightFromBaseline(2) !important;
|
||||
max-width: ($euiSizeXXL * 12.5) !important;
|
||||
}
|
|
@ -11,6 +11,8 @@ import type { IndexPattern } from 'src/plugins/data/common';
|
|||
import { MAX_DOC_FIELDS_DISPLAYED } from '../../../../../../../common';
|
||||
import { getServices } from '../../../../../../kibana_services';
|
||||
|
||||
import './row_formatter.scss';
|
||||
|
||||
interface Props {
|
||||
defPairs: Array<[string, unknown]>;
|
||||
}
|
||||
|
@ -21,6 +23,7 @@ const TemplateComponent = ({ defPairs }: Props) => {
|
|||
<Fragment key={idx}>
|
||||
<dt>{pair[0]}:</dt>
|
||||
<dd
|
||||
className="rowFormatter__value"
|
||||
// We can dangerously set HTML here because this content is guaranteed to have been run through a valid field formatter first.
|
||||
dangerouslySetInnerHTML={{ __html: `${pair[1]}` }} // eslint-disable-line react/no-danger
|
||||
/>{' '}
|
||||
|
|
|
@ -86,6 +86,21 @@
|
|||
|
||||
.dscDiscoverGrid__descriptionListDescription {
|
||||
word-break: normal !important;
|
||||
|
||||
// Special handling for images coming from the image field formatter
|
||||
img {
|
||||
// Align the images vertically centered with the text
|
||||
vertical-align: middle;
|
||||
// Set the maximum height to the line-height. The used function is the same
|
||||
// function used to calculate the line-height for the EuiDescriptionList Description.
|
||||
// !important is required to overwrite the max-height on the element from the field formatter
|
||||
max-height: lineHeightFromBaseline(2) !important;
|
||||
// An arbitrary amount of width we don't want to go over, to not have very wide images.
|
||||
// For most width-height-ratios that will never be hit, because we'd usually limit
|
||||
// it by the way smaller height. But images with very large width and very small height
|
||||
// might be limited by that.
|
||||
max-width: ($euiSizeXXL * 12.5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include euiBreakpoint('xs', 's', 'm') {
|
||||
|
|
|
@ -110,6 +110,9 @@ export const getRenderCellValueFn = (
|
|||
});
|
||||
|
||||
return (
|
||||
// If you change the styling of this list (specifically something that will change the line-height)
|
||||
// make sure to adjust the img overwrites attached to dscDiscoverGrid__descriptionListDescription
|
||||
// in discover_grid.scss
|
||||
<EuiDescriptionList type="inline" compressed className="dscDiscoverGrid__descriptionList">
|
||||
{[...highlightPairs, ...sourcePairs].slice(0, maxDocFieldsDisplayed).map(([key, value]) => (
|
||||
<Fragment key={key}>
|
||||
|
|
Loading…
Reference in a new issue