view default/blog/item.html @ 44:580670430fa2

blog/item: expand/reduce improvments: - only expand_box is now clickable, not the whole article anymore, avoiding unwanted click - when in .clicked state, message is "Click to reduce" instead of "expand" - in .clicked state, expand_box is only visible on :hover - in .clicked state, and expand_box is available at top and bottom
author Goffi <goffi@goffi.org>
date Thu, 13 Jul 2017 19:23:02 +0200
parents 0c6aa1c81252
children f19e9f5e43b0
line wrap: on
line source

{% block item %}

{% if item.language and locale and locale.language != item.language %}
    {# we may display items in different language in a specific way #}
    {% set other_lang = " other_lang" %}
{% endif %}

<article id="{{item.id}}" class="init box{{other_lang}}">

    {# following message is displayed if item lang is different from page locale #}
    {% if other_lang is defined %}
        <div class="info"><p>{% trans language=locale.language_name %}This message is not in {{language}}, click to display anyway{% endtrans %}</p></div>
    {% endif %}

    {# we put a reduce button at the top #}
    <div class="expand_box box_top" onclick="clicked_mh_fix('{{item.id}}')">
        <p>
            <span class='hide'>{% trans %}Click to reduce…{% endtrans %}</span>
        </p>
    </div>

    <header>
        {% block header %}
        <div class="title">{% block blog_title %}{{ item.title_xhtml or item.title or '' }}{% endblock %}</div>
            {% block metadata %}
            <div class="metadata">
            <span class="author">{{identities[item.author_jid].nick | default(item.author)}}</span>
            <span class="blog_data">{% trans days=item.published|date_days %}{{days}} days ago{% endtrans %}</span>
            </div>

            {% endblock metadata %}
        {% endblock header %}
    </header>

    <div class="content{{' text' if not item.content_xhtml}}">
        {% block content %}
        {{ item.content_xhtml or item.content or ''}}
        {% endblock content %}
    </div>

    {# and the bottom button to expand/reduce the article #}
    <div class="expand_box box_bottom" onclick="clicked_mh_fix('{{item.id}}')">
        <p>
            <span class='show'>{% trans %}Click to expand…{% endtrans %}</span>
            <span class='hide'>{% trans %}Click to reduce…{% endtrans %}</span>
        </p>
    </div>

</article>

{% endblock item %}