@eeacms/volto-n2k 1.0.22 → 1.0.24

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';
+
+@{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-top: 0;
   margin-bottom: 0;
 }
 
 .habitat-banner-details {
-  padding: 1.5em 0;
-  background-color: #00a390;
+  position: relative;
+  padding: 0;
+  margin-bottom: 1rem;
   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%;
+      height: 320px !important;
+      flex: 0 0 50%;
+      flex-direction: column;
+      justify-content: center;
+      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;
@@ -65,13 +120,125 @@ div#view .habitat-banner-details .ui.container > * {
         font-size: 18px;
         font-weight: 600;
         line-height: 18px;
+
+        a {
+          color: #fff;
+
+          &:hover {
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .carousel {
+      display: flex;
+      height: 320px;
+
+      p {
+        font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+      }
+
+      img {
+        width: 100%;
+      }
+
+      &.one-slide .swiper {
+        width: 100%;
+      }
+
+      &.two-slides .swiper {
+        width: 50%;
+
+        @media @mobile {
+          width: 100%;
+
+          &.preview.preview-one {
+            display: none;
+          }
+        }
+      }
+
+      &.three-slides .swiper {
+        width: 33.33%;
+
+        @media @tablet {
+          width: 50%;
+
+          &.preview.preview-two {
+            display: none;
+          }
+        }
+
+        @media @mobile {
+          width: 100%;
+
+          &.preview.preview-two,
+          &.preview.preview-one {
+            display: none;
+          }
+        }
+      }
+
+      .swiper {
+        &.preview .swiper-slide {
+          filter: grayscale(100%);
+        }
+
+        img {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .arrows {
+        position: absolute;
+        z-index: 2;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        width: 100%;
+        align-items: center;
+
+        button {
+          padding: 0;
+          border: none;
+          margin: 0;
+          background-color: transparent;
+        }
+
+        .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;
+        }
       }
     }
 
-    img {
-      max-height: 200px;
-      border-radius: 10px;
-      filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.4));
+    @media @mobile {
+      flex-flow: column;
+
+      .habitat-metadata {
+        width: 100%;
+        margin-top: 2rem;
+      }
+
+      .carousel {
+        margin: 0 1rem 1rem 1rem;
+      }
     }
   }
 }

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

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

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

@@ -11,12 +11,10 @@
   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 {

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

@@ -69,7 +69,7 @@ const View = (props) => {
 
   return (
     <Sticky
-      active={sticky && screen.page?.width > 765}
+      active={sticky && screen.page?.width > 767}
       context={__CLIENT__ && document.querySelector('.content-area')}
       className={cx('sticky-navigation-anchors', {
         'full-width': sticky,

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

@@ -2,6 +2,14 @@
   margin-top: 0;
 }
 
+.subsite.subsite-natura2000 .content-area {
+  .site-banner {
+    h2 {
+      color: #fff !important;
+    }
+  }
+}
+
 .site-banner {
   padding: 1.5em 0;
   background-color: #00a390;

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

@@ -105,7 +105,7 @@ const View = (props) => {
           />
         </Map>
       </div>
-      <Message className="map-info-notice">
+      <Message className="map-info-notice shadow-none">
         <Container>
           <p>
             The designations employed and the presentation of material on this

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

@@ -5,7 +5,7 @@ div#view .site-species-list .species-list .ui.container > * {
 }
 
 .site-species-list {
-  margin-top: -1.5rem;
+  margin-top: -1em;
 
   .species-filters {
     .ui.container {

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

@@ -1,17 +1,19 @@
 /* eslint-disable react/jsx-no-target-blank */
-import React from 'react';
-import { Container } from 'semantic-ui-react';
-import loadable from '@loadable/component';
-import { photoPlaceholders } from '@eeacms/volto-n2k/helpers';
+import React, { useRef, useState } from 'react';
 import cx from 'classnames';
+import loadable from '@loadable/component';
+import { Icon } from '@plone/volto/components';
+import arrowLeft from '@eeacms/volto-n2k/icons/arrow-left.svg';
+import arrowRight from '@eeacms/volto-n2k/icons/arrow-right.svg';
 import './style.less';
-import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css';
 
-const Slider = loadable(() => import('react-slick'));
+const SwiperLoader = loadable.lib(() => import('swiper'));
+const SwiperReactLoader = loadable.lib(() => import('swiper/react'));
 
 const View = (props) => {
-  const slider = React.useRef(null);
+  const swiperEl = useRef();
+  const previewEl = useRef();
+  const [activeSlide, setActiveSlide] = useState(0);
   const provider_data = props.provider_data || {};
   const {
     author = [],
@@ -23,112 +25,170 @@ const View = (props) => {
     picture_url = [],
     scientific_name = [],
     source = [],
-    source_url = [],
-    species_group_name = [],
+    // source_url = [],
+    // species_group_name = [],
   } = provider_data;
 
-  const sliderSettings = {
-    adaptiveHeight: true,
-    autoplay: true,
-    autoplaySpeed: 5000,
-    arrows: true,
-    cssEase: 'ease',
-    dots: false,
-    speed: 500,
-    initialSlide: 0,
-    lazyLoad: 'ondemand',
-    swipe: true,
-    slidesToShow: 1,
-    slidesToScroll: 1,
-    touchMove: true,
-  };
+  const pictures_length = picture_url?.length;
 
   if (!id_eunis[0]) return '';
   return (
-    <div className="species-banner-details full-width">
-      <Container>
-        <div className="species-details">
-          <div className="species-metadata">
-            <h2 className="name">
-              {common_name[0] ? common_name[0] + ' - ' : ''}{' '}
-              <span style={{ fontStyle: 'italic', textTransform: 'none' }}>
-                {scientific_name[0]}
-              </span>
-            </h2>
-            {author[0] && (
-              <p
-                className="info radjhan-bold"
-                style={{ marginBottom: '0.5rem' }}
+    <div className="species-banner-details">
+      <div className="species-details">
+        <div className="species-metadata">
+          <h2 className="name">
+            {common_name[0] ? common_name[0] + ' - ' : ''}{' '}
+            <span style={{ fontStyle: 'italic', textTransform: 'none' }}>
+              {scientific_name[0]}
+            </span>
+          </h2>
+          {author[0] && (
+            <p className="info radjhan-bold" style={{ marginBottom: '0.5rem' }}>
+              {author[0]}
+            </p>
+          )}
+          {code_2000[0] && (
+            <p className="info">
+              Natura 2000 species code&nbsp;&nbsp;&nbsp;{code_2000[0]}
+              <br />
+              <br />
+              <a
+                href={`http://images.google.com/images?q=${scientific_name[0]}`}
+                target="_blank"
               >
-                {author[0]}
-              </p>
-            )}
-            {code_2000[0] && (
-              <p className="info">
-                Natura 2000 species code&nbsp;&nbsp;&nbsp;{code_2000[0]}
-              </p>
-            )}
-            {/* <br />
-            {number_sites[0] && (
-              <h3 style={{ marginBottom: '0.5rem' }}>{number_sites[0]}</h3>
-            )}
-            <h4 className="radjhan-normal">
-              NATURA 2000 SITES PROTECTING THIS SPECIES
-            </h4> */}
-          </div>
+                Find image on the web
+              </a>
+            </p>
+          )}
+        </div>
+
+        {pictures_length > 0 && (
           <div
-            className={cx('species-pictures', {
-              'with-slider': picture_url.length > 0 && picture_url[0],
+            className={cx('carousel', {
+              'one-slide': pictures_length === 1,
+              'two-slides': pictures_length === 2,
+              'three-slides': pictures_length > 2,
             })}
           >
-            {picture_url.length > 0 && picture_url[0] ? (
-              <Slider {...sliderSettings} ref={slider}>
-                {picture_url.map((picture, index) => (
-                  <div key={`${picture}_${index}`} className="picture-wrapper">
-                    <img src={picture} alt={common_name[0]} />
-                    <div className="source">
-                      <a
-                        href={source_url[index]}
-                        title={'Picture source'}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        {source[index]}
-                        {license[index] ? (
-                          <>
-                            ,<br />
-                            {license[index]}
-                          </>
-                        ) : (
-                          ''
-                        )}
-                      </a>
-                    </div>
-                  </div>
-                ))}
-              </Slider>
-            ) : (
-              <div className="picture-wrapper">
-                <img
-                  src={
-                    photoPlaceholders[species_group_name[0]] ||
-                    photoPlaceholders.default
+            <div className="arrows">
+              <button
+                className="swiper-button image-swiper-button-prev"
+                onClick={() => {
+                  swiperEl.current.slidePrev();
+                  if (previewEl.current?.[0]) {
+                    previewEl.current[0].slidePrev();
                   }
-                  alt={species_group_name[0]}
+                  if (previewEl.current?.[1]) {
+                    previewEl.current[1].slidePrev();
+                  }
+                  setActiveSlide(swiperEl.current.realIndex);
+                }}
+              >
+                <Icon
+                  className="icon-left"
+                  color="#000"
+                  name={arrowLeft}
+                  size="32px"
                 />
-              </div>
-            )}
-            <div className="find-image">
-              <a
-                href={`http://images.google.com/images?q=${scientific_name[0]}`}
-                target="_blank"
+              </button>
+              <button
+                className="swiper-button image-swiper-button-next"
+                onClick={() => {
+                  swiperEl.current.slideNext();
+                  if (previewEl.current?.[0]) {
+                    previewEl.current[0].slideNext();
+                  }
+                  if (previewEl.current?.[1]) {
+                    previewEl.current[1].slideNext();
+                  }
+                  setActiveSlide(swiperEl.current.realIndex);
+                }}
               >
-                Find image on the web
-              </a>
+                <Icon
+                  className="icon-right"
+                  color="#000"
+                  name={arrowRight}
+                  size="32px"
+                />
+              </button>
+              <p title={`${source[activeSlide]} - ${license[activeSlide]}`}>
+                {source[activeSlide]} - {license[activeSlide]}
+              </p>
             </div>
+            <SwiperLoader>
+              {() => {
+                return (
+                  <SwiperReactLoader>
+                    {({ Swiper, SwiperSlide }) => {
+                      return (
+                        <>
+                          <Swiper
+                            loop={true}
+                            initialSlide={0}
+                            slidesPerView={1}
+                            spaceBetween={0}
+                            onBeforeInit={(swiper) => {
+                              swiperEl.current = swiper;
+                            }}
+                          >
+                            {picture_url.map((source, index) => (
+                              <SwiperSlide>
+                                <img src={source} alt={picture_url[index]} />
+                              </SwiperSlide>
+                            ))}
+                          </Swiper>
+                          {pictures_length > 1 && (
+                            <Swiper
+                              className="preview preview-one"
+                              loop={true}
+                              initialSlide={1}
+                              slidesPerView={1}
+                              spaceBetween={0}
+                              onBeforeInit={(swiper) => {
+                                if (!previewEl.current) {
+                                  previewEl.current = [];
+                                }
+                                previewEl.current[0] = swiper;
+                              }}
+                            >
+                              {picture_url.map((source, index) => (
+                                <SwiperSlide>
+                                  <img src={source} alt={picture_url[index]} />
+                                </SwiperSlide>
+                              ))}
+                            </Swiper>
+                          )}
+                          {pictures_length > 2 && (
+                            <Swiper
+                              className="preview preview-two"
+                              loop={true}
+                              initialSlide={2}
+                              slidesPerView={1}
+                              spaceBetween={0}
+                              onBeforeInit={(swiper) => {
+                                if (!previewEl.current) {
+                                  previewEl.current = [];
+                                }
+                                previewEl.current[1] = swiper;
+                              }}
+                            >
+                              {picture_url.map((source, index) => (
+                                <SwiperSlide>
+                                  <img src={source} alt={picture_url[index]} />
+                                </SwiperSlide>
+                              ))}
+                            </Swiper>
+                          )}
+                        </>
+                      );
+                    }}
+                  </SwiperReactLoader>
+                );
+              }}
+            </SwiperLoader>
           </div>
-        </div>
-      </Container>
+        )}
+      </div>
     </div>
   );
 };