diff 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
line wrap: on
line diff
--- a/sat_templates/templates/default/blog/macros.html	Fri Sep 14 19:49:15 2018 +0200
+++ b/sat_templates/templates/default/blog/macros.html	Wed Oct 03 21:00:24 2018 +0200
@@ -1,10 +1,10 @@
 {% import 'input/textbox.html' as textbox with context %}
 
-{% macro show_items(items, comments=False, expanded=false, dates_fmt=none) %}
+{% macro show_items(items, comment=False, expanded=false, dates_fmt=none) %}
     {# show items and comments items if present after each item,
         then post form if allow_commenting is set
         @param items(BlogItems): items to show
-        @param comments(bool): True items are comments
+        @param comment(bool): True items are comments
             if False, a div with "main_article" class will be added
         @param expanded(bool): initial state of items
     #}
@@ -12,18 +12,20 @@
         {% set dates_format = dates_fmt or 'short' %}
     {% endif %}
     {% for item in items %}
-        {% if not comments %}<div class="main_article">{% endif %}
+        {% if not comment %}<div class="main_article">{% endif %}
             {% include 'blog/item.html' %}
-        {% if not comments %}</div>{% endif %}
+        {% if not comment %}</div>{% endif %}
 
         {# 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="clicked_mh_fix('{{'comments_panel'|next_gidx}}');clicked_cls(this)">
-                <span class='show'>{% trans %}show comments{% endtrans %}</span>
-                <span class='hide'>{% trans %}hide comments{% endtrans %}</span>
+            <div class="box box__under box--large">
+            <button class="btn-fold" onclick="clicked_mh_fix('{{'comments_panel'|next_gidx}}');clicked_cls(this)">
+                <span class='show_if_parent_not_clicked'>{% trans %}show comments{% endtrans %}</span>
+                <span class='show_if_parent_clicked'>{% trans %}hide comments{% endtrans %}</span>
                 ({{comments_items|count}})
             </button>
-            <div id="{{'comments_panel'|cur_gidx}}" class="comments_panel">
+            </div>
+            <div id="{{'comments_panel'|cur_gidx}}" class="panel-drawer">
                 {% if allow_commenting %}
                     <div class="comment_post">
                         {{- textbox.comment(service=comments_items.service, node=comments_items.node) -}}
@@ -31,7 +33,7 @@
                 {% endif %}
 
                 <div class="comments">
-                    {{show_items(comments_items, comments=True)}}
+                    {{show_items(comments_items, comment=True)}}
                 </div>
             </div>