Mercurial > libervia-templates
changeset 16:8cdcbe0d7dee
blog: various appareance improvments:
- use new .box classe
- article as a maxium size and is expandable on click
- display comments in a different way
- author and date are now visible
- responsive design
- placeholders on comment input
- transitions
- various other improvments
author | Goffi <goffi@goffi.org> |
---|---|
date | Thu, 04 May 2017 01:00:23 +0200 |
parents | c319291943be |
children | 48b831ab4238 |
files | default/blog/articles.html default/blog/item.html default/input/comment.html default/static/blog.css |
diffstat | 4 files changed, 181 insertions(+), 19 deletions(-) [+] |
line wrap: on
line diff
--- a/default/blog/articles.html Thu May 04 00:55:06 2017 +0200 +++ b/default/blog/articles.html Thu May 04 01:00:23 2017 +0200 @@ -1,22 +1,27 @@ {% if not embedded %}{% extends 'base/base.html' %}{% endif %} {% import 'input/comment.html' as comment %} -{% macro show_items(items) %} +{% macro show_items(items, comments=False) %} {# show items and comments items if present after each item, then post form if allow_commenting is set #} {% for item in items %} - {% include 'blog/item.html' %} - - {% for comments_items in item.comments_items_list %} + {% if not comments %}<div class="main_article">{% endif %} + {% include 'blog/item.html' %} + {% if not comments %}</div>{% endif %} - {% if allow_commenting %} - <div id="comment_post"> - {{ comment.comment(service=comments_items.service, node=comments_items.node) }} + {# 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')">show comments ({{comments_items|count}})</button> + <div id="{{comments_panel|cur_gidx}}" class="comments_panel"> + {% if allow_commenting %} + <div class="comment_post"> + {{ comment.comment(service=comments_items.service, node=comments_items.node) }} + </div> + {% endif %} + + <div class="comments"> + {{show_items(comments_items, comments=True)}} </div> - {% endif %} - - <div class="comments"> - {{show_items(comments_items)}} </div> {% endfor %}
--- a/default/blog/item.html Thu May 04 00:55:06 2017 +0200 +++ b/default/blog/item.html Thu May 04 01:00:23 2017 +0200 @@ -1,8 +1,17 @@ +{% import 'script/css.js' as css %} + {% block item %} -<article> +<article id="{{ item.id }}" class="box" onclick="this.classList.toggle('clicked')"> <header> {% block header %} <div class="title">{% block blog_title %}{{ item.title_xhtml or item.title or '' }}{% endblock %}</div> + {% block metadata %} + <div class="metadata"> + <span class="author">{{item.author}}</span> + <span class="blog_data">{{item.published | blog_date}}</span> + </div> + + {% endblock metadata %} {% endblock header %} </header> @@ -11,5 +20,11 @@ {{ item.content_xhtml or item.content or ''}} {% endblock content %} </div> + + <div class="expand_box"> + <p> + Click to to expand… + </p> + </div> </article> {% endblock item %}
--- a/default/input/comment.html Thu May 04 00:55:06 2017 +0200 +++ b/default/input/comment.html Thu May 04 01:00:23 2017 +0200 @@ -8,7 +8,7 @@ {% endmacro %} {% macro body(rows=10, cols=50) %} - <textarea name="body" rows="{{rows}}" cols="{{cols}}"></textarea> + <textarea name="body" rows="{{rows}}" cols="{{cols}}" placeholder="Your comment"></textarea> {% endmacro %} {% macro submit() %}
--- a/default/static/blog.css Thu May 04 00:55:06 2017 +0200 +++ b/default/static/blog.css Thu May 04 01:00:23 2017 +0200 @@ -1,13 +1,38 @@ -article { +/**** articles ****/ + +article.box { + position: relative; margin: 2% auto; - width: 80%; - border-style: solid; + border-style: solid None None; border-width: 1px; - border-radius: 3px; - padding: 1%; - background: lightgray; + padding: 2%; + max-height: 7em; + overflow: hidden; + transition: max-height 2s; +} + +.main_article article.box:not(.clicked) { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } +/* header */ + +header .metadata { + text-align: right; +} + +article .author { + font-weight: bold; +} + +article .author::after { + content: ", "; +} + + +/* content */ + article div.content { text-align: justify; font-size: 0.9em; @@ -15,4 +40,121 @@ article img { max-width: 100%; + margin: 0; } + +.expand_box { + display: none; + position: absolute; + bottom: 0; + left: 0; + width: 100%; +} + +.expand_box::before { + background-image: linear-gradient(to bottom,rgba(0,0,0,0),#ffffff); + display: block; + content: ""; + width: 100%; + height: 4em; + border: none; +} + +.expand_box p { + background-color: white; + margin: 0; + text-align: center; + font-weight: bold; + font-size: 0.8em; + border-style: solid none dotted none; + border-width: 1px 0 1px; + border-bottom-color: gray; +} + +.main_article .expand_box { + display: initial; +} + +/**** comments ****/ + +button.comments_btn { + border: none; + font-weight: bold; + display: block; + margin: 0 10% 0 auto; + border-radius: 1em; + background: #b8bcc4; + color: #4d4d4d; +} + +button.comments_btn:active { + background: #4d4d4d; + color: #b8bcc4; +} + +.comments_panel { + max-height: 0; + opacity: 0; + transition: max-height 2s, opacity 4s; + overflow: hidden; +} + +.comments_panel.show { + max-height: 10000px; + overflow: auto; + opacity: 1; +} + +.comments article { + background-color: #9ca0a8; + border: None; +} + +.comment_post { + text-align: center; +} + +.comment_post input { + display: block; + margin: 0 auto; +} + +.comment_post textarea { + border-style: solid; + border-width: 1px 0; + border-color: black; + max-width: 100%; +} + +/**** media queries ****/ + +@media (min-width: 500px) { + article.box { + width: 80%; + border-style: solid solid none solid; + } + .comments article.box { + width: 30rem; + margin: 2% auto; + border: none; + } + .comment_post textarea { + border-width: 1px; + border-radius: 1em; + border: solid 1px; + padding: 0.5em; + } + +} + +/**** clicked ****/ + +.main_article article.clicked { + max-height: 10000px; + border-bottom-style: solid; + overflow: auto; +} + +.clicked .expand_box { + display: none; +}