new improvements to header design

eea · Nov 12, 2021 · 2a3183d · 2a3183d
1 parent 70e16c8
commit 2a3183d
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 73 deletions.
diff --git a/src/components/theme/Header/HomepageSlider.jsx b/src/components/theme/Header/HomepageSlider.jsx
@@ -113,19 +113,14 @@ class HomepageSlider extends Component {
   };
 
   createDescription(children) {
-    const items = children.map( (child) => (
+    const items = children.map((child) => (
       <div className="slider-child">
         <span>{child.text}</span> <br></br>
-        <a href={child.link} style={{ borderRadius: '20% / 100%' }} > {child.linkText}</a>
+        <a href={child.link}> {child.linkText}</a>
       </div>
-
     ));
-    return (
-      <div className="slider-text" >
-          {items}
-      </div>
-    );
-  };
+    return <div className="slider-text">{items}</div>;
+  }
 
   getSlides(items) {
     const slidesArr = items ? items : this.props.items;
@@ -137,7 +132,28 @@ class HomepageSlider extends Component {
             original: item.image,
             thumbnail: item.image,
             title: item.title,
-            description: this.createDescription(item.children || [{text: "Monocultures harbour less biodiversity than mixed forests.", link:"google.com", linkText: "Learn more about forest management"}, {text: "Natural disturbances like droughts and pests and storms decrease forest health", link: "google.com", linkText:"Learn more about forest health and resilience."}])
+            description: this.createDescription(
+              item.children || [
+                {
+                  text:
+                    'Monocultures harbour less biodiversity than mixed forests.',
+                  link: 'google.com',
+                  linkText: 'Learn more about forest management',
+                },
+                {
+                  text:
+                    'Monocultures harbour less biodiversity than mixed forests.',
+                  link: 'google.com',
+                  linkText: 'Learn more about forest management',
+                },
+                {
+                  text:
+                    'Natural disturbances like droughts and pests and storms decrease forest health',
+                  link: 'google.com',
+                  linkText: 'Learn more about forest health and resilience.',
+                },
+              ],
+            ),
           };
         })) ||
       [];
@@ -172,42 +188,49 @@ class HomepageSlider extends Component {
     // if (!this.state.slides.length) return '';
     const slides = this.getSlides(this.props.items);
     return (
-      <div className="slider-wrapper">
-        {/* <Slider
-          className="mainSlider"
-          asNavFor={this.state.nav2}
-          ref={slider => (this.slider1 = slider)}
-          {...settings}
-        >
-          {this.state.slides}
-        </Slider>
-        <Slider
-          className="navSlider"
-          asNavFor={this.state.nav1}
-          ref={slider => (this.slider2 = slider)}
-          slidesToShow={3}
-          slidesToScroll={1}
-          swipeToSlide={true}
-          focusOnSelect={true}
-        >
-          {this.state.slides}
-        </Slider> */}
-        {/* <img className="slider-caret" src={SliderCaret} alt="" /> */}
-        <ImageGallery
-          //className="mainSlider"
-          items={slides}
-          showThumbnails={false}
-          showNav={false}
-          showBullets ={true}
-          disableThumbnailScroll={false}
-          showFullscreenButton={false}
-          showPlayButton={false}
-          autoplay
-          renderItem={this.renderSlide}
-          renderThumbInner={this.renderThumbnail}
-          slideDuration={300}
-          slideInterval={90000}
-        />
+      <div>
+        <div className="slider-wrapper">
+          {/* <Slider
+            className="mainSlider"
+            asNavFor={this.state.nav2}
+            ref={slider => (this.slider1 = slider)}
+            {...settings}
+          >
+            {this.state.slides}
+          </Slider>
+          <Slider
+            className="navSlider"
+            asNavFor={this.state.nav1}
+            ref={slider => (this.slider2 = slider)}
+            slidesToShow={3}
+            slidesToScroll={1}
+            swipeToSlide={true}
+            focusOnSelect={true}
+          >
+            {this.state.slides}
+          </Slider> */}
+          {/* <img className="slider-caret" src={SliderCaret} alt="" /> */}
+          <ImageGallery
+            //className="mainSlider"
+            items={slides}
+            showThumbnails={false}
+            showNav={false}
+            showBullets={true}
+            disableThumbnailScroll={false}
+            showFullscreenButton={false}
+            showPlayButton={false}
+            autoplay
+            renderItem={this.renderSlide}
+            renderThumbInner={this.renderThumbnail}
+            slideDuration={300}
+            slideInterval={90000}
+          />
+        </div>
+        <div className="extra-header">
+          Some additional informative text over here to fill up the spaceeeee.{' '}
+          <br></br>
+          <a href="google.com"> Find out more!</a>
+        </div>
       </div>
     );
   }

