aitzol/Plume
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #84 from Madeorsk/meta-buttons

Browse Source 
Improved Likes / Reshares section
This commit is contained in:
Baptiste Gelez 2018-06-26 16:36:10 +02:00 committed by GitHub
commit f58bc1d8f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 95 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
static/main.css
View File

@ -137,40 +137,94 @@ main .article-meta .reshares p { display: inline-block; margin: 0; }
/* Like / Reshare button */ /* Like / Reshare button */
main .article-meta .actions {
display: flex;
flex-direction: row;
justify-content: space-around;
}
main .article-meta .likes, main .article-meta .likes,
main .article-meta .reshares { main .article-meta .reshares {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5em 0; padding: 0.5em 0;
} }
main .article-meta .likes a.button:before { main .article-meta .likes > p,
content: ""; main .article-meta .reshares > p {
margin-right: 0.5em; font-size: 1.5em;
color: #E92F2F;
font-family: "Font Awesome 5 Free";
font-weight: 400;
} }
main .article-meta .reshares a.button:before {
content: "";
margin-right: 0.5em;
color: #7765E3;
font-family: "Font Awesome 5 Free";
font-weight: 600;
}
main .article-meta .likes a.button.liked:before,
main .article-meta .reshares a.button.reshared:before { font-weight: 900; }
main .article-meta .likes a.button, main .article-meta .likes a.button,
main .article-meta .reshares a.button { main .article-meta .reshares a.button {
display: inline-block; display: flex;
margin: 0 1em; flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
padding: 0; padding: 0;
background: none; background: none;
color: #242424; color: #242424;
border: none; border: none;
} }
main .article-meta .likes a.button:hover,
main .article-meta .likes a.button.liked { color: #E92F2F; } main .article-meta .likes > p,
main .article-meta .reshares a.button:hover, main .article-meta .likes a.button:hover { color: #E92F2F; }
main .article-meta .reshares a.button.reshared { color: #7765E3; } main .article-meta .reshares > p,
main .article-meta .reshares a.button:hover { color: #7765E3; }
main .article-meta .likes a.button:before,
main .article-meta .reshares a.button:before {
transition: background 0.1s ease-in;
display: flex;
align-items: center;
justify-content: center;
margin: 0.5em 0;
width: 2.5em;
height: 2.5em;
border-radius: 50%;
font-family: "Font Awesome 5 Free";
}
main .article-meta .likes a.button:before {
content: "";
color: #E92F2F;
border: solid #E92F2F thin;
font-weight: 400;
}
main .article-meta .likes a.button:hover:before {
background: rgba(233, 47, 47, 0.15);
}
main .article-meta .reshares a.button:before {
content: "";
color: #7765E3;
border: solid #7765E3 thin;
font-weight: 600;
}
main .article-meta .reshares a.button:hover:before {
background: rgba(119, 101, 227, 0.15);
}
main .article-meta .likes a.button.liked:before { background: #E92F2F; }
main .article-meta .likes a.button.liked:hover:before {
background: rgba(233, 47, 47, 0.25);
color: #E92F2F;
}
main .article-meta .reshares a.button.reshared:before { background: #7765E3; }
main .article-meta .reshares a.button.reshared:hover:before {
background: rgba(119, 101, 227, 0.25);
color: #7765E3;
}
main .article-meta .likes a.button.liked:before,
main .article-meta .reshares a.button.reshared:before {
color: #F4F4F4;
font-weight: 900;
}
/* ~ Comments ~ */ /* ~ Comments ~ */
@ -377,6 +431,7 @@ form.new-post input[type="submit"] {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 5%;
} }
.card { .card {
flex: 1; flex: 1;
@ -421,6 +476,7 @@ form.new-post input[type="submit"] {
font-size: 1em; font-size: 1em;
line-height: 1.25em; line-height: 1.25em;
text-align: left; text-align: left;
overflow: hidden;
} }
/* ================= * /* ================= *

37
templates/posts/details.html.tera
View File

@ -36,26 +36,25 @@
<div class="article-meta"> <div class="article-meta">
<p>{{ "This article is under the {{ license }} license." | _(license=post.license) }}</p> <p>{{ "This article is under the {{ license }} license." | _(license=post.license) }}</p>
<div class="likes"> <div class="actions">
<p> <div class="likes">
{{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }} <p aria-label="{{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}" title="{{ "{{ count }} likes" | _n(singular="One like", count=n_likes) }}">{{ n_likes }}</p>
</p>
{% if has_liked %} {% if has_liked %}
<a class="button liked" href="like">{{ "I don't like this anymore" | _ }}</a> <a class="button liked" href="like">{{ "I don't like this anymore" | _ }}</a>
{% else %} {% else %}
<a class="button" href="like">{{ "Add yours" | _ }}</a> <a class="button" href="like">{{ "Add yours" | _ }}</a>
{% endif %} {% endif %}
</div> </div>
<div class="reshares"> <div class="reshares">
<p> <p aria-label="{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}" title="{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}">{{ n_reshares }}</p>
{{ "{{ count }} reshares" | _n(singular="One reshare", count=n_reshares) }}
</p> {% if has_reshared %}
{% if has_reshared %} <a class="button reshared" href="reshare">{{ "I don't want to reshare this anymore" | _ }}</a>
<a class="button reshared" href="reshare">{{ "I don't want to reshare this anymore" | _ }}</a> {% else %}
{% else %} <a class="button" href="reshare">{{ "Reshare" | _ }}</a>
<a class="button" href="reshare">{{ "Reshare" | _ }}</a> {% endif %}
{% endif %} </div>
</div> </div>
<div class="comments"> <div class="comments">