From 67dd577a273265051bd950d0f0d6f6f7877307f4 Mon Sep 17 00:00:00 2001 From: Bat Date: Wed, 11 Jul 2018 21:27:47 +0200 Subject: [PATCH] Make like and share button HTML forms Fixes #88 --- src/routes/likes.rs | 4 ++-- src/routes/reshares.rs | 4 ++-- static/main.css | 39 ++++++++++++++----------------- templates/posts/details.html.tera | 16 ++++++------- 4 files changed, 30 insertions(+), 33 deletions(-) diff --git a/src/routes/likes.rs b/src/routes/likes.rs index 3ccd0d6f..8126871b 100644 --- a/src/routes/likes.rs +++ b/src/routes/likes.rs @@ -10,7 +10,7 @@ use plume_models::{ users::User }; -#[get("/~///like")] +#[post("/~///like")] fn create(blog: String, slug: String, user: User, conn: DbConn) -> Redirect { let b = Blog::find_by_fqn(&*conn, blog.clone()).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)) } -#[get("/~///like", rank = 2)] +#[post("/~///like", rank = 2)] fn create_auth(blog: String, slug: String) -> Flash{ utils::requires_login("You need to be logged in order to like a post", uri!(create: blog = blog, slug = slug)) } diff --git a/src/routes/reshares.rs b/src/routes/reshares.rs index f83a40f3..67cf87a9 100644 --- a/src/routes/reshares.rs +++ b/src/routes/reshares.rs @@ -10,7 +10,7 @@ use plume_models::{ users::User }; -#[get("/~///reshare")] +#[post("/~///reshare")] fn create(blog: String, slug: String, user: User, conn: DbConn) -> Redirect { let b = Blog::find_by_fqn(&*conn, blog.clone()).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)) } -#[get("/~///reshare", rank=1)] +#[post("/~///reshare", rank=1)] fn create_auth(blog: String, slug: String) -> Flash { utils::requires_login("You need to be logged in order to reshare a post", uri!(create: blog = blog, slug = slug)) } diff --git a/static/main.css b/static/main.css index 5f218a57..b3c2fa8b 100644 --- a/static/main.css +++ b/static/main.css @@ -118,7 +118,7 @@ article img { /* Article.Meta */ -main .article-meta { +main .article-meta, main .article-meta button { padding: 0; font-size: 1.1em; margin-top: 10%; @@ -156,8 +156,8 @@ main .article-meta .reshares > p { font-size: 1.5em; } -main .article-meta .likes a.button, -main .article-meta .reshares a.button { +main .article-meta .likes button, +main .article-meta .reshares button { display: flex; flex-direction: column; align-items: center; @@ -170,12 +170,12 @@ main .article-meta .reshares a.button { } 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 a.button:hover { color: #7765E3; } +main .article-meta .reshares button:hover { color: #7765E3; } -main .article-meta .likes a.button:before, -main .article-meta .reshares a.button:before { +main .article-meta .likes button i, +main .article-meta .reshares button i { transition: background 0.1s ease-in; display: flex; align-items: center; @@ -186,42 +186,39 @@ main .article-meta .reshares a.button:before { height: 2.5em; border-radius: 50%; - font-family: "Font Awesome 5 Free"; } -main .article-meta .likes a.button:before { - content: ""; +main .article-meta .likes button i { color: #E92F2F; border: solid #E92F2F thin; 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); } -main .article-meta .reshares a.button:before { - content: ""; +main .article-meta .reshares button i { color: #7765E3; border: solid #7765E3 thin; 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); } -main .article-meta .likes a.button.liked:before { background: #E92F2F; } -main .article-meta .likes a.button.liked:hover:before { +main .article-meta .likes button.liked i { background: #E92F2F; } +main .article-meta .likes button.liked:hover i { 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 { +main .article-meta .reshares button.reshared i { background: #7765E3; } +main .article-meta .reshares button.reshared:hover i { 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 { +main .article-meta .likes button.liked i, +main .article-meta .reshares button.reshared i { color: #F4F4F4; font-weight: 900; } @@ -351,7 +348,7 @@ textarea { /* Button & Submit */ -.button, input[type="submit"] { +.button, input[type="submit"], button { transition: all 0.1s ease-in; display: inline-block; diff --git a/templates/posts/details.html.tera b/templates/posts/details.html.tera index 4cb19562..9ec45faf 100644 --- a/templates/posts/details.html.tera +++ b/templates/posts/details.html.tera @@ -37,24 +37,24 @@

{{ "This article is under the {{ license }} license." | _(license=post.license) }}

- -
+ +

{{ n_reshares }}

{% if has_reshared %} - {{ "I don't want to reshare this anymore" | _ }} + {% else %} - {{ "Reshare" | _ }} + {% endif %} -
+