finish images refactor

enhavo · Nov 6, 2024 · 74599dc · 74599dc
1 parent 73228ab
commit 74599dc
Show file tree

Hide file tree

Showing 45 changed files with 14,941 additions and 1,592 deletions.
diff --git a/assets/theme/controllers/CarouselController.ts b/assets/theme/controllers/CarouselController.ts
diff --git a/assets/theme/controllers/Carousel_Controller.ts b/assets/theme/controllers/Carousel_Controller.ts
@@ -0,0 +1,12 @@
+import {Controller} from "@hotwired/stimulus";
+import * as $ from 'jquery';
+
+
+export default class extends Controller {
+    static targets = ["track", "slide", "navButton"];
+
+    connect() {
+       console.log(this.element)
+    }
+
+}
diff --git a/assets/theme/controllers/HelloStarterController.ts b/assets/theme/controllers/HelloStarterController.ts
@@ -4,9 +4,6 @@ export default class extends Controller
 {
     connect()
     {
-        console.log(this.element);
-        console.log("Hello, world!")
-        // $(this.element).hide()
         $(this.element) .on('click' )
     }
 

diff --git a/assets/theme/controllers/JobsController.ts b/assets/theme/controllers/JobsController.ts
@@ -1,10 +1,31 @@
 import { Controller } from "@hotwired/stimulus";
-import * as $ from 'jquery'
+import $ from "jquery";
 export default class extends Controller {
-    static targets = [
-        "item"
-    ];
+    static targets = ["type", "typeContainer", "toggleIcon", "item"];
+
     connect() {
+        this.showingTypes = false;
+    }
+
+    filterByJobType(e) {
+        e.preventDefault();
+        this.toggleJobTypesVisibility();
 
     }
+    toggleJobTypesVisibility() {
+        this.showingTypes = !this.showingTypes;
+        this.typeContainerTarget.classList.toggle('visible', this.showingTypes);
+        this.toggleIconTarget.classList.toggle('visible', this.showingTypes);
+    }
+    filterItems(e) {
+        const selectedType = e.currentTarget.textContent.trim();
+        this.itemTargets.forEach((item) => {
+            item.style.display = "block";
+        });
+        this.itemTargets.forEach((item) => {
+            if (item.getAttribute('data-type') !== selectedType) {
+                item.style.display = "none";
+            }
+        });
+    }
 }
diff --git a/assets/theme/controllers/SubMenuController.ts b/assets/theme/controllers/SubMenuController.ts
@@ -1,33 +1,9 @@
 import { Controller } from "@hotwired/stimulus";
-import * as $ from 'jquery';
-export default class extends Controller {
-    static targets = ['trigger', 'menu'];
-    connect() {
-        this.setupHover();
-        console.log('submenu working');
-    }
+import $ from 'jquery';
 
-    setupHover() {
-        const _this = this;
-
-        // Hover on the headline to show the submenu
-        $(this.triggerTargets).hover(
-            function () {
-                $(this).siblings(_this.menuTarget).addClass('active');
-            },
-            function () {
-                $(this).siblings(_this.menuTarget).removeClass('active');
-            }
-        );
+export default class extends Controller {
+    static targets = ['trigger', 'submenu', 'header'];
 
-        // Keep submenu visible on hover
-        $(this.menuTargets).hover(
-            function () {
-                $(this).addClass('active');
-            },
-            function () {
-                $(this).removeClass('active');
-            }
-        );
+    connect() {
     }
-}
+}
diff --git a/assets/theme/controllers/SwiperTeaserController.ts b/assets/theme/controllers/SwiperTeaserController.ts
@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus";
+import $ from 'jquery';
+import 'slick-carousel';
+
+export default class extends Controller {
+    static targets = ["slide", "navButton"];
+
+    connect() {
+        console.log('Slick carousel initialized', this.element);
+        $(this.slideTarget).slick({
+            slidesToShow: 4,
+            slidesToScroll: 1,
+            autoplay: true,
+            autoplaySpeed: 2000,
+            pauseOnHover:true,
+            responsive: [
+                {
+                    breakpoint: 780,
+                    settings: {
+                        slidesToShow: 2,
+                        slidesToScroll: 1,
+                    }
+                },
+                {
+                    breakpoint: 480,
+                    settings: {
+                        slidesToShow: 1,
+                        slidesToScroll: 1,
+                    }
+                }
+            ]
+        });
+
+        this.setupNavigation();
+
+        $(this.slideTarget).on('afterChange', (event, slick, currentSlide) => {
+            this.highlightActiveButton(currentSlide);
+        });
+    }
+
+    setupNavigation() {
+        this.navButtonTargets.forEach((button) => {
+            const index = button.dataset.index;
+
+            button.addEventListener('click', () => {
+                $(this.slideTarget).slick('slickGoTo', index);
+                this.highlightActiveButton(index);
+            });
+        });
+    }
+
+    highlightActiveButton(index) {
+        this.navButtonTargets.forEach((btn) => btn.classList.remove('active'));
+        this.navButtonTargets[index].classList.add('active');
+    }
+}
diff --git a/assets/theme/styles/blocks/_index.scss b/assets/theme/styles/blocks/_index.scss
@@ -7,7 +7,6 @@
 @import 'jobs';
 @import 'logo';
 @import 'nag-screen';
-@import 'navigation';
 @import 'quote';
 @import 'team';
 @import 'swipe-teaser';

diff --git a/assets/theme/styles/blocks/advanced-text.scss b/assets/theme/styles/blocks/advanced-text.scss
@@ -1,21 +1,22 @@
 .block-advance-text {
-  .grid {display: grid;flex-direction: column;grid-template-columns: repeat(6, 1fr);grid-gap: 51px;
-    .text-big {display: flex;flex-direction: column;grid-column: 2 /span 4;
-    .copy{font-weight: 700;font-size: 2.4rem;line-height: 1.33em}
+  .grid {display: grid;flex-direction: column;
+    grid-template-columns: repeat(6, 1fr);gap: 51px;
+    .text-big {display: flex;flex-direction: column;
+      grid-column: 2 /span 4;
+      .copy{font-weight: 700;font-size: 2.4rem;line-height: 1.33em}
     }
     .headline-breaker{grid-column: 2 / span 4;
        .headline{@include boldHeadline;text-transform: uppercase}
      }
     .one-column {grid-column: 1 /span 3;
     }
-    .one-column-wide {display: flex;flex-direction: column;grid-column: 2 /span 4;
+    .one-column-wide {display: flex;flex-direction: column;
+      grid-column: 2 /span 4;
     }
-    .two-column {grid-column: span 6;display: flex;flex-direction: column;
+    .two-column {grid-column: span 6;
+      display: flex;flex-direction: column;
       .text-container {display: flex;gap: 51px;}
       .two-column-btn {margin-left: auto}
     }
-    .theme-cta{@include cta;}
-    .headline{padding: 5px 0 15px 0;@include typoHeadline;}
-    .overline{@include typoOverline;}
   }
 }
diff --git a/assets/theme/styles/blocks/card.scss b/assets/theme/styles/blocks/card.scss
@@ -1,21 +1,53 @@
 .block-card {
-  .text-grid {display: flex;gap: 50px;
+  .text-grid {
+    display: flex;
+    gap: 50px;
+    .card-text {
+      flex: 1
+    }
   }
-  .headline {padding: 5px 0 15px 0;@include typoHeadline;}
-  .overline{@include typoOverline;}
-  .gradient-grid{display: flex;gap:50px;
-    .card-gradient{display: flex;flex-direction: column;justify-content: center;z-index: 3}
+  .gradient-grid {
+    display: flex;
+    .media-container {
+      .headerbild-img {
+        z-index: -2;
+      }
+      .gradient {
+        @include imgCover;left: 50%;
+        background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%);
+        z-index: 1;
+      }
+    }
+    .card-gradient {
+      flex: 1;display: flex;flex-direction: column;justify-content: center;
+      z-index: 1;
+    }
   }
-  .stacked-grid{
-    display: flex;flex-direction:column;grid-template-columns: 1fr;gap: 50px;margin: 0 auto;max-width: 960px;
+  .stacked-grid {
+    display: flex;flex-direction: column;gap: 50px;
+    margin: 0 auto;
+    max-width: 960px;
+    .media-container {
+      padding-bottom: 55%;
+    }
   }
-  .theme-cta{@include cta;}
-  .media-container{position: relative;
-    .headerbild-img {position: relative;z-index: -2;}
-    .gradient-img {position: absolute;top: 0;right: 0;z-index: 1;left: 50%;}
+  .media-container {
+    flex: 1;
+    padding-bottom: 26.5%;
+    position: relative;
   }
-  img{
+  .headerbild-img {
+    @include imgCover;
+  }
+  img {
+    width: 100%;
     display: block;
   }
 }
+@include screenMaxWidth(1024px){
+  .block-card{
+    .media-container{flex: 0;}
+    .text-grid{gap: 0}
+  }
+}
 
diff --git a/assets/theme/styles/blocks/content.scss b/assets/theme/styles/blocks/content.scss
@@ -1,16 +1,21 @@
 .block-content {
-  .flex-grid {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 51px;
-    .image-container {grid-column: span 1;
-      img{width: 100%;}
-      .texts-container{padding-top: 20px}
-    }
+  .flex-grid {
+    display: grid;grid-template-columns: repeat(3, 1fr);gap: 51px;
+    .texts-container {padding-top: 20px;}
   }
-  .headline{padding: 5px 0 15px 0;@include typoHeadline;}
-  .overline{@include typoOverline;}
-  .list-grid {display: grid;grid-gap: 51px;
-    .list-img-wrapper {grid-column: span 1;display: flex;gap: 50px;justify-content: center;align-items: center;
-      img {width: 100%}
+  .list-grid {display: flex;flex-direction: column; gap: 51px;
+    .list-img-wrapper {display: flex;gap: 50px;
+      .image-container {
+        flex: 1;
+        padding-bottom: 17.5%;
+        position: relative;
+      }
+      .texts-container {flex: 2;}
     }
   }
-  .theme-cta{@include cta();}
+  .image-container {
+    padding-bottom: 55.5%;
+    position: relative;
+  }
+  img {display: block;@include imgCover;}
 }
diff --git a/assets/theme/styles/blocks/form.scss b/assets/theme/styles/blocks/form.scss
@@ -1,9 +1,8 @@
 .block-form {
   .form-grid {display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: 51px;
     .text-container {grid-column: 2 / span 4;
-      .headline {color: $textColor3;@include boldHeadline();text-transform: uppercase;}
-      .overline{@include typoOverline;}
-      .copy {margin-top: 30px;@include typoHeadline;text-transform: capitalize;font-size: 1.6rem;line-height: 1.25em}
+      .headline {color: $textColor3;@include boldHeadline()}
+      .text {margin-top: 30px;text-transform: capitalize;font-size: 1.6rem;line-height: 1.25em}
     }
     .form {grid-column: 2 / span 4;
       .label {font-weight: 700;letter-spacing: 0.45px;line-height: 1.055em;}
@@ -16,7 +15,7 @@
       select {color: #CBCBCB;}
       label[for='checkbox']{line-height: 2.6em;letter-spacing: 0.1px;font-size: 1rem;text-transform: capitalize;margin-left: 1%;}
       .required {color: #DB5245;padding-bottom: 20px;line-height: 2.6em;letter-spacing: 0.1px;font-size: 1rem}
-      .cta {@include cta();padding: 1rem;margin-top: 2%;width: 100%;height: auto;display: flex;justify-content: center;align-items: center;}
+      .cta {;padding: 1rem;margin-top: 2%;width: 100%;height: auto;display: flex;justify-content: center;align-items: center;}
     }
   }
 }