2.3.0

CHANGELOG.md

@@ -10,6 +10,14 @@ Types of changes
     Security in case of vulnerabilities.
 )
 
+## [2.3.0](https://github.com/contao-themes-net/nature-theme-bundle/tree/2.3.0) – 2024-08-02
+
+- [Added] Add quote element
+- [Added] Add templates to support onepage navigation
+- [Added] Add form switch (use `form_checkbox_switch_nature` template)
+- [Fixed] Fix styling for dark mode and dark colour scheme
+- [Changed] Update sql files
+
 ## [2.2.1](https://github.com/contao-themes-net/nature-theme-bundle/tree/2.2.1) – 2023-04-17
 
 - [Added] Add accordion arrows

contao/templates/forms/form_checkbox_switch_nature.html5

@@ -0,0 +1,42 @@
+<?php $this->extend('form_row'); ?>
+
+<?php $this->block('field'); ?>
+  <?php if ($this->label): ?>
+    <label class="label">
+      <?php if ($this->mandatory): ?>
+      <span class="invisible"><?= $this->mandatoryField ?> </span><?= $this->label ?><span class="mandatory">*</span>
+      <?php else: ?>
+      <?= $this->label ?>
+      <?php endif; ?>
+    </label>
+  <?php endif; ?>
+
+  <input type="hidden" name="<?= $this->name ?>" value="">
+
+  <div class="control">
+    <?php foreach ($this->getOptions() as $option): ?>
+      <?php if ('group_start' == $option['type']): ?>
+        <fieldset>
+          <legend><?= $option['label'] ?></legend>
+          <?php endif; ?>
+
+          <?php if ('option' == $option['type']): ?>
+            <div class="checkbox-switch">
+              <label class="switch" id="lbl_<?= $option['id'] ?>">
+                <input type="checkbox" name="<?= $option['name'] ?>" id="opt_<?= $option['id'] ?>" class="checkbox" value="<?= $option['value'] ?>"<?= $option['checked'] ?><?= $option['attributes'] ?>>
+                <span class="slider round"></span>
+              </label>
+              <span><?= $option['label'] ?></span>
+            </div>
+          <?php endif; ?>
+
+          <?php if ('group_end' == $option['type']): ?>
+        </fieldset>
+      <?php endif; ?>
+    <?php endforeach; ?>
+  </div>
+
+  <?php if ($this->hasErrors()): ?>
+    <p class="help is-danger"><?= $this->getErrorAsString() ?></p>
+  <?php endif; ?>
+<?php $this->endblock(); ?>

contao/templates/jquery/j_onepage_navigation_nature.html5

@@ -0,0 +1,79 @@
+<script src="/bundles/eufonepagenavigation/jquery.waypoints.js"></script>
+<script>
+    $(document).ready(function() {
+        var el = $('a[href*="#"]').not('[href="#"]').not('[href="#0"]');
+        var scrollSpeed = 800;
+        var uri = window.location.href.split("#")[0];
+
+        el.click(function(event) {
+            // check if On-page links
+            if (
+                location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
+                &&
+                location.hostname == this.hostname
+            ) {
+                // Figure out element to scroll to
+                var target = $(this.hash);
+                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+                // Does a scroll target exist?
+                if (target.length) {
+                    // Only prevent default if animation is actually gonna happen
+                    event.preventDefault();
+                    $('html, body').animate({
+                        scrollTop: target.offset().top
+                    }, scrollSpeed);
+                    history.pushState("", "", uri + this.hash);
+                }
+            }
+        });
+
+        // set nav active when scrolling
+        var navActive = function(section) {
+            var $el = $('.onepage_navigation__list');
+
+            $el.find('a.active').removeClass('active');
+            $el.each(function(){
+                $(this).find('a[data-onepage-link="'+section+'"]').addClass('active');
+            });
+        };
+
+        var navigationSection = function() {
+            var $section = $('.mod_article');
+
+            $section.waypoint(function(direction) {
+
+                if (direction === 'down') {
+                    if($(this.element).hasClass('onepage_article')) {
+                        // change url to active link
+                        navActive(this.element.id);
+                    }
+                }
+            }, {
+                offset: '50%'
+            });
+
+            $section.waypoint(function(direction) {
+
+                if (direction === 'up') {
+                    var previousWaypoint = this.previous();
+
+                    if($(this.element).hasClass('onepage_article')) {
+                        // change url to active link
+                        navActive(this.element.id);
+                    }
+                }
+
+            }, {
+                offset: function() {
+                    return (this.context.innerHeight()/2) - this.element.offsetHeight; // offset 50% from bottom
+                },
+                group: $section
+            });
+        };
+
+        $(function(){
+            navigationSection();
+        });
+
+    });
+</script>

