# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1499928067 -7200
# Node ID f8798d691acf2d82ebd9430ac570d0dc6b40d275
# Parent  0c6aa1c812528e875289710721ca908988eeb4f0
blog/articles: fixed comments transition:

    - as for blog articles, removed max-height workaround in favor of clicked_mh_fix function
    - changed show to hide in button when comments are expanded
    - reduced transition time

diff -r 0c6aa1c81252 -r f8798d691acf default/blog/articles.html
--- a/default/blog/articles.html	Thu Jul 13 08:39:23 2017 +0200
+++ b/default/blog/articles.html	Thu Jul 13 08:41:07 2017 +0200
@@ -11,7 +11,11 @@
 
         {# 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')">{% trans %}show comments{% endtrans %} ({{comments_items|count}})</button>
+            <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>
+                ({{comments_items|count}})
+            </button>
             <div id="{{comments_panel|cur_gidx}}" class="comments_panel">
                 {% if allow_commenting %}
                     <div class="comment_post">
diff -r 0c6aa1c81252 -r f8798d691acf default/static/blog.css
--- a/default/static/blog.css	Thu Jul 13 08:39:23 2017 +0200
+++ b/default/static/blog.css	Thu Jul 13 08:41:07 2017 +0200
@@ -122,16 +122,22 @@
     color: #b8bcc4;
 }
 
+button.comments_btn.clicked span.show {
+    display: none;
+}
+
+button.comments_btn:not(.clicked) span.hide {
+    display: none;
+}
+
 .comments_panel {
     max-height: 0;
     opacity: 0;
-    transition: max-height 2s, opacity 4s;
+    transition: max-height 1s, opacity 2s;
     overflow: hidden;
 }
 
-.comments_panel.show {
-    max-height: 10000px;
-    overflow: auto;
+.comments_panel.clicked {
     opacity: 1;
 }