comparison sat_templates/templates/default/blog/item.html @ 166:178f55b825b7

small refactoring/redesign, better BEM integration: - blog has been redesigned, and almost all blog CSS has been made generic and moved to main styles.css file. - better noscript handling, dynamic elements are created using "magic" classes (dom_update.js) - using better icons for older/newer messages - better state handling, classes now use "state_XXX" - more classes now use BEM convention - menu labels have been moved to a separate template (components/menu_labels.html), so it can be overriden easily by other sites - better styles.css organisation
author Goffi <goffi@goffi.org>
date Wed, 03 Oct 2018 21:00:24 +0200
parents e9f0a4215e46
children 3195484abd82
comparison
equal deleted inserted replaced
165:9e8d9d754337 166:178f55b825b7
9 9
10 {% block item %} 10 {% block item %}
11 11
12 {% if item.language and locale and locale.language != item.language %} 12 {% if item.language and locale and locale.language != item.language %}
13 {# we may display items in different language in a specific way #} 13 {# we may display items in different language in a specific way #}
14 {% set other_lang = " other_lang" %} 14 {% set other_lang = " other_lang" if expanded else " other_lang state_init" %}
15 {% endif %} 15 {% endif %}
16 16
17 {% if expanded %} 17 <article id="{{item.id}}" class="box {{"box--comment" if comment else "box--large"}} {{"" if (expanded or comment) else "box--expand"}}{{other_lang}}" >
18 {# FIXME: the style attribute is not nice, but due to the use of clicked_mh_fix. A cleaner way would be welcomed #}
19 <article id="{{item.id}}" class="init box{{other_lang}} clicked" style="max-height: none">
20 {% else %}
21 <article id="{{item.id}}" class="init box{{other_lang}}" >
22 {% endif %}
23 18
24 {# following message is displayed if item lang is different from page locale #} 19 {# following message is displayed if item lang is different from page locale #}
25 {% if other_lang is defined %} 20 {% if other_lang is defined %}
26 <div class="info"><p>{% trans language=locale.language_name %}This message is not in {{language}}, click to display anyway{% endtrans %}</p></div> 21 <div class="info show_if_parent_init"><p>{% trans language=locale.language_name %}This message is not in {{language}}, click to display anyway{% endtrans %}</p></div>
27 {% endif %} 22 {% endif %}
28
29 {# we put a reduce button at the top #}
30 <div class="expand_box box_top" onclick="clicked_mh_fix('{{item.id}}')">
31 <p>
32 <span class='hide'>{% trans %}Click to reduce…{% endtrans %}</span>
33 </p>
34 </div>
35 23
36 <header> 24 <header>
37 {% block header %} 25 {% block header %}
38 {# title and publication date link to a HTTP page if items_http_uri is set #} 26 {# title and publication date link to a HTTP page if items_http_uri is set #}
39 {% set item_http_uri = items_http_uri.get(item.id) if items_http_uri is defined else none %} 27 {% set item_http_uri = items_http_uri.get(item.id) if items_http_uri is defined else none %}
40 28
41 <div class="title"> 29 <div class="blog__title">
42 {% block blog_title scoped %} 30 {% block blog_title scoped %}
43 {% set title = item.title_xhtml or item.title or '' %} 31 {% set title = item.title_xhtml or item.title or '' %}
44 {% if item_http_uri %} 32 {% if item_http_uri %}
45 <a href="{{item_http_uri}}">{{title}}</a> 33 <a href="{{item_http_uri}}">{{title}}</a>
46 {% else %} 34 {% else %}
47 {{title}} 35 {{title}}
48 {% endif %} 36 {% endif %}
49 {% endblock %} 37 {% endblock %}
50 </div> 38 </div>
51 {% block metadata scoped %} 39 {% block metadata scoped %}
52 <div class="metadata"> 40 <div class="blog__metadata">
53 {% if identities is defined %} 41 {% if identities is defined %}
54 <span class="author">{{identities[item.author_jid].nick | default(item.author)}}</span> 42 {% if avatar is defined %}
43 {{ avatar.avatar(item.author_jid, "avatar--float-left") }}
44 {% endif %}
45 <span class="blog__author">{{identities[item.author_jid].nick | default(item.author)}}</span>
55 {% else %} 46 {% else %}
56 <span class="author">{{item.author}}</span> 47 <span class="blog__author">{{item.author}}</span>
57 {% endif %} 48 {% endif %}
58 {% set published = item.published|date_fmt(fmt=dates_format) %} 49 {% set published = item.published|date_fmt(fmt=dates_format) %}
59 {% if item_http_uri %} 50 {% if item_http_uri %}
60 <span class="blog_data"><a href="{{item_http_uri}}">{{published}}</a></span> 51 <span class="blog__date"><a href="{{item_http_uri}}">{{published}}</a></span>
61 {% else %} 52 {% else %}
62 {{- published -}} 53 {{- published -}}
63 {% endif %} 54 {% endif %}
64 </div> 55 </div>
65 {% if item.tags %} 56 {% if item.tags %}
77 {% endif %} 68 {% endif %}
78 {% endblock metadata %} 69 {% endblock metadata %}
79 {% endblock header %} 70 {% endblock header %}
80 </header> 71 </header>
81 72
82 <div class="content{{' text' if not item.content_xhtml}}"> 73 <div class="box__content{{' box__content--plaintext' if not item.content_xhtml}}">
83 {% block content %} 74 {% block content %}
84 {{- item.content_xhtml or item.content|urlize or '' -}} 75 {{- item.content_xhtml or item.content|urlize or '' -}}
85 {% endblock content %} 76 {% endblock content %}
86 </div> 77 </div>
87 78
88 {# and the bottom button to expand/reduce the article #}
89 <div class="expand_box box_bottom" onclick="clicked_mh_fix('{{item.id}}')">
90 <p>
91 <span class='show'>{% trans %}Click to expand…{% endtrans %}</span>
92 <span class='hide'>{% trans %}Click to reduce…{% endtrans %}</span>
93 </p>
94 </div>
95
96 </article> 79 </article>
97 80
98 {% endblock item %} 81 {% endblock item %}