contao/templates/modules/mod_onepage_navigation_nature.html5

@@ -0,0 +1,37 @@
+<!-- indexer::stop -->
+<nav class="<?= $this->class ?> mod_navigation navbar block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
+
+  <div class="navbar-brand">
+    <a class="navbar-item" href="{{env::path}}">
+      {{theme::content::NATURE01/01}}
+    </a>
+
+    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMain">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+
+  <?php if ($this->headline): ?>
+    <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
+  <?php endif; ?>
+
+  <a href="<?= $this->request ?>#<?= $this->skipId ?>" class="invisible"><?= $this->skipNavigation ?></a>
+
+  <div id="navbarMain" class="navbar-menu is-primary onepage_navigation__list">
+    <?php if($this->hasItems): ?>
+      <div class="navbar-start level_1">
+        <?php foreach ($this->navigation as $nav): ?>
+          <a href="<?= $nav->onepage_jump; ?>" data-onepage-link="<?= $nav->navigation_jumpTo ?>" title="<?= $nav->title ?>" class="navbar-item<?php if(!empty($nav->css)): ?> <?= $nav->css;?><?php endif; ?>">
+            <span><?= $nav->title ?></span>
+          </a>
+        <?php endforeach; ?>
+      </div>
+    <?php endif; ?>
+  </div>
+
+  <span id="<?= $this->skipId ?>" class="invisible"></span>
+
+</nav>
+<!-- indexer::continue -->

public/scss/_nature_variables.scss

@@ -77,6 +77,8 @@ $input-arrow: $link !default;
 $input-icon-color: rgba($boxes-color,.4) !default;
 $input-icon-active-color: $boxes-color !default;
 $input-radius: 4px !default;
+$input-switch-color: $grey-lighter !default;
+$input-switch-active-color: $primary !default;
 
 /* Pagination */
 $pagination-color: $text !default;
@@ -125,7 +127,7 @@ $megamenu-right: 0px !default;
 $megamenu-background-color: $boxes-background !default;
 $megamenu-background-color-home: $megamenu-background-color !default;
 $megamenu-item-width: 20% !default;
-$megamenu-padding: 20px 60px 5px 30px !default;
+$megamenu-padding: 20px 60px 20px 30px !default;
 $megamenu-link-lvl2-color: #000 !default;
 $megamenu-link-lvl2-color-hover: $primary !default;
 $megamenu-link-lvl3-color: #4a4a4a !default;
@@ -135,3 +137,8 @@ $megamenu-border-color: $primary !default;
 /* Slider */
 $nature-slider-min-height: 100vh !default;
 $nature-slider-mobile-min-height: 100vh !default;
+
+/* Zitat */
+$quote-background: $primary !default;
+$quote-color: #fff !default;
+$quote-icons-color: $link-hover !default;

public/scss/color_schemes/nature_dark_colors.scss

@@ -30,6 +30,8 @@ $navbar-item-active-background-color: none !default;
 $navbar-item-img-max-height: none !default;
 
 $navbar-dropdown-background-color: $black-ter !default;
+$navbar-dropdown-lvl3-background-color: $black-ter !default;
+$navbar-dropdown-lvl4-background-color: $navbar-dropdown-lvl3-background-color !default;
 $navbar-dropdown-arrow: $primary !default;
 $navbar-dropdown-border-top: none !default;
 $navbar-dropdown-boxed-shadow: none !default;
@@ -41,6 +43,10 @@ $navbar-dropdown-item-active-background-color: none !default;
 
 $navbar-burger-color: $primary !default;
 
+/* Megamenu */
+$megamenu-link-lvl2-color: #fff !default;
+$megamenu-link-lvl3-color: #fff !default;
+
 body {
   @extend .dark-color-scheme;
 }

public/scss/color_schemes/nature_dark_mode.scss

@@ -409,10 +409,17 @@ $darkMode_input-focus-border-color: $grey-darker;
     }
 
     .mod_navigation.navbar a.trail, .mod_navigation.navbar a.active, .navbar-item, .navbar-link,
