diff --git a/package.json b/package.json
index 00c5994c..81be827f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@eeacms/volto-listing-block",
- "version": "2.0.1",
+ "version": "2.1.0",
"description": "@eeacms/volto-listing-block: Volto add-on",
"main": "src/index.js",
"author": "European Environment Agency: IDM2 A-Team",
diff --git a/src/blocks/Listing/index.js b/src/blocks/Listing/index.js
index bb74b075..9512ab6d 100644
--- a/src/blocks/Listing/index.js
+++ b/src/blocks/Listing/index.js
@@ -1,4 +1,4 @@
-import { addStyling } from '@plone/volto/helpers';
+// import { addStyling } from '@plone/volto/helpers';
import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
import { composeSchema } from '@eeacms/volto-listing-block/schema-utils';
@@ -6,7 +6,7 @@ import Carousel from './layout-templates/Carousel';
import Gallery from './layout-templates/Gallery';
import Listing from './layout-templates/Listing';
import {
- setBasicStylingSchema,
+ // setBasicStylingSchema,
setCardStylingSchema,
setCardModelSchema,
setItemModelSchema,
@@ -52,8 +52,8 @@ const applyConfig = (config) => {
title: 'Listing',
template: Listing,
schemaEnhancer: composeSchema(
- addStyling,
- setBasicStylingSchema,
+ // addStyling,
+ // setBasicStylingSchema,
UniversalCard.schemaEnhancer,
),
},
@@ -63,8 +63,8 @@ const applyConfig = (config) => {
title: 'Carousel',
template: Carousel,
schemaEnhancer: composeSchema(
- addStyling,
- setBasicStylingSchema,
+ // addStyling,
+ // setBasicStylingSchema,
UniversalCard.schemaEnhancer,
Carousel.schemaEnhancer,
),
@@ -75,8 +75,8 @@ const applyConfig = (config) => {
title: 'Gallery',
template: Gallery,
schemaEnhancer: composeSchema(
- addStyling,
- setBasicStylingSchema,
+ // addStyling,
+ // setBasicStylingSchema,
UniversalCard.schemaEnhancer,
Gallery.schemaEnhancer,
),
diff --git a/src/blocks/Listing/item-templates/CardTemplates.jsx b/src/blocks/Listing/item-templates/CardTemplates.jsx
index 34ca921a..d389c69b 100644
--- a/src/blocks/Listing/item-templates/CardTemplates.jsx
+++ b/src/blocks/Listing/item-templates/CardTemplates.jsx
@@ -16,6 +16,9 @@ const getStyles = (props) => {
if (itemModel.maxDescription) {
res[`max-${itemModel.maxDescription}-lines`] = true;
}
+ if (itemModel.maxTitle) {
+ res[`title-max-${itemModel.maxTitle}-lines`] = true;
+ }
return res;
};
diff --git a/src/blocks/Listing/item-templates/ItemTemplates.jsx b/src/blocks/Listing/item-templates/ItemTemplates.jsx
index 741dd3fa..b1b31f3e 100644
--- a/src/blocks/Listing/item-templates/ItemTemplates.jsx
+++ b/src/blocks/Listing/item-templates/ItemTemplates.jsx
@@ -12,6 +12,9 @@ const getStyles = (props) => {
if (itemModel.maxDescription) {
res[`max-${itemModel.maxDescription}-lines`] = true;
}
+ if (itemModel.maxTitle) {
+ res[`title-max-${itemModel.maxTitle}-lines`] = true;
+ }
return res;
};
diff --git a/src/blocks/Listing/item-templates/SearchItemTemplate.jsx b/src/blocks/Listing/item-templates/SearchItemTemplate.jsx
index 5637bb99..d6680a05 100644
--- a/src/blocks/Listing/item-templates/SearchItemTemplate.jsx
+++ b/src/blocks/Listing/item-templates/SearchItemTemplate.jsx
@@ -20,6 +20,9 @@ const getStyles = (props) => {
if (itemModel.maxDescription) {
res[`max-${itemModel.maxDescription}-lines`] = true;
}
+ if (itemModel.maxTitle) {
+ res[`title-max-${itemModel.maxTitle}-lines`] = true;
+ }
return res;
};
diff --git a/src/blocks/Listing/layout-templates/Carousel.jsx b/src/blocks/Listing/layout-templates/Carousel.jsx
index 0289de7d..eed15f09 100644
--- a/src/blocks/Listing/layout-templates/Carousel.jsx
+++ b/src/blocks/Listing/layout-templates/Carousel.jsx
@@ -2,6 +2,9 @@ import React from 'react';
import { Button, Icon } from 'semantic-ui-react';
import loadable from '@loadable/component';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
import ResponsiveContainer from '@eeacms/volto-listing-block/components/ResponsiveContainer';
diff --git a/src/blocks/Listing/schema.js b/src/blocks/Listing/schema.js
index 37ea9169..74d66f69 100644
--- a/src/blocks/Listing/schema.js
+++ b/src/blocks/Listing/schema.js
@@ -4,47 +4,47 @@ import alignLeftSVG from '@plone/volto/icons/align-left.svg';
import alignCenterSVG from '@plone/volto/icons/align-center.svg';
const ALIGN_INFO_MAP = {
- align_left: [alignLeftSVG, 'Left'],
- align_center: [alignCenterSVG, 'Center'],
+ left: [alignLeftSVG, 'Left'],
+ center: [alignCenterSVG, 'Center'],
};
-export const setBasicStylingSchema = (args) => {
- const { schema, intl } = args;
- schema.properties.styles.schema = {
- fieldsets: [
- {
- id: 'styling',
- title: 'Styling',
- fields: ['theme', 'inverted', 'rounded'],
- },
- ],
- properties: {
- theme: {
- title: intl.formatMessage(messages.Theme),
- description: intl.formatMessage(messages.ThemeHelp),
- choices: [
- ['', intl.formatMessage(messages.ThemeDefault)],
- ['primary', intl.formatMessage(messages.ThemePrimary)],
- ['secondary', intl.formatMessage(messages.ThemeSecondary)],
- ['tertiary', intl.formatMessage(messages.ThemeTertiary)],
- ],
- },
- inverted: {
- title: intl.formatMessage(messages.Inverted),
- description: intl.formatMessage(messages.InvertedHelp),
- type: 'boolean',
- },
- rounded: {
- title: intl.formatMessage(messages.Rounded),
- description: intl.formatMessage(messages.RoundedHelp),
- type: 'boolean',
- },
- },
- required: [],
- };
+// export const setBasicStylingSchema = (args) => {
+// const { schema, intl } = args;
+// schema.properties.styles.schema = {
+// fieldsets: [
+// {
+// id: 'styling',
+// title: 'Styling',
+// fields: ['theme', 'inverted', 'rounded'],
+// },
+// ],
+// properties: {
+// theme: {
+// title: intl.formatMessage(messages.Theme),
+// description: intl.formatMessage(messages.ThemeHelp),
+// choices: [
+// ['', intl.formatMessage(messages.ThemeDefault)],
+// ['primary', intl.formatMessage(messages.ThemePrimary)],
+// ['secondary', intl.formatMessage(messages.ThemeSecondary)],
+// ['tertiary', intl.formatMessage(messages.ThemeTertiary)],
+// ],
+// },
+// inverted: {
+// title: intl.formatMessage(messages.Inverted),
+// description: intl.formatMessage(messages.InvertedHelp),
+// type: 'boolean',
+// },
+// rounded: {
+// title: intl.formatMessage(messages.Rounded),
+// description: intl.formatMessage(messages.RoundedHelp),
+// type: 'boolean',
+// },
+// },
+// required: [],
+// };
- return schema;
-};
+// return schema;
+// };
const CallToActionSchema = ({ formData }) => {
return {
@@ -98,6 +98,7 @@ export const setCardModelSchema = (args) => {
const itemModelSchema = schema.properties.itemModel.schema;
itemModelSchema.fieldsets[0].fields = [
...itemModelSchema.fieldsets[0].fields,
+ 'maxTitle',
'hasDate',
'hasDescription',
...(formData?.itemModel?.hasDescription ? ['maxDescription'] : []),
@@ -116,6 +117,15 @@ export const setCardModelSchema = (args) => {
title: 'Description',
type: 'boolean',
},
+ maxTitle: {
+ title: 'Title max lines',
+ description:
+ "Limit title to a maximum number of lines by adding trailing '...'",
+ type: 'number',
+ default: 2,
+ minimum: 0,
+ maximum: 5,
+ },
maxDescription: {
title: 'Description max lines',
description:
@@ -153,6 +163,7 @@ export const setItemModelSchema = (args) => {
itemModelSchema.fieldsets[0].fields = [
...itemModelSchema.fieldsets[0].fields,
+ 'maxTitle',
'hasDate',
'hasDescription',
'maxDescription',
@@ -175,6 +186,15 @@ export const setItemModelSchema = (args) => {
type: 'boolean',
default: true,
},
+ maxTitle: {
+ title: 'Title max lines',
+ description:
+ "Limit title to a maximum number of lines by adding trailing '...'",
+ type: 'number',
+ default: 2,
+ minimum: 0,
+ maximum: 5,
+ },
maxDescription: {
title: 'Description max lines',
description:
@@ -214,7 +234,7 @@ export const setCardStylingSchema = ({ schema, intl }) => {
const itemModelSchema = schema.properties.itemModel;
const styleSchema = itemModelSchema.schema.properties.styles.schema;
const fieldset = styleSchema.fieldsets.find(({ id }) => id === 'default');
- fieldset.fields.push('theme', 'inverted', 'rounded', 'text_align');
+ fieldset.fields.push('theme', 'inverted', 'rounded', 'text');
styleSchema.properties = {
...styleSchema.properties,
theme: {
@@ -237,7 +257,7 @@ export const setCardStylingSchema = ({ schema, intl }) => {
description: intl.formatMessage(messages.RoundedHelp),
type: 'boolean',
},
- text_align: {
+ text: {
title: 'Text align',
widget: 'style_text_align',
actions: Object.keys(ALIGN_INFO_MAP),
diff --git a/src/blocks/Teaser/index.js b/src/blocks/Teaser/index.js
index 81aa1082..48cc5994 100644
--- a/src/blocks/Teaser/index.js
+++ b/src/blocks/Teaser/index.js
@@ -1,17 +1,17 @@
import { composeSchema } from '@eeacms/volto-listing-block/schema-utils';
-import { addStyling } from '@plone/volto/helpers';
+// import { addStyling } from '@plone/volto/helpers';
import TeaserCardTemplate from './Card';
import { adjustTeaserSchema } from './schema';
import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
-import { setBasicStylingSchema } from '../Listing/schema';
+// import { setBasicStylingSchema } from '../Listing/schema';
export default (config) => {
if (config.blocks.blocksConfig.teaser) {
config.blocks.blocksConfig.teaser.schemaEnhancer = composeSchema(
config.blocks.blocksConfig.teaser.schemaEnhancer,
- addStyling,
- setBasicStylingSchema,
+ // addStyling,
+ // setBasicStylingSchema,
);
config.blocks.blocksConfig.teaser.variations = [
diff --git a/src/components/UniversalCard/fragments/CardMeta.jsx b/src/components/UniversalCard/fragments/CardMeta.jsx
index 4968ca73..e5a70160 100644
--- a/src/components/UniversalCard/fragments/CardMeta.jsx
+++ b/src/components/UniversalCard/fragments/CardMeta.jsx
@@ -9,18 +9,19 @@ const CardMeta = (props) => {
const locale = config.settings.dateLocale || 'en-gb';
const showDate = itemModel.hasDate !== false && EffectiveDate !== 'None';
const showMeta = !!(head_title || (itemModel?.hasMetaType && item['@type']));
- const show = showDate || showMeta;
+ // const show = showDate || showMeta;
// TODO:
- return show ? (
+ return (
{showMeta && (
{head_title || item['Type']}
)}
- {showDate && (
-
- {formatDate({
+
+
+ {showDate &&
+ formatDate({
date: EffectiveDate,
format: {
year: 'numeric',
@@ -29,10 +30,9 @@ const CardMeta = (props) => {
},
locale: locale,
})}
-
- )}
+
- ) : null;
+ );
};
export default CardMeta;
diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less
index bc7101c5..e98ddef9 100644
--- a/src/less/listing-cards.less
+++ b/src/less/listing-cards.less
@@ -6,12 +6,33 @@
@import (multiple, reference, optional) '../../theme.config';
-.category {
- font-size: @categoryFontSize;
+each(range(5), {
+ .max-@{value}-lines {
+ --max-lines: @value;
+ }
+ .title-max-@{value}-lines {
+ --title-max-lines: @value;
+ }
+});
+
+.useMaxLines(@value: 5) {
+ display: -webkit-box !important;
+ overflow: hidden;
+
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: var(--max-lines, @value);
}
-.description {
- font-size: 14px;
+.useTitleMaxLines(@value: 5) {
+ display: -webkit-box !important;
+ overflow: hidden;
+
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: var(--title-max-lines, @value);
+}
+
+.category {
+ font-size: @categoryFontSize;
}
.ui.cards > .card,
@@ -42,24 +63,14 @@
font-size: 12px;
}
-each(range(5), {
- .max-@{value}-lines {
- --max-lines: @value;
- }
-});
-
-.useMaxLines() {
- display: -webkit-box;
- overflow: hidden;
-
- -webkit-box-orient: vertical;
- -webkit-line-clamp: var(--max-lines, 5);
-}
-
.u-item {
.listing-description {
.useMaxLines();
}
+
+ .listing-header {
+ .useTitleMaxLines();
+ }
}
// over specific due to blocks.less override
@@ -96,8 +107,7 @@ each(range(5), {
}
// listing theme styling alongside inverse options
-
-.listing-item {
+.listing-item:not(.has--rounded--true) {
--image-max-width: 350px;
--image-max-height: 210px;
}
@@ -153,23 +163,29 @@ each(range(5), {
color: var(--text-color, @tertiaryColor);
}
-.left-image {
+.listing-body {
+ flex: 1;
+}
+
+.listing-item:not(.has--rounded--true) {
.listing-body {
flex: 1;
}
- .image-wrapper {
+ .left-image .image-wrapper {
margin-right: 24px;
+ }
- .ui.image {
- width: 100%;
- margin-right: auto;
- object-fit: cover;
- }
+ .ui.image {
+ width: 100%;
+ margin-right: auto;
+ object-fit: cover;
}
}
.right-image {
+ width: 100%;
+
.image-wrapper {
margin-right: 0;
margin-left: 24px;
@@ -183,15 +199,21 @@ each(range(5), {
.u-item.listing-item {
padding: var(--theme-padding, 32px 1rem);
margin: 0;
+ background-color: var(--bg-color, #fff);
+ color: var(--text-color, @tertiaryColor);
}
.ui.card.u-card {
- .description {
- display: -webkit-box;
- overflow: hidden;
+ .meta:after {
+ content: '\200b';
+ }
+
+ .header {
+ .useTitleMaxLines();
+ }
- -webkit-box-orient: vertical;
- -webkit-line-clamp: var(--max-lines, 5);
+ .description {
+ .useMaxLines();
}
&.left-image-card {