Merge branch 'master' of ssh://gitea.spawntree.de:1122/spawntree/ihk24

gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLarge.stories.js

@@ -0,0 +1,32 @@
+import {createEventTeaserLarge} from "./EventTeaserLargeComponent";
+import {EventTeaserLargeData, EventTeaserLargeImageData} from "./EventTeaserLargeData";
+
+export default {
+  title: 'Components/Event Teaser Large',
+  parameters: {
+    backgrounds: {
+      default: 'lightblue',
+    },
+  },
+  args: {
+    event: EventTeaserLargeData,
+  },
+  argTypes: {
+    event: {
+      name: 'Veranstaltung',
+    }
+  }
+}
+
+const Template = ({...args}) => {
+  return createEventTeaserLarge({...args});
+};
+
+export const EventTeaserLarge = Template.bind({});
+EventTeaserLarge.args = {};
+
+export const EventTeaserLargeImage = Template.bind({});
+EventTeaserLargeImage.args = {
+  event: EventTeaserLargeImageData,
+};
+

gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js

@@ -0,0 +1,46 @@
+import './event-teaser-large.scss';
+import {createElement} from "../../_global/scripts/helpers";
+import {EventTeaserLargeData} from "./EventTeaserLargeData";
+import {createButton} from "../../atoms/button/ButtonComponent";
+
+export const createEventTeaserLarge = ({
+  event = EventTeaserLargeData,
+  moreCta = {
+    label: 'Mehr erfahren',
+    target: '_self',
+  },
+}) => {
+  const a = createElement('a', ['event-teaser-large']);
+  const blueBox = createElement('div', ['blue-box'], null, a);
+  const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a);
+  createElement('div', ['icon-box', 'pictogram-' + event.icon.toLowerCase().split(' ').join('-')], null, blueBox);
+  createElement('p', ['ev-title'], event.title, blueBox);
+  createElement('p', ['ev-cat'], event.category, blueBox);
+  createElement('p', ['ev-desc'], event.desc, textBox);
+  const detailBox = createElement('div', ['detail-box'], null, textBox);
+  if (event.details) {
+    for (const [key, value] of Object.entries(event.details)) {
+      if (typeof value === 'string') {
+        createElement('div', [key], value, detailBox);
+      } else if (typeof value === 'object') {
+        createElement('div', [key, value.type], value.label, detailBox);
+      }
+    }
+  }
+  if (moreCta) {
+    detailBox.appendChild(createButton({
+      label: moreCta.label,
+      link: event.link,
+      color: 'primary-light',
+      size: 'small',
+    }))
+  }
+  if (event.bgimage && event.bgimage .length > 0) {
+    blueBox.style = 'background-image: url(' + event.bgimage + ');';
+    blueBox.classList.add('background-image');
+  }
+
+  a.href = event.link;
+
+  return a;
+}

gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeData.js

@@ -0,0 +1,49 @@
+export const EventTeaserLargeTitles = [
+  'Basisseminar – Besser informiert in die Selbstständigkeit',
+  'NBank-Beratungssprechtag in Göttingen',
+  'Aktuelle Änderungen im Zoll- und Aussenwirtschaftsrecht zum Jahreswechsel 2022/2023',
+  'Social Media Manager/-in (IHK) - Webinar',
+]
+
+export const EventTeaserLargeStatus = [
+  {
+    type: 'reserved',
+    label: 'Anmeldefrist abgelaufen',
+  },
+  {
+    type: 'waiting-list',
+    label: 'Warteliste',
+  },
+  {
+    type: 'open',
+    label: 'Freie Plätze vorhanden',
+  }
+]
+
+export const EventTeaserLargeData = {
+  date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' },
+  title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)],
+  desc: 'Entfesseln Sie das volle Potenzial der generativen KI  und beherrschen Sie die Kunst des Prompt-Engineerings!',
+  link: '#',
+  details: {
+    date: '20.09.2022',
+    status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)],
+  },
+  icon: 'Roboter',
+  category: 'Gründung und Nachfolge',
+  bgimage: null,
+}
+
+export const EventTeaserLargeImageData = {
+  date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' },
+  title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)],
+  desc: 'Entfesseln Sie das volle Potenzial der generativen KI  und beherrschen Sie die Kunst des Prompt-Engineerings!',
+  link: '#',
+  details: {
+    date: '20.09.2022',
+    status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)],
+  },
+  icon: 'Roboter',
+  category: 'Gründung und Nachfolge',
+  bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
+}

gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss

@@ -0,0 +1,185 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.event-teaser-large, .events-list-large a:not(.btn) {
+  background-color: white;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  transition: 0.3s ease;
+  text-decoration: none;
+  min-height:400px;
+  @include focus-visible;
+
+  &:hover {
+    color: var(--theme-color-secondary-intensed);
+
+    .blue-box {
+      background-color: var(--theme-color-secondary-intensed);
+    }
+  }
+  
+  .icon-box {
+    font-family: 'Pictograms', sans-serif;
+    font-size: 70px;
+    line-height: 1;
+    color: var(--theme-color-white);
+    position:absolute;
+    top:20px;
+    left:15px;
+    @media(max-width: 567px) {
+      font-size: 50px;
+      margin-top: 0;
+    }
+  }
+  .blue-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    background: linear-gradient(158deg, #003366 4%, #4BA490 39%, #AFCC7A 98%);
+    color: var(--theme-color-white);
+    margin-right: 18px;
+    font-family: "Korb", sans-serif;
+    min-height: 80px;
+    font-size: 14px;
+    line-height: 1;
+    padding: 20px 15px;
+    min-width: 80px;
+    transition: 0.2s ease;
+    position:relative;
+     @media(max-width: 767px) {
+      margin-right: 12px;
+      justify-content: flex-start;
+      padding-top: 10px;
+    }
+    .ev-title{
+      font-size: 36px;
+      font-weight: 400;
+      text-decoration: underline;
+      line-height: 43.20px;
+    }
+    .ev-cat{
+      color: #003366;
+      font-size: 16px;
+      font-family: Source Sans Pro;
+      font-weight: 400;
+      text-transform: uppercase;
+      line-height: 16px;
+      letter-spacing: 0.32px;
+      background-color:white;
+      border-radius:7px;
+      display:inline-block;
+      padding:5px 7px;
+    }
+    span {
+      white-space: nowrap;
+    }
+
+    span:nth-child(2) {
+      font-size: 36px;
+      margin-left: -2px;
+    }
+
+    &.no-date {
+      align-items: flex-start;
+
+      &:before {
+        @include icon-sanduhr;
+        font-family: 'Icons', sans-serif;
+        font-size: var(--icon-size);
+        line-height: 1;
+        margin-bottom: 4px;
+        margin-top: 5px;
+      }
+
+      * {
+        display: none;
+      }
+    }
+  }
+
+  .text-box {
+    align-self: center;
+    padding: 10px 18px 10px 0;
+    line-height: 1.2;
+
+    @media(max-width: 767px) {
+      font-size: var(--font-size-small);
+    }
+  }
+
+  p {
+    margin: 0;
+
+    &:not(:last-child) {
+      margin: 2px 0 0.3em;
+    }
+  }
+
+  .detail-box {
+    > div {
+      display: inline-block;
+      font-size: var(--font-size-small);
+      line-height: 1.2em;
+      margin-right: 15px;
+      margin-bottom: 2px;
+      color: var(--theme-color-primary);
+
+      &::before {
+        position: relative;
+        display: inline-block;
+        font-family: 'Icons', sans-serif;
+        font-size: 18px;
+        line-height: 20px;
+        margin-right: 5px;
+        vertical-align: top;
+        color: var(--theme-color-primary);
+      }
+
+      @media(max-width: 567px) {
+        display: block;
+        padding-left: 24px;
+        position: relative;
+
+        &:before {
+          position: absolute;
+          left: 0;
+        }
+      }
+
+      &.date::before {
+        @include icon-xsmall-kalender;
+      }
+      &.time::before {
+        @include icon-xsmall-uhr;
+      }
+      &.location::before {
+        @include icon-xsmall-pin;
+      }
+      &.interested-parties::before {
+        @include icon-xsmall-liste;
+      }
+      &.price::before {
+        @include icon-xsmall-euro;
+      }
+      &.status {
+        &::before {
+          @include icon-xsmall-offen;
+          color: #2E8533;
+        }
+
+        &.interested-parties, &.waiting-list {
+          &::before {
+            @include icon-xsmall-liste;
+            color: var(--theme-color-primary);
+          }
+        }
+
+        &.reserved::before {
+          @include icon-xsmall-geschlossen;
+          color: #EA515A;
+        }
+      }
+    }
+  }
+}

gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js

