@eeacms/volto-n2k 1.0.21 → 1.0.23

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

@@ -1,30 +1,81 @@
+@type: extra;
+@element: custom;
+
+@import (multiple, reference, optional) '../../theme.config';
+
+@import 'swiper/swiper.less';
+@import 'swiper/modules/navigation/navigation.less';
+@import 'swiper/modules/pagination/pagination.less';
+
+@{view} {
+  .habitat-banner-details {
+    &::before {
+      .full-width();
+      position: absolute;
+      z-index: -1;
+    }
+
+    .carousel {
+      .half-width(960px);
+
+      @media @mobile {
+        width: calc(@pageFullWidth - 2rem) !important;
+      }
+    }
+  }
+}
+
+@{edit} {
+  .habitat-banner-details {
+    &::before {
+      .full-width-edit();
+      position: absolute;
+      z-index: -1;
+    }
+
+    .carousel {
+      .half-width-edit(960px);
+
+      @media @mobile {
+        width: calc(@pageFullWidthEdit - 2rem) !important;
+      }
+    }
+  }
+}
+
 div#view .habitat-banner-details .ui.container > * {
   margin-bottom: 0;
 }
 
 .habitat-banner-details {
-  padding: 1.5em 0;
-  background-color: #00a390;
+  position: relative;
+  padding: 0;
   color: #fff !important;
   font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
 
+  &::before {
+    display: block;
+    height: 100%;
+    background-color: #00a390;
+    content: '';
+  }
+
   .habitat-details {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: space-between;
-    gap: 1rem;
-
-    @media only screen and (max-width: 765px) {
-      flex-flow: column;
-
-      .habitat-metadata {
-        margin-bottom: 1rem;
-      }
-    }
 
     .habitat-metadata {
+      display: flex;
+      width: 50%;
+      flex: 0 0 50%;
+      flex-direction: column;
+      justify-content: center;
+      margin: 4rem 0;
+      word-wrap: break-word;
+
       .name {
-        margin-top: 0.5em !important;
+        margin-top: 0 !important;
         margin-bottom: 0 !important;
         color: #fff !important;
         font-family: inherit;
@@ -39,6 +90,10 @@ div#view .habitat-banner-details .ui.container > * {
         }
       }
 
+      .info {
+        margin-bottom: 0;
+      }
+
       h3 {
         margin-top: 0 !important;
         margin-bottom: 0 !important;
@@ -68,10 +123,77 @@ div#view .habitat-banner-details .ui.container > * {
       }
     }
 
-    img {
-      max-height: 200px;
-      border-radius: 10px;
-      filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.4));
+    .carousel {
+      p {
+        font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+      }
+
+      img {
+        width: 100%;
+      }
+
+      .swiper {
+        img {
+          display: block;
+          // max-height: 300px;
+          width: 100%;
+          height: 300px;
+          object-fit: cover;
+        }
+      }
+
+      .arrows {
+        position: absolute;
+        z-index: 1;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        width: 100%;
+        align-items: center;
+
+        .icon {
+          display: block;
+          width: 32px;
+          background-color: #fff;
+          cursor: pointer;
+        }
+
+        p {
+          overflow: hidden;
+          width: calc(100% - 64px);
+          padding: 0.25rem 0.25rem 0.25rem 1rem;
+          margin: 0;
+          backdrop-filter: brightness(0.5);
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .swiper {
+      z-index: 0;
+      width: 100%;
+
+      .swiper-slide:not(.swiper-slide-active) {
+        filter: grayscale(100%);
+      }
+
+      .swiper-slide {
+        transition: filter 0.5s;
+      }
+    }
+
+    @media @mobile {
+      flex-flow: column;
+
+      .habitat-metadata {
+        width: 100%;
+        margin-top: 2rem;
+      }
+
+      .carousel {
+        margin: 0 1rem 1rem 1rem;
+      }
     }
   }
 }

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,14 @@ 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.content.offsetTop -
+    props.screen.browserToolbarHeight;
+
   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,28 +2,23 @@
 @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;
   background-size: cover;
 
-  &:not(.edit) {
-    overflow-y: hidden;
+  overflow-y: hidden;
 
-    .ui.grid.landing-page {
-      overflow-y: auto;
-    }
+  .ui.grid.landing-page {
+    overflow-y: auto;
   }
 
   .ui.grid.landing-page {
+    position: relative;
     z-index: 1;
     max-height: inherit;
 
@@ -32,7 +27,6 @@ div#view .ui.container > {
     scrollbar-width: none; /* Firefox */
 
     > .row {
-      z-index: 1;
       justify-content: space-between;
       padding-bottom: 5rem;
     }
@@ -44,7 +38,7 @@ div#view .ui.container > {
 
     .landing-page-description {
       margin-bottom: 3rem;
-      color: #fff !important;
+      color: #fff;
 
       p {
         font-size: 20px;
@@ -65,17 +59,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 +90,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 +139,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(() => {
@@ -64,8 +69,8 @@ const View = (props) => {
 
   return (
     <Sticky
-      active={sticky && screen.page?.width > 765}
-      context={stickyRef}
+      active={sticky && screen.page?.width > 767}
+      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/NavigationAnchors/styles.less

@@ -15,6 +15,8 @@ div#view .ui.container > .sticky-navigation-anchors {
 }
 
 .sticky-navigation-anchors {
+  z-index: 5 !important;
+
   &.is-sticky {
     .navigation-anchors {
       background-color: #fff !important;

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,

package/src/index.js

@@ -1,5 +1,4 @@
 /* eslint-disable no-extend-native */
-import React from 'react';
 import loadable from '@loadable/component';
 import { compose } from 'redux';
 import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
@@ -44,11 +43,9 @@ import installTilesImages from './components/manage/Blocks/TilesImages';
 
 import { LINK } from '@plone/volto-slate/constants';
 
-import { Header } from '@eeacms/volto-n2k/components';
-
 import { gridSizes, variants } from './grid';
 
-import './less/styles.less';
+// import './less/styles.less';
 
 Array.prototype.sortByProperty = function (property, order = 'ASC') {
   return this.sort((a, b) => {
@@ -72,50 +69,6 @@ const applyConfig = (config) => {
 
   config.settings.persistentReducers.push('localStorage');
 
-  config.settings = {
-    ...config.settings,
-    n2k: {
-      multilingualRoot: '/natura2000/:lang',
-      multilingualPath: '/natura2000/:lang/*',
-      defaultLanguage: 'en',
-      supportedLanguages: [
-        'bg',
-        'hr',
-        'cs',
-        'da',
-        'nl',
-        'en',
-        'et',
-        'fi',
-        'fr',
-        'de',
-        'el',
-        'hu',
-        'ga',
-        'it',
-        'lv',
-        'lt',
-        'mt',
-        'pl',
-        'pt',
-        'ro',
-        'sk',
-        'sl',
-        'es',
-        'sv',
-      ],
-    },
-  };
-
-  config.settings.themes = {
-    ...(config.settings.themes || {}),
-    natura2000: {
-      Header: Header,
-      // Footer: Footer,
-      Breadcrumbs: () => <></>,
-    },
-  };
-
   config.blocks.blocksConfig.columnsBlock = {
     ...(config.blocks.blocksConfig.columnsBlock || {}),
     gridSizes: {

package/src/less/styles.less

@@ -402,16 +402,6 @@ img.slick-image {
   pointer-events: none;
 }
 
-.styled.protected-habitats
-  > .tabs-block.default
-  > .styled
-  > .tabs.default
-  > .ui.menu {
-  border-bottom: 2px solid #dadada;
-  margin-bottom: 1rem;
-  border-radius: 0;
-}
-
 .sdf-image {
   height: 500px;
 
@@ -480,38 +470,6 @@ img.slick-image {
   }
 }
 
-.protected-habitats {
-  .default.tabs {
-    .ui.menu {
-      border-bottom: none !important;
-      background-color: #00a390;
-
-      .item {
-        padding: 1rem;
-        border-radius: 0;
-        color: #fff !important;
-
-        p {
-          font-size: 16px !important;
-        }
-
-        &.active:hover,
-        &:hover {
-          padding-bottom: calc(1rem - 3px);
-          border-bottom: 3px solid #fff;
-          color: #fff !important;
-        }
-
-        &.active {
-          padding-bottom: calc(1rem - 3px);
-          border-bottom: 3px solid #fff;
-          color: #fff !important;
-        }
-      }
-    }
-  }
-}
-
 .smart-table .search-description {
   margin-bottom: 2rem;
   color: #6b6b6b;