From f3c581bf7ebeba9caabde661f07c43a63fddaedb Mon Sep 17 00:00:00 2001 From: kreafox Date: Fri, 18 Nov 2022 11:59:38 +0200 Subject: [PATCH 01/12] change(card): Reserve space for meta section --- src/components/UniversalCard/fragments/CardMeta.jsx | 6 +++--- src/less/listing-cards.less | 4 ++++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/UniversalCard/fragments/CardMeta.jsx b/src/components/UniversalCard/fragments/CardMeta.jsx index 4968ca73..18c94794 100644 --- a/src/components/UniversalCard/fragments/CardMeta.jsx +++ b/src/components/UniversalCard/fragments/CardMeta.jsx @@ -9,11 +9,11 @@ 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']} @@ -32,7 +32,7 @@ const CardMeta = (props) => { )} - ) : null; + ); }; export default CardMeta; diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less index bc7101c5..7d1e282c 100644 --- a/src/less/listing-cards.less +++ b/src/less/listing-cards.less @@ -186,6 +186,10 @@ each(range(5), { } .ui.card.u-card { + .meta:after { + content: '\200b'; + } + .description { display: -webkit-box; overflow: hidden; From f7a7a58ebbbf64889119f3d3b650ebf679acd1e6 Mon Sep 17 00:00:00 2001 From: kreafox Date: Fri, 18 Nov 2022 13:50:09 +0200 Subject: [PATCH 02/12] change(card): Use line-camp on cards title --- src/less/listing-cards.less | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less index 7d1e282c..3d73a944 100644 --- a/src/less/listing-cards.less +++ b/src/less/listing-cards.less @@ -190,11 +190,19 @@ each(range(5), { content: '\200b'; } + .header, .description { - display: -webkit-box; + display: -webkit-box !important; overflow: hidden; - -webkit-box-orient: vertical; + } + + .header { + min-height: 2.7rem; + -webkit-line-clamp: 2; + } + + .description { -webkit-line-clamp: var(--max-lines, 5); } From 5d39f05c6371d072a447bd68d0163f478eec6091 Mon Sep 17 00:00:00 2001 From: kreafox Date: Fri, 18 Nov 2022 16:11:11 +0200 Subject: [PATCH 03/12] change(cards): Remove block style wrapper temporarily and unused styling --- src/blocks/Listing/index.js | 16 ++++---- src/blocks/Listing/schema.js | 72 ++++++++++++++++++------------------ src/blocks/Teaser/index.js | 8 ++-- 3 files changed, 48 insertions(+), 48 deletions(-) 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/schema.js b/src/blocks/Listing/schema.js index 37ea9169..1451cade 100644 --- a/src/blocks/Listing/schema.js +++ b/src/blocks/Listing/schema.js @@ -8,43 +8,43 @@ const ALIGN_INFO_MAP = { align_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 { 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 = [ From 8ef6bc9dfc1abae6f58a0936d656ffa622f4c712 Mon Sep 17 00:00:00 2001 From: kreafox Date: Fri, 18 Nov 2022 16:59:56 +0200 Subject: [PATCH 04/12] change(card): Remove description styling --- src/less/listing-cards.less | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less index 3d73a944..ab7cc1f4 100644 --- a/src/less/listing-cards.less +++ b/src/less/listing-cards.less @@ -10,10 +10,6 @@ font-size: @categoryFontSize; } -.description { - font-size: 14px; -} - .ui.cards > .card, .ui.card { height: unset; From f16c7af75c199651f852108cb88d508a1a1d977f Mon Sep 17 00:00:00 2001 From: David Ichim Date: Fri, 18 Nov 2022 18:58:59 +0200 Subject: [PATCH 05/12] change(card): always show date div in meta section even if it's empty - due to the spacing and alignment that we want to keep where the title is on the same line we need to have the upper section visible even if we don't add any date or publication type --- src/components/UniversalCard/fragments/CardMeta.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/UniversalCard/fragments/CardMeta.jsx b/src/components/UniversalCard/fragments/CardMeta.jsx index 18c94794..e5a70160 100644 --- a/src/components/UniversalCard/fragments/CardMeta.jsx +++ b/src/components/UniversalCard/fragments/CardMeta.jsx @@ -18,9 +18,10 @@ const CardMeta = (props) => { {showMeta && ( {head_title || item['Type']} )} - {showDate && ( - - {formatDate({ + + + {showDate && + formatDate({ date: EffectiveDate, format: { year: 'numeric', @@ -29,8 +30,7 @@ const CardMeta = (props) => { }, locale: locale, })} - - )} + ); }; From 0138349cbf9980e7b174bb8efb8f1dcc4e80cb7b Mon Sep 17 00:00:00 2001 From: kreafox Date: Mon, 21 Nov 2022 15:31:06 +0200 Subject: [PATCH 06/12] change(card): Better approach for cards title: remove min-height and add config option for nr of lines --- .../Listing/item-templates/CardTemplates.jsx | 3 + .../Listing/item-templates/ItemTemplates.jsx | 3 + .../item-templates/SearchItemTemplate.jsx | 3 + src/blocks/Listing/schema.js | 20 +++++++ src/less/listing-cards.less | 55 +++++++++++-------- 5 files changed, 60 insertions(+), 24 deletions(-) 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/schema.js b/src/blocks/Listing/schema.js index 1451cade..93cb296f 100644 --- a/src/blocks/Listing/schema.js +++ b/src/blocks/Listing/schema.js @@ -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: diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less index ab7cc1f4..dad01883 100644 --- a/src/less/listing-cards.less +++ b/src/less/listing-cards.less @@ -6,6 +6,31 @@ @import (multiple, reference, optional) '../../theme.config'; +each(range(5), { + .max-@{value}-lines { + --max-lines: @value; + } + .title-max-@{value}-lines { + --title-max-lines: @value; + } +}); + +.useMaxLines() { + display: -webkit-box !important; + overflow: hidden; + + -webkit-box-orient: vertical; + -webkit-line-clamp: var(--max-lines, 5); +} + +.useTitleMaxLines() { + display: -webkit-box !important; + overflow: hidden; + + -webkit-box-orient: vertical; + -webkit-line-clamp: var(--title-max-lines, 5); +} + .category { font-size: @categoryFontSize; } @@ -38,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 @@ -186,20 +201,12 @@ each(range(5), { content: '\200b'; } - .header, - .description { - display: -webkit-box !important; - overflow: hidden; - -webkit-box-orient: vertical; - } - .header { - min-height: 2.7rem; - -webkit-line-clamp: 2; + .useTitleMaxLines(); } .description { - -webkit-line-clamp: var(--max-lines, 5); + .useMaxLines(); } &.left-image-card { From 1b09619fb9dc54fab1453de8fa4a0f2fcc52597d Mon Sep 17 00:00:00 2001 From: David Ichim Date: Mon, 21 Nov 2022 22:18:28 +0200 Subject: [PATCH 07/12] change(listing): text align class names to better align to text utility class names --- src/blocks/Listing/schema.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/blocks/Listing/schema.js b/src/blocks/Listing/schema.js index 93cb296f..74d66f69 100644 --- a/src/blocks/Listing/schema.js +++ b/src/blocks/Listing/schema.js @@ -4,8 +4,8 @@ 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) => { @@ -234,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: { @@ -257,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), From 55a9d1c456e262db2a05d5a49961722a813a728a Mon Sep 17 00:00:00 2001 From: David Ichim Date: Mon, 21 Nov 2022 22:20:55 +0200 Subject: [PATCH 08/12] fix(listing): carousel styles needs slick-carousel css files - without them the pagination and arrow styling is missing --- src/blocks/Listing/layout-templates/Carousel.jsx | 3 +++ 1 file changed, 3 insertions(+) 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'; From d9f969332a298b374558bbe93567d9f3bc1c1cdd Mon Sep 17 00:00:00 2001 From: David Ichim Date: Tue, 22 Nov 2022 16:59:56 +0200 Subject: [PATCH 09/12] change(listing): color listing item bg color and text as cards - allow passing of value to mixins to affect lines to clamp - enlarge image if we don't have rounded class in which case we need the same values for width and height in order to get that perfect circle design --- src/less/listing-cards.less | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less index dad01883..9a95f653 100644 --- a/src/less/listing-cards.less +++ b/src/less/listing-cards.less @@ -15,20 +15,20 @@ each(range(5), { } }); -.useMaxLines() { +.useMaxLines(@value: 5) { display: -webkit-box !important; overflow: hidden; -webkit-box-orient: vertical; - -webkit-line-clamp: var(--max-lines, 5); + -webkit-line-clamp: var(--max-lines, @value); } -.useTitleMaxLines() { +.useTitleMaxLines(@value: 5) { display: -webkit-box !important; overflow: hidden; -webkit-box-orient: vertical; - -webkit-line-clamp: var(--title-max-lines, 5); + -webkit-line-clamp: var(--title-max-lines, @value); } .category { @@ -108,7 +108,8 @@ each(range(5), { // listing theme styling alongside inverse options -.listing-item { +//.block-editor-listing:not(.has--rounded--true) .listing-item, +.listing-item:not(.has--rounded--true) { --image-max-width: 350px; --image-max-height: 210px; } @@ -163,8 +164,11 @@ each(range(5), { background-color: var(--bg-color, transparent); color: var(--text-color, @tertiaryColor); } - -.left-image { +.listing-body { + flex: 1; + } +//.block-editor-listing:not(.has--rounded--true) .left-image, +.listing-item:not(.has--rounded--true) .left-image { .listing-body { flex: 1; } @@ -181,6 +185,7 @@ each(range(5), { } .right-image { + width: 100%; .image-wrapper { margin-right: 0; margin-left: 24px; @@ -194,6 +199,8 @@ 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 { From 4a0d3647cc65752d55804aecddd5f21ff0c465d4 Mon Sep 17 00:00:00 2001 From: David Ichim Date: Tue, 22 Nov 2022 18:38:50 +0200 Subject: [PATCH 10/12] linting fixes and code cleanup --- src/less/listing-cards.less | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less index 9a95f653..c07ffee1 100644 --- a/src/less/listing-cards.less +++ b/src/less/listing-cards.less @@ -107,8 +107,6 @@ each(range(5), { } // listing theme styling alongside inverse options - -//.block-editor-listing:not(.has--rounded--true) .listing-item, .listing-item:not(.has--rounded--true) { --image-max-width: 350px; --image-max-height: 210px; @@ -164,23 +162,24 @@ each(range(5), { background-color: var(--bg-color, transparent); color: var(--text-color, @tertiaryColor); } + .listing-body { - flex: 1; - } -//.block-editor-listing:not(.has--rounded--true) .left-image, -.listing-item:not(.has--rounded--true) .left-image { + 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; } } @@ -199,7 +198,7 @@ each(range(5), { .u-item.listing-item { padding: var(--theme-padding, 32px 1rem); margin: 0; - background-color: var(--bg-color, #FFF); + background-color: var(--bg-color, #fff); color: var(--text-color, @tertiaryColor); } From 1e44a06a207c349a1e56a16c4e055720f977c4d3 Mon Sep 17 00:00:00 2001 From: David Ichim Date: Tue, 22 Nov 2022 18:42:39 +0200 Subject: [PATCH 11/12] bump package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From dfcd9609a511e21d0167f60c30c47367b1176fe0 Mon Sep 17 00:00:00 2001 From: David Ichim Date: Tue, 22 Nov 2022 18:50:27 +0200 Subject: [PATCH 12/12] stylelint fix --- src/less/listing-cards.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less index c07ffee1..e98ddef9 100644 --- a/src/less/listing-cards.less +++ b/src/less/listing-cards.less @@ -185,6 +185,7 @@ each(range(5), { .right-image { width: 100%; + .image-wrapper { margin-right: 0; margin-left: 24px;