@eeacms/volto-marine-policy 1.0.0

package/src/components/theme/DatabaseItemView/style.less

@@ -0,0 +1,87 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
+.database-item-view {
+  .breadcrumbs,
+  .herosection {
+    display: none;
+  }
+
+  .content-area {
+    padding-top: 0;
+  }
+
+  .ui.container.tags {
+    display: none;
+  }
+
+  .item-snippet-type {
+    display: none;
+  }
+
+  .metadata-header {
+    margin-top: 2em;
+
+    h1 {
+      padding-bottom: 10px;
+      border-bottom: 1px solid #e7e7e7;
+      margin-top: 0 !important;
+      margin-bottom: 10px;
+    }
+
+    .item-modal-metadata {
+      display: flex;
+      flex-direction: row;
+
+      @media only screen and (max-width: 600px) {
+        flex-direction: column;
+      }
+    }
+
+    .metadata-section {
+      margin-right: 15px;
+      font-size: 13px;
+    }
+  }
+
+  .item-table.item-metadata-table {
+    margin: 2.5em 0;
+
+    .ui.table {
+      td {
+        @media only screen and (max-width: @tabletBreakpoint) {
+          padding-right: 0 !important;
+          padding-left: 0 !important;
+        }
+      }
+    }
+  }
+
+  .item-type {
+    margin-bottom: 0.5em;
+    color: #7fc1d0;
+    font-size: 20px;
+    text-transform: uppercase;
+  }
+
+  .item-table .ui.definition.table tr td:first-child:not(.ignored),
+  .item-table .ui.definition.table tr td.definition {
+    font-size: 17px;
+    font-weight: 500;
+  }
+
+  .resources-link {
+    display: inline-block;
+    color: #747474;
+    font-size: 15px;
+    font-weight: 400;
+
+    svg {
+      position: relative;
+      top: 5px;
+      margin-right: 8px;
+    }
+  }
+}