-    a.navbar-item:focus, .navbar-link:focus, a.navbar-item:focus-within, .navbar-link:focus-within, a.navbar-item:hover, .navbar-link:hover, a.navbar-item.is-active, .navbar-link.is-active {
+    a.navbar-item:focus, .navbar-link:focus, a.navbar-item:focus-within, .navbar-link:focus-within, a.navbar-item:hover,
+    .navbar-link:hover, a.navbar-item.is-active, .navbar-link.is-active {
       color: $darkMode_text;
     }
 
+    .mod_navigation.navbar a.navbar-item.active span, .mod_navigation.navbar a.navbar-item.trail span,
+    .mod_navigation.navbar a.navbar-item:hover span, .mod_navigation.navbar .navbar-link.active>span:first-child,
+    .mod_navigation.navbar .navbar-link.trail>span:first-child, .mod_navigation.navbar .navbar-link:hover>span:first-child {
+      border-color: $darkMode_text;
+    }
+
     .navbar {
       background: $black-ter;
     }
@@ -481,28 +488,30 @@ $darkMode_input-focus-border-color: $grey-darker;
 
     .megamenu .navbar-item {
       .navbar-dropdown.level_2 {
-        background: $black-ter;
+        background: $darkMode_boxes-background;
 
         > a.navbar-item, > div.navbar-item > a {
           color: $white;
         }
       }
 
-      .navbar-dropdown.level_3 {
+      .navbar-dropdown.level_3, .navbar-dropdown.level_4 {
         > a.navbar-item, > div.navbar-item > a {
           color: $white;
         }
       }
     }
 
     &.home .megamenu .navbar-item .navbar-dropdown.level_2 {
-      background: $black-ter;
+      background: $darkMode_boxes-background;
     }
   }
 
   @media screen and (min-width: 1024px) {
-    .color-scheme-dark-mode .navbar-dropdown.level_3 {
-      background: $black-ter;
+    .color-scheme-dark-mode .navbar-dropdown {
+      &.level_3, &.level_4 {
+        background: $black-ter;
+      }
     }
   }
 

public/scss/parts/elements.scss

@@ -1425,6 +1425,43 @@ strong {
   }
 }
 
+.quote {
+  background: $quote-background;
+  color: $quote-color;
+  text-align: center;
+  font-size: 1.3em;
+  font-style: italic;
+
+  .rte {
+    position: relative;
+
+    &:before, &:after {
+      display: block;
+      font-family: 'Font Awesome 6 Free';
+      font-weight: 700;
+      color: $quote-icons-color;
+      font-size: 3rem;
+    }
+
+    &:before {
+      content: "\f10d";
+      text-align: left;
+      font-size: 3rem;
+    }
+
+    &:after {
+      content: "\f10e";
+      text-align: right;
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  #main .mod_article:not(.article-full-width).quote {
+    padding: 50px 0;
+  }
+}
+
 .tabs {
   a {
     font-size: 22px;

public/scss/parts/header.scss

@@ -286,6 +286,16 @@
   .navbar-link {
     border-bottom: 2px solid transparent;
 
+    &:hover > span:first-child {
+      border-bottom: 2px solid $navbar-item-hover-color;
+    }
+
+    &.active, &.trail {
+      > span:first-child {
+        border-bottom: 2px solid $navbar-item-active-color;
+      }
+    }
+
     &:not(.is-arrowless) {
       padding-right: 2em;
 
@@ -295,6 +305,14 @@
     }
   }
 
+  .level_2 .navbar-link {
+    &:hover, &.active, &.trail {
+      > span:first-child {
+        border: none;
+      }
+    }
+  }
+
   .navbar-dropdown a.navbar-item span {
     border: none;
   }

public/scss/parts/megamenu.scss

@@ -41,7 +41,7 @@
           font-size: 1.2em;
           font-weight: 700;
           color: $megamenu-link-lvl2-color;
-          padding: 5px 20px;
+          padding: 5px 1rem;
           white-space: normal;
           border-bottom: 2px solid $megamenu-border-color;
           margin-bottom: 10px;
@@ -57,20 +57,31 @@
         }
       }
 
-      .navbar-dropdown.level_3 {
+      .navbar-dropdown.level_3, .navbar-dropdown.level_4 {
         background: none;
         padding: 0;
         min-width: 100%;
 
         > a.navbar-item, > div.navbar-item > a {
           color: $megamenu-link-lvl3-color;
-          padding: 5px 20px;
           white-space: normal;
 
           &:hover, &.active {
             color: $megamenu-link-lvl3-color-hover;
           }
         }
+
+        .navbar-dropdown.level_3 {
+          > a.navbar-item, > div.navbar-item > a {
+            padding: 5px 20px;
+          }
+        }
+
+        .navbar-dropdown.level_4 {
+          > a.navbar-item, > div.navbar-item > a {
+            padding: 5px 30px;
+          }
+        }
       }
     }