Use icon for like buttons

9 files changed, 131 insertions, 78 deletions

diff --git a/icons/res/upvote.svg b/icons/res/upvote.svg
new file mode 100644
index 0000000..25d1c93
--- /dev/null
+++ b/icons/res/upvote.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" stroke="black">
+	<path d="M 10 21 v -12 h -4 l 6 -6 l 6 6 h -4 v 12 z" />
+</svg>
diff --git a/icons/res/upvoted.svg b/icons/res/upvoted.svg
new file mode 100644
index 0000000..5041744
--- /dev/null
+++ b/icons/res/upvoted.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF8F00" stroke="#FF8F00">
+	<path d="M 10 21 v -12 h -4 l 6 -6 l 6 6 h -4 v 12 z" />
+</svg>
diff --git a/icons/src/lib.rs b/icons/src/lib.rs
index 355e674..0728295 100644
--- a/icons/src/lib.rs
+++ b/icons/src/lib.rs
@@ -43,7 +43,9 @@ macro_rules! icons {
 icons! {
     NOTIFICATIONS => "notifications.svg",
     NOTIFICATIONS_SOME => "notifications-some.svg",
-    PERSON => "person.svg"
+    PERSON => "person.svg",
+    UPVOTE => "upvote.svg",
+    UPVOTED => "upvoted.svg"
 }
 
 pub use icons::*;
diff --git a/res/lang/en.ftl b/res/lang/en.ftl
index ab31313..2c52478 100644
--- a/res/lang/en.ftl
+++ b/res/lang/en.ftl
@@ -30,8 +30,6 @@ follow_request_sent = Follow request sent!
 follow_undo = Unfollow
 home_follow_prompt1 = Why not
 home_follow_prompt2 = follow some communities?
-like = Like
-like_undo = Unlike
 liked_by = Liked by:
 likes = Likes
 local = Local
diff --git a/res/lang/eo.ftl b/res/lang/eo.ftl
index 1629cc7..34d4350 100644
--- a/res/lang/eo.ftl
+++ b/res/lang/eo.ftl
@@ -30,8 +30,6 @@ follow_request_sent = Abonado peto senditas!
 follow_undo = Ne plu aboni
 home_follow_prompt1 = Kial ne
 home_follow_prompt2 = aboni iujn komunumojn?
-like = Ŝati
-like_undo = Ne plu ŝati
 liked_by = Ŝatata de:
 likes = Ŝatantoj
 local = Loka
diff --git a/res/main.css b/res/main.css
index 1ce5be8..a459402 100644
--- a/res/main.css
+++ b/res/main.css
@@ -77,6 +77,37 @@ body {
 	vertical-align: text-bottom;
 }
 
+.iconbutton {
+	padding: 0;
+}
+
+.iconbutton > .icon {
+	margin-left: -1em;
+	margin-right: -1em;
+}
+
+.votebox {
+	float: left;
+	margin-right: .5em;
+}
+
+.comment > .content {
+	display: inline-block;
+}
+
+.commentList {
+	margin-top: .5em;
+	list-style-type: none;
+}
+
+.commentList.topLevel {
+	padding-left: 0;
+}
+
+form.inline {
+	display: inline-block;
+}
+
 @media (max-width: 768px) {
 	.communitySidebar {
 		display: none; /* TODO still show this somewhere */
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 9527972..255f38a 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -20,55 +20,65 @@ pub fn Comment<'a>(
     lang: &'a crate::Translator,
 ) {
     render::rsx! {
-        <li>
-            <small>
-                <cite><UserLink user={comment.author.as_ref()} /></cite>
-                {" "}
-                <TimeAgo since={chrono::DateTime::parse_from_rfc3339(&comment.created).unwrap()} lang />
-            </small>
-            <Content src={comment} />
-            <div class={"actionList"}>
-                {
-                    if base_data.login.is_some() {
-                        Some(render::rsx! {
-                            <>
-                                {
-                                    if comment.your_vote.is_some() {
-                                        render::rsx! {
-                                            <form method={"POST"} action={format!("/comments/{}/unlike", comment.as_ref().id)}>
-                                                <button type={"submit"}>{lang.tr("like_undo", None)}</button>
-                                            </form>
-                                        }
-                                    } else {
-                                        render::rsx! {
-                                            <form method={"POST"} action={format!("/comments/{}/like", comment.as_ref().id)}>
-                                                <button type={"submit"}>{lang.tr("like", None)}</button>
-                                            </form>
-                                        }
+        <li class={"comment"}>
+            {
+                if base_data.login.is_some() {
+                    Some(render::rsx! {
+                        <div class={"votebox"}>
+                            {
+                                if comment.your_vote.is_some() {
+                                    render::rsx! {
+                                        <form method={"POST"} action={format!("/comments/{}/unlike", comment.as_ref().id)}>
+                                            <button class={"iconbutton"} type={"submit"}>{hitide_icons::UPVOTED.img()}</button>
+                                        </form>
+                                    }
+                                } else {
+                                    render::rsx! {
+                                        <form method={"POST"} action={format!("/comments/{}/like", comment.as_ref().id)}>
+                                            <button class={"iconbutton"} type={"submit"}>{hitide_icons::UPVOTE.img()}</button>
+                                        </form>
                                     }
                                 }
+                            }
+                        </div>
+                    })
+                } else {
+                    None
+                }
+            }
+            <div class={"content"}>
+                <small>
+                    <cite><UserLink user={comment.author.as_ref()} /></cite>
+                    {" "}
+                    <TimeAgo since={chrono::DateTime::parse_from_rfc3339(&comment.created).unwrap()} lang />
+                </small>
+                <Content src={comment} />
+                <div class={"actionList"}>
+                    {
+                        if base_data.login.is_some() {
+                            Some(render::rsx! {
                                 <a href={format!("/comments/{}", comment.as_ref().id)}>{lang.tr("reply", None)}</a>
-                            </>
-                        })
-                    } else {
-                        None
+                            })
+                        } else {
+                            None
+                        }
                     }
-                }
-                {
-                    if author_is_me(&comment.author, &base_data.login) {
-                        Some(render::rsx! {
-                            <a href={format!("/comments/{}/delete", comment.as_ref().id)}>{lang.tr("delete", None)}</a>
-                        })
-                    } else {
-                        None
+                    {
+                        if author_is_me(&comment.author, &base_data.login) {
+                            Some(render::rsx! {
+                                <a href={format!("/comments/{}/delete", comment.as_ref().id)}>{lang.tr("delete", None)}</a>
+                            })
+                        } else {
+                            None
+                        }
                     }
-                }
+                </div>
             </div>
 
             {
                 if let Some(replies) = &comment.replies {
                         Some(render::rsx! {
-                            <ul>
+                            <ul class={"commentList"}>
                                 {
                                     replies.iter().map(|reply| {
                                         render::rsx! {
@@ -509,7 +519,7 @@ impl<'a> render::Render for NotificationItem<'a> {
     }
 }
 
-trait IconExt {
+pub trait IconExt {
     fn img(&self) -> render::SimpleElement<()>;
 }
 
diff --git a/src/routes/mod.rs b/src/routes/mod.rs
index 72268d0..f5236c8 100644
--- a/src/routes/mod.rs
+++ b/src/routes/mod.rs
@@ -3,8 +3,8 @@ use std::borrow::Cow;
 use std::sync::Arc;
 
 use crate::components::{
-    Comment, Content, HTPage, MaybeFillInput, MaybeFillTextArea, NotificationItem, PostItem,
-    ThingItem, UserLink,
+    Comment, Content, HTPage, IconExt, MaybeFillInput, MaybeFillTextArea, NotificationItem,
+    PostItem, ThingItem, UserLink,
 };
 use crate::resp_types::{
     RespCommentInfo, RespInstanceInfo, RespNotification, RespPostCommentInfo, RespPostListPost,
@@ -232,21 +232,6 @@ async fn page_comment_inner(
             }
             <p>
                 {
-                    if let Some(parent) = &comment.parent {
-                        Some(render::rsx! {
-                            <div>
-                                <small><a href={format!("/comments/{}", parent.id)}>{"<- "}{lang.tr("to_parent", None)}</a></small>
-                            </div>
-                        })
-                    } else {
-                        None
-                    }
-                }
-                <small><cite><UserLink user={comment.as_ref().author.as_ref()} /></cite>{":"}</small>
-                <Content src={&comment} />
-            </p>
-            <div class={"actionList"}>
-                {
                     if base_data.login.is_some() {
                         Some(render::rsx! {
                             <>
@@ -254,13 +239,13 @@ async fn page_comment_inner(
                                     if comment.as_ref().your_vote.is_some() {
                                         render::rsx! {
                                             <form method={"POST"} action={format!("/comments/{}/unlike", comment.as_ref().as_ref().id)}>
-                                                <button type={"submit"}>{lang.tr("like_undo", None)}</button>
+                                                <button type={"submit"} class={"iconbutton"}>{hitide_icons::UPVOTED.img()}</button>
                                             </form>
                                         }
                                     } else {
                                         render::rsx! {
                                             <form method={"POST"} action={format!("/comments/{}/like", comment.as_ref().as_ref().id)}>
-                                                <button type={"submit"}>{lang.tr("like", None)}</button>
+                                                <button type={"submit"} class={"iconbutton"}>{hitide_icons::UPVOTE.img()}</button>
                                             </form>
                                         }
                                     }
@@ -272,6 +257,21 @@ async fn page_comment_inner(
                     }
                 }
                 {
+                    if let Some(parent) = &comment.parent {
+                        Some(render::rsx! {
+                            <div>
+                                <small><a href={format!("/comments/{}", parent.id)}>{"<- "}{lang.tr("to_parent", None)}</a></small>
+                            </div>
+                        })
+                    } else {
+                        None
+                    }
+                }
+                <small><cite><UserLink user={comment.as_ref().author.as_ref()} /></cite>{":"}</small>
+                <Content src={&comment} />
+            </p>
+            <div class={"actionList"}>
+                {
                     if author_is_me(&comment.as_ref().author, &base_data.login) {
                         Some(render::rsx! {
                             <a href={format!("/comments/{}/delete", comment.as_ref().as_ref().id)}>{lang.tr("delete", None)}</a>
diff --git a/src/routes/posts.rs b/src/routes/posts.rs
index 9223f13..fda23b3 100644
--- a/src/routes/posts.rs
+++ b/src/routes/posts.rs
@@ -2,7 +2,7 @@ use super::{
     fetch_base_data, for_client, get_cookie_map_for_headers, get_cookie_map_for_req, html_response,
     res_to_error,
 };
-use crate::components::{Comment, CommunityLink, Content, HTPage, TimeAgo, UserLink};
+use crate::components::{Comment, CommunityLink, Content, HTPage, IconExt, TimeAgo, UserLink};
 use crate::resp_types::{JustUser, RespCommunityInfoMaybeYour, RespList, RespPostInfo};
 use crate::util::author_is_me;
 use std::sync::Arc;
@@ -79,30 +79,36 @@ async fn page_post(
                 }
             }
             <h1>{title}</h1>
-            <p>
-                <a href={format!("/posts/{}/likes", post_id)}>
-                    <em>{lang.tr("score", Some(&fluent::fluent_args!["score" => post.score]))}</em>
-                </a>
-                {" "}
+            <div>
                 {
                     if base_data.login.is_some() {
                         Some(if post.your_vote.is_some() {
                             render::rsx! {
-                                <form method={"POST"} action={format!("/posts/{}/unlike", post_id)}>
-                                    <button type={"submit"}>{lang.tr("like_undo", None)}</button>
-                                </form>
+                                <>
+                                    <form method={"POST"} action={format!("/posts/{}/unlike", post_id)} class={"inline"}>
+                                        <button type={"submit"} class={"iconbutton"}>{hitide_icons::UPVOTED.img()}</button>
+                                    </form>
+                                    {" "}
+                                </>
                             }
                         } else {
                             render::rsx! {
-                                <form method={"POST"} action={format!("/posts/{}/like", post_id)}>
-                                    <button type={"submit"}>{lang.tr("like", None)}</button>
-                                </form>
+                                <>
+                                    <form method={"POST"} action={format!("/posts/{}/like", post_id)} class={"inline"}>
+                                        <button type={"submit"} class={"iconbutton"}>{hitide_icons::UPVOTE.img()}</button>
+                                    </form>
+                                    {" "}
+                                </>
                             }
                         })
                     } else {
                         None
                     }
                 }
+                <a href={format!("/posts/{}/likes", post_id)}>
+                    <em>{lang.tr("score", Some(&fluent::fluent_args!["score" => post.score]))}</em>
+                </a>
+                {" "}
                 {
                     if is_community_moderator {
                         Some(if post.approved {
@@ -122,7 +128,7 @@ async fn page_post(
                         None
                     }
                 }
-            </p>
+            </div>
             <p>
                 {lang.tr("submitted", None)}
                 {" "}<TimeAgo since={chrono::DateTime::parse_from_rfc3339(&post.as_ref().created)?} lang={&lang} />
@@ -167,7 +173,7 @@ async fn page_post(
                         None
                     }
                 }
-                <ul>
+                <ul class={"commentList topLevel"}>
                     {
                         post.comments.iter().map(|comment| {
                             render::rsx! {