comparison 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
comparison
equal deleted inserted replaced
43:f8798d691acf 44:580670430fa2
3 {% if item.language and locale and locale.language != item.language %} 3 {% if item.language and locale and locale.language != item.language %}
4 {# we may display items in different language in a specific way #} 4 {# we may display items in different language in a specific way #}
5 {% set other_lang = " other_lang" %} 5 {% set other_lang = " other_lang" %}
6 {% endif %} 6 {% endif %}
7 7
8 <article id="{{ item.id }}" class="init box{{other_lang}}" onclick="clicked_mh_fix(this)"> 8 <article id="{{item.id}}" class="init box{{other_lang}}">
9
10 {# following message is displayed if item lang is different from page locale #}
9 {% if other_lang is defined %} 11 {% if other_lang is defined %}
10 <div class="info"><p>{% trans language=locale.language_name %}This message is not in {{language}}, click to display anyway{% endtrans %}</p></div> 12 <div class="info"><p>{% trans language=locale.language_name %}This message is not in {{language}}, click to display anyway{% endtrans %}</p></div>
11 {% endif %} 13 {% endif %}
14
15 {# we put a reduce button at the top #}
16 <div class="expand_box box_top" onclick="clicked_mh_fix('{{item.id}}')">
17 <p>
18 <span class='hide'>{% trans %}Click to reduce…{% endtrans %}</span>
19 </p>
20 </div>
12 21
13 <header> 22 <header>
14 {% block header %} 23 {% block header %}
15 <div class="title">{% block blog_title %}{{ item.title_xhtml or item.title or '' }}{% endblock %}</div> 24 <div class="title">{% block blog_title %}{{ item.title_xhtml or item.title or '' }}{% endblock %}</div>
16 {% block metadata %} 25 {% block metadata %}
27 {% block content %} 36 {% block content %}
28 {{ item.content_xhtml or item.content or ''}} 37 {{ item.content_xhtml or item.content or ''}}
29 {% endblock content %} 38 {% endblock content %}
30 </div> 39 </div>
31 40
32 <div class="expand_box"> 41 {# and the bottom button to expand/reduce the article #}
42 <div class="expand_box box_bottom" onclick="clicked_mh_fix('{{item.id}}')">
33 <p> 43 <p>
34 {% trans %}Click to to expand…{% endtrans %} 44 <span class='show'>{% trans %}Click to expand…{% endtrans %}</span>
45 <span class='hide'>{% trans %}Click to reduce…{% endtrans %}</span>
35 </p> 46 </p>
36 </div> 47 </div>
37 48
38 </article> 49 </article>
39 50