@eeacms/volto-n2k 1.0.20 → 1.0.22

package/CHANGELOG.md

@@ -4,11 +4,16 @@ 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.20](https://github.com/eea/volto-n2k/compare/1.0.19...1.0.20) - 15 March 2023
+### [1.0.22](https://github.com/eea/volto-n2k/compare/1.0.21...1.0.22) - 29 March 2023
 
 #### :hammer_and_wrench: Others
 
-- update layer for species and habitats [Claudia Ifrim - [`b2262fc`](https://github.com/eea/volto-n2k/commit/b2262fcb7416208ba3ce5368bbd50bda2e0e58f6)]
+- update [Miu Razvan - [`e9a407f`](https://github.com/eea/volto-n2k/commit/e9a407fe51e6f0664f4d2d8aafd32042c9650302)]
+- update [Miu Razvan - [`930c7d3`](https://github.com/eea/volto-n2k/commit/930c7d3af8c8541dd83616b4131f0c1639495d70)]
+### [1.0.21](https://github.com/eea/volto-n2k/compare/1.0.20...1.0.21) - 22 March 2023
+
+### [1.0.20](https://github.com/eea/volto-n2k/compare/1.0.19...1.0.20) - 22 March 2023
+
 ### [1.0.19](https://github.com/eea/volto-n2k/compare/1.0.18...1.0.19) - 7 March 2023
 
 ### [1.0.18](https://github.com/eea/volto-n2k/compare/1.0.17...1.0.18) - 25 February 2023

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -16,15 +16,13 @@
     "@eeacms/volto-datablocks",
     "@eeacms/volto-openlayers-map",
     "@eeacms/volto-resize-helper",
-    "@eeacms/volto-tabs-block",
-    "@eeacms/volto-bise"
+    "@eeacms/volto-tabs-block"
   ],
   "repository": {
     "type": "git",
     "url": "git@github.com:eea/volto-n2k.git"
   },
   "dependencies": {
-    "@eeacms/volto-bise": "*",
     "@eeacms/volto-datablocks": "*",
     "@eeacms/volto-openlayers-map": "*",
     "@eeacms/volto-resize-helper": "*",

package/src/components/index.js

@@ -1,3 +1,3 @@
-export { default as Header } from '@eeacms/volto-n2k/components/theme/Header/Header';
-export { default as Footer } from '@eeacms/volto-n2k/components/theme/Footer/Footer';
+// export { default as Header } from '@eeacms/volto-n2k/components/theme/Header/Header';
+// export { default as Footer } from '@eeacms/volto-n2k/components/theme/Footer/Footer';
 export { default as Sitemap } from '@eeacms/volto-n2k/components/theme/Sitemap/Sitemap';

package/src/components/manage/Blocks/CarouselHorizontal/HorizontalView.jsx

@@ -11,6 +11,7 @@ import cx from 'classnames';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import '@eeacms/volto-tabs-block/less/carousel.less';
+import './styles.less';
 
 const Slider = loadable(() => import('react-slick'));
 
@@ -27,8 +28,11 @@ const Dots = (props) => {
           >
             <button
               aria-label={`Select slide ${index + 1}`}
+              tabIndex={0}
               onClick={() => {
-                slider.current.slickGoTo(index);
+                if (slider.current) {
+                  slider.current.slickGoTo(index);
+                }
               }}
             />
           </li>
@@ -56,7 +60,12 @@ const ArrowsGroup = (props) => {
         <button
           aria-label="Previous slide"
           className="slick-arrow slick-prev"
-          onClick={slider.current.slickPrev}
+          onClick={() => {
+            if (slider.current) {
+              slider.current.slickPrev();
+            }
+          }}
+          tabIndex={0}
         >
           <Icon name={leftArrowSVG} size="50px" />
         </button>
@@ -67,7 +76,12 @@ const ArrowsGroup = (props) => {
         <button
           aria-label="Next slide"
           className="slick-arrow slick-next"
-          onClick={slider.current.slickNext}
+          onClick={() => {
+            if (slider.current) {
+              slider.current.slickNext();
+            }
+          }}
+          tabIndex={0}
         >
           {currentSlide === 0 && props.learnMore ? (
             <p className="learn-more">{props.learnMore}</p>
@@ -88,8 +102,9 @@ const ArrowsGroup = (props) => {
 const View = (props) => {
   const slider = React.useRef(null);
   const img = React.useRef(null);
-  const [imgHeight, setImgHeight] = React.useState(0);
+  // const [imgHeight, setImgHeight] = React.useState(0);
   const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
+  const blockId = props.id;
   const {
     activeTab = null,
     data = {},
@@ -100,7 +115,6 @@ const View = (props) => {
     setActiveTab = () => {},
   } = props;
   const activeTabIndex = tabsList.indexOf(activeTab);
-  // const tabData = tabs[activeTab] || {};
   const uiContainer = data.align === 'full' ? 'ui container' : false;
   const image = data.image || null;
 
@@ -120,28 +134,28 @@ const View = (props) => {
     },
   };
 
-  const panes = tabsList.map((tab, index) => {
-    return {
-      id: tab,
-      renderItem: (
-        <React.Fragment key={`slide-${tab}`}>
-          <RenderBlocks {...props} metadata={metadata} content={tabs[tab]} />
-          {index === 0 ? (
-            <div
-              className="divider"
-              style={{ height: `${imgHeight - 80}px` }}
-            />
-          ) : (
-            ''
-          )}
-        </React.Fragment>
-      ),
-    };
-  });
+  // const panes = tabsList.map((tab, index) => {
+  //   return {
+  //     id: tab,
+  //     renderItem: (
+  //       <React.Fragment key={`slide-${tab}`}>
+  //         <RenderBlocks {...props} metadata={metadata} content={tabs[tab]} />
+  //         {index === 0 ? (
+  //           <div
+  //             className="divider"
+  //             style={{ height: `${imgHeight - 80}px` }}
+  //           />
+  //         ) : (
+  //           ''
+  //         )}
+  //       </React.Fragment>
+  //     ),
+  //   };
+  // });
 
-  const updateImageHeight = () => {
-    setImgHeight(img.current?.height || 0);
-  };
+  // const updateImageHeight = () => {
+  //   setImgHeight(img.current?.height || 0);
+  // };
 
   React.useEffect(() => {
     const urlHash = props.location.hash.substring(1) || '';
@@ -177,21 +191,54 @@ const View = (props) => {
     /* eslint-disable-next-line */
   }, [hashlink.counter]);
 
-  React.useEffect(() => {
-    updateImageHeight();
-    img.current.onload = () => {
-      updateImageHeight();
-    };
-    window.addEventListener('resize', updateImageHeight);
-    return () => {
-      window.removeEventListener('resize', updateImageHeight);
+  const panes = tabsList.map((tab, index) => {
+    return {
+      id: tab,
+      renderItem: (
+        <RenderBlocks
+          key={`slide-${tab}`}
+          {...props}
+          metadata={metadata}
+          content={tabs[tab]}
+        />
+      ),
     };
-    /* eslint-disable-next-line */
-  }, []);
+  });
+
+  // React.useEffect(() => {
+  //   updateImageHeight();
+  //   img.current.onload = () => {
+  //     updateImageHeight();
+  //   };
+  //   window.addEventListener('resize', updateImageHeight);
+  //   return () => {
+  //     window.removeEventListener('resize', updateImageHeight);
+  //   };
+  //   /* eslint-disable-next-line */
+  // }, []);
+
+  // console.log('HERE RERENDER');
 
   return (
     <>
-      <Slider {...settings} ref={slider} className={cx(uiContainer)}>
+      <Slider
+        {...settings}
+        ref={slider}
+        className={cx(uiContainer, 'tabs-accessibility')}
+        accessibility={true}
+        afterChange={() => {
+          if (
+            document
+              .getElementById(blockId)
+              ?.getElementsByClassName('slick-slider')?.length > 0
+          ) {
+            document
+              .getElementById(blockId)
+              .getElementsByClassName('slick-current')[0]
+              .focus();
+          }
+        }}
+      >
         {panes.length ? panes.map((pane) => pane.renderItem) : ''}
       </Slider>
       <img

package/src/components/manage/Blocks/CarouselHorizontal/styles.less

@@ -0,0 +1,32 @@
+@import (multiple, reference, optional) '../../theme.config';
+@type: extra;
+@element: custom;
+
+.slick-image {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 600px;
+  pointer-events: none;
+}
+
+@media only screen and (min-width: @mobileBreakpoint) {
+  .slick-image {
+    width: 450px !important;
+    transform: translateX(-40%) translateY(5%) !important;
+  }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .slick-image {
+    width: 500px !important;
+    transform: translateX(-25%) translateY(5%) !important;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .slick-image {
+    width: 600px !important;
+    transform: translateX(-20%) translateY(5%) !important;
+  }
+}

package/src/components/manage/Blocks/Landing/DefalutView.jsx

@@ -1,9 +1,10 @@
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { generatePath } from 'react-router';
+import Cookies from 'universal-cookie';
 import { Grid } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
 import { UniversalLink } from '@plone/volto/components';
-import { withLocalStorage } from '@eeacms/volto-n2k/hocs';
 import hiker from './images/hiker.webp';
 import { tiles, tileProps, getStyle } from './index';
 
@@ -11,15 +12,25 @@ function removeTrailingSlash(str) {
   return str.replace(/\/+$/, '');
 }
 
+function getLanguage() {
+  if (__SERVER__) {
+    return config.settings.eea.defaultLanguage;
+  }
+  const cookies = new Cookies();
+
+  if (!cookies.get('LANGUAGE')) {
+    cookies.set('LANGUAGE', config.settings.eea.defaultLanguage || '');
+  }
+
+  return cookies.get('LANGUAGE');
+}
+
 const DefaultView = (props) => {
-  const currentLang = props.localStorage.get('N2K_LANGUAGE');
+  const language = getLanguage();
 
   useEffect(() => {
-    if (
-      props.location?.pathname &&
-      removeTrailingSlash(props.location.pathname) === '/natura2000'
-    ) {
-      props.history.push(`/natura2000/${currentLang || 'en'}`);
+    if (removeTrailingSlash(props.location?.pathname || '') === '/natura2000') {
+      props.history.push(`/natura2000/${language || 'en'}`);
     }
     /* eslint-disable-next-line */
   }, []);
@@ -59,10 +70,10 @@ const DefaultView = (props) => {
               mobile="7"
             >
               <Grid style={{ justifyContent: 'space-around' }}>
-                {currentLang
+                {language
                   ? tiles.map((item, index) => {
                       const link = generatePath(item.link, {
-                        lang: currentLang,
+                        lang: language,
                       });
                       return (
                         <Grid.Column
@@ -93,6 +104,5 @@ const DefaultView = (props) => {
 };
 
 export default connect((state) => ({
-  navigation: state.navigation,
   screen: state.screen,
-}))(withLocalStorage(DefaultView));
+}))(DefaultView);

package/src/components/manage/Blocks/Landing/index.js

@@ -73,13 +73,13 @@ export const tileProps = {
 export const getStyle = (props) => {
   if (!props.screen) return {};
   if (!props.screen.width || !props.screen.height) return {};
+  const height =
+    props.screen.height -
+    props.screen.browserToolbarHeight -
+    props.screen.content.offsetTop;
   return {
-    minHeight: (
-      props.screen.height - props.screen.browserToolbarHeight
-    ).toPixel(),
-    maxHeight: (
-      props.screen.height - props.screen.browserToolbarHeight
-    ).toPixel(),
+    minHeight: `${height}px`,
+    maxHeight: `${height}px`,
   };
 };
 

package/src/components/manage/Blocks/Landing/style.less

@@ -2,14 +2,10 @@
 @type: extra;
 @element: custom;
 
-div#view .ui.container > {
-  .landing-page-wrapper {
-    margin-bottom: 0;
-  }
-}
-
-.landing-page-wrapper {
+.landing-page-wrapper,
+[class~='view-defaultview'] [id='page-document'] .landing-page-wrapper {
   position: relative;
+  max-width: 100vw !important;
   padding-top: 4rem;
   background-image: url('./images/background.webp');
   background-repeat: no-repeat;
@@ -24,6 +20,7 @@ div#view .ui.container > {
   }
 
   .ui.grid.landing-page {
+    position: relative;
     z-index: 1;
     max-height: inherit;
 
@@ -32,7 +29,6 @@ div#view .ui.container > {
     scrollbar-width: none; /* Firefox */
 
     > .row {
-      z-index: 1;
       justify-content: space-between;
       padding-bottom: 5rem;
     }
@@ -44,7 +40,7 @@ div#view .ui.container > {
 
     .landing-page-description {
       margin-bottom: 3rem;
-      color: #fff !important;
+      color: #fff;
 
       p {
         font-size: 20px;
@@ -65,17 +61,18 @@ div#view .ui.container > {
     .item a {
       display: flex;
       flex-flow: column;
+      align-items: center;
+      justify-content: center;
     }
 
     .item img.image {
       width: 100%;
-      // max-width: 200px;
     }
 
     .item p.description {
       position: relative;
       margin-top: 1rem;
-      color: #fff !important;
+      color: #fff;
       font-size: 0.9em;
       font-weight: bold;
     }
@@ -95,7 +92,7 @@ div#view .ui.container > {
     border: 1px solid #78c0d7bf;
     border-bottom: 1px solid #fff;
     margin-top: -45px;
-    background-color: #fff !important;
+    background-color: #fff;
 
     .ui.basic.button {
       padding: 3px;
@@ -144,31 +141,53 @@ div#view .ui.container > {
   }
 
   .slick-image {
-    z-index: 0 !important;
+    position: absolute;
+    z-index: 0;
+    bottom: 0;
+    left: 0;
     pointer-events: none;
   }
 }
 
-// @media only screen and (max-width: @largeMonitorBreakpoint + @offset) {
-//   .natura2000-theme {
-//     .landing-page-wrapper {
-//       .ui.grid.landing-page {
-//         > .row {
-//           justify-content: flex-end;
-//         }
-//       }
-//     }
-//   }
-// }
-
-@media only screen and (max-width: @largestTabletScreen) {
-  .natura2000-theme {
-    .landing-page-wrapper {
-      .ui.grid.landing-page {
-        > .row {
-          justify-content: flex-end;
-        }
+@media only screen and (min-width: @mobileBreakpoint) {
+  .landing-page-wrapper {
+    .item a img.image {
+      max-width: 280px;
+    }
+
+    .ui.grid.landing-page {
+      > .row {
+        justify-content: flex-end !important;
       }
     }
+
+    .slick-image {
+      width: 450px !important;
+      transform: translateX(-40%) translateY(5%) !important;
+    }
+  }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .landing-page-wrapper {
+    .ui.grid.landing-page {
+      > .row {
+        justify-content: flex-end !important;
+      }
+    }
+
+    .slick-image {
+      width: 500px !important;
+      transform: translateX(-25%) translateY(5%) !important;
+    }
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .landing-page-wrapper {
+    .slick-image {
+      width: 600px !important;
+      transform: translateX(-20%) translateY(5%) !important;
+    }
   }
 }

package/src/components/manage/Blocks/NavigationAnchors/View.jsx

@@ -1,11 +1,10 @@
-import React, { useState, useEffect, useContext, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { Menu, Container, Sticky } from 'semantic-ui-react';
 import qs from 'querystring';
 import cx from 'classnames';
 import { UniversalLink } from '@plone/volto/components';
-import { StickyContext } from '@eeacms/volto-bise/components';
 import { withHashLink } from '@eeacms/volto-n2k/hocs';
 import './styles.less';
 
@@ -20,8 +19,8 @@ const formatLink = (str, obj) => {
 
 const View = (props) => {
   const [activeHash, setActiveHash] = useState();
+  const [height, setHeight] = useState();
   const [offsetHeight, setOffsetHeight] = useState(0);
-  const { stickyRef } = useContext(StickyContext);
   const anchorsRef = useRef();
   const { data = {}, screen = {} } = props;
   const links = data.links || [];
@@ -39,18 +38,24 @@ const View = (props) => {
 
   const onScroll = () => {
     const top = document.documentElement.scrollTop;
-    const offsetHeight = anchorsRef.current?.offsetHeight + 10;
-    let activeHash,
+    const offsetHeight = anchorsRef.current?.offsetHeight + 16;
+    let newActiveHash,
       maxTop = 0;
     hashList.forEach((hash) => {
       const hashTop = document.getElementById(hash)?.offsetTop;
       if (top >= hashTop - offsetHeight && top >= maxTop) {
         maxTop = top;
-        activeHash = hash;
+        newActiveHash = hash;
       }
     });
-    setActiveHash(activeHash);
-    setOffsetHeight(offsetHeight - 11);
+    if (newActiveHash !== activeHash) {
+      setActiveHash(newActiveHash);
+    }
+    setOffsetHeight(offsetHeight);
+    setHeight(
+      document.querySelector('.eea.header .fixed-container > .ui.sticky')
+        ?.offsetHeight,
+    );
   };
 
   useEffect(() => {
@@ -65,7 +70,7 @@ const View = (props) => {
   return (
     <Sticky
       active={sticky && screen.page?.width > 765}
-      context={stickyRef}
+      context={__CLIENT__ && document.querySelector('.content-area')}
       className={cx('sticky-navigation-anchors', {
         'full-width': sticky,
         'is-sticky': sticky,
@@ -73,6 +78,7 @@ const View = (props) => {
     >
       <div
         className={cx('navigation-anchors', data.className)}
+        style={{ ...(height ? { height: `${height}px` } : {}) }}
         ref={anchorsRef}
       >
         <Container>

package/src/components/manage/Blocks/SiteBanner/style.less

@@ -1,3 +1,7 @@
+#site-details {
+  margin-top: 0;
+}
+
 .site-banner {
   padding: 1.5em 0;
   background-color: #00a390;

package/src/components/manage/Blocks/SiteShape/View.jsx

@@ -105,8 +105,8 @@ const View = (props) => {
           />
         </Map>
       </div>
-      <Container className="map-info-notice">
-        <Message>
+      <Message className="map-info-notice">
+        <Container>
           <p>
             The designations employed and the presentation of material on this
             map do not imply the expression of any opinion whatsoever on the
@@ -114,8 +114,8 @@ const View = (props) => {
             country, territory, city or area or of its authorities, or
             concerning the delimitation of its frontiers or boundaries.
           </p>
-        </Message>
-      </Container>
+        </Container>
+      </Message>
     </div>
   );
 };

package/src/components/manage/Blocks/SiteSpeciesList/style.less

@@ -38,6 +38,7 @@ div#view .site-species-list .species-list .ui.container > * {
         .ui.button.dropdown,
         button {
           border: 1px solid #0000001f;
+          margin-bottom: 0;
           background-color: #fff !important;
           color: #000;
           cursor: pointer;
@@ -191,7 +192,7 @@ div#view .site-species-list .species-list .ui.container > * {
         border-top-right-radius: 10px;
 
         @media only screen and (max-width: 767px) {
-          margin-left: 1rem;
+          margin-left: 0.625rem;
           border-bottom-left-radius: 10px;
           border-bottom-right-radius: 10;
           border-top-left-radius: 0;

package/src/components/manage/Blocks/TilesImages/View.jsx

@@ -12,6 +12,7 @@ const View = (props) => {
       {mode === 'edit' && !images.length ? <p>Tiles images block</p> : ''}
       {images.map((image) => (
         <p
+          key={`tile-${image.title}`}
           className={cx('p-image', {
             'with-border': data.hasBorder ?? true,
             'rounded-border': data.rounded ?? true,