diff --git a/CHANGELOG.md b/CHANGELOG.md index f2d3ef82a..cd92bb003 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,8 +4,27 @@ 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). +#### [1.0.26](https://github.com/eea/volto-clms-theme/compare/1.0.25...1.0.26) + +- Home carousel [`#83`](https://github.com/eea/volto-clms-theme/pull/83) +- volto-tabs-block style reverted [`#82`](https://github.com/eea/volto-clms-theme/pull/82) +- accordion icons customization [`6a81d74`](https://github.com/eea/volto-clms-theme/commit/6a81d74736ea8b1cbe41a04bc38010a29761eaf5) +- upgrade volto-accordion-block version [`e574eb5`](https://github.com/eea/volto-clms-theme/commit/e574eb5fb2bca7a3dfdef043219159a0e35e84f9) +- home carousel css fix [`e81873c`](https://github.com/eea/volto-clms-theme/commit/e81873c25cfabe48cfc306aa42488a6d792ecc2b) +- carousel [`a8bb18b`](https://github.com/eea/volto-clms-theme/commit/a8bb18bb3a22401906b141bd20a3f2673c70a809) +- sitemap.js customization [`2227584`](https://github.com/eea/volto-clms-theme/commit/2227584d64618d81fe32ad8e7cb4774b367ab6c7) +- carousel [`372b59c`](https://github.com/eea/volto-clms-theme/commit/372b59c8ae834742ae57c5893680cea876ebb9be) +- less [`c0df2ce`](https://github.com/eea/volto-clms-theme/commit/c0df2cebb0dc124c4bcb9a7e8e6b810035f1ff2a) +- volto-tabs-block style reversed [`5fd228e`](https://github.com/eea/volto-clms-theme/commit/5fd228e1c432f7089ae477561dff09bb5f0ec420) +- home page carrousel left [`493b2e5`](https://github.com/eea/volto-clms-theme/commit/493b2e5b16fcd8f1677ca57cb70660f275599b54) +- use getBaseUrl instead of replacing download-by-area [`c39c213`](https://github.com/eea/volto-clms-theme/commit/c39c2132a1e4e7c992339bcc1ba21d130daad4f9) +- logo url fix [`f1abebb`](https://github.com/eea/volto-clms-theme/commit/f1abebbc433c37e580cce49b9a855b501b1e9cf3) + #### [1.0.25](https://github.com/eea/volto-clms-theme/compare/1.0.24...1.0.25) +> 17 September 2021 + +- Some small code fixes [`#81`](https://github.com/eea/volto-clms-theme/pull/81) - Fixing feedback problems [`#80`](https://github.com/eea/volto-clms-theme/pull/80) - empty libraries message [`134ee68`](https://github.com/eea/volto-clms-theme/commit/134ee687a1de7d31d4a62795324a9738e874e605) - class to className [`e3bccef`](https://github.com/eea/volto-clms-theme/commit/e3bccefc307424e6508dd4280bb001b45313e8d4) diff --git a/package.json b/package.json index 81a24ce81..73b637d80 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@eeacms/volto-clms-theme", - "version": "1.0.25", + "version": "1.0.26", "description": "volto-clms-theme: Volto theme for CLMS site", "main": "src/index.js", "author": "CodeSyntax for the European Environment Agency", @@ -37,7 +37,7 @@ "@eeacms/volto-tabs-block": "1.2.7", "react-slick": "0.28.1", "slick-carousel": "1.8.1", - "@eeacms/volto-accordion-block": "^3.0.0", + "@eeacms/volto-accordion-block": "3.4.4", "@eeacms/volto-columns-block": "4.4.3", "@eeacms/volto-metadata-block": "^2.1.0", "volto-slate": "2.6.2", @@ -112,4 +112,4 @@ "@cypress/code-coverage": "^3.9.5", "babel-plugin-transform-class-properties": "^6.24.1" } -} +} \ No newline at end of file diff --git a/src/components/Blocks/CclHomeBgImageBlock/CclGreenBgView.jsx b/src/components/Blocks/CclHomeBgImageBlock/CclGreenBgView.jsx index 04ea7e3f8..8f9a25ca0 100644 --- a/src/components/Blocks/CclHomeBgImageBlock/CclGreenBgView.jsx +++ b/src/components/Blocks/CclHomeBgImageBlock/CclGreenBgView.jsx @@ -6,38 +6,51 @@ const CclGreenBgView = (props) => { const { data, isEditMode } = props; return ( -
- {isEditMode && } -
-
- {data.title &&

{data?.title}

} - {data.subtitle &&

{data?.subtitle}

} - {data.description &&

{data?.description}

} - {data?.hasButton === true && ( - - {data?.buttonTitle} - - )} +
+
+ {isEditMode && } +
+
+ {data.title &&

{data?.title}

} + {data.subtitle &&

{data?.subtitle}

} + {data.description &&

{data?.description}

} + {data?.hasButton === true && ( + + {data?.buttonTitle} + + )} +
+
+
+
+
+
{data?.greenText}
+
+ + {data?.location} +
diff --git a/src/components/Blocks/CclHomeBgImageBlock/CclHomeBgImageSchema.js b/src/components/Blocks/CclHomeBgImageBlock/CclHomeBgImageSchema.js index 3377a81de..664d6579b 100644 --- a/src/components/Blocks/CclHomeBgImageBlock/CclHomeBgImageSchema.js +++ b/src/components/Blocks/CclHomeBgImageBlock/CclHomeBgImageSchema.js @@ -19,7 +19,15 @@ export const HomeBgImageSchema = (config, hasButton) => { { id: 'default', title: 'Default', - fields: ['title', 'subtitle', 'description', 'variation', 'hasButton'], + fields: [ + 'title', + 'subtitle', + 'description', + 'variation', + 'greenText', + 'location', + 'hasButton', + ], }, ...hasButtonFieldset, ], @@ -49,6 +57,16 @@ export const HomeBgImageSchema = (config, hasButton) => { type: 'array', choices: [...variations], }, + greenText: { + title: 'Left text', + description: 'Green bg left side text', + type: 'string', + }, + location: { + title: 'Location', + description: 'Green bg location', + type: 'string', + }, buttonTitle: { title: 'Title', description: 'Add button text', diff --git a/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclCarouselView.jsx b/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclCarouselView.jsx new file mode 100644 index 000000000..e160c6c05 --- /dev/null +++ b/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclCarouselView.jsx @@ -0,0 +1,103 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { compose } from 'redux'; +import { withRouter } from 'react-router'; +import loadable from '@loadable/component'; +import { RenderBlocks } from '@plone/volto/components'; +import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs'; +import './custom.less'; + +const Slider = loadable(() => import('react-slick')); + +const View = (props) => { + const slider = React.useRef(null); + const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false); + const { + activeTab = null, + data = {}, + hashlink = {}, + metadata = {}, + tabsList = [], + tabs = {}, + setActiveTab = () => {}, + } = props; + const activeTabIndex = tabsList.indexOf(activeTab); + + const settings = { + dots: true, + infinite: true, + speed: 1500, + fade: true, + cssEase: 'linear', + autoplay: true, + autoplaySpeed: 3000, + swipe: true, + slidesToShow: 1, + slidesToScroll: 1, + touchMove: true, + beforeChange: (oldIndex, index) => { + setActiveTab(tabsList[index]); + }, + }; + + React.useEffect(() => { + const urlHash = props.location.hash.substring(1) || ''; + if ( + hashlink.counter > 0 || + (hashlink.counter === 0 && urlHash && !hashlinkOnMount) + ) { + const id = hashlink.hash || urlHash || ''; + const index = tabsList.indexOf(id); + const parentId = data.id || props.id; + const parent = document.getElementById(parentId); + // TODO: Find the best way to add offset relative to header + // The header can be static on mobile and relative on > mobile + // const headerWrapper = document.querySelector('.header-wrapper'); + // const offsetHeight = headerWrapper?.offsetHeight || 0; + const offsetHeight = 0; + if (id !== parentId && index > -1 && parent) { + if (activeTabIndex !== index) { + slider.current.slickGoTo(index); + } + props.scrollToTarget(parent, offsetHeight); + } else if (id === parentId && parent) { + props.scrollToTarget(parent, offsetHeight); + } + } + if (!hashlinkOnMount) { + setHashlinkOnMount(true); + } + /* eslint-disable-next-line */ + }, [hashlink.counter]); + + const panes = tabsList.map((tab, index) => { + return { + id: tab, + renderItem: ( + + ), + }; + }); + + return ( + <> + + {panes.length ? panes.map((pane) => pane.renderItem) : ''} + + + ); +}; + +export default compose( + connect((state) => { + return { + hashlink: state.hashlink, + }; + }), + withScrollToTarget, +)(withRouter(View)); diff --git a/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclTabsView.jsx b/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclTabsView.jsx index 4e7389795..eb37f4763 100644 --- a/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclTabsView.jsx +++ b/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclTabsView.jsx @@ -99,8 +99,8 @@ const CclTabsView = (props) => { aria-controls={title || defaultTitle} aria-selected={tab === activeTab} active={(tab === activeTab).toString()} - /* classname hontan estiloa aldatu behar da aukeratutako tab-a urdin ikusteko */ - className={cx('tab', tab !== activeTab && 'tab-selected')} + /* classname hontan estiloa aldatu behar bada "===" "!==" gatik aldatu */ + className={cx('tab', tab === activeTab && 'tab-selected')} onClick={() => { if (activeTab !== tab) { setActiveTab(tab); diff --git a/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalFaqTabsView.jsx b/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalFaqTabsView.jsx index 6667ad8d1..0d1d53900 100644 --- a/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalFaqTabsView.jsx +++ b/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalFaqTabsView.jsx @@ -6,6 +6,7 @@ import { RenderBlocks } from '@plone/volto/components'; import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs'; import './fontawesome'; import cx from 'classnames'; +import './custom.less'; const CclVerticalFaqTabsView = (props) => { const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false); diff --git a/src/components/Blocks/CustomTemplates/VoltoTabsBlock/custom.less b/src/components/Blocks/CustomTemplates/VoltoTabsBlock/custom.less new file mode 100644 index 000000000..4ffe93556 --- /dev/null +++ b/src/components/Blocks/CustomTemplates/VoltoTabsBlock/custom.less @@ -0,0 +1,15 @@ +.tabs-block.CCLVerticalFaqTabs > div.styled { + display: block !important; +} + +div.tabs-block.CCLCarousel { + div & { + position: relative !important; + right: 50% !important; + left: 50% !important; + width: 100vw !important; + max-width: initial !important; + margin-right: -50vw !important; + margin-left: -50vw !important; + } +} diff --git a/src/components/Blocks/CustomTemplates/VoltoTabsBlock/index.js b/src/components/Blocks/CustomTemplates/VoltoTabsBlock/index.js index 01f9ea950..65f4fbbec 100644 --- a/src/components/Blocks/CustomTemplates/VoltoTabsBlock/index.js +++ b/src/components/Blocks/CustomTemplates/VoltoTabsBlock/index.js @@ -1,5 +1,11 @@ import CclTabsView from './CclTabsView'; import CclVerticalTabsView from './CclVerticalTabsView'; import CclVerticalFaqTabsView from './CclVerticalFaqTabsView'; +import CclCarouselView from './CclCarouselView'; -export { CclTabsView, CclVerticalTabsView, CclVerticalFaqTabsView }; +export { + CclTabsView, + CclVerticalTabsView, + CclVerticalFaqTabsView, + CclCarouselView, +}; diff --git a/src/components/Blocks/customBlocks.js b/src/components/Blocks/customBlocks.js index a86d7621e..9a15ef386 100644 --- a/src/components/Blocks/customBlocks.js +++ b/src/components/Blocks/customBlocks.js @@ -34,6 +34,7 @@ import { CclTabsView, CclVerticalTabsView, CclVerticalFaqTabsView, + CclCarouselView, } from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoTabsBlock'; import { @@ -61,6 +62,9 @@ import CclUseCaseListEdit from '@eeacms/volto-clms-theme/components/Blocks/CclUs import CclTechnicalLibrariesListView from '@eeacms/volto-clms-theme/components/Blocks/CclTechnicalLibrariesList/CclTechnicalLibrariesListView'; import CclTechnicalLibrariesListEdit from '@eeacms/volto-clms-theme/components/Blocks/CclTechnicalLibrariesList/CclTechnicalLibrariesListEdit'; +import upSVG from '@plone/volto/icons/up-key.svg'; +import downSVG from '@plone/volto/icons/down-key.svg'; + export const customGroupBlocksOrder = { id: 'ccl_blocks', title: 'Ccl Blocks', @@ -106,6 +110,12 @@ const customBlocks = (config) => ({ view: CclVerticalFaqTabsView, schema: defaultSchema, }, + CCLCarousel: { + title: 'CCL Carousel (Copernicus Style Guide)', + edit: DefaultEdit, + view: CclCarouselView, + schema: defaultSchema, + }, ...(config.blocks.blocksConfig[TABS_BLOCK]?.templates || {}), }, }, @@ -164,6 +174,13 @@ const customBlocks = (config) => ({ }, ], }, + accordion: { + ...config.blocks.blocksConfig.accordion, + titleIcons: { + closed: { leftPosition: downSVG, rightPosition: downSVG }, + opened: { leftPosition: upSVG, rightPosition: upSVG }, + }, + }, contextNavigation: { id: 'contextNavigation', // The name (id) of the block title: 'Context Navigation', // The display name of the block diff --git a/src/components/CLMSEventView/CLMSEventView.jsx b/src/components/CLMSEventView/CLMSEventView.jsx index 817821da5..2d09c10e7 100644 --- a/src/components/CLMSEventView/CLMSEventView.jsx +++ b/src/components/CLMSEventView/CLMSEventView.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton'; import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils'; export const CLMSEventView = (props) => { @@ -19,11 +20,25 @@ export const CLMSEventView = (props) => { } alt={content?.image ? content?.image?.filename : 'Placeholder'} /> - {/*
Lorem ipsum dolor sit amet
*/} +
{content?.description}
+
+ +
+ {new Date(content?.effective).toLocaleDateString()} -{' '} + {new Date(content?.end).toLocaleDateString()} +
+
+
+ +
{content?.location}
+
+ + {'Register here'} +
); diff --git a/src/components/CLMSMapViewerView/CLMSMapViewerView.jsx b/src/components/CLMSMapViewerView/CLMSMapViewerView.jsx index 8cc261e15..4ecd025ed 100644 --- a/src/components/CLMSMapViewerView/CLMSMapViewerView.jsx +++ b/src/components/CLMSMapViewerView/CLMSMapViewerView.jsx @@ -10,6 +10,7 @@ import { MapViewer } from '@eeacms/volto-arcgis-block/components'; import config from '@eeacms/volto-arcgis-block/components/MapViewer/config'; import { useDispatch } from 'react-redux'; import { getExtraBreadcrumbItems } from '../../actions'; +import { getBaseUrl } from '@plone/volto/helpers'; const CLMSMapViewerView = (props) => { const dispatch = useDispatch(); @@ -87,7 +88,7 @@ const CLMSMapViewerView = (props) => { diff --git a/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx b/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx index b444e5425..4e61a7253 100644 --- a/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx +++ b/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx @@ -19,7 +19,7 @@ const CLMSNewsItemView = (props) => { } alt={content?.image ? content?.image?.filename : 'Placeholder'} /> - {/*
Lorem ipsum dolor sit amet
*/} +
{content?.description}
diff --git a/src/components/CclCard/CclCard.jsx b/src/components/CclCard/CclCard.jsx index 2d196f4a9..dadc6e9bb 100644 --- a/src/components/CclCard/CclCard.jsx +++ b/src/components/CclCard/CclCard.jsx @@ -83,6 +83,9 @@ function CclCard(props) {
{card?.title || 'Event default title'}
+
+ {new Date(card?.effective).toLocaleDateString()} +
diff --git a/src/components/CclCard/cards.less b/src/components/CclCard/cards.less index 2b23dd7a2..78f5ed060 100644 --- a/src/components/CclCard/cards.less +++ b/src/components/CclCard/cards.less @@ -203,6 +203,11 @@ opacity: 0.5; } +.card-event-text .card-event-date { + margin-bottom: 1rem; + color: #adb0b8; +} + .card-event-text .card-event-title { margin-bottom: 1rem; font-size: 1.125rem; diff --git a/src/customizations/volto/components/theme/Logo/Logo.jsx b/src/customizations/volto/components/theme/Logo/Logo.jsx index bb9eaf1f7..f25eb6afe 100644 --- a/src/customizations/volto/components/theme/Logo/Logo.jsx +++ b/src/customizations/volto/components/theme/Logo/Logo.jsx @@ -45,9 +45,10 @@ const Logo = () => { return (
- { title={intl.formatMessage(messages.copernicuslogo)} height={44} /> - + + new Promise((resolve) => { + const { settings } = config; + const request = superagent.get( + `${settings.apiPath}/@search?metadata_fields=modified&b_size=100000000&use_site_search_settings=1`, + ); + request.set('Accept', 'application/json'); + const authToken = cookie.load('auth_token'); + if (authToken) { + request.set('Authorization', `Bearer ${authToken}`); + } + request.end((error, { body } = {}) => { + if (error) { + resolve(body || error); + } else { + const items = map( + body.items, + (item) => + ` \n ${toPublicURL(item['@id'])}\n + ${item.modified}\n `, + ); + const result = `\n\n${items.join( + '\n', + )}\n`; + zlib.gzip(Buffer.from(result, 'utf8'), (_err, buffer) => { + resolve(buffer); + }); + } + }); + }); diff --git a/theme/clms/css/home.css b/theme/clms/css/home.css index 0e3866c64..bf8ea9c6b 100644 --- a/theme/clms/css/home.css +++ b/theme/clms/css/home.css @@ -99,14 +99,13 @@ .home-carousel .slick-dots { position: absolute; - bottom: 2.75rem; + bottom: 3.75rem; } .home-carousel .ccl-icon-map-dot { margin-right: 0.5rem; } - /* Products band */ .home-products-container { display: flex; @@ -159,10 +158,11 @@ font-weight: normal; text-align: center; } -@media (max-width: 1200px) { +@media (max-width: 1200px) { .home-product-title { width: 100%; } + .home-product-description { width: 100%; } diff --git a/theme/clms/css/styles.less b/theme/clms/css/styles.less index 85b01410b..7e0586865 100644 --- a/theme/clms/css/styles.less +++ b/theme/clms/css/styles.less @@ -238,7 +238,7 @@ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile)) body:not(.contenttype-lrf:not(.section-cart):not(.section-profile)) main .ccl-container { - max-width: 1140px; + max-width: 1400px; } body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))