# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1499966582 -7200
# Node ID 580670430fa27617c9084f5d2f6e0c1e81f9888b
# Parent  f8798d691acf2d82ebd9430ac570d0dc6b40d275
blog/item: expand/reduce improvments:

    - only expand_box is now clickable, not the whole article anymore, avoiding unwanted click
    - when in .clicked state, message is "Click to reduce" instead of "expand"
    - in .clicked state, expand_box is only visible on :hover
    - in .clicked state, and expand_box is available at top and bottom

diff -r f8798d691acf -r 580670430fa2 default/blog/item.html
--- a/default/blog/item.html	Thu Jul 13 08:41:07 2017 +0200
+++ b/default/blog/item.html	Thu Jul 13 19:23:02 2017 +0200
@@ -5,11 +5,20 @@
     {% set other_lang = " other_lang" %}
 {% endif %}
 
-<article id="{{ item.id }}" class="init box{{other_lang}}" onclick="clicked_mh_fix(this)">
+<article id="{{item.id}}" class="init box{{other_lang}}">
+
+    {# following message is displayed if item lang is different from page locale #}
     {% if other_lang is defined %}
         <div class="info"><p>{% trans language=locale.language_name %}This message is not in {{language}}, click to display anyway{% endtrans %}</p></div>
     {% endif %}
 
+    {# we put a reduce button at the top #}
+    <div class="expand_box box_top" onclick="clicked_mh_fix('{{item.id}}')">
+        <p>
+            <span class='hide'>{% trans %}Click to reduce…{% endtrans %}</span>
+        </p>
+    </div>
+
     <header>
         {% block header %}
         <div class="title">{% block blog_title %}{{ item.title_xhtml or item.title or '' }}{% endblock %}</div>
@@ -29,9 +38,11 @@
         {% endblock content %}
     </div>
 
-    <div class="expand_box">
+    {# and the bottom button to expand/reduce the article #}
+    <div class="expand_box box_bottom" onclick="clicked_mh_fix('{{item.id}}')">
         <p>
-            {% trans %}Click to to expand…{% endtrans %}
+            <span class='show'>{% trans %}Click to expand…{% endtrans %}</span>
+            <span class='hide'>{% trans %}Click to reduce…{% endtrans %}</span>
         </p>
     </div>
 
diff -r f8798d691acf -r 580670430fa2 default/static/blog.css
--- a/default/static/blog.css	Thu Jul 13 08:41:07 2017 +0200
+++ b/default/static/blog.css	Thu Jul 13 19:23:02 2017 +0200
@@ -1,4 +1,4 @@
-/**** articles ****/
+/*** articles ***/
 
 article.box {
     position: relative;
@@ -16,7 +16,7 @@
     border-bottom-left-radius: 0;
 }
 
-/* header */
+/** header **/
 
 header .metadata {
     text-align: right;
@@ -31,7 +31,7 @@
 }
 
 
-/* content */
+/** content **/
 
 article div.content {
     text-align: justify;
@@ -48,15 +48,28 @@
     margin: 0;
 }
 
+/** reduce/expand buttons **/
+
 .expand_box {
-    display: none;
+    cursor: pointer;
+}
+
+.box_top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+}
+
+.box_bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
 }
 
-.expand_box::before {
+.expand_box.box_bottom::before {
+    /* we do a gradient to show that text can be expanded */
     background-image: linear-gradient(to bottom,rgba(0,0,0,0),#ffffff);
     display: block;
     content: "";
@@ -76,10 +89,23 @@
     border-bottom-color: gray;
 }
 
-.main_article .expand_box {
-    display: initial;
+article .expand_box .hide {
+    /* when not clicked, we only display .show */
+    display: none;
 }
 
+article .expand_box.box_top {
+    /* top expand box only show a reduce button
+     * so it should be displayed only when article is .clicked */
+    display: none;
+}
+
+/** other language **/
+
+/* we hide everything just to display a message informing that
+ * the item is in an other language, and asking to click
+ * to display it */
+
 article.other_lang>div.info {
     display: none;
 }
@@ -92,6 +118,14 @@
     display: initial;
 }
 
+article.other_lang.init>div.expand_box.box_top {
+    /* as we need to have the message clickable, we cheat and use
+     * expand box on the whole surface but fully transparent */
+    display: initial;
+    height: 100%;
+    opacity: 0;
+}
+
 article.other_lang.init>div.info>p {
     margin: 0;
     padding: 0.2em;
@@ -105,7 +139,7 @@
     padding: 0;
 }
 
-/**** comments ****/
+/*** comments ***/
 
 button.comments_btn {
     border: none;
@@ -163,7 +197,12 @@
     max-width: 100%;
 }
 
-/**** media queries ****/
+.comments_panel article .expand_box {
+    /* no expand box in comments */
+    display: none;
+}
+
+/*** media queries ***/
 
 @media (min-width: 500px) {
     article.box {
@@ -184,12 +223,40 @@
 
 }
 
-/**** clicked ****/
+/*** clicked ***/
 
 .main_article article.clicked {
     border-bottom-style: solid;
 }
 
-.clicked .expand_box {
+.main_article article.clicked .expand_box.box_top {
+    display: initial;
+}
+
+.main_article article.clicked .expand_box {
+    opacity: 0;
+    transition: opacity 0.5s;
+}
+
+.main_article article.clicked .expand_box p {
+    background-color: transparent;
+    border: none;
+}
+
+.main_article article.clicked .expand_box:hover {
+    opacity: 1;
+    color: grey;
+}
+
+.main_article article.clicked .expand_box::before {
+    background-image: none;
     display: none;
 }
+
+.main_article article.clicked .expand_box .hide {
+    display: inline;
+}
+
+.main_article article.clicked .expand_box .show {
+    display: none;
+}