Mercurial > libervia-templates

changeset 43:f8798d691acf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
author Goffi <goffi@goffi.org>
date Thu, 13 Jul 2017 08:41:07 +0200
parents 0c6aa1c81252
children 580670430fa2
files default/blog/articles.html default/static/blog.css
diffstat 2 files changed, 15 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- 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">
--- 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;
 }