@eeacms/volto-clms-theme 1.0.146 → 1.0.147

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.147](https://github.com/eea/volto-clms-theme/compare/1.0.146...1.0.147) - 22 November 2022
+
+#### :rocket: New Features
+
+- feat: show large spatial resolution slider values in km [joewdavies - [`30392ae`](https://github.com/eea/volto-clms-theme/commit/30392ae39b41ec77030a168eb5bbef4308b671d0)]
+- feat: usecase view [ionlizarazu - [`f048009`](https://github.com/eea/volto-clms-theme/commit/f04800954d72bb70c0c9bd86a6214c4b341f8ec6)]
+- feat: UseCases view [Mikel Larreategi - [`8135b9e`](https://github.com/eea/volto-clms-theme/commit/8135b9e09605fe3e3bf215c5f7d0c6b3123da677)]
+- feat: remove related datasets and products from the usecase view [Mikel Larreategi - [`e379631`](https://github.com/eea/volto-clms-theme/commit/e379631fff69d4ae6ebdb505269ba0d021005969)]
+- feat: new listing variation without description [Mikel Larreategi - [`241e979`](https://github.com/eea/volto-clms-theme/commit/241e9791c4a2a15670f267b835f411257bf4bfac)]
+- feat: new variation [Mikel Larreategi - [`97ecea7`](https://github.com/eea/volto-clms-theme/commit/97ecea7c560f8587ca940d3fc3bcf3458d40277a)]
+
+#### :bug: Bug Fixes
+
+- fix: prevent dropdowns from being cut off CLMS-1542 [joewdavies - [`fdbc5e2`](https://github.com/eea/volto-clms-theme/commit/fdbc5e24cf8e61f336952a80277d6465d3d51e7a)]
+- fix: prevent dropdowns from being cut off CLMS-1542 [joewdavies - [`bb516f5`](https://github.com/eea/volto-clms-theme/commit/bb516f5ae91bfb193dca7c9e7eea914af2a813b3)]
+
 ### [1.0.146](https://github.com/eea/volto-clms-theme/compare/1.0.145...1.0.146) - 15 November 2022
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.146",
+  "version": "1.0.147",
   "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/VoltoSearchBlock/DoubleRangeFacet.jsx

@@ -66,6 +66,10 @@ const DoubleRangeFacet = (props) => {
     );
   };
 
+  const mToKm = (m) => {
+    return m >= 1000 ? Math.round((m / 1000) * 10) / 10 + 'km' : m + 'm';
+  };
+
   return (
     <fieldset className="ccl-fieldset">
       <div
@@ -78,7 +82,7 @@ const DoubleRangeFacet = (props) => {
       >
         <legend className="ccl-form-legend">{facet.title}</legend>
       </div>
-      <div class="range-container">
+      <div className="range-container">
         <Segment basic padded>
           <InputRange
             minValue={startingValues.min}
@@ -92,6 +96,13 @@ const DoubleRangeFacet = (props) => {
             onChange={(changedValue) =>
               onChangeRange(changedValue, onChange, startingValues)
             }
+            formatLabel={(value) => {
+              if (facet.field.value === 'spatial_resolution') {
+                return mToKm(value);
+              } else {
+                return value;
+              }
+            }}
           />
         </Segment>
         <br />

package/src/components/Blocks/customBlocks.js

@@ -112,7 +112,19 @@ const availableVariations = [
     'Files list (link to download)',
     'downloadFile',
   ),
+  listingVariation(
+    'CclFilesWithoutDate',
+    false,
+    'Files list (without dates)',
+    'fileWithoutDates',
+  ),
   listingVariation('CclCardsline', false, 'Line list with Image', 'line'),
+  listingVariation(
+    'CclCardsline-no-description',
+    false,
+    'Line list with Image (no description)',
+    'line-no-description',
+  ),
   listingVariation(
     'CclCardsline-color',
     false,

package/src/components/CLMSUseCasesView/CLMSUseCasesView.jsx

@@ -1,40 +1,17 @@
 import React, { useEffect } from 'react';
-import AnimateHeight from 'react-animate-height';
 import { useDispatch, useSelector } from 'react-redux';
-import { Accordion } from 'semantic-ui-react';
+import { Image, Grid, List } from 'semantic-ui-react';
 
 import { getVocabulary } from '@plone/volto/actions';
-import { Icon } from '@plone/volto/components';
-import config from '@plone/volto/registry';
+import { UniversalLink } from '@plone/volto/components';
+import PlaceHolder from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-thumbnail-placeholder.jpg';
+import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 
-import { CLMSRelatedItems } from '../CLMSRelatedItems';
-// import { getVocabulary } from '@plone/volto/actions';
+import './usecases.less';
 
 const CLMSUseCaseView = (props) => {
   const { content } = props;
 
-  const [activeIndex, setActiveIndex] = React.useState([99]);
-
-  const handleClick = ({ index }) => {
-    const newIndex =
-      activeIndex.indexOf(index) === -1
-        ? [...activeIndex, index]
-        : activeIndex.filter((item) => item !== index);
-
-    setActiveIndex(newIndex);
-  };
-
-  const [activeDatasetIndex, setActiveDatasetIndex] = React.useState([99]);
-
-  const handleDatasetClick = ({ datasetindex }) => {
-    const newDatasetIndex =
-      activeDatasetIndex.indexOf(datasetindex) === -1
-        ? [...activeDatasetIndex, datasetindex]
-        : activeDatasetIndex.filter((item) => item !== datasetindex);
-
-    setActiveDatasetIndex(newDatasetIndex);
-  };
-
   const dispatch = useDispatch();
   const TOPICS_VOCABULARY_NAME = 'clms.types.TopicsVocabulary';
   useEffect(() => {
@@ -59,146 +36,77 @@ const CLMSUseCaseView = (props) => {
     })
     .sort();
 
-  const titleIcons = config.blocks?.blocksConfig?.accordion?.titleIcons;
-
-  function iconName(iconData, iTitleIcons) {
-    return iconData?.right_arrows
-      ? iTitleIcons.rightPosition
-      : iTitleIcons.leftPosition;
-  }
-  // console.log(getVocabulary({ vocabNameOrURL: content.topics }));
   return (
     <div className="ccl-container">
-      <h1 className="page-title">{content.title}</h1>
-      <div className="news-detail">
-        {content?.image && (
-          <figure className="news-detail-image">
-            <img
-              src={
-                content?.image
-                  ? content?.image?.download
-                  : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-              }
-              alt={content?.image ? content?.image?.filename : 'Placeholder'}
-            />
-            <figcaption>{content?.image_caption}</figcaption>
-          </figure>
-        )}
-        <div className="news-detail-content">
-          {content?.submittingProducionYear && (
-            <p>
-              <strong>{'Submitting production year: '}</strong>
-              {content?.submittingProducionYear}
-            </p>
-          )}
-          {content?.responsibleOrganization && (
-            <p>
-              <strong>{'Responsable organization: '}</strong>
-              {content?.responsibleOrganization}
-            </p>
-          )}
-          {content?.contactName && (
-            <p>
-              <strong>{'Contact name: '}</strong>
-              {content?.contactName}
-            </p>
-          )}
-          {content?.contactEmail && (
-            <p>
-              <strong>{'Contact email: '}</strong>
-              {content?.contactEmail}
-            </p>
-          )}
-          {topicValues.length > 0 && (
-            <>
-              <strong>{'Use case topics: '}</strong>
-              <ul>
+      {content?.external_url ? (
+        <UniversalLink href={content.external_url}>
+          <h1 className="page-title">{content.title}</h1>
+        </UniversalLink>
+      ) : (
+        <h1 className="page-title">{content.title}</h1>
+      )}
+      <Grid>
+        <Grid.Row columns={2}>
+          <Grid.Column width={3}>
+            {content?.image?.scales?.mini?.download ? (
+              <figure>
+                <Image
+                  src={content?.image?.scales?.mini?.download}
+                  alt={
+                    content?.image ? content?.image?.filename : 'Placeholder'
+                  }
+                />
+              </figure>
+            ) : (
+              <Image
+                src={PlaceHolder}
+                alt={content?.image?.alt || 'Placeholder'}
+              />
+            )}
+          </Grid.Column>
+          <Grid.Column width={9}>
+            {topicValues.length > 0 && (
+              <List celled horizontal className="usecase-topic-values-list">
                 {topicValues.map((topic, key) => (
-                  <li key={key}>
+                  <List.Item key={key}>
                     <strong>{topic}</strong>
-                  </li>
+                  </List.Item>
                 ))}
-              </ul>
-            </>
-          )}
-          {content?.outcome && (
+              </List>
+            )}
             <p>
-              <strong>{'Use case outcome: '}</strong>
-              {content?.outcome}
+              <List celled horizontal className="usecase-other-values-list">
+                <List.Item>
+                  {content?.submittingProducionYear && (
+                    <span className="usecase-year">
+                      {content?.submittingProducionYear}
+                    </span>
+                  )}
+                </List.Item>
+                <List.Item>
+                  {content?.taxonomy_use_case_spatial_coverage
+                    .map(
+                      (taxonomy_use_case_spatial_coverage) =>
+                        taxonomy_use_case_spatial_coverage.title,
+                    )
+                    .sort()
+                    .join(', ')}
+                </List.Item>
+                <List.Item>
+                  {content?.responsibleOrganization && (
+                    <span className="usecase-detail-item">
+                      {content?.responsibleOrganization}
+                    </span>
+                  )}
+                </List.Item>
+              </List>
             </p>
-          )}
-          {content?.taxonomy_use_case_spatial_coverage.length > 0 && (
-            <>
-              <strong>{'Geographic coverage: '}</strong>
-              <ul>
-                {content?.taxonomy_use_case_spatial_coverage.map(
-                  (taxonomy_use_case_spatial_coverage, key) => (
-                    <li key={key}>
-                      <strong>
-                        {taxonomy_use_case_spatial_coverage.title}
-                      </strong>
-                    </li>
-                  ),
-                )}
-              </ul>
-            </>
-          )}
-          {content?.products?.length > 0 && (
-            <Accordion fluid styled>
-              <Accordion.Title
-                as={'h2'}
-                onClick={() => handleClick({ index: 0 })}
-                className={'accordion-title align-arrow-right'}
-              >
-                {activeIndex.includes(0) ? (
-                  <Icon
-                    name={iconName(content, titleIcons.opened)}
-                    size="24px"
-                  />
-                ) : (
-                  <Icon
-                    name={iconName(content, titleIcons.closed)}
-                    size="24px"
-                  />
-                )}
-                <span>Related products</span>
-              </Accordion.Title>
-              <Accordion.Content active={activeIndex.includes(0)}>
-                <AnimateHeight animateOpacity duration={500} height={'auto'}>
-                  <CLMSRelatedItems items={content.products} />
-                </AnimateHeight>
-              </Accordion.Content>
-            </Accordion>
-          )}
-          {content?.datasets?.length > 0 && (
-            <Accordion fluid styled>
-              <Accordion.Title
-                as={'h2'}
-                onClick={() => handleDatasetClick({ datasetindex: 0 })}
-                className={'accordion-title align-arrow-right'}
-              >
-                {activeDatasetIndex.includes(0) ? (
-                  <Icon
-                    name={iconName(content, titleIcons.opened)}
-                    size="24px"
-                  />
-                ) : (
-                  <Icon
-                    name={iconName(content, titleIcons.closed)}
-                    size="24px"
-                  />
-                )}
-                <span>Related datasets</span>
-              </Accordion.Title>
-              <Accordion.Content active={activeDatasetIndex.includes(0)}>
-                <AnimateHeight animateOpacity duration={500} height={'auto'}>
-                  <CLMSRelatedItems items={content.datasets} />
-                </AnimateHeight>
-              </Accordion.Content>
-            </Accordion>
-          )}
-        </div>
-      </div>
+            <div className="usecase-body-text">
+              {content?.text && <StringToHTML string={content?.text?.data} />}
+            </div>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
     </div>
   );
 };

package/src/components/CLMSUseCasesView/usecases.less

@@ -0,0 +1,21 @@
+div.ui.celled.list.usecase-topic-values-list {
+  padding-bottom: 1.8rem;
+}
+
+div.ui.celled.list.usecase-topic-values-list .item:first-child,
+div.ui.celled.list.usecase-other-values-list .item:first-child {
+  border-left: none;
+}
+
+div.ui.celled.list.usecase-topic-values-list .item:last-child,
+div.ui.celled.list.usecase-other-values-list .item:last-child {
+  border-right: none;
+}
+
+div.ui.celled.list span.usecase-year {
+  font-size: 1.1rem;
+}
+
+div.usecase-body-text {
+  padding-left: 0.5em;
+}

package/src/components/CclCard/CclCard.jsx

@@ -109,6 +109,7 @@ function CclCard(props) {
     'globalSearch',
     'file',
     'downloadFile',
+    'fileWithoutDates',
   ];
   const wrapperClass =
     'card-' +
@@ -116,7 +117,12 @@ function CclCard(props) {
       ? 'doc'
       : type === 'downloadFile'
       ? 'file'
+      : type === 'fileWithoutDates'
+      ? 'file card-file-aligned'
+      : type === 'line-no-description'
+      ? 'line card-line-no-description'
       : type || 'line');
+
   return (
     <CardLink
       url={url}
@@ -183,6 +189,19 @@ function CclCard(props) {
                 </div>
               </>
             )}
+            {type === 'fileWithoutDates' && (
+              <>
+                <div className="card-icon">
+                  <Icon name="file alternate outline" />
+                </div>
+                <div className="card-text">
+                  <div className="card-file-title">
+                    <CardLink url={url}>{card?.title}</CardLink>
+                  </div>
+                  {children}
+                </div>
+              </>
+            )}
             {type === 'globalSearch' && (
               <>
                 <Label ribbon="right" color="olive">
@@ -290,7 +309,9 @@ function CclCard(props) {
                 <CardLink url={url}>{card?.title}</CardLink>
                 {/* <CardLink url={url} title={card?.title} /> */}
               </div>
-              <div className="card-description">{card?.description}</div>
+              {type !== 'line-no-description' && (
+                <div className="card-description">{card?.description}</div>
+              )}
               {children}
             </div>
           </>

package/src/components/CclCard/cards.less

@@ -2,6 +2,7 @@
 .card-line {
   position: relative;
   display: flex;
+  width: 100%;
   padding: 1rem 0;
 }
 
@@ -26,6 +27,10 @@
   object-fit: cover;
 }
 
+.card-line-no-description {
+  align-items: center;
+}
+
 .card-text {
   width: 100%;
 }
@@ -86,6 +91,14 @@
   color: #adb0b8;
 }
 
+.card-file-aligned {
+  align-items: center;
+}
+
+.card-file-aligned .card-file-title {
+  margin-bottom: 0;
+}
+
 .card-line-color .card-image {
   width: 12rem;
   height: 12rem;

package/theme/clms/css/styles.less

@@ -1275,4 +1275,9 @@ div#page-document h1.documentFirstHeading {
 .technical-library-edit-link {
   vertical-align: middle;
   margin-left: 5px;
+}
+
+// CLMS-1542
+main {
+  overflow: visible !important;
 }