Mercurial > libervia-templates
changeset 44:580670430fa2
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
author | Goffi <goffi@goffi.org> |
---|---|
date | Thu, 13 Jul 2017 19:23:02 +0200 (2017-07-13) |
parents | f8798d691acf |
children | 9d75eeb2e933 |
files | default/blog/item.html default/static/blog.css |
diffstat | 2 files changed, 92 insertions(+), 14 deletions(-) [+] |
line wrap: on
line diff
--- 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>
--- 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; +}