Develop (#31)

* placeholder loader if json does not exist

* fix autoplay on header slides

* Automated release 0.1.23

Co-authored-by: Daniela Mormocea <daniela.mormocea@gmail.com>
Co-authored-by: EEA Jenkins <@users.noreply.github.com>

CHANGELOG.md

@@ -4,8 +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).
 
+#### [0.1.23](https://github.com/eea/volto-forests-theme/compare/0.1.22...0.1.23)
+
+- fix autoplay on header slides [`#30`](https://github.com/eea/volto-forests-theme/pull/30)
+- placeholder loader if json does not exist [`#29`](https://github.com/eea/volto-forests-theme/pull/29)
+
 #### [0.1.22](https://github.com/eea/volto-forests-theme/compare/0.1.21...0.1.22)
 
+> 29 November 2021
+
+- Develop [`#28`](https://github.com/eea/volto-forests-theme/pull/28)
 - Header better data fetch cleanup [`6baf20d`](https://github.com/eea/volto-forests-theme/commit/6baf20d3f89471aea06efc59737947e5625afc03)
 
 #### [0.1.21](https://github.com/eea/volto-forests-theme/compare/0.1.20...0.1.21)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-forests-theme",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "description": "@eeacms/volto-forests-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/components/theme/Header/HomepageSlider.jsx

@@ -5,7 +5,7 @@ import 'react-image-gallery/styles/css/image-gallery.css';
 
 import ImageGallery from 'react-image-gallery';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
-import { Placeholder } from 'semantic-ui-react';
+import { Placeholder, Dimmer, Loader } from 'semantic-ui-react';
 import { getBasePath } from '@eeacms/volto-forests-theme/helpers';
 
 class HomepageSlider extends Component {
@@ -104,11 +104,14 @@ class HomepageSlider extends Component {
 
   render() {
     const slides = this.getSlides(this.props.items.slides);
-    const icon = this.props.items.extra.icon || '';
-    const text = this.props.items.extra.text || '';
-    const link = this.props.items.extra.link || '';
-    const linkText = this.props.items.extra.linkText || '';
-    return (
+    const icon = this.props.items.extra?.icon;
+    const text = this.props.items.extra?.text;
+    const link = this.props.items.extra?.link;
+    const linkText = this.props.items.extra?.linkText;
+
+    const hasHeaderData = this.props.items.extra ? true : false;
+
+    return hasHeaderData ? (
       <div>
         <div className="slider-wrapper">
           <ImageGallery
@@ -123,11 +126,11 @@ class HomepageSlider extends Component {
             disableThumbnailScroll={false}
             showFullscreenButton={false}
             showPlayButton={false}
-            autoplay
+            autoPlay={true}
             renderItem={this.renderSlide}
             renderThumbInner={this.renderThumbnail}
-            slideDuration={300}
-            slideInterval={90000}
+            slideDuration={450}
+            slideInterval={5000}
           />
         </div>
         <div className="extra-header">
@@ -139,6 +142,12 @@ class HomepageSlider extends Component {
           </div>
         </div>
       </div>
+    ) : (
+      <div className="loader">
+        <Dimmer active inverted>
+          <Loader />
+        </Dimmer>
+      </div>
     );
   }
 }

theme/addons/volto-addons/imagecards/carousel.overrides

@@ -80,6 +80,12 @@
   }
 }
 
+.loader {
+  position: relative;
+  padding: 100px;
+  margin-top: 200px;
+}
+
 .extra-header {
   position: relative;
   top: -1px;

theme/site/globals/site.overrides

@@ -180,8 +180,8 @@ body.has-toolbar {
   bottom: 0;
   left: 5px;
   display: flex;
-  color: white;
   width: 99%;
+  color: white;
 
   .navigation-prev {
     position: absolute;
@@ -190,25 +190,25 @@ body.has-toolbar {
     cursor: pointer;
   }
 
-  .navigation-prev:hover{
+  .navigation-prev:hover {
     fill: #cd4200 !important;
   }
 
   .navigation-next {
     position: absolute;
-    bottom: 50px;
     right: 0px;
+    bottom: 50px;
     cursor: pointer;
   }
 
-  .navigation-next:hover{
+  .navigation-next:hover {
     fill: #cd4200 !important;
   }
 
-  .lead-nav-wrapper{
+  .lead-nav-wrapper {
     overflow-x: scroll;
     overflow-y: hidden;
-    white-space:nowrap
+    white-space: nowrap;
   }
 
   .active-lead-nav {
@@ -219,26 +219,25 @@ body.has-toolbar {
   }
 
   .lead-navigation-item {
-    padding: 12px 20px;
-    white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis;
+    padding: 12px 20px;
 
     border: 2px solid #f7f7f5;
 
     margin: 0 2px;
 
     background-color: #f7f7f5;
     border-radius: 3px 3px 0 0;
-    text-decoration: none;
-    text-align: center;
 
     color: #554535;
     cursor: pointer;
     font-size: 16px;
     font-weight: bold;
+    text-align: center;
     text-decoration: none;
-
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     @media (max-width: @computerBreakpoint) {
       height: 40px;
@@ -1762,6 +1761,7 @@ span.float-right {
       }
     }
   }
+
   .map-wrapper {
     padding: 5px;
     border: 1px solid @darkGreen;