@@ -9,6 +9,9 @@ import {createLinkCollection} from "../../components/link-collection/LinkCollect
 import {createContact} from "../../components/contact/ContactComponent";
 import {createEventsSection} from "../../sections/events/EventsComponent";
 import {createFeature} from "../../sections/feature/FeatureComponent";
+import {createImageText} from "../../components/image-text/ImageTextComponent";
+
+import {createEventOverviewStage} from "../../sections/eventoverview-stage/EventOverviewStageComponent";
 
 export const createEventOverviewPage = ({
 
@@ -17,12 +20,12 @@ export const createEventOverviewPage = ({
   page.appendChild(createHeader({}));
 
   const wrapper = createElement('div', ['page-wrapper'], null, page);
-  wrapper.appendChild(createPageDetails({}));
-  wrapper.appendChild(createIntro({
+ //wrapper.appendChild(createPageDetails({}));
+  wrapper.appendChild(createEventOverviewStage({}));
+
+  wrapper.appendChild(createImageText({
     headline: 'Beratung und Service',
-    kicker: null,
-    copy: 'Wir beraten Unternehmen – ganz gleich, ob Sie Fragen zur Grün­dung haben, Fördermittel beantragen oder expandieren möchten. Wir stehen Ihnen in allen Phasen der Unter­nehmens­entwick­lung mit Rat und Tat zur Seite und sind Ihre erste Anlaufstelle. Verschaffen Sie sich einen Überblick über unsere Service- und Beratungs­angebote!',
-    capitalInitial: true,
+    text: 'Wir beraten Unternehmen!',
   }));
   wrapper.appendChild(createTopicTeasersSection({maxItems: 3}));
   wrapper.appendChild(createTeasersSection({type: 'hero', maxItems: 2}));

gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js

@@ -0,0 +1,58 @@
+import {createEventOverviewStage} from "./EventOverviewStageComponent";
+
+export default {
+  title: 'Sections/EventOverview Stage',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    backgroundImage: null,
+    kicker: 'Noch 7 Tage offen',
+    headline: 'Jetzt und digital mitreden',
+  },
+  argTypes: {
+    kicker: {
+      name: 'Dachzeile',
+    },
+    headline: {
+      name: 'Überschrift',
+    },
+    moreCta: {
+      name: 'Mehr-Link',
+    },
+    buttonCta: {
+      name: 'Button',
+    },
+    showProgress: {
+      name: 'Fortschritt anzeigen',
+    },
+    progress: {
+      name: 'Fortschritt',
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+      },
+    }
+  },
+}
+
+const Template = ({...args}) => {
+  return createEventOverviewStage({...args});
+};
+
+export const GenericIntro = Template.bind({});
+GenericIntro.args = {
+
+  kicker: 'IHK Musterstadt Beteiligungsportal',
+};
+
+export const GenericEventOverviewStage = Template.bind({});
+GenericEventOverviewStage.args = {
+
+}
+
+export const EventOverviewStageWithImage = Template.bind({});
+EventOverviewStageWithImage.args = {
+  backgroundImage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
+}

gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js

@@ -0,0 +1,83 @@
+import './eventoverview-stage.scss';
+import {createElement, createImage} from "../../_global/scripts/helpers";
+//import {createProgressBar} from "../../atoms/progress-bar/ProgressBarComponent";
+import {eventOverviewStageData} from "./EventOverviewStageData";
+import {createSearchInput} from "../../atoms/search-input/SearchInputComponent";
+import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";
+import IHKSearchTypeahead from "../../sections/search/search-typeahead";
+import {createTopicTeaser} from "../../components/topic-teaser/TopicTeaserComponent";
+import IHKEventOverviewTiles from "./eventoverview";
+
+
+export const createEventOverviewStage = ({
+  backgroundImage = null,
+  kicker = 'Noch 7 Tage offen',
+  headline = 'Jetzt und digital mitreden',
+  maxItems = 6,
+  placeholder = 'Veranstaltungssuche, z.B. „Existenzgründung”',
+  api = 'services/search/{SEARCHTERM}.json',
+  tiles = eventOverviewStageData,
+}) => {
+  //const hasImage = imageSrc && imageSrc.length > 0;
+  const section = createElement('section', ['eventoverview-section']);
+  const sectiondiv = createElement('div', ['eventoverview', 'eventoverview-stage'], null, section);
+  const container = createElement('div', ['container'], null, sectiondiv);
+  const row = createElement('div', ['row'], null, container);
+  const col = createElement('div', ['col'], null, row);
+  const tb = createElement('div', ['stagetext-box'], null, col);
+
+  
+  const tilescontainer = createElement('div', ['container', 'tilescontainer'], null, section);
+  const tilesrow = createElement('div', ['row'], null, tilescontainer);
+  const tilescol = createElement('div', ['col'], null, tilesrow);
+  if (backgroundImage && backgroundImage.length > 0) {
+    //section.content('style=background: red;');
+    sectiondiv.style = 'background-image: url(' + backgroundImage + ');';
+    sectiondiv.classList.add('background-image');
+  }
+
+  /*if (isFirstElement) {
+    section.classList.add('first-element');
+  }*/
+
+  if (kicker && kicker.length > 0) {
+    createElement('p', ['kicker'], kicker, tb);
+  }
+  /*if (showProgress) {
+    tb.appendChild(createProgressBar({progress}));
+  }*/
+  createElement('h1', ['like-h2'], headline, tb);
+  //createElement('p', [], copy, tb);
+ 
+  /*if (hasImage) {
+    section.classList.add('image-stage');
+    const ib = createElement('div', ['image-box'], null, col);
+    createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib);
+  }*/
+
+  const form = createElement('form', [], null, tb);
+
+    const label = createElement('label', ['visually-hidden'], 'IHK durchsuchen', form);
+    label.for = 'search-term';
+
+    form.appendChild(createSearchInput({api: api, placeholder: placeholder}));
+    form.appendChild(createSearchButton({}));
+
+    form.action = '#';
+
+  const tilesContainer = createElement('div', ['tiles', 'row'], null, tilescol);
+    tiles.map((topic, i) => {
+      if (i < maxItems) {
+        const col = createElement('div', ['col'], null, tilesContainer);
+        const teaser = createTopicTeaser({...topic});
+        col.appendChild(teaser);
+      }
+    })
+    new IHKEventOverviewTiles($(section));
+
+    if (api) {
+      new IHKSearchTypeahead($(form).find('input.typeahead'));
+    }
+
+  return section;
+}

gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js

@@ -0,0 +1,26 @@
+export const eventOverviewStageData = [
+  {
+    title: 'Alles für Gründer',
+    icon: 'Foundation',
+  },
+  {
+    title: 'Alles Wichtige zum Brexit',
+    icon: 'Brexit',
+  },
+  {
+    title: 'Schwerpunkt­thema Digitalisierung',
+    icon: 'Roboter',
+  },
+  {
+    title: 'Schwerpunkt­thema Nachfolge',
+    icon: 'Uebergabe',
+  },
+  {
+    title: 'Alle wichtigen Infos zum Corona-Virus',
+    icon: 'Virus',
+  },
+  {
+    title: 'Alles für Auszubildende',
+    icon: 'Wissen',
+  },
+]

gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss

@@ -0,0 +1,233 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+.eventoverview-section{
+  margin: 0;
+  .tilescontainer{
+    margin-top: calc(-138px / 2);
+    > .row > .col{
+      padding-top:0;
+      margin-top:0;
+    }
+  }
+}
+.eventoverview-stage {
+  background-image: url('./beteiligung-cover.jpg');
+  background-size: cover;
+  color: white;
+  min-height: calc(18vw + 400px);
+  display: flex;
+  align-items: center;
+  margin: 0;
+
+  &.background-image {
+    background-size: cover;
+    background-position: 50% 50%;
+  }
+
+  &.first-element {
+    @media(min-width: 1400px) {
+      margin-top: -60px;
+    }
+  }
+  form{
+    position:relative;
+    input.search-field{
+      height:60px;
+      padding: 14px 90px 14px 24px;
+    }
+    button.search-submit{
+      width: 60px;
+      height: 60px;
+      border-radius: 24px;
+      &:before{
+        font-size:30px;
+      }
+    }
+  }
+  .kicker {
+    margin-bottom: 0.6em;
+  }
+
+  .stagetext-box {
+    max-width: 580px;
+    padding: calc(30px + 1vw) 0;
+  }
+
+  .stagetext-box a:not(.btn) {
+    color: white;
+    + .btn {
+      margin-left: 30px;
+    }
+  }
+
+  .progress {
+    --color-bg: var(--theme-color-white);
+    --color-fg: var(--theme-color-white);
+    --bg-opacity: 0.4;
+
+    + h1, + .text-2 {
+      margin-top: 0.7em;
+    }
+  }
+
+  &.image-stage {
+    position: relative;
+    background-image: none;
+    background-color: var(--theme-color-primary);
+    overflow: hidden;
+    z-index: 1;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 50%;
+      top: 0;
+      bottom: 0;
+      margin: -15% 0 -15% 0;
+      background-color: var(--theme-color-primary);
+    }
+
+    .stagetext-box {
+      position: relative;
+    }
+
+    .image-box {
+      position: absolute;
+      left: 45%;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      z-index: -1;
+
+      img {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        opacity: 1;
+        transition: 0.4s ease;
+
+        &.loading {
+          opacity: 0;
+        }
+      }
+    }
+
+    @media(max-width: 1200px) {
+      &::before {
+        min-width: 560px;
+      }
+
+      .stagetext-box {
+        max-width: 480px;
+      }
+    }
+
+    @media(min-width: 1000px) {
+      &::before {
+        border-top-right-radius: 28% 50%;
+        border-bottom-right-radius: 28% 50%;
+        min-width: 650px;
+      }
+    }
+
+    @media(max-width: 999px) {
+      padding-bottom: 75%;
+
+      &::before {
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: 0 -28% 67%;
+        border-bottom-left-radius: 50% 28%;
+        border-bottom-right-radius: 50% 28%;
+        min-width: 0;
+      }
+
+      .col {
+        padding: 0 var(--col-padding);
+      }
+
+      .image-box {
+        position: absolute;
+        top: auto;
+        left: 0;
+
+        &::before {
+          content: '';
+          position:  relative;
+          display: block;
+          padding-top: 75%;
+        }
+
+        img {
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+      }
+
+      .stagetext-box {
+        max-width: none;
+        margin-bottom: 0;
+        padding-bottom: 24px;
+      }
+    }
+  }
+}
+
+.tiles {
+background: linear-gradient(0deg, 0%, 100%), linear-gradient(88deg, #003366 0%, rgba(1.01, 40.28, 80.75, 0.86) 54%, rgba(0, 51, 102, 0) 100%);
+  &.row {
+    margin: -10px;
+  }
+
+  @media(max-width: 767px) {
+ 
+  }
+  .icon-box {
+    font-size: 40px !important;
+    margin-top:0 !important;
+  }
+  .title {
+    font-weight: 400;
+    font-size: 20px;
+    line-height:21px;
+    margin: 8px 0 5px 0 !important;
+  }
+
+  .col {
+    position: relative;
+    display: flex;
+    flex: 1 1 16.6666666667%;
+    max-width: 16.6666666667%;
+    padding: 10px;
+    @media(max-width: 1080px) {
+      flex: 1 1 33.3333333333%;
+      max-width: 33.3333333333%;
+    }
+    @media(max-width: 767px) {
+      padding: 6px;
+    }
+    @media(max-width: 567px) {
+      flex: 1 1 50%;
+      max-width: 50%;
+    }
+    
+    .topic-teaser{
+      --topic-tile-padding: 10px;
+      border-radius: 0.75rem;
+      box-shadow: 0px 0px 15px 0px rgba(0, 51, 102, 0.20), 0px 0px 46px 0px rgba(0, 51, 102, 0.12), 0px 0px 38px 0px rgba(0, 51, 102, 0.14);
+    }
+  }
+
+  &[data-type='list'] .col {
+    @media(max-width: 567px) {
+      max-width: 100%;
+      flex: 1 1 100%;
+    }
+  }
+}

gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview.js

@@ -0,0 +1,30 @@
+import $ from 'jquery';
+
+class IHKEventOverviewTiles {
+  constructor(section) {
+    this.section = section.addClass('initiated');
+    this.cols = section.find('.col');
+
+    const fullOffset = Math.ceil(this.cols.length / 6) * 3 - this.cols.last().index() - 1;
+
+    if (fullOffset === 0) {
+      return;
+    }
+
+    let firstHalfWidth = this.cols.length - fullOffset * 2;
+
+    if (firstHalfWidth < 0) {
+      firstHalfWidth = 0;
+    }
+
+    this.cols.eq(firstHalfWidth).addClass('width-half').nextAll().addClass('width-half');
+  }
+}
+
+export default IHKEventOverviewTiles;
+
+$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
+  $('.topics:not(.initiated)').each(() => {
+    new IHKEventOverviewTiles($(this));
+  });
+})