diff --git a/CHANGELOG.md b/CHANGELOG.md index db4d1477..277e5f4a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,29 @@ All notable changes to this project will be documented in this file. Dates are d Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). +### [2.1.0](https://github.com/eea/volto-listing-block/compare/2.0.1...2.1.0) - 22 November 2022 + +#### :bug: Bug Fixes + +- fix(listing): carousel styles needs slick-carousel css files [David Ichim - [`55a9d1c`](https://github.com/eea/volto-listing-block/commit/55a9d1c456e262db2a05d5a49961722a813a728a)] + +#### :nail_care: Enhancements + +- change(cards): Multiple improvements #38 from eea/cards-improvements [ichim-david - [`b3aff3f`](https://github.com/eea/volto-listing-block/commit/b3aff3f3fe1138385bd6ea7d4026605b3625746e)] +- change(listing): color listing item bg color and text as cards [David Ichim - [`d9f9693`](https://github.com/eea/volto-listing-block/commit/d9f969332a298b374558bbe93567d9f3bc1c1cdd)] +- change(listing): text align class names to better align to text utility class names [David Ichim - [`1b09619`](https://github.com/eea/volto-listing-block/commit/1b09619fb9dc54fab1453de8fa4a0f2fcc52597d)] +- change(card): Better approach for cards title: remove min-height and add config option for nr of lines [kreafox - [`0138349`](https://github.com/eea/volto-listing-block/commit/0138349cbf9980e7b174bb8efb8f1dcc4e80cb7b)] +- change(card): always show date div in meta section even if it's empty [David Ichim - [`f16c7af`](https://github.com/eea/volto-listing-block/commit/f16c7af75c199651f852108cb88d508a1a1d977f)] +- change(card): Remove description styling [kreafox - [`8ef6bc9`](https://github.com/eea/volto-listing-block/commit/8ef6bc9dfc1abae6f58a0936d656ffa622f4c712)] +- change(cards): Remove block style wrapper temporarily and unused styling [kreafox - [`5d39f05`](https://github.com/eea/volto-listing-block/commit/5d39f05c6371d072a447bd68d0163f478eec6091)] +- change(card): Use line-camp on cards title [kreafox - [`f7a7a58`](https://github.com/eea/volto-listing-block/commit/f7a7a58ebbbf64889119f3d3b650ebf679acd1e6)] +- change(card): Reserve space for meta section [kreafox - [`f3c581b`](https://github.com/eea/volto-listing-block/commit/f3c581bf7ebeba9caabde661f07c43a63fddaedb)] + +#### :hammer_and_wrench: Others + +- stylelint fix [David Ichim - [`dfcd960`](https://github.com/eea/volto-listing-block/commit/dfcd9609a511e21d0167f60c30c47367b1176fe0)] +- bump package version [David Ichim - [`1e44a06`](https://github.com/eea/volto-listing-block/commit/1e44a06a207c349a1e56a16c4e055720f977c4d3)] +- linting fixes and code cleanup [David Ichim - [`4a0d364`](https://github.com/eea/volto-listing-block/commit/4a0d3647cc65752d55804aecddd5f21ff0c465d4)] ### [2.0.1](https://github.com/eea/volto-listing-block/compare/2.0.0...2.0.1) - 17 November 2022 #### :hammer_and_wrench: Others @@ -84,7 +107,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). #### :hammer_and_wrench: Others - linting fixes [David Ichim - [`331ce4a`](https://github.com/eea/volto-listing-block/commit/331ce4ad8ec2b9d598ff9b15ee46ea7a53de2c06)] -- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`36ef986`](https://github.com/eea/volto-listing-block/commit/36ef986f4f9809cc8881e81dfc58dc5c0f7ad543)] ### [0.6.7](https://github.com/eea/volto-listing-block/compare/0.6.6...0.6.7) - 28 September 2022 #### :nail_care: Enhancements @@ -155,7 +177,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). - fix cypress by defining color also in volto-listing-block [David Ichim - [`a5a1324`](https://github.com/eea/volto-listing-block/commit/a5a1324b1b80fca264342ff24f050b212a2505b3)] - linting fixes [David Ichim - [`f082535`](https://github.com/eea/volto-listing-block/commit/f0825350da16338026c26622ad30911d5439d649)] - Add styling schema demo [Tiberiu Ichim - [`9d95279`](https://github.com/eea/volto-listing-block/commit/9d952798bb9e80da2781091bc0c582d6a0809481)] -- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`baf4b37`](https://github.com/eea/volto-listing-block/commit/baf4b37b4418d05f81605ac97cf7b1476701a02a)] - Style adjusment for search item [kreafox - [`ab83a5f`](https://github.com/eea/volto-listing-block/commit/ab83a5f1adc6a2bde6740846e02bff58c7a633a9)] - Remove unneeded style for search item [kreafox - [`a1fde0f`](https://github.com/eea/volto-listing-block/commit/a1fde0f5291176c5136314699f61033cbb62f6ea)] - WIP search item [kreafox - [`c7d933c`](https://github.com/eea/volto-listing-block/commit/c7d933c2637965d7b93642c97ea8013f37cdc4cd)] @@ -183,7 +204,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). #### :hammer_and_wrench: Others - Remove useless Default theme option [Alin Voinea - [`3b7e8f8`](https://github.com/eea/volto-listing-block/commit/3b7e8f87ac88e02e3a7684088ea5f9f322c5753b)] -- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`23b11b0`](https://github.com/eea/volto-listing-block/commit/23b11b00f2ce70fd275f4c675ba8443c2724903b)] ### [0.4.1](https://github.com/eea/volto-listing-block/compare/0.4.0...0.4.1) - 23 June 2022 ### [0.4.0](https://github.com/eea/volto-listing-block/compare/0.3.2...0.4.0) - 10 June 2022 @@ -204,7 +224,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). #### :hammer_and_wrench: Others -- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`3862702`](https://github.com/eea/volto-listing-block/commit/3862702466bac959f3999a10842e3cd533dc6881)] ### [0.3.1](https://github.com/eea/volto-listing-block/compare/0.3.0...0.3.1) - 11 April 2022 #### :bug: Bug Fixes @@ -213,14 +232,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). #### :hammer_and_wrench: Others -- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`f38c11e`](https://github.com/eea/volto-listing-block/commit/f38c11e37d6376713234a47ead1d0665f03c163f)] ### [0.3.0](https://github.com/eea/volto-listing-block/compare/0.2.0...0.3.0) - 9 March 2022 #### :hammer_and_wrench: Others - bump version [Miu Razvan - [`a1cef0d`](https://github.com/eea/volto-listing-block/commit/a1cef0d692bc49a4aa1be5988d0c9cb0d25cb299)] - add PreviewImage till https://github.com/plone/volto/pull/3122 is merged [Miu Razvan - [`4f8a6c2`](https://github.com/eea/volto-listing-block/commit/4f8a6c21517f29a20724f813f95b45511e557064)] -- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`b6d612c`](https://github.com/eea/volto-listing-block/commit/b6d612cdb84b6f9f5ddc0485f7794005b2a09f3f)] ### [0.2.0](https://github.com/eea/volto-listing-block/compare/0.1.5...0.2.0) - 4 March 2022 #### :hammer_and_wrench: Others @@ -247,19 +264,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). #### :hammer_and_wrench: Others -- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`28f1090`](https://github.com/eea/volto-listing-block/commit/28f10909e263378517ddde84d84c04512c3d2c0d)] ### [0.1.3](https://github.com/eea/volto-listing-block/compare/0.1.2...0.1.3) - 10 December 2021 #### :hammer_and_wrench: Others - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`f8c8b64`](https://github.com/eea/volto-listing-block/commit/f8c8b642c0de6db65b7a67515164dcafae359686)] -- Add Sonarqube tag using industry-frontend addons list [EEA Jenkins - [`7b647c2`](https://github.com/eea/volto-listing-block/commit/7b647c206c1414633ec41d864c6499986161dab1)] -- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`d02020c`](https://github.com/eea/volto-listing-block/commit/d02020c4e9b1aa69cea1f75ef12d745e7c22004b)] -- Add Sonarqube tag using bise-frontend addons list [EEA Jenkins - [`ad9e8cd`](https://github.com/eea/volto-listing-block/commit/ad9e8cdecb00709db7bf2ac84fd055ed2e10f95d)] -- Add Sonarqube tag using forests-frontend addons list [EEA Jenkins - [`613e782`](https://github.com/eea/volto-listing-block/commit/613e782c438eaaea7d439299746bef1ceadb33b3)] -- Add Sonarqube tag using sustainability-frontend addons list [EEA Jenkins - [`b60cdde`](https://github.com/eea/volto-listing-block/commit/b60cdde6b5814ccfc484b4d2af1292cfd57d981a)] -- Add Sonarqube tag using climate-energy-frontend addons list [EEA Jenkins - [`1b6d68f`](https://github.com/eea/volto-listing-block/commit/1b6d68fd4009f4fea1602912760c746951823fc7)] -- Add Sonarqube tag using ims-frontend addons list [EEA Jenkins - [`8e44298`](https://github.com/eea/volto-listing-block/commit/8e442980d01e393fb4fce0d3db68348627a86464)] ### [0.1.2](https://github.com/eea/volto-listing-block/compare/0.1.1...0.1.2) - 17 June 2021 ### [0.1.1](https://github.com/eea/volto-listing-block/compare/0.1.0...0.1.1) - 10 June 2021 @@ -277,5 +286,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). #### :hammer_and_wrench: Others -- yarn bootstrap [Alin Voinea - [`bac461d`](https://github.com/eea/volto-listing-block/commit/bac461d220dcb93173e48c9c21162dae084949eb)] - Initial commit [Alin Voinea - [`3e20e5b`](https://github.com/eea/volto-listing-block/commit/3e20e5b483e4c3b826be44f4dd549ec445280b39)] diff --git a/Jenkinsfile b/Jenkinsfile index e98a3ea9..33dc59b4 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -4,7 +4,7 @@ pipeline { environment { GIT_NAME = "volto-listing-block" NAMESPACE = "@eeacms" - SONARQUBE_TAGS = "volto.eea.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,circularity.eea.europa.eu,prod-www.eea.europa.eu,water.europa.eu-marine" + SONARQUBE_TAGS = "volto.eea.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,circularity.eea.europa.eu,prod-www.eea.europa.eu,water.europa.eu-marine,demo-kitkat.dev2aws.eea.europa.eu" DEPENDENCIES = "" VOLTO = "alpha" } 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 {