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