haskal
/
Plume
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #84 from Madeorsk/meta-buttons 

Improved Likes / Reshares section
This commit is contained in:
Baptiste Gelez 2018-06-26 16:36:10 +02:00 committed by GitHub
parent ca07950100 11e66472f9
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 */
main .article-meta .actions {
display: flex;
flex-direction: row;
justify-content: space-around;
}
main .article-meta .likes,
main .article-meta .reshares {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5em 0;
}
main .article-meta .likes a.button:before {
content: "";
margin-right: 0.5em;
color: #E92F2F;
font-family: "Font Awesome 5 Free";
font-weight: 400;
main .article-meta .likes > p,
main .article-meta .reshares > p {
font-size: 1.5em;
}
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 .reshares a.button {
display: inline-block;
margin: 0 1em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
background: none;
color: #242424;
border: none;
}
main .article-meta .likes a.button:hover,
main .article-meta .likes a.button.liked { color: #E92F2F; }
main .article-meta .reshares a.button:hover,
main .article-meta .reshares a.button.reshared { color: #7765E3; }
main .article-meta .likes > p,
main .article-meta .likes a.button:hover { color: #E92F2F; }
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 ~ */
@ -377,6 +431,7 @@ form.new-post input[type="submit"] {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0 5%;
}
.card {
flex: 1;
@ -421,6 +476,7 @@ form.new-post input[type="submit"] {
font-size: 1em;
line-height: 1.25em;
text-align: left;
overflow: hidden;
}
/* ================= *

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

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