eleven-8.x-1.0-beta5/eleven/templates/layout-landing/modules/system-modules-details.html.twig

{{ attach_library('eleven/modules') }}
{{ attach_library('eleven/card') }}

<table class="responsive-enabled" data-striping="1">
  <thead>
    <tr>
      <th class="checkbox visually-hidden">{{ 'Installed'|t }}</th>
      <th class="name visually-hidden">{{ 'Name'|t }}</th>
      <th class="description visually-hidden priority-low">{{ 'Description'|t }}</th>
    </tr>
  </thead>
  <tbody class="cards cards--layout-5">
  {% for module in modules %}

    {# set status for the module  #}
    {% if module.checkbox['#disabled'] and module.checkbox['#value']  %}
      {# module is installed  #}
      {% set card_status %}installed{% endset %}
    {% elseif module.checkbox['#disabled'] and not module.checkbox['#value']  %}
      {# module cant be installed  #}
      {% set card_status %}error{% endset %}
    {% elseif not module.checkbox['#disabled']  %}
        {# module ready to be installed   #}
      {% set card_status %}notinstalled{% endset %}
    {% endif %}

    {% set classes = [
      'card',
      'card--module',
      'card--status-'  ~ card_status,
      'card--module-group-' ~ module.name['#parents'].1|clean_class,
      'card--module-name--' ~ module.name['#markup']|clean_class,
      ]
    %}

    <tr{{ module.attributes.addClass(classes) }}>
      <td>
        <div class="card__status card__status--{{ card_status }}"></div>

        <div for="{{ module.enable_id }}" class="card__icon card__icon--{{ module.name['#markup']|clean_class }}"></div>

        <div for="{{ module.enable_id }}" class="card__title">{{ module.name }}</div>

        <div class="card__instalmodule">

          {{ module.checkbox }}

          <label for="{{ module.enable_id }}" class="card__instalmodule-title">
            <span>{{ 'Install Module'|t }}</span>
          </label>
        </div>


        {# <pre>card__icon--{{ module.name['#markup']|clean_class }}</pre> #}

        {# links #}
        {% if module.links %}
          <nav class="card__links">
          <ul>
            {% for link_type in ['help', 'permissions', 'configure'] %}
              {% if module.links[link_type] is defined %}
                <li>
                  {# {{ module.links[link_type]['#options'].attributes.setAttribute("foo","bar")  }}  #}
                  {{ module.links[link_type] }}
                </li>
              {% endif %}
            {% endfor %}
            {# lets add a link to the uninstall page so users dont get to confused #}
            {% if module.checkbox['#checked'] %}
              {#  <li><a href="modules/uninstall" class="module-link module-link-uninstall">{{ "uninstall"|t }}</a></li> #}
            {% endif %}
          </ul>
          </nav>
        {% endif %}

        <p class="card__text card__text--small">
          {{ module.description }}
        </p>

        {#
        Errors !! --------------------------------------------------------------
        Display what the modules are missing or disabled
        #}
        {% if card_status == 'error' %}
          <ul class="card__errors">
            {% for item in module['#requires'] %}

              {% if item.getUntranslatedString()|striptags ends with '(missing)'  %}
                <li class="missing">
                  {{ item.getArguments()['@module'] }} {{ 'is missing'|t}}
                  <a href="https://www.drupal.org/project/{{ item.getArguments()['@module'] }}">[{{'download'|t}}]</a>
                </li>
              {% endif %}

              {% if item.getUntranslatedString()|striptags ends with '(disabled)' %}
                <li class="disbled">
                {{ item.getArguments()['@module'] }}  {{'is disabled'|t}}
                </li>
              {% endif %}

            {% endfor %}

          </ul>
        {% endif %}

        <details class="details-summary-link">
          <summary>{{ 'Show info'|t }}</summary>

          <div class="card__text card__text--small">

            <ul class="card__notes">
              <li>{{ module.machine_name }}</li>
              {% if module.version %}
                <li>{{ module.version }}</li>
              {% endif %}
            </ul>

            {% if module.required %}
            <section class="card__list card__list--modules-required">
              <h4>{{'Required Modules'|t}}</h4>
              <ul>
              {% for item in module['#required'] %}
                <li>{{ item }}</li>
              {% endfor %}
              </ul>
            </section>
             {% endif %}

            {% if module.required_by %}
            <section class="card__list card__list--modules-required-by">
              <h4>{{ 'Required by'|t }} </h4>
              <ul>
              {% for item in module['#required_by'] %}
                <li>{{ item }}</li>
              {% endfor %}
              </ul>
            </section>
            {% endif %}

            {% if module.requires %}
            <section class="card__list card__list--modules-requires">
              <h4>{{'Requires'|t}}</h4>
              <ul>
              {% for item in module['#requires'] %}
                <li>{{ item }}</li>
              {% endfor %}
            </ul>
            <section>
            {% endif %}

          </div>

        </details>


          {# yes this is dirty but else filter wont work #}
          <details class="js-form-wrapper form-wrapper visually-hidden" id="{{ module.enable_id }}-description">
            <summary aria-controls="{{ module.enable_id }}-description" role="button" aria-expanded="false"><span class="text module-description">{{ module.description }}</span></summary>
            <div class="details-wrapper">
              <div class="details-description">
                <div class="requirements">
                  <div class="admin-requirements">{{ 'Machine name: <span dir="ltr" class="table-filter-text-source">@machine-name</span>'|t({'@machine-name': module.machine_name }) }}</div>
                </div>
              </div>
            </div>
          </details>


        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>