Imbus/FrostByte
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Removal of replies, Styling and interface update of comments and commentsection

Browse source
This commit is contained in:
Hollgy 2024-03-22 13:30:32 +01:00
parent 39801dfbda
commit 84defa703e
4 changed files with 12 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
client-solid/src/Components/Buttons/Replies.tsx
View file

@ -1,22 +0,0 @@
import { JSXElement } from "solid-js";
import { ReplyIcon } from "../../Util/Icons";
import { Post } from "../../Util/api";
export default function ReplyButton({ post }: { post: Post }): JSXElement {
return (
<>
<div class="flex p-1">
<button
class="btn btn-xs hover:border-primary rounded-base"
aria-label="Show sign of engagement"
>
<ReplyIcon />
</button>
<span class="text-1xl countdown text-center pt-1.5 px-1.5">
<p style={{ "--value": 11 }}>{post.comments}</p>
</span>
</div>
</>
);
}

13
client-solid/src/Components/Comment.tsx
View file

@ -1,6 +1,7 @@
import { JSXElement } from "solid-js";
import { PublicComment } from "../Util/api";
import ReplyButton from "./Buttons/Reply";
interface CommentProps {
comment: PublicComment;
@ -15,14 +16,18 @@ interface CommentProps {
export function Comment({ comment }: CommentProps): JSXElement {
return (
<>
<div class="chat chat-start">
<div class="chat chat-start py-5">
<time class="text-xs opacity-50">{comment.created_at}</time>
</div>
<div class="chat-bubble">{comment.content}</div>
<div class="chat-">{comment.content}</div>
<div class="divider"></div>
<div class="chat chat-end">
<time class="text-xs opacity-50">Reply created_at</time>
<div class="chat-bubble">Replies to parent comment if any</div>
<div class="flex-col">
<time class="text-xs opacity-50 time-end">Reply created_at</time>
<div class="chat-end">Replies to parent comment if any</div>
</div>
</div>
<div class="divider divider-end"><ReplyButton/></div>
</>
);
}

6
client-solid/src/Components/Menu.tsx
View file

@ -23,12 +23,8 @@ export function Menu(): JSXElement {
const login_ctx = useContext(LoginContext)!;
return (
<Show when={login_ctx.loggedIn()}>
<ul class="menu space-y-2 rounded-box md:menu-horizontal md:space-x-2 md:space-y-0">
<MenuItem href="/">
<Home />
</MenuItem>
<ul class="menu menu-horizontal space-y-0 space-x-2 rounded-box md:space-x-5 md:space-y-0">
<MenuItem href="/new">
{/*Filter component for popular */}
<Plus />
</MenuItem>
</ul>

4
client-solid/src/Components/PostSegment.tsx
View file

@ -2,7 +2,7 @@ import { JSXElement, Show } from "solid-js";
import { Post } from "../Util/api";
import EngagementButton from "./Buttons/Engegament";
import ReplyButton from "./Buttons/Replies";
import CommentsBUtton from "./Buttons/CommentsButton";
import ReportButton from "./Buttons/Report";
import ToPostButton from "./Buttons/ToPost";
import RemovePostButton from "./Buttons/RemovePostButton";
@ -42,7 +42,7 @@ export function PostSegment({ post }: { post: Post }): JSXElement {
<div class="card-actions justify-between">
<div class="flex">
<EngagementButton post={post} />
<ReplyButton post={post} />
<CommentsBUtton post={post} />
</div>
<ToPostButton post={post} />
</div>