Hi,

I just found this project today and (as you can see by me firing patches) am 
falling in love with it already.

I would like to ask what the plans for hitide are in general? I feel like that 
the goal is to provide a javascript-free user interface with a minimal style, 
is that correct?
I would love that! Would you mind a few minor visual tweaks, tho? Just CSS of 
course! I would love to play around with the UI design a bit (I am no way a UI 
person) to see what I can do and would then propose it here!

Best,

-- 
Matthias

On 20-12-23 16:08, Matthias Beyer wrote:
> Hi,
> 
> I just found this project today and (as you can see by me firing patches) am 
> falling in love with it already.
> 
> I would like to ask what the plans for hitide are in general? I feel like that 
> the goal is to provide a javascript-free user interface with a minimal style, 
> is that correct?
> I would love that! Would you mind a few minor visual tweaks, tho? Just CSS of 
> course! I would love to play around with the UI design a bit (I am no way a UI 
> person) to see what I can do and would then propose it here!

hitide will never require javascript to use but at some point will
probably have some small enhancements for users that want it (e.g.
upvoting without reloading the entire page)

As far as exact UI design, I'm not sure what I'm going for here, but I'm
thinking roughly the style of old reddit or hacker news. Certainly open
to suggestions within that field, as the current state feels a little
awkward in places

Hi,

folling up on yesterdays discussion, here's two (RFC) patches for some style
tweaks.
If you like them, I'd follow with some more tweaks here and there in the same
direction.

Coloring is held lightly in general, with the light blue as "main theme" (so to
speak).

I hope you like what you see!

Matthias

Matthias Beyer (2):
  Make comments lightly colored
  Style submission part of post

 res/main.css        | 20 +++++++++++++++++
 src/routes/posts.rs | 52 ++++++++++++++++++++++++---------------------
 2 files changed, 48 insertions(+), 24 deletions(-)

-- 
2.29.2

This improves the readability because one can distinguish between
comments more easily.

Signed-off-by: Matthias Beyer <mail@beyermatthias.de>
Tested-by: Matthias Beyer <mail@beyermatthias.de>
---
 res/main.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/main.css b/res/main.css
index 36359f5..9bf4562 100644
--- a/res/main.css
+++ b/res/main.css
@@ -102,6 +102,7 @@ body {
 
 .comment > .content {
 	overflow-x: auto;
+	background-color: aliceblue;
 }
 
 .commentList {
-- 
2.29.2

This patch adds a bit of style to the submission part of the post.
It therefore adds some more css classes in the HTML-generating code plus
some style tweaks in the CSS.

Signed-off-by: Matthias Beyer <mail@beyermatthias.de>
Tested-by: Matthias Beyer <mail@beyermatthias.de>
---
 res/main.css        | 19 +++++++++++++++++
 src/routes/posts.rs | 52 ++++++++++++++++++++++++---------------------
 2 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/res/main.css b/res/main.css
index 9bf4562..91b67c6 100644
--- a/res/main.css
+++ b/res/main.css
@@ -135,6 +135,25 @@ textarea {
 	height: 7em;
 }
 
+.submission {
+	background-color: aliceblue;
+	padding-bottom: 0.5em;
+}
+
+.submission .submissionSource {
+	background-color: #81D4FA;
+	padding-top: 0.5em;
+	padding-bottom: 0.5em;
+}
+
+.submission .submissionContent {
+	margin-left: 0.5em;
+}
+
+.submission .submissionDelete {
+	margin-left: 0.5em;
+}
+
 @media (max-width: 768px) {
 	.communitySidebar {
 		display: none; /* TODO still show this somewhere */
diff --git a/src/routes/posts.rs b/src/routes/posts.rs
index 7ad0385..398fa30 100644
--- a/src/routes/posts.rs
+++ b/src/routes/posts.rs
@@ -145,34 +145,38 @@ async fn page_post_inner(
                     }
                 }
             </div>
-            <p>
-                {lang.tr("submitted", None)}
-                {" "}<TimeAgo since={chrono::DateTime::parse_from_rfc3339(&post.as_ref().created)?} lang={&lang} />
-                {" "}{lang.tr("by", None)}{" "}<UserLink user={post.as_ref().author.as_ref()} />
-                {" "}{lang.tr("to", None)}{" "}<CommunityLink community={&post.as_ref().community} />
-            </p>
-            {
-                match &post.as_ref().href {
-                    None => None,
-                    Some(href) => {
+            <div class={"submission"}>
+                <p class={"submissionSource"}>
+                    {lang.tr("submitted", None)}
+                    {" "}<TimeAgo since={chrono::DateTime::parse_from_rfc3339(&post.as_ref().created)?} lang={&lang} />
+                    {" "}{lang.tr("by", None)}{" "}<UserLink user={post.as_ref().author.as_ref()} />
+                    {" "}{lang.tr("to", None)}{" "}<CommunityLink community={&post.as_ref().community} />
+                </p>
+                {
+                    match &post.as_ref().href {
+                        None => None,
+                        Some(href) => {
+                            Some(render::rsx! {
+                                <p><a href={href.as_ref()}>{href.as_ref()}</a></p>
+                            })
+                        }
+                    }
+                }
+                <div class={"submissionContent"}>
+                    <Content src={&post} />
+                </div>
+                {
+                    if author_is_me(&post.as_ref().author, &base_data.login) || (post.local && base_data.is_site_admin()) {
                         Some(render::rsx! {
-                            <p><a href={href.as_ref()}>{href.as_ref()}</a></p>
+                            <p class={"submissionDelete"}>
+                                <a href={format!("/posts/{}/delete", post_id)}>{lang.tr("delete", None)}</a>
+                            </p>
                         })
+                    } else {
+                        None
                     }
                 }
-            }
-            <Content src={&post} />
-            {
-                if author_is_me(&post.as_ref().author, &base_data.login) || (post.local && base_data.is_site_admin()) {
-                    Some(render::rsx! {
-                        <p>
-                            <a href={format!("/posts/{}/delete", post_id)}>{lang.tr("delete", None)}</a>
-                        </p>
-                    })
-                } else {
-                    None
-                }
-            }
+            </div>
             <div>
                 <h2>{lang.tr("comments", None)}</h2>
                 {
-- 
2.29.2

Using a background color here feels out of place somehow, but I do like
the idea of improving visual distinction for comments & post content.

Just pushed an attempt at doing this more subtly, what do you think?