hkk Frontend 2017

FAQ Liste 

<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>
    <form class="faq-list__search search-field__form" @submit="onSubmit">
        <div class="faq-list__search-inner form-micro">
            <div class="typeahead">
                <input class="input input--text" name="query" placeholder="Stichwort" v-model="query" @keyup="showSuggestions" @keydown.esc="suggestions = []" @focus="onFocusQuery" />
                <button class="faq-list__search-button" type="submit">
<svg class="icon faq-list__search-button-icon icon--search" id="icon-26ce" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-search"></use>
</svg>
        </button>
                <div class="typeahead__container" v-if="getSuggestions.length">
                    <ul class="typeahead__list">
                        <li class="typeahead__list-item" ref="typeaheaditems" tabindex="0" v-for="page in suggestions" @keydown.enter="navigateToPage(page.id); suggestions = [];" @click="navigateToPage(page.id); suggestions = [];">{{ page.title }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </form>
    <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.stop="navigateToPage(topic.id)">{{ topic.title }}</button>
          </div>
        </div>
      </div>
    </template>
        <template v-else-if="currentPage === &quot;notfound&quot;">
      <div class="faq-list__notfound">
        <p class="faq-list__hint">Keine Ergebnisse zu der Suchanfrage <span class="faq-list__text">{{ getTerm }}</span></p><a class="button button--blue" id="button-1d43" :href="`/suchergebnisse?tx_solr%5Bq%5D=${getTerm}`">Jetzt ganze Seite durchsuchen
          <svg class="icon button__icon button__icon--after icon--search" id="icon-7831" viewBox="0 0 200 200" role="presentation">
            <use xlink:href="#icon-search"></use>
          </svg></a>
      </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-3924" 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-9b06" 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">Mehr Unterstützung benötigt?</p>
          <div class="faq-list__contact faq-list__contact--app" v-if="currentPageData.contact.app" tabindex="0" @click="window.location.href = currentPageData.contact.app.url">
            <div class="faq-list__app-icon">
<svg class="icon faq-list__contact-app-icon icon--smartphone" id="icon-7621" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-smartphone"></use>
</svg>
            </div>
            <div class="faq-list__app-content">
              <p class="faq-list__app-title">{{ currentPageData.contact.app.title }}</p>
              <p class="faq-list__app-text">{{ currentPageData.contact.app.text }}</p>
            </div>
          </div>
          <div class="faq-list__contact-other">
            <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--contact" id="icon-b6f4" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-contact"></use>
</svg>
                <p class="faq-list__form-text">{{ currentPageData.contact.form.title }}</p></a></div>
            <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-alt" id="icon-0627" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-chat-alt"></use>
</svg>
                <p class="faq-list__chat-text">{{ currentPageData.contact.chat.title }}</p></a></div>
          </div>
          <div class="faq-list__contact faq-list__contact--phone" v-if="currentPageData.contact.phone">
            <div class="faq-list__phone-icon">
<svg class="icon faq-list__contact-phone-icon icon--phone-alt" id="icon-d174" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-phone-alt"></use>
</svg>
            </div>
            <div class="faq-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-office" v-if="currentPageData.officeSearch"><a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--search" id="icon-694a" 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)

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

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

        .typeahead__container(v-if='getSuggestions.length')
          ul.typeahead__list
            li.typeahead__list-item(ref='typeaheaditems', tabindex='0', v-for='page in suggestions', @keydown.enter='navigateToPage(page.id); 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.stop='navigateToPage(topic.id)') {{ topic.title }}

    template(v-else-if='currentPage === "notfound"')
      .faq-list__notfound
        p.faq-list__hint Keine Ergebnisse zu der Suchanfrage #[span.faq-list__text {{ getTerm }}]

        a#button-1d43.button.button--blue(:href='`/suchergebnisse?tx_solr%5Bq%5D=${getTerm}`')
          | Jetzt ganze Seite durchsuchen
          svg#icon-7831.icon.button__icon.button__icon--after.icon--search(viewBox='0 0 200 200', role='presentation')
            use(xlink:href='#icon-search')

    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 Mehr Unterstützung benötigt?

          .faq-list__contact.faq-list__contact--app(v-if='currentPageData.contact.app', tabindex='0', @click='window.location.href = currentPageData.contact.app.url')
            .faq-list__app-icon
              != include('@icon', {icon: 'smartphone', attr: {class: 'faq-list__contact-app-icon'}})

            .faq-list__app-content
              p.faq-list__app-title {{ currentPageData.contact.app.title }}
              p.faq-list__app-text {{ currentPageData.contact.app.text }}

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

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

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

            .faq-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-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 {
  cursor: pointer;
  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__hint {
  color: $color-steelgrey-xdark;
}

.faq-list__notfound {
  text-align: center;
}

.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--app {
  background-color: $color-steelgrey-light;
  cursor: pointer;

  &:focus .faq-list__app-title,
  &:hover .faq-list__app-title {
    text-decoration: underline;
  }
}

.faq-list__contact--app,
.faq-list__contact--phone {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: $spacer;
}

.faq-list__app-icon,
.faq-list__phone-icon {
  flex: 1;
  text-align: center;
}

.faq-list__contact-app-icon {
  color: $color-blue;
  font-size: 12rem;
}

.faq-list__contact-phone-icon {
  color: $color-blue;
  font-size: 8rem;
}

.faq-list__app-content,
.faq-list__phone-content {
  padding-left: $spacer;
  width: 80%;
}

.faq-list__app-title,
.faq-list__phone-number {
  color: $color-red;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.faq-list__app-text,
.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;
  margin-bottom: $spacer;
}

.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 {
  color: $color-blue;
  font-size: 5rem;
  margin-bottom: 0.5rem;
}

.faq-list__chat-text,
.faq-list__form-text {
  color: $color-red;
  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: 3.4 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.7 KB

There are no notes for this item.