From 1f990e7f0fbd46536b47942454697420e4a1c497 Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Mon, 16 Jun 2025 11:18:20 +0200 Subject: [PATCH] develop components --- .../accordion/AccordionComponent.js | 1 - .../components/accordion/accordion.scss | 3 + .../eventteaserlargeslider.scss | 12 ++-- .../stories/sections/social/social.js | 67 +++++++++++-------- .../stories/sections/social/social.scss | 2 +- .../stories/sections/teasers/teasers.scss | 19 +++--- .../sections/video-stage/video-stage.scss | 2 + 7 files changed, 61 insertions(+), 45 deletions(-) diff --git a/gfi-ihk-2024/stories/components/accordion/AccordionComponent.js b/gfi-ihk-2024/stories/components/accordion/AccordionComponent.js index d58ff8a..ade76d2 100644 --- a/gfi-ihk-2024/stories/components/accordion/AccordionComponent.js +++ b/gfi-ihk-2024/stories/components/accordion/AccordionComponent.js @@ -18,7 +18,6 @@ export const createAccordion = } const ul = createElement('ul', type === 'regular' ? ['linklist'] : [], null, accordion); - ul.role = "tablist"; if (type === 'regular') { items.map((item) => { diff --git a/gfi-ihk-2024/stories/components/accordion/accordion.scss b/gfi-ihk-2024/stories/components/accordion/accordion.scss index 8d987f6..ef41b54 100644 --- a/gfi-ihk-2024/stories/components/accordion/accordion.scss +++ b/gfi-ihk-2024/stories/components/accordion/accordion.scss @@ -47,12 +47,15 @@ background-color: var(--theme-color-secondary-dimmed); } */ + /* &.open { .accordion-toggler { background-color: var(--theme-color-secondary-dimmed); color: var(--theme-color-secondary-intensed); } } + + */ } } diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss index 45c8f82..3a39c4d 100644 --- a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss +++ b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss @@ -23,7 +23,7 @@ left: 0 !important; transform: none !important; } - } +} &.single-slide { .controls { @@ -132,7 +132,7 @@ background-color: transparent; padding: 0; cursor: pointer; - + } .slider-tabs, .tabs { position: absolute; @@ -189,7 +189,7 @@ } } } - + .prev, .next { position: absolute; top: -94px; @@ -202,7 +202,7 @@ right:auto; border-radius: 24px; background: var(--theme-color-primary-dimmed-04); - --button-hover-shadow-opacity: 0.4; + --button-hover-shadow-opacity: 0.4; --button-hover-shadow-size: 6px ; @media(max-width: 1470px) { left:auto; @@ -216,7 +216,7 @@ top: -80px; } @media(max-width: 767px) { - + } &:before { @include icon-small-arrow-right-simple; @@ -241,7 +241,7 @@ opacity: 0.4; box-shadow: 0 0 0 6px var(--theme-color-primary-dimmed-04); } - + } .prev { diff --git a/gfi-ihk-2024/stories/sections/social/social.js b/gfi-ihk-2024/stories/sections/social/social.js index ac022c3..d29d8a2 100644 --- a/gfi-ihk-2024/stories/sections/social/social.js +++ b/gfi-ihk-2024/stories/sections/social/social.js @@ -1,8 +1,8 @@ -import $ from 'jquery'; +import $ from "jquery"; class IHKSocialBox { constructor(socialBox) { - this.box = socialBox.addClass('initiated') + this.box = socialBox.addClass("initiated"); this.checkHtmlFragmentCookiesAreSet(socialBox); this.checkIframe(); @@ -10,22 +10,25 @@ class IHKSocialBox { checkIframe() { setTimeout(() => { - const iframe = this.box.find('iframe'); + const iframe = this.box.find("iframe"); if (iframe.length) { - iframe.attr('tabindex', '-1'); + iframe.attr("tabindex", "-1"); } else { this.checkIframe(); } - }, 1000) + }, 1000); } checkHtmlFragmentCookiesAreSet(socialBox) { + if (socialBox.data("useconsent")) { + return; + } let socialMediaProtectionText = socialBox.data("socialmediaprotection"); let socialMediaType = socialBox.data("socialmediatype"); let cookieBot = socialBox.data("usecookiebot"); - if(socialBox.find('iframe').length > 0) { - let iframeElement = socialBox.find('iframe')[0]; + if (socialBox.find("iframe").length > 0) { + let iframeElement = socialBox.find("iframe")[0]; this.checkIframeCookieIsSet(socialMediaProtectionText, socialMediaType, cookieBot, iframeElement, socialBox); } else { this.checkEmbedCookieIsSet(socialMediaProtectionText, socialMediaType, cookieBot, socialBox); @@ -38,7 +41,12 @@ class IHKSocialBox { } if (document.cookie.indexOf("social-media-consent-" + socialMediaType) === -1) { this.hideIframeElement(iframeElement); - let textWithCheckbox = '
'; + let textWithCheckbox = + '
"; $(socialBoxElement).append(textWithCheckbox); @@ -48,14 +56,17 @@ class IHKSocialBox { } checkEmbedCookieIsSet(socialMediaProtectionText, socialMediaType, cookieBot, socialBoxElement) { - let scriptElements = socialBoxElement.find('script'); - let imageElements = socialBoxElement.find('img'); + let scriptElements = socialBoxElement.find("script"); + let imageElements = socialBoxElement.find("img"); if (cookieBot) { $(scriptElements).data("cookieconsent", "marketing"); $(imageElements).data("cookieconsent", "marketing"); } if (document.cookie.indexOf("social-media-consent-" + socialMediaType) === -1) { - let textWithCheckbox = '
'; + let textWithCheckbox = + '
"; $(textWithCheckbox).appendTo(socialBoxElement); @@ -80,17 +91,17 @@ class IHKSocialBox { expirationDate.setDate(expirationDate.getDate() + expirationDays); // Checkbox wurde angeklickt, Cookie setzen - document.cookie = "social-media-consent-" + socialMediaType + "=true; expires=" + expirationDate.toUTCString() + ";"; + document.cookie = + "social-media-consent-" + socialMediaType + "=true; expires=" + expirationDate.toUTCString() + ";"; - console.log("Cookie wurde gesetzt!"); // Finde alle Elemente mit dem selben socialMediaType let self = this; $(`[data-socialmediatype=${socialMediaType}]`).each(function () { let currentBox = $(this); currentBox.find(".social-media-protection-text-with-checkbox").hide(); - let scriptElements = currentBox.find('script'); - let imageElements = currentBox.find('img'); - let iframeElements = currentBox.find('iframe'); + let scriptElements = currentBox.find("script"); + let imageElements = currentBox.find("img"); + let iframeElements = currentBox.find("iframe"); self.showElements(scriptElements); self.showElements(imageElements); @@ -108,16 +119,16 @@ class IHKSocialBox { showElement(htmlFragment) { let $element = $(htmlFragment); - let elementType = $element.prop('tagName').toLowerCase(); - let dataSrc = $element.attr('data-src'); - if (typeof dataSrc === 'undefined') { - dataSrc = $element.attr('src'); + let elementType = $element.prop("tagName").toLowerCase(); + let dataSrc = $element.attr("data-src"); + if (typeof dataSrc === "undefined") { + dataSrc = $element.attr("src"); } - if (elementType === 'script') { - $element.attr('src', dataSrc); + if (elementType === "script") { + $element.attr("src", dataSrc); $element.show(); - } else if (elementType === 'img' || elementType === 'iframe') { - $element.attr('src', dataSrc); + } else if (elementType === "img" || elementType === "iframe") { + $element.attr("src", dataSrc); $element.show(); } } @@ -125,8 +136,8 @@ class IHKSocialBox { export default IHKSocialBox; -$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () { - $('.social-box:not(.initiated)').each(function () { +$("body").on("ihk-init dynamic-component-loaded gfi-dynamic-init", function () { + $(".social-box:not(.initiated)").each(function () { new IHKSocialBox($(this)); - }) -}) + }); +}); diff --git a/gfi-ihk-2024/stories/sections/social/social.scss b/gfi-ihk-2024/stories/sections/social/social.scss index aeefdfb..485483f 100644 --- a/gfi-ihk-2024/stories/sections/social/social.scss +++ b/gfi-ihk-2024/stories/sections/social/social.scss @@ -8,7 +8,7 @@ section.social { } } - h2 { + h2, .like-h2 { margin-bottom: 0.4em; } diff --git a/gfi-ihk-2024/stories/sections/teasers/teasers.scss b/gfi-ihk-2024/stories/sections/teasers/teasers.scss index 0ad091f..45d1128 100644 --- a/gfi-ihk-2024/stories/sections/teasers/teasers.scss +++ b/gfi-ihk-2024/stories/sections/teasers/teasers.scss @@ -51,7 +51,7 @@ } &[data-type="hero"]{ - .image-box ~ .text-box { + .image-box ~ .text-box, .image-box ~ .text-box .title { .magazine-indicator{ top: -16px; } @@ -59,7 +59,7 @@ } .image-box ~ .text-box { - h4{ + h4, .like-h4 { position: relative; .magazine-indicator{ top: -40px; @@ -158,7 +158,8 @@ margin-top: 0 !important; } - &[data-type="hero"] .teaser:not(.video-teaser-wrapper) .image-box ~ .text-box h4 { + &[data-type="hero"] .teaser:not(.video-teaser-wrapper) .image-box ~ .text-box h4, + &[data-type="hero"] .teaser:not(.video-teaser-wrapper) .image-box ~ .text-box .like-h4 { background-color: var(--theme-grey-light); } } @@ -224,12 +225,12 @@ margin-left: 10px; } - h4 { + h4, .like-h4 { margin-top: 0; } &[data-type="hero"] .image-box + .text-box { - h3, h4 { + h3, h4, .like-h4 { position: relative; font-size: 20px; margin-top: 0; @@ -369,14 +370,14 @@ } a.teaser { - h3, h4 { + h3, h4, .like-h4 { text-decoration: underline; text-underline-offset: 0.09em; text-decoration-thickness: 0.08em; } } - h3, h4 { + h3, h4, .like-h4 { margin: 16px 0 14px; color: var(--theme-color-link); transition: 0.3s ease; @@ -562,7 +563,7 @@ .image-box ~ .text-box { padding-top: 16px; - h4 { + h4, .like-h4 { position: absolute; bottom: 100%; z-index: 1; @@ -616,7 +617,7 @@ height: 14px; } - h3, h4 { + h3, h4, .like-h4 { color: var(--theme-color-link-hover); } } diff --git a/gfi-ihk-2024/stories/sections/video-stage/video-stage.scss b/gfi-ihk-2024/stories/sections/video-stage/video-stage.scss index a4989f6..ee7a0a4 100644 --- a/gfi-ihk-2024/stories/sections/video-stage/video-stage.scss +++ b/gfi-ihk-2024/stories/sections/video-stage/video-stage.scss @@ -28,6 +28,7 @@ object-fit: cover; background: green; } + .video--controls { position: absolute; left: 20px; @@ -36,6 +37,7 @@ gap: 20px; z-index: 10; } + .video--play-pause, .video--mute-unmute { display: block;