diff --git a/theme/addons/volto-addons/imagecards/carousel.overrides b/theme/addons/volto-addons/imagecards/carousel.overrides
@@ -68,31 +68,67 @@
 .slider-text {
   display: flex;
   justify-content: space-around;
+
+  @media (max-width: 1300px) {
+    flex-direction: column;
+  }
+}
+
+.extra-header {
+  position: relative;
+  top: -1px;
+  height: 70px;
+  padding: 15px;
+  padding-left: 50px;
+  margin-bottom: 15px;
+  background-color: white;
+  border-radius: 2px;
+  -webkit-box-shadow: 0px 1px 6px 0 #c7d5d8;
+  -moz-box-shadow: 0px 1px 6px 0 #c7d5d8;
+  box-shadow: 0px 1px 6px 0 #c7d5d8;
+  color: #7b1;
+  font-weight: bold;
+  text-transform: uppercase;
 }
 
 .slider-child {
-  width: 345px;
+  width: 320px;
+
   span {
     position: relative;
-    top: 30px;
-    font-weight: normal;
+    top: 20px;
+    font-weight: bold;
+
+    @media (max-width: 1300px) {
+      display: none;
+    }
+  }
+
+  @media (max-width: 1300px) {
+    width: auto;
+    margin: 0 auto;
   }
 
   a {
-    font-weight: bold;
-    color: white;
-    border-style: solid;
-    border-color: white;
-    position:relative;
-    top: 100px;
-    padding: 10px;
     display: block;
-    height:80px;
+    width: 320px;
+    height: 70px;
+
+    padding: 10px;
+    background-color: #588613;
+    color: white;
+    font-weight: bold;
+
+    @media (min-width: 1300px) {
+      position: absolute;
+      top: 250px;
+    }
   }
+
   a:hover {
-    border-color: #006b96;
+    background-color: #49730a;
+    color: white;
   }
-
 }
 
 .slide-overlay {
@@ -216,10 +252,10 @@
       position: absolute;
       // bottom     : 40%;
       top: 20%;
-      text-align: center;
-      width: 100%;
       left: unset;
+      width: 100%;
       color: white;
+      text-align: center;
 
       @media (max-width: 700px) {
         margin-left: 1rem;

diff --git a/theme/site/collections/menu.overrides b/theme/site/collections/menu.overrides
@@ -317,7 +317,6 @@
 }
 
 .navigation .menu > .dropdown.item > .menu {
-
   left: 50%;
   // box-shadow          : 0px 0px 25px 0px rgba(0, 0, 0, 0.2);
   left: 50%;
@@ -403,7 +402,6 @@
   }
 
   .sticky-inner-wrapper {
-
     z-index: 10;
     background: @stickyMenuColor;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);

diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides
@@ -123,8 +123,6 @@ body.has-toolbar {
   height: 600px !important;
 }
 
-
-
 .lead-mobile-nav {
   position: absolute;
   z-index: 1;
@@ -158,13 +156,13 @@ body.has-toolbar {
     text-decoration: none;
 
     .lead-nav-icon {
-      fill: #554535 !important;
       position: absolute;
-      right: 10px;
       top: 6px;
+      right: 10px;
+      fill: #554535 !important;
     }
 
-    .lead-nav-icon:hover{
+    .lead-nav-icon:hover {
       fill: #cd4200 !important;
     }
   }
@@ -192,7 +190,6 @@ body.has-toolbar {
   }
 
   .lead-navigation-item {
-
     padding: 12px 20px;
 
     border: 2px solid #f7f7f5;
@@ -214,7 +211,6 @@ body.has-toolbar {
     }
   }
 
-
   .lead-navigation-item:hover {
     background: white;
 
@@ -1048,7 +1044,6 @@ ul.ui.list li:before,
 }
 
 .unlist {
-
   padding-left: 0;
   list-style-type: none;
 
@@ -1312,10 +1307,10 @@ h5 {
     .slide-body {
       position: absolute;
       top: 20%;
-      text-align: center;
       left: unset;
       width: 100%;
       color: #fff;
+      text-align: center;
 
       @media (max-width: 700px) {
         margin-left: 1rem;
@@ -1661,7 +1656,6 @@ span.float-right {
 
   .forest-comparation {
     .land-data-wrapper {
-
       margin-bottom: 0;
       background-color: @tileBackgroundColor;