@eeacms/volto-cca-policy 0.3.95 → 0.3.97

package/CHANGELOG.md

@@ -4,6 +4,28 @@ 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).
 
+### [0.3.97](https://github.com/eea/volto-cca-policy/compare/0.3.96...0.3.97) - 12 January 2026
+
+#### :bug: Bug Fixes
+
+- fix: resolve alignment issue in slate box [kreafox - [`7ea9046`](https://github.com/eea/volto-cca-policy/commit/7ea9046c36cfd1f64f0249dcfd7c138ede887412)]
+
+### [0.3.96](https://github.com/eea/volto-cca-policy/compare/0.3.95...0.3.96) - 19 December 2025
+
+#### :bug: Bug Fixes
+
+- fix: render of reference info [kreafox - [`8d339d5`](https://github.com/eea/volto-cca-policy/commit/8d339d504c3c9871841d8585e9bfd7b2eacd4118)]
+- fix: add missing reference info in DatabaseItemView [kreafox - [`7493d25`](https://github.com/eea/volto-cca-policy/commit/7493d256385f9209c87dca845d4acffcb5cfbe13)]
+
+#### :nail_care: Enhancements
+
+- refactor: code improvement [kreafox - [`a0fd02e`](https://github.com/eea/volto-cca-policy/commit/a0fd02e2abb9054818dd4b6f6760c88e2e5897a2)]
+- change: update DatabaseItemView for full-width visualization - refs #295722 [kreafox - [`0be2939`](https://github.com/eea/volto-cca-policy/commit/0be2939ee02cafca9d2bf32a6fa49888d7cbcad6)]
+
+#### :house: Internal changes
+
+- style: CSS cleanup [kreafox - [`f183f72`](https://github.com/eea/volto-cca-policy/commit/f183f720afa0291c5ff4f3d3f879e32b5d04b896)]
+
 ### [0.3.95](https://github.com/eea/volto-cca-policy/compare/0.3.94...0.3.95) - 18 December 2025
 
 #### :house: Internal changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.3.95",
+  "version": "0.3.97",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/theme/Views/DatabaseItemView.jsx

@@ -33,7 +33,17 @@ import {
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
 
-const share_eea = ['https://cmshare.eea.eu', 'shareit.eea.europa.eu'];
+const SHARE_EEA = ['https://cmshare.eea.eu', 'shareit.eea.europa.eu'];
+
+const SUBTITLES = {
+  [TOOL]: 'Tools',
+  [PUBLICATION_REPORT]: 'Publications and Report',
+  [GUIDANCE]: 'Guidance Document',
+  [INDICATOR]: 'Indicator',
+  [INFORMATION_PORTAL]: 'Information Portal',
+  [ORGANISATION]: 'Organisation',
+  [VIDEO]: 'Video',
+};
 
 const MaybeFlourishVisualization = ({ content }) => {
   const { map_graphs } = content;
@@ -63,7 +73,6 @@ const MaybeFlourishVisualization = ({ content }) => {
 
 function getFirstIframeSrc(htmlString) {
   const iframeRegex = /<iframe[^>]+src=["']([^"']+)["']/;
-
   const iframeMatch = htmlString.match(iframeRegex);
   if (iframeMatch) {
     return iframeMatch[1];
@@ -79,10 +88,8 @@ function getFirstIframeSrc(htmlString) {
 
 const MaybeIframeVisualization = ({ content }) => {
   const { map_graphs, map_graphs_height } = content;
-
   const url = getFirstIframeSrc(map_graphs || '');
   const height = map_graphs_height || 800;
-
   const [isClient, setIsClient] = React.useState();
 
   React.useEffect(() => setIsClient(true), []);
@@ -108,6 +115,47 @@ const MaybeIframeVisualization = ({ content }) => {
   );
 };
 
+const BottomInfo = (props) => {
+  const { content } = props;
+  const { organisational_websites, organisational_contact_information } =
+    content;
+
+  return (
+    <>
+      <Divider />
+      <ReferenceInfo content={content} />
+
+      {organisational_websites && (
+        <>
+          <h5>
+            <FormattedMessage
+              id="Links to further information"
+              defaultMessage="Links to further information"
+            />
+          </h5>
+          <HTMLField value={organisational_websites} />
+        </>
+      )}
+
+      {organisational_contact_information && (
+        <>
+          <h5>
+            <FormattedMessage
+              id="Contact information for the Observatory"
+              defaultMessage="Contact information for the Observatory"
+            />
+          </h5>
+          <HTMLField value={organisational_contact_information} />
+        </>
+      )}
+
+      <ContentRelatedItems {...props} />
+      <PublishedModifiedInfo {...props} />
+      <ShareInfoButton {...props} />
+    </>
+  );
+};
+
 const DatabaseItemView = (props) => {
   const { content } = props;
   const type = content['@type'];
@@ -116,41 +164,16 @@ const DatabaseItemView = (props) => {
     acronym,
     embed_url,
     long_description,
-    organisational_websites,
     organisational_key_activities,
-    organisational_contact_information,
     related_documents_presentations,
   } = content;
   const item_title = acronym ? title + ' (' + acronym + ')' : title;
+  const subtitle = SUBTITLES[type] ?? '';
+  const hasVisualization = !!content?.map_graphs?.length;
+  const isFullWidthVisualization =
+    hasVisualization && content?.map_graphs_full_width;
 
-  let subtitle;
-  switch (type) {
-    case TOOL:
-      subtitle = 'Tools';
-      break;
-    case PUBLICATION_REPORT:
-      subtitle = 'Publications and Report';
-      break;
-    case GUIDANCE:
-      subtitle = 'Guidance Document';
-      break;
-    case INDICATOR:
-      subtitle = 'Indicator';
-      break;
-    case INFORMATION_PORTAL:
-      subtitle = 'Information Portal';
-      break;
-    case ORGANISATION:
-      subtitle = 'Organisation';
-      break;
-    case VIDEO:
-      subtitle = 'Video';
-      break;
-    default:
-      subtitle = '';
-  }
-
-  const is_cmshare_video = share_eea.some((domain) =>
+  const is_cmshare_video = SHARE_EEA.some((domain) =>
     content?.embed_url?.includes(domain),
   );
 
@@ -173,54 +196,46 @@ const DatabaseItemView = (props) => {
       <Container>
         <PortalMessage content={content} />
         <Grid columns="12">
-          <div className="row">
+          <Grid.Row>
             <Grid.Column
               mobile={12}
               tablet={12}
               computer={8}
               className="col-left"
             >
-              <ItemLogo {...props}></ItemLogo>
+              <ItemLogo {...props} />
 
-              {type === VIDEO && (
-                <>
-                  {is_cmshare_video && (
-                    <div className="video-wrapper">
-                      <center>
-                        <video
-                          controls="controls"
-                          preload="metadata"
-                          width="100%"
-                          height="480"
-                          src={fixEmbedURL(embed_url, is_cmshare_video)}
-                          type="video/mp4"
-                        >
-                          <track default kind="captions" srcLang="en" src="" />
-                        </video>
-                      </center>
-                    </div>
-                  )}
-                </>
+              {type === VIDEO && is_cmshare_video && (
+                <div className="video-wrapper">
+                  <center>
+                    <video
+                      controls="controls"
+                      preload="metadata"
+                      width="100%"
+                      height="480"
+                      src={fixEmbedURL(embed_url, is_cmshare_video)}
+                      type="video/mp4"
+                    >
+                      <track default kind="captions" srcLang="en" src="" />
+                    </video>
+                  </center>
+                </div>
               )}
 
               <HTMLField value={long_description} />
 
-              {type === VIDEO && (
-                <>
-                  {!is_cmshare_video && (
-                    <div className="external-video">
-                      <ExternalLink
-                        url={embed_url}
-                        text={
-                          <FormattedMessage
-                            id="See video outside Climate-ADAPT"
-                            defaultMessage="See video outside Climate-ADAPT"
-                          />
-                        }
+              {type === VIDEO && !is_cmshare_video && (
+                <div className="external-video">
+                  <ExternalLink
+                    url={embed_url}
+                    text={
+                      <FormattedMessage
+                        id="See video outside Climate-ADAPT"
+                        defaultMessage="See video outside Climate-ADAPT"
                       />
-                    </div>
-                  )}
-                </>
+                    }
+                  />
+                </div>
               )}
 
               {related_documents_presentations && (
@@ -248,40 +263,14 @@ const DatabaseItemView = (props) => {
                 </>
               )}
 
-              <MaybeFlourishVisualization {...props} />
-              <MaybeIframeVisualization {...props} />
-
-              <Divider />
-
-              <ReferenceInfo content={content} />
-
-              {organisational_websites && (
-                <>
-                  <h5>
-                    <FormattedMessage
-                      id="Links to further information"
-                      defaultMessage="Links to further information"
-                    />
-                  </h5>
-                  <HTMLField value={organisational_websites} />
-                </>
-              )}
-
-              {organisational_contact_information && (
+              {hasVisualization && !isFullWidthVisualization && (
                 <>
-                  <h5>
-                    <FormattedMessage
-                      id="Contact information for the Observatory"
-                      defaultMessage="Contact information for the Observatory"
-                    />
-                  </h5>
-                  <HTMLField value={organisational_contact_information} />
+                  <MaybeFlourishVisualization {...props} />
+                  <MaybeIframeVisualization {...props} />
                 </>
               )}
 
-              <ContentRelatedItems {...props} />
-              <PublishedModifiedInfo {...props} />
-              <ShareInfoButton {...props} />
+              {!isFullWidthVisualization && <BottomInfo {...props} />}
             </Grid.Column>
 
             <Grid.Column
@@ -293,7 +282,28 @@ const DatabaseItemView = (props) => {
               <ContentMetadata {...props} />
               <DocumentsList {...props} />
             </Grid.Column>
-          </div>
+          </Grid.Row>
+
+          {isFullWidthVisualization && (
+            <>
+              <Grid.Row>
+                <Grid.Column mobile={12} tablet={12} computer={12}>
+                  <MaybeFlourishVisualization {...props} />
+                  <MaybeIframeVisualization {...props} />
+                </Grid.Column>
+              </Grid.Row>
+              <Grid.Row>
+                <Grid.Column
+                  mobile={12}
+                  tablet={12}
+                  computer={12}
+                  className="col-left"
+                >
+                  <BottomInfo {...props} />
+                </Grid.Column>
+              </Grid.Row>
+            </>
+          )}
         </Grid>
       </Container>
     </div>

package/theme/globals/blocks.less

@@ -94,6 +94,14 @@
   padding-left: 1rem;
 }
 
+// Fix alignment issue in slate box
+.sidebar-container {
+  .slate_wysiwyg_box {
+    display: grid;
+    align-items: center;
+  }
+}
+
 /* Tabs block */
 .cca-main-homepage .tabs-block {
   .ui.menu.vertical .item,

package/theme/globals/views.less

@@ -115,7 +115,6 @@ hr {
 
   .privacy-protection-wrapper {
     margin-top: 1.5em;
-    margin-bottom: 1.5em;
   }
 
   .col-left {