<script src="../../../../javascripts/tools.js" async="async">
</script>
<div class="faq-list" id="faq-list" data-source="/data/faq-list.json">
    <div class="faq-list__headline">
        <h1 class="headline headline--display-2">Zu welchem Thema können wir Ihnen behilflich sein?
        </h1>
    </div>
    <div class="faq-list__search search-field__form">
        <div class="faq-list__search-inner form-micro">
            <div class="typeahead">
                <input class="input input--text" placeholder="Stichwort" v-model="query" @keyup="showSuggestions" @keydown.esc="suggestions = []" /><span class="faq-list__search-button">
<svg class="icon faq-list__search-button-icon icon--search" id="icon-f78b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-search"></use>
</svg></span>
                <div class="typeahead__container" v-if="getSuggestions.length">
                    <ul class="typeahead__list">
                        <li class="typeahead__list-item" tabindex="0" v-for="page in suggestions" @click="navigateToPage(page.id); suggestions = [];">{{ page.title }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="faq-list__page">
        <template v-if="currentPage === &quot;home&quot;">
      <div class="faq-list__home">
        <p class="faq-list__text">Top-Themen</p>
        <div class="faq-list__home-grid">
          <div class="faq-list__home-grid-item" v-for="topic in topics">
            <button class="button button--blue faq-list__home-button" @click="navigateToPage(topic.id)">{{ topic.title }}</button>
          </div>
        </div>
      </div>
    </template>
        <template v-else="v-else">
      <div class="faq-list__page" v-if="currentPageData">
        <div class="faq-list__container" v-if="currentPageData.links">
          <p class="faq-list__text">Weiterführende Infos</p>
          <ul class="faq-list__links">
            <li class="faq-list__links-item" v-for="link in currentPageData.links"><a class="faq-list__link" :href="link.url" :title="link.title">{{ link.title }}
<svg class="icon faq-list__link-icon icon--internal-link" id="icon-41ad" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg></a></li>
          </ul>
        </div>
        <div class="faq-list__container" v-if="currentPageData.documents">
          <p class="faq-list__text">Nützliche Dokumente</p>
          <ul class="faq-list__documents">
            <li class="faq-list__documents-item" v-for="document in currentPageData.documents"><a class="faq-list__document" :href="document.url" :title="document.title">{{ document.title }}
<svg class="icon faq-list__document-icon icon--pdf" id="icon-7c9c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-pdf"></use>
</svg></a></li>
          </ul>
        </div>
        <div class="faq-list__container" v-if="currentPageData.contact">
          <p class="faq-list__text">So erreichen Sie uns am besten</p>
          <div class="faq-list__contact faq-list__contact--phone" v-if="currentPageData.contact.phone">
            <div class="faw-list__phone-icon">
<svg class="icon faq-list__contact-phone-icon icon--phone" id="icon-6e4d" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-phone"></use>
</svg>
            </div>
            <div class="faw-list__phone-content">
              <p class="faq-list__phone-number">{{ currentPageData.contact.phone.number }}</p>
              <p class="faq-list__phone-text" v-for="paragraph in currentPageData.contact.phone.text">{{ paragraph }}</p>
            </div>
          </div>
          <div class="faq-list__contact-other">
            <div class="faq-list__contact faq-list__contact--chat" v-if="currentPageData.contact.chat"><a :href="currentPageData.contact.chat.url">
<svg class="icon faq-list__contact-chat-icon icon--chat" id="icon-d634" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-chat"></use>
</svg>
                <p class="faq-list__chat-text">{{ currentPageData.contact.chat.title }}</p></a></div>
            <div class="faq-list__contact faq-list__contact--form" v-if="currentPageData.contact.form"><a :href="currentPageData.contact.form.url">
<svg class="icon faq-list__contact-form-icon icon--mail" id="icon-e2f9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-mail"></use>
</svg>
                <p class="faq-list__form-text">{{ currentPageData.contact.form.title }}</p></a></div>
          </div>
          <div class="faq-list__contact-office" v-if="currentPageData.officeSearch"><a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--search" id="icon-883f" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-search"></use>
</svg>Geschäftstelle finden</a></div>
        </div>
      </div>
    </template>
    </div>
</div>
if script
  script(src=`${relativeRoot}javascripts/tools.js`, async)

#faq-list.faq-list(data-source='/data/faq-list.json')
  .faq-list__headline
    != include('@headline--display-2', headline)

  .faq-list__search.search-field__form
    .faq-list__search-inner.form-micro
      .typeahead
        input.input.input--text(placeholder='Stichwort', v-model='query', @keyup='showSuggestions', @keydown.esc='suggestions = []')

        span.faq-list__search-button
          != include('@icon', {icon: 'search', attr: {class: 'faq-list__search-button-icon'}})

        .typeahead__container(v-if='getSuggestions.length')
          ul.typeahead__list
            li.typeahead__list-item(tabindex='0', v-for='page in suggestions', @click='navigateToPage(page.id); suggestions = [];') {{ page.title }}

  .faq-list__page
    template(v-if='currentPage === "home"')
      .faq-list__home
        p.faq-list__text Top-Themen

        .faq-list__home-grid
          .faq-list__home-grid-item(v-for='topic in topics')
            button.button.button--blue.faq-list__home-button(@click='navigateToPage(topic.id)') {{ topic.title }}

    template(v-else)
      .faq-list__page(v-if='currentPageData')
        .faq-list__container(v-if='currentPageData.links')
          p.faq-list__text Weiterführende Infos

          ul.faq-list__links
            li.faq-list__links-item(v-for='link in currentPageData.links')
              a.faq-list__link(:href='link.url', :title='link.title')
                | {{ link.title }}

                != include('@icon', {icon: 'internal-link', attr: {class: 'faq-list__link-icon'}})

        .faq-list__container(v-if='currentPageData.documents')
          p.faq-list__text Nützliche Dokumente

          ul.faq-list__documents
            li.faq-list__documents-item(v-for='document in currentPageData.documents')
              a.faq-list__document(:href='document.url', :title='document.title')
                | {{ document.title }}

                != include('@icon', {icon: 'pdf', attr: {class: 'faq-list__document-icon'}})

        .faq-list__container(v-if='currentPageData.contact')
          p.faq-list__text So erreichen Sie uns am besten

          .faq-list__contact.faq-list__contact--phone(v-if='currentPageData.contact.phone')
            .faw-list__phone-icon
              != include('@icon', {icon: 'phone', attr: {class: 'faq-list__contact-phone-icon'}})

            .faw-list__phone-content
              p.faq-list__phone-number {{ currentPageData.contact.phone.number }}
              p.faq-list__phone-text(v-for='paragraph in currentPageData.contact.phone.text') {{ paragraph }}

          .faq-list__contact-other
            .faq-list__contact.faq-list__contact--chat(v-if='currentPageData.contact.chat')
              a(:href='currentPageData.contact.chat.url')
                != include('@icon', {icon: 'chat', attr: {class: 'faq-list__contact-chat-icon'}})
                p.faq-list__chat-text {{ currentPageData.contact.chat.title }}

            .faq-list__contact.faq-list__contact--form(v-if='currentPageData.contact.form')
              a(:href='currentPageData.contact.form.url')
                != include('@icon', {icon: 'mail', attr: {class: 'faq-list__contact-form-icon'}})
                p.faq-list__form-text {{ currentPageData.contact.form.title }}

          .faq-list__contact-office(v-if='currentPageData.officeSearch')
            a.icon-block(href='#')
              != include('@icon', {icon: 'search', attr: {class: 'icon-block__icon'}})

              | Geschäftstelle finden
{
  "script": true,
  "headline": {
    "text": "Zu welchem Thema können wir Ihnen behilflich sein?"
  }
}
  • Content:
    .faq-list {
      margin: 0 auto;
      max-width: 54rem;
    }
    
    .faq-list__search {
      margin-bottom: $spacer * 2;
      padding: $spacer 0;
    }
    
    .faq-list__search-inner {
      position: relative;
    }
    
    .faq-list__search-button {
      margin: 0;
      position: absolute;
      right: 1.5rem;
      top: calc(50% + 2px);
      transform: translateY(-50%);
    }
    
    .faq-list__search-button-icon {
      color: $color-blue;
      font-size: 2.2rem;
    }
    
    .faq-list__home-grid {
      margin-left: -$spacer / 2;
      margin-right: -$spacer / 2;
    }
    
    .faq-list__home-grid-item {
      display: inline-block;
      margin: $spacer / 2 $spacer / 2;
    }
    
    .faq-list__text {
      color: $color-blue;
      font-weight: bold;
    
      .faq-list__home & {
        margin-bottom: 0.5rem;
      }
    }
    
    .faq-list__home-button {
      padding: calc(2rem / 2 - 2px) calc(1.5rem - 2px);
    }
    
    .faq-list__container {
      margin-bottom: $spacer * 2;
    }
    
    .faq-list__links {
      @include list-reset();
    
      margin-top: -$spacer;
    }
    
    .faq-list__links-item {
      border-bottom: 1px solid $color-steelgrey-light;
      padding: $spacer 0;
    }
    
    .faq-list__link {
      align-items: center;
      color: $color-blue-light;
      display: flex;
      font-weight: bold;
      justify-content: space-between;
      text-decoration: none;
    }
    
    .faq-list__link-icon {
      color: $color-red;
    }
    
    .faq-list__documents {
      @include list-reset();
    }
    
    .faq-list__document {
      align-items: center;
      background-color: $color-blue;
      border-radius: 0.4rem;
      color: #fff;
      display: flex;
      font-weight: bold;
      justify-content: space-between;
      margin-bottom: $spacer;
      padding: $spacer;
      transition: $default-transition-duration background-color;
    
      &:focus,
      &:hover {
        background-color: rgba($color-blue, 0.85);
      }
    }
    
    .faq-list__document-icon {
      font-size: 3rem;
    }
    
    .faq-list__contact {
      background-color: $color-sand;
      border-radius: 0.4rem;
      padding: $spacer;
    }
    
    .faq-list__contact--phone {
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-bottom: $spacer;
    }
    
    .faw-list__phone-icon {
      flex: 1;
      text-align: center;
    }
    
    .faq-list__contact-phone-icon {
      color: $color-red;
      font-size: 3rem;
    }
    
    .faw-list__phone-content {
      padding-left: $spacer;
      width: 80%;
    }
    
    .faq-list__phone-number {
      color: $color-blue-light;
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }
    
    .faq-list__phone-text {
      font-size: 1.5rem;
      margin-bottom: 0;
    }
    
    .faq-list__contact-other {
      display: grid;
      grid-gap: $spacer;
      grid-template-columns: 1fr 1fr;
    }
    
    .faq-list__contact--chat,
    .faq-list__contact--form {
      color: $color-red;
      font-size: 1.5rem;
      font-weight: bold;
      text-align: center;
    }
    
    .faq-list__contact-chat-icon,
    .faq-list__contact-form-icon {
      font-size: 4rem;
    }
    
    .faq-list__chat-text,
    .faq-list__form-text {
      color: $color-blue-light;
      margin-bottom: 0;
    }
    
    .faq-list__contact-office {
      font-size: 1.5rem;
      margin-top: $spacer;
    }
    
  • URL: /components/raw/faq-list/faq-list.scss
  • Filesystem Path: src/components/organisms/faq-list/faq-list.scss
  • Size: 2.8 KB
  • Content:

    Previews are currently not available for this file type.

  • URL: /components/raw/faq-list/faq-list.vue
  • Filesystem Path: src/components/organisms/faq-list/faq-list.vue
  • Size: 3.1 KB

There are no notes for this item.