Mercurial > libervia-templates
comparison sat_templates/templates/default/blog/macros.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 |
comparison
equal
deleted
inserted
replaced
165:9e8d9d754337 | 166:178f55b825b7 |
---|---|
1 {% import 'input/textbox.html' as textbox with context %} | 1 {% import 'input/textbox.html' as textbox with context %} |
2 | 2 |
3 {% macro show_items(items, comments=False, expanded=false, dates_fmt=none) %} | 3 {% macro show_items(items, comment=False, expanded=false, dates_fmt=none) %} |
4 {# show items and comments items if present after each item, | 4 {# show items and comments items if present after each item, |
5 then post form if allow_commenting is set | 5 then post form if allow_commenting is set |
6 @param items(BlogItems): items to show | 6 @param items(BlogItems): items to show |
7 @param comments(bool): True items are comments | 7 @param comment(bool): True items are comments |
8 if False, a div with "main_article" class will be added | 8 if False, a div with "main_article" class will be added |
9 @param expanded(bool): initial state of items | 9 @param expanded(bool): initial state of items |
10 #} | 10 #} |
11 {% if dates_format is undefined %} | 11 {% if dates_format is undefined %} |
12 {% set dates_format = dates_fmt or 'short' %} | 12 {% set dates_format = dates_fmt or 'short' %} |
13 {% endif %} | 13 {% endif %} |
14 {% for item in items %} | 14 {% for item in items %} |
15 {% if not comments %}<div class="main_article">{% endif %} | 15 {% if not comment %}<div class="main_article">{% endif %} |
16 {% include 'blog/item.html' %} | 16 {% include 'blog/item.html' %} |
17 {% if not comments %}</div>{% endif %} | 17 {% if not comment %}</div>{% endif %} |
18 | 18 |
19 {# we recursively display comments for all comments nodes (usually there's only one) #} | 19 {# we recursively display comments for all comments nodes (usually there's only one) #} |
20 {% for comments_items in item.comments_items_list %} | 20 {% for comments_items in item.comments_items_list %} |
21 <button class="comments_btn" onclick="clicked_mh_fix('{{'comments_panel'|next_gidx}}');clicked_cls(this)"> | 21 <div class="box box__under box--large"> |
22 <span class='show'>{% trans %}show comments{% endtrans %}</span> | 22 <button class="btn-fold" onclick="clicked_mh_fix('{{'comments_panel'|next_gidx}}');clicked_cls(this)"> |
23 <span class='hide'>{% trans %}hide comments{% endtrans %}</span> | 23 <span class='show_if_parent_not_clicked'>{% trans %}show comments{% endtrans %}</span> |
24 <span class='show_if_parent_clicked'>{% trans %}hide comments{% endtrans %}</span> | |
24 ({{comments_items|count}}) | 25 ({{comments_items|count}}) |
25 </button> | 26 </button> |
26 <div id="{{'comments_panel'|cur_gidx}}" class="comments_panel"> | 27 </div> |
28 <div id="{{'comments_panel'|cur_gidx}}" class="panel-drawer"> | |
27 {% if allow_commenting %} | 29 {% if allow_commenting %} |
28 <div class="comment_post"> | 30 <div class="comment_post"> |
29 {{- textbox.comment(service=comments_items.service, node=comments_items.node) -}} | 31 {{- textbox.comment(service=comments_items.service, node=comments_items.node) -}} |
30 </div> | 32 </div> |
31 {% endif %} | 33 {% endif %} |
32 | 34 |
33 <div class="comments"> | 35 <div class="comments"> |
34 {{show_items(comments_items, comments=True)}} | 36 {{show_items(comments_items, comment=True)}} |
35 </div> | 37 </div> |
36 </div> | 38 </div> |
37 | 39 |
38 {% endfor %} | 40 {% endfor %} |
39 | 41 |