thestudentlife/Manhattan-Project

{% extends 'base.html' %}
{% load staticfiles %}

{% block title_block %}
    <link rel='stylesheet' type='text/css' href='{% static 'jquery.bxslider.css' %}'/>
    <title>The Student Life</title>
{% endblock %}

{% block body_block %}
    {% if flavour == "mobile" %}
        <div class="tsl-container">
            <section class="article-previews">
                {% for front in features %}
                    {% include 'front_article_partial.html' with front=front.article %}
                {% endfor %}
                {% for front in fronts %}
                    {% include 'front_article_partial.html' %}
                {% endfor %}
            </section>
            {% include 'side_menu.html' %}
        </div>
    {% else %}
        <div class="loader"></div>
        <ul class="bxslider">
            {% for feature in features %}
                <li>
                    <img src="{{ feature.article.album.photo_set.all.0 }}"
                         title="{{ feature.article.title }}" class="tsl-slider-image"
                         onclick="javascript:location.href='{% url 'article' feature.article.section.slug feature.article.id %}';"
                         link="{% url 'article' feature.article.section.slug feature.article.id %}"/>

                    <div class="caption">
                        {{ feature.article.content_with_no_images | truncatechars:150 | safe }}</em></div>
                </li>
            {% endfor %}
        </ul>
        <div id="bx-pager" class="tsl-pager">
            {% for feature in features %}
                <a data-slide-index="{{ forloop.counter0 }}" href=""><i class="fa fa-circle-o"></i></a>
            {% endfor %}
        </div>
        <div class="tsl-container">
            <div class="col-md-8">
                {% regroup fronts by section as fronts_by_section %}
                {% for section_of_front in fronts_by_section %}
                    <div class="tsl-section-header">{{ section_of_front.grouper }}</div>
                    <section id="content" class="front-article-previews">
                        {% for front in section_of_front.list %}
                            {% include 'front_article_partial.html' %}
                        {% endfor %}
                    </section>
                {% endfor %}
            </div>
            {% include 'side_menu.html' %}
        </div>
    {% endif %}
{% endblock %}

{% block script_block %}
    <script type="text/javascript" src="{% static 'jquery.bxslider.js' %}"></script>
    <script type="text/javascript" src="{% static 'masonry.pkgd.min.js' %}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(window).load(function () {
                $(".loader").fadeOut("slow");
            })
            $('.bxslider').bxSlider({
                adaptiveHeight: true,
                mode: 'fade',
                captions: true,
                auto: true,
                pagerCustom: '#bx-pager'
            });
        });
        $(window).load(function () {
            $('.front-article-previews').masonry({
                itemSelector: '.article-preview'
            });
        });
    </script>
    <script type="text/javascript" src="{% static 'disqus.js' %}"></script>

{% endblock %}