rycus86/demo-site

<div class="specs-fab-menu">
    <button id="specs-menu" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-shadow--4dp fixed-fab">
        <i class="material-icons">list</i>
    </button>
    <div class="specs-menu-popup">
        <div for="specs-menu" class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-shadow--4dp popup-wrapper">
            <table class="mdl-data-table mdl-js-data-table">
                <thead>
                    <tr>
                        <th colspan="2"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        {% for card in specs_cards|sort(attribute='title') %}
                        <td class="mdl-data-table__cell--non-numeric">
                            <a href="#specs-card-{{ card.key }}">{{ card.title }}</a>
                        </td>
                        {% if loop.index % 2 == 0 and not loop.last %}
                    </tr>
                    <tr> {% endif %}
                        {% endfor %}
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

{% for card in specs_cards %}
<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--6-col mdl-cell--top"
     id="specs-card-{{ card.key }}">

    <div class="mdl-card__title mdl-card--border">
        <h2 class="mdl-card__title-text">{{ card.title }}</h2>
    </div>

    {% if card.link is defined %}
    <div class="card-fab-holder">
        <a href="{{ card.link }}"
           class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab
                  mdl-shadow--4dp mdl-js-ripple-effect mdl-button--colored">
            <i class="material-icons">link</i>
        </a>
    </div>
    {% endif %}

    {% if card.image is defined %}
        {% if card.image.display is defined %}
        <div class="mdl-card__media mdl-card--border">
            <img data-src="{{ assets['images/' + card.image.path] }}">
        </div>
        {% else %}
        <div class="mdl-card__media mdl-card--border"
             data-background-image="{{ assets['images/' + card.image] }}"
             data-background-position="center"
             data-background-size="cover"></div>
        {% endif %}
    {% endif %}

    <div class="mdl-card__supporting-text markdown">
        {{ markdown(read('specs/' + card.body))|safe }}
    </div>

    {% if not loop.last %}
    <div class="mdl-card__actions mdl-card--border card-actions-dark">
        <div class="mdl-layout-spacer"></div>
        <a href="#specs-card-{{ specs_cards[loop.index].key }}"
           class="mdl-button mdl-js-button mdl-js-ripple-effect">
            Go to the next section
            <i class="material-icons">launch</i>
        </a>
    </div>
    {% endif %}

</div>
{% endfor %}

{% if specs_cards|length % 2 == 1 %}
<div class="mdl-cell mdl-cell--6-col empty-cell"></div>
{% endif %}