uikit_node_accordion-8.x-2.0/templates/views-view-uikit-node-accordion.html.twig

{#
/**
 * @file
 * Default theme implementation to display a view of uikit slideshow rows.
 *
 * Available variables:
 * - attributes: HTML attributes for the container.
 * - rows: A list of rows for this list.
 *   - attributes: The row's HTML attributes.
 *   - content: The row's contents.
 * - title: The title of this group of rows. May be empty.
 * - list: @todo.
 *   - type: Starting tag will be either a ul or ol.
 *   - attributes: HTML attributes for the list element.
 *
 * @see template_preprocess_views_view_uikit_node_accordion()
 *
 * @ingroup themeable
 */
#}
{{ attach_library('classy/node') }}
{%
  set classes = [
    'uk-margin-top',
    'uk-margin-bottom',
    'node',
    'node--type-' ~ node.bundle|clean_class,
    node.isPromoted() ? 'node--promoted',
    node.isSticky() ? 'node--sticky',
    not node.isPublished() ? 'node--unpublished',
    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
    'clearfix',
  ]
%}
{{ attach_library('uikit_node_accordion/uikit.accordion') }}
<div class="uk-container uk-container-center">
  <ul class="uk-list uk-accordion" data-uk-accordion="{showfirst:false}">
    {% for row in rows %}
      <li>
        <article{{ attributes.addClass(classes) }}>

        {# Fields in the accordion title, e.g. always visible #}
        <div class="uk-grid uk-accordion-title uk-margin-top">
          <div class="uk-width-medium-1-4">
            {{ row.node_image }}
          </div>
          <div class="uk-width-medium-3-4">
            <div class="uk-width-1-1">
              {{ title_prefix }}
              <h2>{{ row.node_title }}</h2>
              {{ title_suffix }}
            </div>
            {# Node information, enriched with fontawesome icons. #}
              <div class="node__meta uk-width-1-1 uk-margin-bottom">
                <span class="uk-icon-clock-o"></span>
                <span> {{ row.node_created }} </span>
              </div>
            <div{{ content_attributes.addClass('node__content', 'uk-width-1-1', 'uk-margin-bottom') }}>
              {{ row.node_summary }}
            </div>
          </div>
        </div>

        {# Fields in the accordion content, e.g. visible only when expanded #}
        <div class="uk-accordion-content">
          <div{{ content_attributes.addClass('node__content', 'uk-width-1-1', 'uk-margin-bottom') }}>
            {{ row.node_body }}
          </div>
        <div class="uk-position-bottom-right uk-margin-bottom">
          {{ row.node_link }}
        </div>
      </article>
    </li>
  {% endfor %}
</ul>
</div>