@leuffen/themejs1 7.0.1 → 7.0.3

package/sections/navbar-centerlogo/navbar-centerlogo.ts

@@ -4,26 +4,31 @@ import {Joda, JodaDescriptionManager} from "@leuffen/jodastyle";
 
 const html = `
 
-    <nav class="navbar-centerlogo navbar :: mobile :xl:">
-        <div class="navbar__wrapper [[ layout.container ]]">
-            <slot class="" data-select="ul.navbar-top "></slot>
+    <nav class="navbar-centerlogo">
+        <div class="e--spacer"></div>
+        <div class="e--backdrop"></div>
+        <div class="navbar">
+            <div class="navbar__wrapper [[ layout.container ]]">
+                <slot class="" data-select="ul.navbar-top "></slot>
 
-            <slot class="navbar__logo" data-select="[[ layout.slot_logo_selector ]]"></slot>
+                <slot class="navbar__logo" data-select="[[ layout.slot_logo_selector ]]"></slot>
 
-            <div class="burger-menu" onclick="this.closest('nav').classList.toggle('sidebar')">
-                <div class="burger-menu__text">
-                    [[ layout.burger_text ]]
-                </div>
-                <div class="burger-menu__burger">
-                    <div></div>
-                    <div></div>
-                    <div></div>
+
+
+                <div class="burger-menu" onclick="this.closest('nav').classList.toggle('sidebar')">
+                    <div class="burger-menu__text">
+                        [[ layout.burger_text ]]
+                    </div>
+                    <div class="burger-menu__burger">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                    </div>
                 </div>
-            </div>
 
+            </div>
         </div>
 
-
         <aside>
             <div class="backdrop" onclick="this.closest('nav').classList.remove('sidebar')"></div>
             <div class="menu">
@@ -44,20 +49,40 @@ Joda.registerTemplate(
     html,
     {
         slot_logo_selector: ".brand",
-        burger_text: "Menu",
-        container: "container"
+        burger_text: "Menü",
+        container: "container",
 
+        scrollup_position: 100
     },
     {
-        "onAfterConnectedCallback": (element: HTMLElement) => {
+        "onAfterAllTemplatesConnectedCallback": (element: HTMLElement) => {
+            // Query css variable --layout-scrollup from elment
+
             // If the page is scrolled down, the navbar should be sticky
             // Update this on scroll event
-            window.addEventListener("scroll", () => {
+            let lastY = 0;
+            let navbar = element.querySelector(".navbar")
+            let changer = () => {
                 if (window.scrollY > 1) {
-                    element.classList.add("scrolled");
+                    navbar.classList.add("scrolled");
+                    navbar.classList.remove("unscrolled");
                 } else {
-                    element.classList.remove("scrolled");
+                    navbar.classList.remove("scrolled");
+                    navbar.classList.add("unscrolled");
                 }
-            });
+
+                let isScrollingUp = window.scrollY < lastY;
+                lastY = window.scrollY;
+
+                if (window.scrollY > 250 && ! isScrollingUp) {
+                    navbar.classList.add("scrollup");
+                } else {
+                    navbar.classList.remove("scrollup");
+                }
+
+            }
+
+            window.addEventListener("scroll", changer, {passive: true});
+            changer()
         }
     });

package/sections/navbar-switch2/navbar-switch2.scss

@@ -0,0 +1,274 @@
+@import "bootstrap/scss/functions";
+
+// 2. Include any default variable overrides here
+
+// 3. Include remainder of required Bootstrap stylesheets
+@import "bootstrap/scss/variables";
+
+// 4. Include any default map overrides here
+
+// 5. Include remainder of required parts
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/root";
+
+
+.isl-navbar-switch2 {
+
+
+    background: transparent;
+
+
+
+
+    img {
+        max-width: 100%;
+    }
+
+    &__top-bar {
+        margin-top: 15px;
+        margin-bottom: 15px;
+
+        ul {
+            display: flex;
+            justify-content: end;
+            margin-bottom: 0;
+            &>li {
+                list-style: none;
+                border-radius: 0;
+                padding: 7px 15px;
+
+                height: auto;
+                p {
+                    margin-bottom: 0;
+                    font-size: 15px;
+                    color: $black;
+                }
+                &:not(:last-child) {
+                   margin-right: 30px;
+                }
+                a {
+                       text-decoration: none;
+                   }
+            }
+        }
+    }
+
+    &__nav {
+        background: $white;
+        border-radius: 0;
+        width: 100%;
+        height: 80px;
+        align-content: center;
+        box-shadow: 0px 1px 2px #00000029;
+
+        overflow: hidden;
+        &--inner {
+            display: flex;
+            justify-content: end;
+            align-items: center;
+
+        }
+
+        &--logo {
+            margin-right: auto;
+
+
+        }
+
+        &--items {
+            display: flex;
+            margin-bottom: 0;
+
+            ul {
+                margin-bottom: 0;
+
+                li {
+                    list-style: none;
+                    display: inline-flex;
+                    a {
+
+                        font-size: 18px;
+                        font-weight: 500;
+                        margin-right: 2rem;
+                        height: 80px;
+                        line-height: 80px;
+                        color: var(--text-color, black);
+                        padding: 0 1rem;
+                        transition: 0.3s;
+                        text-decoration: none;
+
+                        @include media-breakpoint-down(lg) {
+                            margin-right: 0.5rem;
+                        }
+
+                        &:hover {
+                            background: $primary;
+                            color: $white;
+                        }
+                    }
+                }
+            }
+
+        }
+
+        &--mobile-menu {
+            position: relative;
+            width: 35px;
+            height: 30px;
+            opacity: 0.6;
+            cursor: pointer;
+
+            &-selector {
+                position: absolute;
+                padding: 20px; // Make the clickable area bigger
+                margin: -20px; // Make the clickable area bigger
+                z-index: 3;
+                div {
+                    width: 35px;
+                    height: 3px;
+                    background-color: black;
+                    margin: 6px 0;
+                }
+            }
+
+            &:hover {
+                opacity: 1;
+            }
+
+        }
+    }
+
+    &.floating {
+        position: absolute;
+        top:0;
+        left:0;
+        right:0;
+        z-index: 999;
+    }
+
+    &.mobile {
+
+        &.floating {
+            position: static;
+
+        }
+            .isl-navbar-switch2__top-bar {
+                justify-content: unset;
+
+                &--item {
+                    &:last-child {
+                        margin-left: auto;
+                    }
+                }
+            }
+
+
+
+
+            .isl-navbar-switch2__nav {
+                height: auto;
+                padding:  20px 10px 20px 0;
+
+                &--inner {
+                    justify-content: unset;
+                    padding-left: unset;
+                    padding-right: unset;
+                }
+
+                &--items {
+                    display: none;
+                }
+
+                &--logo {
+
+                }
+            }
+
+
+
+    }
+
+    aside {
+        &>.backdrop {
+            position: fixed;
+            background-color: var(--nav-sidbar-backgrond-color, $primary);
+            opacity: 0.4;
+            top:0; bottom: 0; left: 0; right: 0;
+            width: 100%;
+            height: 100%;
+            transform: scale(0%);
+            -webkit-transform: scale(0, 0);
+            transition: all 0.1s ease-in-out;
+            z-index:9998;
+        }
+        &>.menu {
+
+
+            position: fixed;
+            top: 0; bottom: 0; right: 0;
+            width: 90vw;
+            max-width: 300px;
+            z-index: 9999;
+            transform: translateX(100%);
+            background-color: var(--nav-sidbar-backgrond-color, $primary);
+            // Do big black shadow
+            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+            transition: all 0.2s ease-in-out;
+
+            ul {
+                padding: 0;
+                margin: 0;
+                &>li {
+                    list-style: none;
+                    width: 100%;
+                    &>a {
+                        &:hover {
+                            background-color: var(--nav-sidbar-backgrond-color-hover, darken($primary, 10%));
+                        }
+
+                        display: block;
+                        text-decoration: none;
+                        width: 100%;
+                        padding: 15px;
+                        color: $white;
+                        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+                    }
+                }
+            }
+
+            &>.menu-header {
+                width: 100%;
+                border-bottom: 1px solid rgba(255, 255,255,0.5);
+                display: flex;
+                align-content: center;
+                justify-content: end;
+
+                &>svg {
+                    cursor: pointer;
+                    margin: 20px;
+                    color: $white;
+                    height: 38px;
+                    width: 38px;
+                }
+            }
+        }
+
+    }
+
+    &.sidebar {
+        aside {
+            &>.backdrop {
+                transform: scale(100%);
+                -webkit-transform: scale(100%, 100%);
+            }
+            &>.menu {
+                transform: translateX(0%);
+            }
+
+
+        }
+    }
+
+
+}

package/sections/navbar-switch2/navbar-switch2.ts

@@ -0,0 +1,47 @@
+
+// language=HTML
+import {Joda, JodaDescriptionManager} from "@leuffen/jodastyle";
+
+const html = `
+
+    <nav class="isl-navbar-switch2 :: mobile :xl:">
+
+        <div class="isl-navbar-switch2__top-bar container-xxl">
+            <slot data-select="ul.navbar-top"></slot>
+        </div>
+        <div class="isl-navbar-switch2__nav">
+            <div class="container-xl">
+                <div class="isl-navbar-switch2__nav--inner">
+                    <div class="isl-navbar-switch2__nav--logo">
+                        <slot data-select=".brand"></slot>
+                    </div>
+                    <div class="isl-navbar-switch2__nav--items :: d-none :xl: d-block">
+                        <slot data-select="ul.navbar-main" data-child-class="isl-navbar-switch2__nav--items-item"></slot>
+                    </div>
+                    <div class="isl-navbar-switch2__nav--mobile-menu :: :xl: d-none" >
+                        <div class="isl-navbar-switch2__nav--mobile-menu-selector" onclick="this.closest('nav').classList.toggle('sidebar')">
+                            <div></div>
+                            <div></div>
+                            <div></div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <aside>
+            <div class="backdrop" onclick="this.closest('nav').classList.remove('sidebar')"></div>
+            <div class="menu">
+                <div class="menu-header">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16"  onclick="this.closest('nav').classList.remove('sidebar')">
+                        <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
+                    </svg>
+                </div>
+                <slot data-select="ul.navbar-main" data-copy="1" data-child-class="isl-navbar-switch2__nav--items-item"></slot>
+            </div>
+        </aside>
+    </nav>
+
+`;
+
+Joda.registerTemplate("navbar-switch2", html);

package/sections/sec-card-2col/sec-card-2col.scss

@@ -5,11 +5,39 @@
     background: var(--t-section-background);
 
 
+    --layout-title-aspect-ratio: 16 / 9;
+
+
+
     .tjs__sec-card-2col--col-start > slot > .children > *:last-child {
         margin-bottom: 0 !important;
     }
 
 
+
+    slot.title {
+        &:empty {
+            display: none;
+        }
+        display: block;
+        width: 100%;
+        text-align: center;
+
+        aspect-ratio: var(--layout-title-aspect-ratio);
+
+        object-fit: cover;
+        object-position: center center;
+        &>p {
+            display: contents;
+        }
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center center;
+        }
+    }
+
     map.aside {
         --joda-class: "";
         display: block;

package/sections/sec-card-2col/sec-card-2col.ts

@@ -10,13 +10,14 @@ Joda.registerTemplate(
 
         <section class="tjs__sec-card-2col [[layout.class]] :: mobile :lg: desktop">
             <div class="tjs__sec-card-2col--container [[layout.container]]">
+                <slot class="title" data-select="img.title || .title > img"></slot>
                 <div class="row [[layout.order === 'reverse' ? 'flex-column-reverse': '']] [[layout.mobile_reverse === 'yes' ? ':: flex-column-reverse :lg:': '']]">
                     <div class="tjs__sec-card-2col--col-start tjs__section-text p-4 p-lg-5 :: col-12 :lg: col-[[layout.cols]]">
                         <slot></slot>
                     </div>
                     <div class="tjs__sec-card-2col--col-end image-side :: col-12 :lg: col-[[12 - layout.cols]] ">
 
-                        <slot class="[[layout.slideshow === true ? 'slideshow' : '']]" data-select="img, .children > .section-hr.aside, .aside" [[layout.slideshow !== true ? 'data-limit="1"' : '' ]]></slot>
+                        <slot class="[[layout.slideshow === true ? 'slideshow' : '']]" data-select=".aside || img, .children > .section-hr.aside" [[layout.slideshow !== true ? 'data-limit="1"' : '' ]]></slot>
                     </div>
                 </div>
             </div>

package/sections/sec-testimonial-ribbon/sec-testimonial-ribbon.scss

@@ -1,7 +1,10 @@
 .tjs__sec-testimonial-ribbon {
-    padding: var(--t-section-padding);
 
-    background-color: var(--t-section-background);
+    --layout-bg: var(--t-section-background);
+    --layout-bg-ribbon: var(--t-soft-primary);
+
+    padding: var(--t-section-padding);
+    background-color: var(--layout-bg);
 
     &.mobile {
         padding-top: 40px;
@@ -26,7 +29,7 @@
     & > .tjs__sec-testimonial-ribbon--wrapper {
         padding-top: 40px;
         padding-bottom: 40px;
-        background-color: var(--t-section-background-primary);
+        background-color: var(--layout-bg-ribbon);
         font-size: 1.2em;
         font-style: italic;
         letter-spacing: 1px;

package/sections/sections.scss

@@ -2,6 +2,7 @@
 @import "defaults";
 @import "navbar-blox/navbar-blox.scss";
 @import "navbar-centerlogo/navbar-centerlogo.scss";
+@import "navbar-switch2/navbar-switch2";
 @import "sec-legal-content/sec-legal-content";
 @import "sec-testimonial-ribbon/sec-testimonial-ribbon";
 @import "sec-card-2col/sec-card-2col";

package/sections/sections.ts

@@ -1,6 +1,7 @@
 
 import "./navbar-blox/navbar-blox";
 import "./navbar-centerlogo/navbar-centerlogo";
+import "./navbar-switch2/navbar-switch2";
 import "./sec-legal-content/sec-legal-content";
 import "./sec-testimonial-ribbon/sec-testimonial-ribbon";
 import "./sec-card-2col/sec-card-2col";

package/themes/theme1/index.scss

@@ -157,7 +157,7 @@
         }
         .content {
             background-color: #fff;
-            p {
+            p,ul,ol {
                 margin: 20px 20px 20px 0;
             }
         }

package/themes/theme2/index.scss

@@ -187,7 +187,7 @@ $header-text-transform: unset !default;
         }
         .content {
             background-color: #fff;
-            p {
+            p,ul,ol{
                 margin: 20px 20px 20px 0;
             }
         }