EU System

Comments with form

Documentation • Demo

Comments with form

{#
  This is an example and should not be used as it is.
#}

{# Internal properties #}

{% set _comments = comments %}

{# Print the result #}

<ul class="ecl-listing">
  {% for comment in _comments %}
    <li class="ecl-list-item ecl-u-pv-s">
      {% include '@ecl/eu-component-comment' with comment %}
    </li>
  {% endfor %}

  {% embed '@ecl/eu-component-form-form' %}
    {% block form %}
      {% embed '@ecl/eu-component-form-fieldset' %}
        {% block fieldset %}
          {% include '@ecl/eu-component-form-legend' with { 'extra_classes': 'ecl-form-legend--level-1', 'content': 'New Comment' } %}
          {% embed '@ecl/eu-component-form-form-group' %}
            {% block form_group %}
              {% include '@ecl/eu-component-form-label' with { 'for_attribute': 'field-ID-1', 'label': 'Title' } %}
              {% include '@ecl/eu-component-form-text-input' with {
                'id' : 'field-ID-1',
                'name': 'field-name-1',
                'type': 'text',
                'extra_attributes': [
                  { 'name': 'placeholder', 'value': 'Your title' }
                ]
              } %}
            {% endblock %}
          {% endembed %}
          {% embed '@ecl/eu-component-form-form-group' %}
            {% block form_group %}
              {% include '@ecl/eu-component-form-label' with { 'for_attribute': 'field-ID-2', 'label': 'Comment' } %}
              {% include '@ecl/eu-component-form-textarea' with {
                'id' : 'field-ID-2',
                'name': 'field-name-2',
                'type': 'textarea',
                'extra_attributes': [
                  { 'name': 'placeholder', 'value': 'Your comment' }
                ]
              } %}
            {% endblock %}
          {% endembed %}
          {% include '@ecl/eu-component-button' with {
            'modifier': 'primary',
            'label': 'Send',
            'extra_classes': 'ecl-u-mt-s',
            'extra_attributes': [
              { 'name': 'value', 'value': 'send'}
            ]
          } %}
        {% endblock %}
      {% endembed %}
    {% endblock %}
  {% endembed %}
</ul>
 
{
  "comments": [
    {
      "image": {
        "src": "https://unsplash.it/300/400?image=1005",
        "alt": "Martin's photo"
      },
      "author": "Martin (Not verified)",
      "date": "26 March 2015",
      "title": {
        "href": "../../example.html#",
        "label": "Nice article"
      },
      "body": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem eius enim eos error esse fugiat incidunt iste laudantium nemo, numquam quam quasi repudiandae sapiente soluta sunt tempore ullam voluptatem.",
      "operations": {
        "delete": {
          "href": "../../example.html#",
          "label": "Delete",
          "visible": true
        },
        "edit": {
          "href": "../../example.html#",
          "label": "Edit",
          "visible": true
        },
        "reply": {
          "href": "../../example.html#",
          "label": "Reply",
          "visible": true
        }
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/300/400?image=1011",
        "alt": "Clara's photo"
      },
      "author": "Clara (Not verified)",
      "date": "28 March 2015",
      "title": {
        "href": "../../example.html#",
        "label": "Interesting"
      },
      "body": "Excepteur ipsum ipsum officia ullamco nisi laboris do minim. Amet esse commodo ut eiusmod. Eu voluptate velit consectetur laborum ea. Et occaecat exercitation minim voluptate amet non. Ea veniam aute laborum exercitation labore dolore.",
      "operations": {
        "delete": {
          "href": "../../example.html#",
          "label": "Delete",
          "visible": true
        },
        "edit": {
          "href": "../../example.html#",
          "label": "Edit",
          "visible": true
        },
        "reply": {
          "href": "../../example.html#",
          "label": "Reply",
          "visible": true
        }
      }
    },
    {
      "author": "Anna (Not verified)",
      "date": "27 March 2015",
      "image": {
        "src": "https://picsum.photos/300/400?image=1006",
        "alt": "Clara's photo"
      },
      "title": {
        "href": "../../example.html#",
        "label": "I agree"
      },
      "body": "Ad eu proident commodo fugiat elit occaecat laboris cillum sit. Ex elit laborum amet excepteur occaecat do ea eu ullamco. Esse dolor commodo commodo incididunt ea quis cillum est deserunt. Tempor exercitation minim dolore ipsum sit cupidatat cupidatat occaecat laboris duis ipsum. Sint non quis eu commodo magna voluptate nisi ad laborum. Ea eu officia quis in enim duis proident voluptate do velit ut non ea ex.",
      "operations": {
        "delete": {
          "href": "../../example.html#",
          "label": "Delete",
          "visible": true
        },
        "edit": {
          "href": "../../example.html#",
          "label": "Edit",
          "visible": true
        },
        "reply": {
          "href": "../../example.html#",
          "label": "Reply",
          "visible": true
        }
      }
    }
  ]
}
 
<ul class="ecl-listing">
  <li class="ecl-list-item ecl-u-pv-s">

    <div class="ecl-row ecl-comment">
      <div class="ecl-comment__image-wrapper">
        <img class="ecl-image ecl-image--fluid ecl-comment__image" src="https://unsplash.it/300/400?image=1005" alt="Martin's photo">
      </div>
      <div class="ecl-comment__body">
        <div class="ecl-comment__meta">
          <span class="ecl-comment__author">Martin (Not verified)</span> |
          <span class="ecl-comment__date">26 March 2015</span>
        </div>

        <a class="ecl-link ecl-heading ecl-heading--h3 ecl-comment__title" href="../../example.html#">Nice article</a>
        <p class="ecl-paragraph ecl-comment__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem eius enim eos error esse fugiat incidunt iste laudantium nemo, numquam quam quasi repudiandae sapiente soluta sunt tempore ullam voluptatem.</p>
        <ul class="ecl-list ecl-list--inline ecl-comment__operations">
          <li>

            <a class="ecl-link ecl-comment__reply" href="../../example.html#">Reply</a>
          </li>
          <li>

            <a class="ecl-link ecl-comment__edit" href="../../example.html#">Edit</a>
          </li>
          <li>

            <a class="ecl-link ecl-comment__delete" href="../../example.html#">Delete</a>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li class="ecl-list-item ecl-u-pv-s">

    <div class="ecl-row ecl-comment">
      <div class="ecl-comment__image-wrapper">
        <img class="ecl-image ecl-image--fluid ecl-comment__image" src="https://picsum.photos/300/400?image=1011" alt="Clara's photo">
      </div>
      <div class="ecl-comment__body">
        <div class="ecl-comment__meta">
          <span class="ecl-comment__author">Clara (Not verified)</span> |
          <span class="ecl-comment__date">28 March 2015</span>
        </div>

        <a class="ecl-link ecl-heading ecl-heading--h3 ecl-comment__title" href="../../example.html#">Interesting</a>
        <p class="ecl-paragraph ecl-comment__text">Excepteur ipsum ipsum officia ullamco nisi laboris do minim. Amet esse commodo ut eiusmod. Eu voluptate velit consectetur laborum ea. Et occaecat exercitation minim voluptate amet non. Ea veniam aute laborum exercitation labore dolore.</p>
        <ul class="ecl-list ecl-list--inline ecl-comment__operations">
          <li>

            <a class="ecl-link ecl-comment__reply" href="../../example.html#">Reply</a>
          </li>
          <li>

            <a class="ecl-link ecl-comment__edit" href="../../example.html#">Edit</a>
          </li>
          <li>

            <a class="ecl-link ecl-comment__delete" href="../../example.html#">Delete</a>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li class="ecl-list-item ecl-u-pv-s">

    <div class="ecl-row ecl-comment">
      <div class="ecl-comment__image-wrapper">
        <img class="ecl-image ecl-image--fluid ecl-comment__image" src="https://picsum.photos/300/400?image=1006" alt="Clara's photo">
      </div>
      <div class="ecl-comment__body">
        <div class="ecl-comment__meta">
          <span class="ecl-comment__author">Anna (Not verified)</span> |
          <span class="ecl-comment__date">27 March 2015</span>
        </div>

        <a class="ecl-link ecl-heading ecl-heading--h3 ecl-comment__title" href="../../example.html#">I agree</a>
        <p class="ecl-paragraph ecl-comment__text">Ad eu proident commodo fugiat elit occaecat laboris cillum sit. Ex elit laborum amet excepteur occaecat do ea eu ullamco. Esse dolor commodo commodo incididunt ea quis cillum est deserunt. Tempor exercitation minim dolore ipsum sit cupidatat cupidatat occaecat laboris duis ipsum. Sint non quis eu commodo magna voluptate nisi ad laborum. Ea eu officia quis in enim duis proident voluptate do velit ut non ea ex.</p>
        <ul class="ecl-list ecl-list--inline ecl-comment__operations">
          <li>

            <a class="ecl-link ecl-comment__reply" href="../../example.html#">Reply</a>
          </li>
          <li>

            <a class="ecl-link ecl-comment__edit" href="../../example.html#">Edit</a>
          </li>
          <li>

            <a class="ecl-link ecl-comment__delete" href="../../example.html#">Delete</a>
          </li>
        </ul>
      </div>
    </div>
  </li>

  <form class="ecl-form">

    <fieldset class="ecl-fieldset">

      <legend class="ecl-form-legend ecl-form-legend--level-1">New Comment</legend>

      <div class="ecl-form-group">

        <label class="ecl-form-label" for="field-ID-1">Title</label>

        <input type="text" class="ecl-text-input" id="field-ID-1" name="field-name-1" placeholder="Your title" />
      </div>

      <div class="ecl-form-group">

        <label class="ecl-form-label" for="field-ID-2">Comment</label>

        <textarea name="field-name-2" id="field-ID-2" rows="4" class="ecl-textarea" role="textbox" aria-multiline="true" placeholder="Your comment">
</textarea>
      </div>

      <button type="submit" class="ecl-button ecl-button--primary ecl-u-mt-s" value="send">Send</button>
    </fieldset>
  </form>
</ul>
  • Handle: @ecl/eu-template-comments-with-form
  • Tags: template
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-template/eu-template-comments-with-form/eu-template-comments-with-form.twig