Mercurial > libervia-templates
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 %} |