51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

Poll: Default

100% 
<div class="c-poll js-poll">
    <h2 class="c-poll__title">Frage des Tages</h2>
    <p class="c-poll__content">
        <h3 class="c-poll__question">
            Löst ein neuer Autohof bei Bockenem die Probleme?
        </h3>
        <form>
            <ul class="c-poll__list">
                <li>
                    <input type="radio" class="o-form__input o-form__input--radio o-form__input--hidden" name="radioAnswers" value="no" id="radio-1">
                    <label class="o-form__label o-form__label--radio" for="radio-1">Nein, ich denke, das ist zu wenig.</label>
                </li>
                <li>
                    <input type="radio" class="o-form__input o-form__input--radio o-form__input--hidden" name="radioAnswers" value="yes" id="radio-2">
                    <label class="o-form__label o-form__label--radio" for="radio-2">Ja, sollte schon einen großen Unterschied machen.</label>
                </li>
            </ul>
            <div class="c-poll__descriptionText">
                Die Parkplätze an den sind fasdoftmals dicht. Die Brummies weichen auch in Wohn- und aus, um ihre Ruhezeiten einzuhalten Die Parkplätze an den Autobah...
                <a href="#">mehr Infos ></a>
            </div>
            <input type="submit" value="SENDEN" id="simplePollVote" disabled="true" class="c-button c-button--full c-button--disabled c-poll__submitButton">
        </form>
</div>
 
<div class="c-poll js-poll">
    <h2 class="c-poll__title">Frage des Tages</h2>
<p class="c-poll__content">
<h3 class="c-poll__question">
    {{ question }}
</h3>
<form>
    <ul class="c-poll__list">
        {% for item in items %}
            <li>
                <input type="radio" class="o-form__input o-form__input--radio o-form__input--hidden"
                       name="{{ name }}" value="{{ item.value }}"
                       id="{{ item.id }}"{% if (loop.first and required) %} required{% endif %}>
                <label class="o-form__label o-form__label--radio"
                       for="{{ item.id }}">{{ item.label }}</label>
            </li>
        {% endfor %}
    </ul>
    {%  if descriptionText != "" %}
    <div class="c-poll__descriptionText">
        {{ descriptionText|slice(0,150) }}...
        <a href="{{ moreInfoLink }}">{{ moreInfoLinkText }}</a>
    </div>
    {% endif %}
    <input type="submit" value="{{ submitText }}" id="simplePollVote" disabled="true"
           class="c-button c-button--full c-button--disabled c-poll__submitButton">
</form>
</div>
 
{
  "question": "Löst ein neuer Autohof bei Bockenem die Probleme?",
  "descriptionText": "Die Parkplätze an den sind fasdoftmals dicht. Die Brummies weichen auch in Wohn- und aus, um ihre Ruhezeiten einzuhalten Die Parkplätze an den Autobahnen sind oftmals dicht. Die Brummies weichen auch in Wohn- und Gewerbegebiete aus, um ihre Ruhezeiten einzuhalten",
  "moreInfoLinkText": "mehr Infos >",
  "moreInfoLink": "#",
  "submitText": "SENDEN",
  "additionalClasses": "",
  "items": [
    {
      "label": "Nein, ich denke, das ist zu wenig.",
      "id": "radio-1",
      "value": "no"
    },
    {
      "label": "Ja, sollte schon einen großen Unterschied machen.",
      "id": "radio-2",
      "value": "yes"
    }
  ],
  "name": "radioAnswers"
}
  • Content: 
    class Poll {
  constructor(element) {
    this.element = element;
    this.submitButton = document.getElementById('simplePollVote');
    const form = this.element.getElementsByTagName('form')[0];
    const radios = form.getElementsByClassName('o-form__input--radio');
    for (let i = 0; i < radios.length; i += 1) {
      radios[i].addEventListener('change', () => {
        this.removeClass('c-button--disabled');
        this.enableButton(this.submitButton);
      });
    }
  }

  removeClass(className) {
    this.submitButton.classList.remove(className);
  }

  enableButton(button) {
    this.button = button;
    this.button.disabled = false;
  }
}

export default Poll;
  • URL: /components/raw/poll/poll.js
  • Filesystem Path: src/patterns/20-components/poll/poll.js
  • Size: 679 Bytes
  • Content: 
    .c-poll {
    background-color: $color-grey-lightest;
    padding: 1rem;

    &__resultList {
        margin-bottom: 1rem;
        margin-top: .5rem;
    }

    &__answer {
        font-weight: $font-weight-bold;
        line-height: .3;
    }

    &__progressBar {
        border: 1px solid $color-black;
        height: 1rem;
        margin-bottom: .2rem;
        margin-top: .3rem;
        width: 100%;
    }

    &__bar {
        background-color: $color-yellow;
        height: 100%;
        width: 0;
    }

    &__metadata {
        font-size: $font-size-m;
    }

    &__footText {
        font-size: $font-size-s;
    }

    &__title {
        font-size: $font-size-xl;
        font-weight: $font-weight-bold;
        margin-left: -1rem;
        padding-left: 1rem;

        &::after {
            border-bottom: 2px solid $color-yellow;
            content: '';
            display: block;
            margin-bottom: rem-calc(10);
            margin-left: -1rem;
            margin-top: rem-calc(24);
            width: rem-calc(168);
        }
    }

    &__question {
        color: $color-grey;
        font-size: $font-size-xl;
        font-weight: 600;
        line-height: 1.4;
        margin-bottom: 1.5rem;
    }

    &__list {
        color: $color-grey;
        font-weight: 500;
        list-style-type: none;
        margin-left: -2rem;
    }

    &__descriptionText {
        font-size: $font-size-m;
    }

    &__submitButton {
        margin-top: 1rem;
    }
}
  • URL: /components/raw/poll/poll.scss
  • Filesystem Path: src/patterns/20-components/poll/poll.scss
  • Size: 1.5 KB

There are no notes for this item.