package/src/components/theme/Header/HeroSection.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import './less/herosection.less';
+
+function HeroSection(props) {
+  const {
+    image_caption,
+    image_url,
+    content_description,
+    content_title,
+  } = props;
+
+  return (
+    <>
+      {image_url && (
+        <div className="herosection">
+          <div className="herosection-content-wrapper">
+            <div
+              className="herosection-content-image document-image"
+              style={{
+                backgroundImage: `url(${image_url})`,
+              }}
+            />
+            <div className="herosection-content-image-overlay" />
+            <div className="ui container herosection-content">
+              <h1 className="herosection-content-title">{content_title}</h1>
+              {content_description && (
+                <p className={'herosection-content-description'}>
+                  {content_description}
+                </p>
+              )}
+              {image_caption && (
+                <p className="herosection-content-image-caption">
+                  {image_caption}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default HeroSection;

package/src/components/theme/Header/StickyHeader.jsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import cx from 'classnames';
+
+const StickyHeader = (props) => {
+  const { stickyBreakpoint } = props;
+  const innerWidth = __CLIENT__ && window && window.innerWidth;
+  const scrollY = __CLIENT__ && window && window.scrollY;
+
+  const [width, setWidth] = useState(innerWidth);
+  const [y, setY] = useState(scrollY);
+  const [scrollingUp, setScrollingUp] = useState(false);
+
+  const handleScroll = useCallback(
+    (e) => {
+      const window = e.currentTarget;
+      if (y > window.scrollY && window.pageYOffset > 100) {
+        setScrollingUp(true);
+      } else {
+        setScrollingUp(false);
+      }
+      setY(window.scrollY);
+    },
+    [y],
+  );
+
+  const handleWindowResize = () => {
+    setWidth(window.innerWidth);
+  };
+
+  useEffect(() => {
+    setY(window.scrollY);
+    window.addEventListener('resize', handleWindowResize);
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll]);
+
+  return (
+    <div
+      className={cx({
+        'sticky-header': scrollingUp && width < stickyBreakpoint,
+      })}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default StickyHeader;

package/src/components/theme/Header/less/globals.less

@@ -0,0 +1,18 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
+/* Enables customization of addons */
+.loadAddonOverrides() {
+  @import (optional) '@{siteFolder}/@{type}s/@{element}.overrides';
+  @import (optional)
+    '@{siteFolder}/../addons/@{addon}/@{addontype}/@{addonelement}.overrides';
+}
+
+/* Helper to load variables */
+.loadAddonVariables() {
+  @import (optional) '@{addonelement}.variables';
+  @import (optional)
+    '@{siteFolder}/../addons/@{addon}/@{addontype}/@{addonelement}.variables';
+}

package/src/components/theme/Header/less/herosection.less

@@ -0,0 +1,64 @@
+@type: 'extra';
+@element: 'custom';
+
+@import './globals.less';
+
+@addon: 'volto-freshwater';
+@addontype: 'header';
+@addonelement: 'herosection';
+
+.loadAddonVariables();
+
+/*******************************
+            Custom Style
+*******************************/
+.herosection-content {
+  position: absolute;
+  right: 0;
+  bottom: 1rem;
+  left: 0;
+  margin: @heroSectionContentMargin;
+  color: @heroSectionContentColor;
+}
+
+.herosection-content-image {
+  height: 100%;
+  min-height: @heroSectionContentImageMinHeight;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.herosection-content-image-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: @heroSectionContentImageOverlayBackground;
+}
+
+.herosection-content-title {
+  margin: @heroSectionContentTitleMargin;
+  color: @heroSectionContentColor;
+  font-size: @heroSectionContentTitleSize;
+  text-shadow: @heroSectionContentTitleShadow;
+}
+
+.herosection-content-description {
+  margin: @heroSectionContentDescriptionMargin;
+  text-shadow: @heroSectionContentDescriptionShadow;
+}
+
+.herosection-content-image-caption {
+  font-size: @heroSectionContentImageCaptionFontSize;
+  font-style: @heroSectionContentImageCaptionFontStyle;
+  opacity: @heroSectionContentImageCaptionOpacity;
+  text-shadow: @heroSectionContentImageCaptionShadow;
+}
+
+/*******************************
+         End  Custom Style
+*******************************/
+
+.loadAddonOverrides();

package/src/components/theme/Header/less/herosection.variables

@@ -0,0 +1,18 @@
+@heroSectionContentColor: #FFF;
+@heroSectionContentMargin: 0 0 0.25rem 0;
+
+@heroSectionContentImageMinHeight: 360px;
+@heroSectionContentImageOverlayBackground: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5) 100%);
+
+@heroSectionContentTitleMargin: 0 0 1.5rem 0 !important;
+@heroSectionContentTitleSize: 40px;
+@heroSectionContentTitleWeight: bold;
+@heroSectionContentTitleShadow: 0 1px 1px black;
+
+@heroSectionContentDescriptionMargin: -2rem 0 2rem 0 !important;
+@heroSectionContentDescriptionShadow: @heroSectionContentTitleShadow;
+
+@heroSectionContentImageCaptionFontSize: 11px;
+@heroSectionContentImageCaptionFontStyle: italic;
+@heroSectionContentImageCaptionOpacity: 0.8;
+@heroSectionContentImageCaptionShadow: @heroSectionContentTitleShadow;

package/src/components/theme/ItemMetadata/ItemMetadata.jsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import { Icon } from '@plone/volto/components';
+import { Table, Button } from 'semantic-ui-react';
+import { MapPreview } from '@eeacms/volto-marine-policy/components';
+import { getPath } from '@eeacms/volto-marine-policy/utils';
+import { useCopyToClipboard } from '@eeacms/volto-marine-policy/helpers';
+import config from '@plone/volto/registry';
+import shareSVG from '@plone/volto/icons/share.svg';
+
+const EEA_LICENSE =
+  'EEA standard re-use policy: unless otherwise indicated, ' +
+  're-use of content on the EEA website for commercial or ' +
+  'non-commercial purposes is permitted free of charge, ' +
+  'provided that the source is acknowledged ' +
+  '(https://www.eea.europa.eu/legal/copyright)';
+
+const ItemMetadata = (props) => {
+  const { settings } = config;
+  const { item, map_preview, shareItem, item_view } = props;
+  const source = item?.source?.[0] || item;
+
+  const {
+    description,
+    lineage,
+    embed_url,
+    webmap_url,
+    rights,
+    publisher,
+    dpsir_type,
+    theme,
+    report_type,
+    original_source,
+    temporal_coverage,
+    geo_coverage,
+  } = source;
+
+  const subject = source.Subject || source.subjects;
+  const item_path = shareItem ? getPath(source.getURL).replace('/api', '') : '';
+  const share_url = settings.publicURL + item_path;
+  const copyright = rights === 'EEA' ? EEA_LICENSE : rights;
+  const [copyUrlStatus, copyUrl] = useCopyToClipboard(share_url);
+  const [confirmationText, setConfirmationText] = React.useState(false);
+
+  React.useEffect(() => {
+    if (copyUrlStatus === 'copied') {
+      setConfirmationText('Share URL is copied to clipboard.');
+    } else if (copyUrlStatus === 'failed') {
+      setConfirmationText('Copy failed. Please try again.');
+    }
+  }, [copyUrlStatus]);
+
+  return (
+    <>
+      <div className="metadata-icons">
+        {shareItem && (
+          <div className="toolbar-button-wrapper">
+            <Button className="toolbar-button" title="Share" onClick={copyUrl}>
+              <Icon name={shareSVG} size="26px" />
+            </Button>
+            <span className="btn-text">Share</span>
+          </div>
+        )}
+
+        {map_preview && (embed_url || webmap_url) && (
+          <div className="map-preview">
+            <MapPreview
+              item={item}
+              tableau_url={embed_url}
+              map_url={webmap_url}
+              item_view={item_view}
+            />
+          </div>
+        )}
+      </div>
+
+      <div className="item-metadata-table">
+        <Table celled definition basic="very">
+          <Table.Body>
+            {source && (
+              <>
+                {description && (
+                  <Table.Row>
+                    <Table.Cell>Description</Table.Cell>
+                    <Table.Cell>
+                      {description}
+                      {lineage && (
+                        <p style={{ paddingTop: '1rem' }}>{lineage}</p>
+                      )}
+                    </Table.Cell>
+                  </Table.Row>
+                )}
+
+                {temporal_coverage &&
+                  Object.keys(temporal_coverage).length > 0 && (
+                    <Table.Row>
+                      <Table.Cell>Temporal coverage</Table.Cell>
+                      <Table.Cell>
+                        <div className="tag-types">
+                          {temporal_coverage.temporal.map((temp, i) => (
+                            <div key={i}>
+                              <p>{temp.label}</p>
+                            </div>
+                          ))}
+                        </div>
+                      </Table.Cell>
+                    </Table.Row>
+                  )}
+
+                {geo_coverage && Object.keys(geo_coverage).length > 0 && (
+                  <Table.Row>
+                    <Table.Cell>Spatial coverage</Table.Cell>
+                    <Table.Cell>
+                      <div className="geo-tags tag-types">
+                        {geo_coverage.geolocation.map((geo, i) => (
+                          <div key={i}>
+                            <p>{geo.label}</p>
+                          </div>
+                        ))}
+                      </div>
+                    </Table.Cell>
+                  </Table.Row>
+                )}
+                {theme && Array.isArray(theme) ? (
+                  <Table.Row>
+                    <Table.Cell>Theme</Table.Cell>
+                    <Table.Cell>
+                      <div className="tag-types">
+                        {theme.map((item, i) => (
+                          <div key={i}>
+                            <p>{item}</p>
+                          </div>
+                        ))}
+                      </div>
+                    </Table.Cell>
+                  </Table.Row>
+                ) : (
+                  <Table.Row>
+                    <Table.Cell>Theme</Table.Cell>
+                    <Table.Cell>{theme}</Table.Cell>
+                  </Table.Row>
+                )}
+                {publisher && (
+                  <Table.Row>
+                    <Table.Cell>Organisation</Table.Cell>
+                    <Table.Cell>
+                      <div className="tag-types">
+                        {publisher.map((item, i) => (
+                          <div key={i}>
+                            <p>{item.title}</p>
+                          </div>
+                        ))}
+                      </div>
+                    </Table.Cell>
+                  </Table.Row>
+                )}
+                {original_source && (
+                  <Table.Row>
+                    <Table.Cell>Source</Table.Cell>
+                    <Table.Cell>
+                      <a href={original_source} target="_blank" rel="noopener">
+                        {original_source}
+                      </a>
+                    </Table.Cell>
+                  </Table.Row>
+                )}
+
+                {rights && (
+                  <Table.Row>
+                    <Table.Cell>Rights</Table.Cell>
+                    <Table.Cell>{copyright}</Table.Cell>
+                  </Table.Row>
+                )}
+
+                {subject && subject.length > 0 && (
+                  <Table.Row>
+                    <Table.Cell>Keywords</Table.Cell>
+                    <Table.Cell>
+                      <div className="tag-types">
+                        {subject.map((tag, i) => (
+                          <div key={i}>
+                            <p>{tag}</p>
+                          </div>
+                        ))}
+                      </div>
+                    </Table.Cell>
+                  </Table.Row>
+                )}
+
+                {dpsir_type && (
+                  <Table.Row>
+                    <Table.Cell>DPSIR</Table.Cell>
+                    <Table.Cell>{dpsir_type.title || dpsir_type}</Table.Cell>
+                  </Table.Row>
+                )}
+
+                {report_type && (
+                  <Table.Row>
+                    <Table.Cell>Report type</Table.Cell>
+                    <Table.Cell>
+                      {report_type.title || source.report_type}
+                    </Table.Cell>
+                  </Table.Row>
+                )}
+              </>
+            )}
+          </Table.Body>
+        </Table>
+      </div>
+
+      {copyUrlStatus === 'copied' && (
+        <div className="copy-box">{confirmationText}</div>
+      )}
+    </>
+  );
+};
+
+export default ItemMetadata;

package/src/components/theme/ItemMetadata/ItemMetadataSnippet.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { formatItemType } from '@eeacms/volto-marine-policy/utils';
+
+const ItemMetadataSnippet = (props) => {
+  const { item } = props;
+  const source = item?.source?.[0] || item;
+  const type = item?.source?.[0]['@type'] || item['@type'];
+  const { topics, publication_year, legislative_reference } = source;
+
+  return (
+    <>
+      <div className="item-modal-metadata">
+        {type && (
+          <div className="metadata-tab-section item-snippet-type">
+            <span className="metadata-tab-title">Item: </span>
+            <span>{formatItemType(type)}</span>
+          </div>
+        )}
+
+        {topics && topics.length > 0 && (
+          <div className="metadata-tab-section">
+            <span className="metadata-tab-title">Topics: </span>
+            {Array.isArray(topics) ? (
+              <>
+                {topics.map((topic, i) => (
+                  <span key={i}>
+                    {topic.title}
+                    {i < topics.length - 1 ? ', ' : ''}
+                  </span>
+                ))}
+              </>
+            ) : (
+              <span>{topics.title}</span>
+            )}
+          </div>
+        )}
+
+        {publication_year && (
+          <div className="metadata-tab-section">
+            <span className="metadata-tab-title">Publication year: </span>
+            <span>{publication_year}</span>
+          </div>
+        )}
+
+        {legislative_reference && legislative_reference.length > 0 && (
+          <div className="metadata-tab-section">
+            <span className="metadata-tab-title">Legislative reference: </span>
+            {Array.isArray(legislative_reference) ? (
+              <>
+                {legislative_reference.map((tag, i) => (
+                  <span key={i}>
+                    {tag.title || tag}
+                    {i < legislative_reference.length - 1 ? ', ' : ''}
+                  </span>
+                ))}
+              </>
+            ) : (
+              <span>
+                {legislative_reference.title || legislative_reference}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default ItemMetadataSnippet;

package/src/components/theme/ItemMetadata/ItemTitle.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+const ItemTitle = (props) => {
+  const { item, token } = props;
+  const url = item.source ? item.source[0]['@id'] : item['@id'];
+
+  return item ? (
+    <>
+      {token ? (
+        <h3>
+          <Link to={url}>{item.title}</Link>
+        </h3>
+      ) : (
+        <h3>{item.title}</h3>
+      )}
+    </>
+  ) : (
+    ''
+  );
+};
+
+export default compose(
+  connect((state) => ({
+    token: state.userSession.token,
+  })),
+)(ItemTitle);