@eeacms/volto-clms-theme 1.1.246 → 1.1.248

package/CHANGELOG.md

@@ -4,11 +4,25 @@ 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.1.246](https://github.com/eea/volto-clms-theme/compare/1.1.245...1.1.246) - 7 August 2025
+### [1.1.248](https://github.com/eea/volto-clms-theme/compare/1.1.247...1.1.248) - 29 August 2025
+
+#### :rocket: New Features
+
+- feat: add status updates on download cart page for cdse datasets -refs #291057 [ana-oprea - [`dcb3ae0`](https://github.com/eea/volto-clms-theme/commit/dcb3ae0ebe2a572bfc07ccfc2aa6768b784c2f6e)]
 
 #### :hammer_and_wrench: Others
 
-- Refs #286059 - Histogram fix: make tooltips visible. [GhitaB - [`8cd8a43`](https://github.com/eea/volto-clms-theme/commit/8cd8a43d19b1fd13acf7859cf0753c1464a1ba4a)]
+- Refs #291136 - Add BYOC Collection field in DatasetDownloadInformationWidget. [GhitaB - [`107de57`](https://github.com/eea/volto-clms-theme/commit/107de57cacb9ea6691722937b42d625cc154e6b3)]
+### [1.1.247](https://github.com/eea/volto-clms-theme/compare/1.1.246...1.1.247) - 8 August 2025
+
+#### :bug: Bug Fixes
+
+- fix: stylelint [ana-oprea - [`c1ae7f6`](https://github.com/eea/volto-clms-theme/commit/c1ae7f6c223abefc96b1552192faae729df23bc4)]
+- fix: stylelint [ana-oprea - [`8afa2ec`](https://github.com/eea/volto-clms-theme/commit/8afa2ecce08e741046f6225f3e9f4064b775a930)]
+- fix: stylelint [ana-oprea - [`806f269`](https://github.com/eea/volto-clms-theme/commit/806f26984b501516ea5bff5b057b4fd594208ce9)]
+
+### [1.1.246](https://github.com/eea/volto-clms-theme/compare/1.1.245...1.1.246) - 7 August 2025
+
 ### [1.1.245](https://github.com/eea/volto-clms-theme/compare/1.1.244...1.1.245) - 23 July 2025
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.246",
+  "version": "1.1.248",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclProductToggleView.jsx

@@ -98,22 +98,24 @@ const CclProductToggleView = (props) => {
   return (
     <div className="product-tab-view">
       <div className="container">
-        {props.data.productIcon === 'Landscape green bg' ? (
-          <ReactSVG src={LandCoverImage} />
-        ) : props.data.productIcon === 'Warning green bg' ? (
-          <ReactSVG src={PriorityAreaImage} />
-        ) : props.data.productIcon === 'Leaf green bg' ? (
-          <ReactSVG src={BioGeoPhysicalImage} />
-        ) : props.data.productIcon === 'Computer green bg' ? (
-          <ReactSVG src={GroundMotionImage} />
-        ) : props.data.productIcon === 'Database green bg' ? (
-          <ReactSVG src={ReferenceAndValidationImage} />
-        ) : props.data.productIcon === 'Satellite green bg' ? (
-          <ReactSVG src={SatelliteImage} />
-        ) : (
-          ''
-        )}
-        <div className="product-title">{props.data.title}</div>
+        <div className="header-row">
+          {props.data.productIcon === 'Landscape green bg' ? (
+            <ReactSVG src={LandCoverImage} />
+          ) : props.data.productIcon === 'Warning green bg' ? (
+            <ReactSVG src={PriorityAreaImage} />
+          ) : props.data.productIcon === 'Leaf green bg' ? (
+            <ReactSVG src={BioGeoPhysicalImage} />
+          ) : props.data.productIcon === 'Computer green bg' ? (
+            <ReactSVG src={GroundMotionImage} />
+          ) : props.data.productIcon === 'Database green bg' ? (
+            <ReactSVG src={ReferenceAndValidationImage} />
+          ) : props.data.productIcon === 'Satellite green bg' ? (
+            <ReactSVG src={SatelliteImage} />
+          ) : (
+            ''
+          )}
+          <div className="product-title">{props.data.title}</div>
+        </div>
         <TabsComponent {...props} />
       </div>
       <div className="product-description">{props.data.description}</div>

package/src/components/CLMSDatasetDetailView/datasetinfocontent.less

@@ -1,3 +1,40 @@
 .characteristic-row {
   padding-bottom: 0.85rem !important;
 }
+
+@media (max-width: 768px) {
+  .dataset-info-documents .accordion-block {
+    .grid {
+      .column {
+        width: 50% !important;
+        max-width: 50% !important;
+        flex: 0 0 50% !important;
+        padding: 0.5rem !important;
+      }
+
+      .row {
+        margin: 0 !important;
+      }
+    }
+  }
+
+  .characteristic-row {
+    padding-bottom: 1.2rem !important;
+    margin-bottom: 0.5rem;
+
+    strong {
+      font-size: 0.9rem;
+      line-height: 1.3;
+    }
+
+    .ui.label {
+      display: inline-block;
+      max-width: 100%;
+      padding: 0.5em 0.7em !important;
+      margin-top: 0.4rem;
+      font-size: 0.85rem !important;
+      white-space: normal;
+      word-break: break-word;
+    }
+  }
+}

package/src/components/CLMSDownloadsView/FileCard.jsx

@@ -164,7 +164,11 @@ const FileCard = (props) => {
             width={['In_progress', 'Queued'].includes(item?.Status) ? 8 : 10}
           >
             <Header as="h3">{`Task ID: ${item?.TaskID}`}</Header>
-            <Header.Subheader as="h4">{`Job ID: ${item?.FMETaskId}`}</Header.Subheader>
+            <Header.Subheader as="h4">{`Job ID: ${
+              item?.cdse_task_role === 'parent'
+                ? 'CDSE PROCESSING...'
+                : item?.FMETaskId
+            }`}</Header.Subheader>
             <Segment basic className="file-datetimes">
               {item?.RegistrationDateTime && (
                 <>

package/src/components/Widgets/DatasetDownloadInformationWidget.jsx

@@ -14,6 +14,12 @@ const ItemSchema = () => ({
       description: '',
       type: 'string',
     },
+    byoc_collection: {
+      title: 'BYOC Collection',
+      description:
+        'To download the datasets via CDSE, it is necessary to include a BYOC identifier. Example: 3fdh95a1-rc49-4676-b285-c1d00g4bag1a',
+      type: 'string',
+    },
     full_path: {
       title: 'Enter the path to the full dataset download file',
       description:
@@ -69,6 +75,7 @@ const ItemSchema = () => ({
       fields: [
         'name',
         'collection',
+        'byoc_collection',
         'full_path',
         'full_format',
         'full_source',

package/src/customizations/volto/helpers/Html/Html.jsx

@@ -0,0 +1,210 @@
+/**
+ * Html helper.
+ * @module helpers/Html
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import serialize from 'serialize-javascript';
+import { join } from 'lodash';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
+import { runtimeConfig } from '@plone/volto/runtime_config';
+import config from '@plone/volto/registry';
+
+const CRITICAL_CSS_TEMPLATE = `function alter() {
+  document.querySelectorAll("head link[rel='prefetch']").forEach(function(el) { el.rel = 'stylesheet'});
+}
+if (window.addEventListener) {
+  window.addEventListener('DOMContentLoaded', alter, false)
+} else {
+  window.onload=alter
+}`;
+
+export const loadReducers = (state = {}) => {
+  const { settings } = config;
+  return Object.assign(
+    {},
+    ...Object.keys(state).map((name) =>
+      settings.initialReducersBlacklist.includes(name)
+        ? {}
+        : { [name]: state[name] },
+    ),
+  );
+};
+
+/**
+ * Html class.
+ * Wrapper component containing HTML metadata and boilerplate tags.
+ * Used in server-side code only to wrap the string output of the
+ * rendered route component.
+ *
+ * The only thing this component doesn't (and can't) include is the
+ * HTML doctype declaration, which is added to the rendered output
+ * by the server.js file.
+ *
+ * Critical.css behaviour: when a file `public/critical.css` is present, the
+ * loading of stylesheets is changed. The styles in critical.css are inlined in
+ * the generated HTML, and the whole story needs to change completely: instead
+ * of treating stylesheets as priority for rendering, we want to defer their
+ * loading as much as possible. So we change the stylesheets to be prefetched
+ * and we switch their rel back to stylesheets at document ready event.
+ *
+ * @function Html
+ * @param {Object} props Component properties.
+ * @param {Object} props.assets Assets to be rendered.
+ * @param {Object} props.component Content to be rendered as child node.
+ * @param {Object} props.store Store object.
+ * @returns {string} Markup of the not found page.
+ */
+
+/**
+ * Html class.
+ * @class Html
+ * @extends Component
+ */
+class Html extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    extractor: PropTypes.shape({
+      getLinkElements: PropTypes.func.isRequired,
+      getScriptElements: PropTypes.func.isRequired,
+      getStyleElements: PropTypes.func.isRequired,
+    }).isRequired,
+    markup: PropTypes.string.isRequired,
+    store: PropTypes.shape({
+      getState: PropTypes.func,
+    }).isRequired,
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const {
+      extractor,
+      markup,
+      store,
+      criticalCss,
+      apiPath,
+      publicURL,
+    } = this.props;
+    const head = Helmet.rewind();
+    const bodyClass = join(BodyClass.rewind(), ' ');
+    const htmlAttributes = head.htmlAttributes.toComponent();
+
+    return (
+      <html lang={htmlAttributes.lang}>
+        <head>
+          <meta charSet="utf-8" />
+          {head.base.toComponent()}
+          {head.title.toComponent()}
+          {head.meta.toComponent()}
+          {head.link.toComponent()}
+          {head.script.toComponent()}
+
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `window.env = ${serialize({
+                ...runtimeConfig,
+                // Seamless mode requirement, the client need to know where the API is located
+                // if not set in the API_PATH
+                ...(apiPath && {
+                  apiPath,
+                }),
+                ...(publicURL && {
+                  publicURL,
+                }),
+              })};`,
+            }}
+          />
+
+          <link rel="icon" href="/favicon.ico" sizes="any" />
+          <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+          <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/apple-touch-icon.png"
+          />
+          <link rel="manifest" href="/site.webmanifest" />
+          <meta name="generator" content="Plone 6 - https://plone.org" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <meta name="mobile-web-app-capable" content="yes" />
+          {process.env.NODE_ENV === 'production' && criticalCss && (
+            <style
+              dangerouslySetInnerHTML={{ __html: this.props.criticalCss }}
+            />
+          )}
+          {/* Add the crossorigin while in development */}
+          {extractor.getLinkElements().map((elem) =>
+            React.cloneElement(elem, {
+              crossOrigin:
+                process.env.NODE_ENV === 'production' ? undefined : 'true',
+              rel: !criticalCss
+                ? elem.props.rel
+                : elem.props.as === 'style'
+                ? 'prefetch'
+                : elem.props.rel,
+            }),
+          )}
+          {/* Styles in development are loaded with Webpack's style-loader, in production,
+              they need to be static*/}
+          {process.env.NODE_ENV === 'production' ? (
+            criticalCss ? (
+              <>
+                <script
+                  dangerouslySetInnerHTML={{
+                    __html: CRITICAL_CSS_TEMPLATE,
+                  }}
+                ></script>
+                {extractor.getStyleElements().map((elem) => (
+                  <noscript>
+                    {React.cloneElement(elem, {
+                      rel: 'stylesheet',
+                      crossOrigin:
+                        process.env.NODE_ENV === 'production'
+                          ? undefined
+                          : 'true',
+                    })}
+                  </noscript>
+                ))}
+              </>
+            ) : (
+              extractor.getStyleElements()
+            )
+          ) : undefined}
+        </head>
+        <body className={bodyClass}>
+          <div role="navigation" aria-label="Toolbar" id="toolbar" />
+          <div id="main" dangerouslySetInnerHTML={{ __html: markup }} />
+          <div role="complementary" aria-label="Sidebar" id="sidebar" />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `window.__data=${serialize(
+                loadReducers(store.getState()),
+              )};`,
+            }}
+            charSet="UTF-8"
+          />
+          {/* Add the crossorigin while in development */}
+          {this.props.extractScripts !== false
+            ? extractor.getScriptElements().map((elem) =>
+                React.cloneElement(elem, {
+                  crossOrigin:
+                    process.env.NODE_ENV === 'production' ? undefined : 'true',
+                }),
+              )
+            : ''}
+        </body>
+      </html>
+    );
+  }
+}
+
+export default Html;

package/theme/site/extras/ccl-tabs.less

@@ -87,3 +87,58 @@
     }
   }
 }
+
+// Mobile responsive styles
+@media (max-width: 768px) {
+  .ccl-container.ccl-container-flex.tab-container.tabs-vertical-product {
+    flex-direction: column !important;
+  }
+
+  .tabs-vertical-product {
+    &.tab-container {
+      .tabs {
+        width: 100% !important;
+
+        nav {
+          flex-direction: column;
+          width: 100% !important;
+          max-width: 100% !important;
+
+          .tab {
+            flex: none !important;
+            width: 100% !important;
+            max-width: 100% !important;
+            margin-right: 0 !important;
+            margin-bottom: 0.5rem;
+            min-height: 48px;
+            box-sizing: border-box;
+
+            &:last-of-type {
+              margin-bottom: 0;
+            }
+
+            &:first-of-type {
+              border: 1px solid @clmsGreen;
+            }
+          }
+
+          .tab > a,
+          .tab > span {
+            min-height: 44px;
+            display: flex !important;
+            align-items: center;
+            padding: 0.75rem 1rem !important;
+            width: 100% !important;
+            max-width: 100% !important;
+            box-sizing: border-box;
+          }
+        }
+      }
+
+      .panels {
+        margin-top: 1rem;
+        width: 100% !important;
+      }
+    }
+  }
+}

package/theme/site/extras/product-tab-toggle.less

@@ -8,16 +8,21 @@
     cursor: pointer;
     transition: all 0.5s ease;
 
-    .injected-svg {
+    .header-row {
       display: flex;
       align-items: center;
-      margin-right: 0.5rem;
-    }
+      
+      .injected-svg {
+        display: flex;
+        align-items: center;
+        margin-right: 0.5rem;
+      }
 
-    .product-title {
-      font-size: 18px;
-      font-weight: bold;
-      color: #273b4b;
+      .product-title {
+        font-size: 18px;
+        font-weight: bold;
+        color: #273b4b;
+      }
     }
   }
   .product-description {
@@ -48,3 +53,32 @@
   background-color: @clmsGreen;
   color: white;
 }
+
+@media (max-width: 768px) {
+  .CCLTabsProductViewToggle .product-tab-view {
+    .container {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.75rem;
+    }
+    
+    .header-row {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      
+      .injected-svg {
+        margin-right: 0.5rem;
+      }
+      
+      .product-title {
+        flex: 1;
+      }
+    }
+  }
+
+  .button-group {
+    margin-left: 0;
+    align-self: center;
+  }
+}