diff --git a/src/PreviewImage.js b/src/PreviewImage.js index 282de254..89dea73c 100644 --- a/src/PreviewImage.js +++ b/src/PreviewImage.js @@ -41,16 +41,15 @@ function PreviewImage(props) { label, ...rest } = props; - const src = - preview_image_url || preview_image?.[0] - ? getSrc(preview_image[0], size) - : item.image_field - ? getSrc(item, size) - : DefaultImageSVG; + const src = preview_image?.[0] + ? getSrc(preview_image[0], size) + : item.image_field + ? getSrc(item, size) + : DefaultImageSVG; return ( {item.title} { + return ( +
+

{item.title ? item.title : item.id}

+ {hasDescription && ( +

{item.description}

+ )} +
+ ); +}; + +const getStyles = (props) => { + const { itemModel = {} } = props; + const res = {}; + if (itemModel.maxDescription) { + res[`max-${itemModel.maxDescription}-lines`] = true; + } + return res; +}; + +const BasicItem = (props) => { + const { item, styles, className, itemModel = {} } = props; + const { hasImage, hasDate, hasDescription } = itemModel; + + return ( +
+
+
{item?.meta}
+
+ + {hasImage && ( + + )} +
+
{item?.extra}
+
+
+ ); +}; + +export const SearchItemLayout = (props) => { + return ; +}; diff --git a/src/blocks/Listing/index.js b/src/blocks/Listing/index.js index 18e2da51..b7f04f5a 100644 --- a/src/blocks/Listing/index.js +++ b/src/blocks/Listing/index.js @@ -9,6 +9,7 @@ import { RightImageCardLayout, } from './CardTemplates'; import { DefaultItemLayout } from './ItemTemplates'; +import { SearchItemLayout } from './SearchItemTemplate'; import { ListingStylingSchema } from './schema'; @@ -78,6 +79,12 @@ const applyConfig = (config) => { title: 'Basic Item', view: DefaultItemLayout, }, + { + id: 'searchItem', + isDefault: false, + title: 'Search Item', + view: SearchItemLayout, + }, ], cardTemplates: [ { diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less index 5ff508cc..7dbe29c4 100644 --- a/src/less/listing-cards.less +++ b/src/less/listing-cards.less @@ -61,6 +61,10 @@ each(range(5), { } .listing-item { + .wrapper { + width: 100%; + } + // defaults in Volto .slot-top { display: flex; @@ -89,3 +93,9 @@ each(range(5), { flex-direction: row-reverse; } } + +.result-item { + padding-bottom: 1.5em; + border-bottom: 1px solid #bcbec0; + margin-bottom: 1.5em !important; +}