rycus86/demo-site

<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--4-col mdl-cell--top github" id="github-{{ data.name }}">

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

    <div class="mdl-card__supporting-text">
        <p>
            <span id="github-time-pushed-{{ data.name }}" class="mdl-chip mdl-chip--contact">
                <i class="mdl-chip__contact material-icons">history</i>
                <span class="mdl-chip__text momentjs-time" data-time="{{ data.pushed_at }}" data-prefix="pushed">
                    {{ data.pushed_at }}
                </span>
            </span>

            <span id="github-time-created-{{ data.name }}" class="mdl-chip mdl-chip--contact">
                <i class="mdl-chip__contact material-icons">event</i>
                <span class="mdl-chip__text momentjs-time" data-time="{{ data.created_at }}" data-prefix="created">
                    {{ data.created_at }}
                </span>
            </span>
        </p>
        <p>
            {{ data.description }}
        </p>

        <div class="mdl-tooltip mdl-tooltip--bottom" data-mdl-for="github-time-pushed-{{ data.name }}" data-datetime="{{ data.pushed_at }}">
            {{ data.pushed_at }}
        </div>
        <div class="mdl-tooltip mdl-tooltip--bottom" data-mdl-for="github-time-created-{{ data.name }}" data-datetime="{{ data.created_at }}">
            {{ data.created_at }}
        </div>
    </div>

    <div class="mdl-card__title mdl-card--border">README</div>
    <div class="mdl-card__supporting-text">
        <div class="readme markdown" id="github-readme-{{ data.name }}">
            <div class="loading-panel">
                <div class="mdl-spinner mdl-js-spinner is-active"></div>
                <div class="loading-text"><i>Loading readme...</i></div>
            </div>
        </div>
    </div>

    <div class="mdl-card__actions mdl-card--border card-actions-light">
        <a href="{{ data.html_url }}">
            <span class="mdl-chip mdl-chip--contact">
                <i class="mdl-chip__contact material-icons">public</i>

                <span class="mdl-chip__text">
                    {{ data.full_name }}
                </span>
            </span>
        </a>
    </div>

</div>

<script>
    cApp.DateTime.formatTimeFromNow('github-{{ data.name }}');
    cApp.DateTime.formatDateTime('github-{{ data.name }}');

    $('#github-{{ data.name }} .mdl-tooltip').each(function (idx, item) {
        componentHandler.upgradeElement(item);
    });
</script>