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

Make like and share button HTML forms 

Fixes #88
This commit is contained in:
Bat 2018-07-11 21:27:47 +02:00
parent 0e773de9ff
commit 67dd577a27
4 changed files with 30 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/likes.rs
View File

@ -10,7 +10,7 @@ use plume_models::{
users::User users::User
}; };
#[get("/~/<blog>/<slug>/like")] #[post("/~/<blog>/<slug>/like")]
fn create(blog: String, slug: String, user: User, conn: DbConn) -> Redirect { fn create(blog: String, slug: String, user: User, conn: DbConn) -> Redirect {
let b = Blog::find_by_fqn(&*conn, blog.clone()).unwrap(); let b = Blog::find_by_fqn(&*conn, blog.clone()).unwrap();
let post = Post::find_by_slug(&*conn, slug.clone(), b.id).unwrap(); let post = Post::find_by_slug(&*conn, slug.clone(), b.id).unwrap();
@ -34,7 +34,7 @@ fn create(blog: String, slug: String, user: User, conn: DbConn) -> Redirect {
Redirect::to(uri!(super::posts::details: blog = blog, slug = slug)) Redirect::to(uri!(super::posts::details: blog = blog, slug = slug))
} }
#[get("/~/<blog>/<slug>/like", rank = 2)] #[post("/~/<blog>/<slug>/like", rank = 2)]
fn create_auth(blog: String, slug: String) -> Flash<Redirect>{ fn create_auth(blog: String, slug: String) -> Flash<Redirect>{
utils::requires_login("You need to be logged in order to like a post", uri!(create: blog = blog, slug = slug)) utils::requires_login("You need to be logged in order to like a post", uri!(create: blog = blog, slug = slug))
} }

4
src/routes/reshares.rs
View File

@ -10,7 +10,7 @@ use plume_models::{
users::User users::User
}; };
#[get("/~/<blog>/<slug>/reshare")] #[post("/~/<blog>/<slug>/reshare")]
fn create(blog: String, slug: String, user: User, conn: DbConn) -> Redirect { fn create(blog: String, slug: String, user: User, conn: DbConn) -> Redirect {
let b = Blog::find_by_fqn(&*conn, blog.clone()).unwrap(); let b = Blog::find_by_fqn(&*conn, blog.clone()).unwrap();
let post = Post::find_by_slug(&*conn, slug.clone(), b.id).unwrap(); let post = Post::find_by_slug(&*conn, slug.clone(), b.id).unwrap();
@ -34,7 +34,7 @@ fn create(blog: String, slug: String, user: User, conn: DbConn) -> Redirect {
Redirect::to(uri!(super::posts::details: blog = blog, slug = slug)) Redirect::to(uri!(super::posts::details: blog = blog, slug = slug))
} }
#[get("/~/<blog>/<slug>/reshare", rank=1)] #[post("/~/<blog>/<slug>/reshare", rank=1)]
fn create_auth(blog: String, slug: String) -> Flash<Redirect> { fn create_auth(blog: String, slug: String) -> Flash<Redirect> {
utils::requires_login("You need to be logged in order to reshare a post", uri!(create: blog = blog, slug = slug)) utils::requires_login("You need to be logged in order to reshare a post", uri!(create: blog = blog, slug = slug))
} }

39
static/main.css
View File

@ -118,7 +118,7 @@ article img {
/* Article.Meta */ /* Article.Meta */
main .article-meta { main .article-meta, main .article-meta button {
padding: 0; padding: 0;
font-size: 1.1em; font-size: 1.1em;
margin-top: 10%; margin-top: 10%;
@ -156,8 +156,8 @@ main .article-meta .reshares > p {
font-size: 1.5em; font-size: 1.5em;
} }
main .article-meta .likes a.button, main .article-meta .likes button,
main .article-meta .reshares a.button { main .article-meta .reshares button {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -170,12 +170,12 @@ main .article-meta .reshares a.button {
} }
main .article-meta .likes > p, main .article-meta .likes > p,
main .article-meta .likes a.button:hover { color: #E92F2F; } main .article-meta .likes button:hover { color: #E92F2F; }
main .article-meta .reshares > p, main .article-meta .reshares > p,
main .article-meta .reshares a.button:hover { color: #7765E3; } main .article-meta .reshares button:hover { color: #7765E3; }
main .article-meta .likes a.button:before, main .article-meta .likes button i,
main .article-meta .reshares a.button:before { main .article-meta .reshares button i {
transition: background 0.1s ease-in; transition: background 0.1s ease-in;
display: flex; display: flex;
align-items: center; align-items: center;
@ -186,42 +186,39 @@ main .article-meta .reshares a.button:before {
height: 2.5em; height: 2.5em;
border-radius: 50%; border-radius: 50%;
font-family: "Font Awesome 5 Free";
} }
main .article-meta .likes a.button:before { main .article-meta .likes button i {
content: "";
color: #E92F2F; color: #E92F2F;
border: solid #E92F2F thin; border: solid #E92F2F thin;
font-weight: 400; font-weight: 400;
} }
main .article-meta .likes a.button:hover:before { main .article-meta .likes button:hover i {
background: rgba(233, 47, 47, 0.15); background: rgba(233, 47, 47, 0.15);
} }
main .article-meta .reshares a.button:before { main .article-meta .reshares button i {
content: "";
color: #7765E3; color: #7765E3;
border: solid #7765E3 thin; border: solid #7765E3 thin;
font-weight: 600; font-weight: 600;
} }
main .article-meta .reshares a.button:hover:before { main .article-meta .reshares button:hover i {
background: rgba(119, 101, 227, 0.15); background: rgba(119, 101, 227, 0.15);
} }
main .article-meta .likes a.button.liked:before { background: #E92F2F; } main .article-meta .likes button.liked i { background: #E92F2F; }
main .article-meta .likes a.button.liked:hover:before { main .article-meta .likes button.liked:hover i {
background: rgba(233, 47, 47, 0.25); background: rgba(233, 47, 47, 0.25);
color: #E92F2F; color: #E92F2F;
} }
main .article-meta .reshares a.button.reshared:before { background: #7765E3; } main .article-meta .reshares button.reshared i { background: #7765E3; }
main .article-meta .reshares a.button.reshared:hover:before { main .article-meta .reshares button.reshared:hover i {
background: rgba(119, 101, 227, 0.25); background: rgba(119, 101, 227, 0.25);
color: #7765E3; color: #7765E3;
} }
main .article-meta .likes a.button.liked:before, main .article-meta .likes button.liked i,
main .article-meta .reshares a.button.reshared:before { main .article-meta .reshares button.reshared i {
color: #F4F4F4; color: #F4F4F4;
font-weight: 900; font-weight: 900;
} }
@ -351,7 +348,7 @@ textarea {
/* Button & Submit */ /* Button & Submit */
.button, input[type="submit"] { .button, input[type="submit"], button {
transition: all 0.1s ease-in; transition: all 0.1s ease-in;
display: inline-block; display: inline-block;

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

@ -37,24 +37,24 @@
<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="actions"> <div class="actions">
<div class="likes"> <form class="likes" action="like" method="POST">
<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 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 %} {% if has_liked %}
<a class="button liked" href="like">{{ "I don't like this anymore" | _ }}</a> <button type="submit" class="liked"><i class="far fa-heart"></i>{{ "I don't like this anymore" | _ }}</button>
{% else %} {% else %}
<a class="button" href="like">{{ "Add yours" | _ }}</a> <button type="submit"><i class="fa fa-heart"></i>{{ "Add yours" | _ }}</button>
{% endif %} {% endif %}
</div> </form>
<div class="reshares"> <form class="reshares" action="reshare" method="POST">
<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> <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 %} {% if has_reshared %}
<a class="button reshared" href="reshare">{{ "I don't want to reshare this anymore" | _ }}</a> <button type="submit" class="reshared"><i class="far fa-retweet">{{ "I don't want to reshare this anymore" | _ }}</button>
{% else %} {% else %}
<a class="button" href="reshare">{{ "Reshare" | _ }}</a> <button type="submit"><i class="fa fa-retweet"></i>{{ "Reshare" | _ }}</button>
{% endif %} {% endif %}
</div> </form>
</div> </div>
<div class="comments"> <div class="comments">