~vpzom/hitide

c754ef892c49134efc5ea65a75dc8284bab5ff85 — Colin Reeder 28 days ago 59ef6b9
Style changes to better distinguish posts & comments

- Add a border around post content
- Make comment action links smaller and gray
- Use <div> instead of <p> around content, as <p> cannot be nested
- Change <p> style to only have bottom margin
- Add a bit more spacing in a few places
3 files changed, 34 insertions(+), 7 deletions(-)

M res/main.css
M src/components/mod.rs
M src/routes/posts.rs
M res/main.css => res/main.css +22 -0
@@ 33,6 33,12 @@ body {
.actionList > * {
	margin-right: .5em;
}
.actionList.small {
	font-size: .8em;
}
.actionList.small > a {
	color: #444;
}

.siteName {
	font-weight: bold;


@@ 95,6 101,12 @@ body {
	cursor: pointer;
}

.postContent {
	border: 1px solid #0d47a1;
	border-radius: .5em;
	padding: .5em;
}

.votebox {
	float: left;
	margin-right: .5em;


@@ 102,6 114,11 @@ body {

.comment > .content {
	overflow-x: auto;
	margin-bottom: 1em;
}
.commentContent {
	margin-top: .5em;
	margin-bottom: .5em;
}

.commentList {


@@ 134,6 151,11 @@ textarea {
	height: 7em;
}

p {
	margin-top: 0;
	margin-bottom: 16px;
}

@media (max-width: 768px) {
	.communitySidebar {
		display: none; /* TODO still show this somewhere */

M src/components/mod.rs => src/components/mod.rs +8 -6
@@ 52,7 52,9 @@ pub fn Comment<'a>(
                    {" "}
                    <TimeAgo since={chrono::DateTime::parse_from_rfc3339(&comment.created).unwrap()} lang />
                </small>
                <Content src={comment} />
                <div class={"commentContent"}>
                    <Content src={comment} />
                </div>
                {
                    comment.attachments.iter().map(|attachment| {
                        let href = &attachment.url;


@@ 66,7 68,7 @@ pub fn Comment<'a>(
                    })
                    .collect::<Vec<_>>()
                }
                <div class={"actionList"}>
                <div class={"actionList small"}>
                    {
                        if base_data.login.is_some() {
                            Some(render::rsx! {


@@ 201,15 203,15 @@ impl<'a, T: HavingContent + 'a> render::Render for Content<'a, T> {
        match self.src.content_html() {
            Some(html) => {
                let cleaned = ammonia::clean(&html);
                writer.write_str("<p>")?;
                writer.write_str("<div>")?;
                render::raw!(cleaned.as_ref()).render_into(writer)?;
                writer.write_str("</p>")?;
                writer.write_str("</div>")?;
            }
            None => {
                if let Some(text) = self.src.content_text() {
                    writer.write_str("<p>")?;
                    writer.write_str("<div>")?;
                    text.render_into(writer)?;
                    writer.write_str("</p>")?;
                    writer.write_str("</div>")?;
                }
            }
        }

M src/routes/posts.rs => src/routes/posts.rs +4 -1
@@ 145,6 145,7 @@ async fn page_post_inner(
                    }
                }
            </div>
            <br />
            <p>
                {lang.tr("submitted", None)}
                {" "}<TimeAgo since={chrono::DateTime::parse_from_rfc3339(&post.as_ref().created)?} lang={&lang} />


@@ 161,7 162,9 @@ async fn page_post_inner(
                    }
                }
            }
            <Content src={&post} />
            <div class={"postContent"}>
                <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! {