vikings-text

vikings-text.html

<div class="points-wrap pt-toggle-challenge-{{ challenge.id }}">
    <div class="box panel content external">
        <div class="row">
            <div class="title">
                <div class="column small-9 large-9">
                    <h3 class="left">{% widget "title_and_points" "title" %}</h3>
                </div>
                <div class="column small-3 large-3">
                    <div class="row">
                        <div class="columns large-6 small-4 text-right">
                             <img src="{{ static_url }}images/[email protected]" alt="completed" class="success-mark show-on-success">
                         </div>
                         <div class="columns large-6 small-8 text-right">
                            <h3 class="right points-total"><span class="hide-on-success">+</span>{{ challenge.params.title.points }}</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="columns large-2 no-pad small-4 clear" data-reveal-id="challenge-modal-{{ challenge.id }}">
                {% widget "thumbnail" "image" %}
            </div>
            <div class="columns large-10 small-8">
                <p class="share-text">{% widget "text" "description" %}</p>
            </div>
            <div class="columns large-2 challenge-icon text-right">
                <img src="{{ static_url }}images/icons/[email protected]" alt="">
            </div>
        </div>
    </div>
</div>
<div id="challenge-modal-{{ challenge.id }}" class="reveal-modal large">
    <img src="{{ challenge.params.image.full_size }}">
    <a class="close-reveal-modal"><img src="{{ static_url }}images/[email protected]"></a>
</div>

vikings-text.js

var challengeModalContainer = PT.dom.$("challenge-modal-container"),
    modal = PT.dom.$("challenge-modal-{{ challenge.id }}");
challengeModalContainer.appendChild(modal);