Mercurial > libervia-templates
diff default/blog/articles.html @ 16:8cdcbe0d7dee
blog: various appareance improvments:
- use new .box classe
- article as a maxium size and is expandable on click
- display comments in a different way
- author and date are now visible
- responsive design
- placeholders on comment input
- transitions
- various other improvments
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Thu, 04 May 2017 01:00:23 +0200 |
| parents | 8b5615a1bf3d |
| children | 8fa2fd2e928e |
line wrap: on
line diff
--- a/default/blog/articles.html Thu May 04 00:55:06 2017 +0200 +++ b/default/blog/articles.html Thu May 04 01:00:23 2017 +0200 @@ -1,22 +1,27 @@ {% if not embedded %}{% extends 'base/base.html' %}{% endif %} {% import 'input/comment.html' as comment %} -{% macro show_items(items) %} +{% macro show_items(items, comments=False) %} {# show items and comments items if present after each item, then post form if allow_commenting is set #} {% for item in items %} - {% include 'blog/item.html' %} - - {% for comments_items in item.comments_items_list %} + {% if not comments %}<div class="main_article">{% endif %} + {% include 'blog/item.html' %} + {% if not comments %}</div>{% endif %} - {% if allow_commenting %} - <div id="comment_post"> - {{ comment.comment(service=comments_items.service, node=comments_items.node) }} + {# we recursively display comments for all comments nodes (usually there's only one) #} + {% for comments_items in item.comments_items_list %} + <button class="comments_btn" onclick="document.getElementById('{{comments_panel|next_gidx}}').classList.toggle('show')">show comments ({{comments_items|count}})</button> + <div id="{{comments_panel|cur_gidx}}" class="comments_panel"> + {% if allow_commenting %} + <div class="comment_post"> + {{ comment.comment(service=comments_items.service, node=comments_items.node) }} + </div> + {% endif %} + + <div class="comments"> + {{show_items(comments_items, comments=True)}} </div> - {% endif %} - - <div class="comments"> - {{show_items(comments_items)}} </div> {% endfor %}