neki/Enshi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some improvements to visuals

Browse Source
This commit is contained in:
Max 2025-02-04 22:05:00 +03:00
parent c0dcbcf2c5
commit ee24349680
6 changed files with 55 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
enshi/src/Components/ArticleViewer/ArticleViewer.tsx
View File

@ -1,4 +1,4 @@
import { Box, Container, Flex, Separator, Text } from "@radix-ui/themes"; import { Box, Flex, ScrollArea, Separator, Text } from "@radix-ui/themes";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { Interweave } from "interweave"; import { Interweave } from "interweave";
import { useAtomValue } from "jotai"; import { useAtomValue } from "jotai";
@ -35,48 +35,42 @@ export default function ArticleViewer(props: TArticleViewer) {
if (isPending) return <SkeletonPostLoader />; if (isPending) return <SkeletonPostLoader />;
return ( return (
<> <ScrollArea className="p-0 mx-auto overflow-hidden ql-editor max-w-pc-width">
<Container size={"3"}> <Flex direction={"column"} className="overflow-hidden">
<div className="ql-snow ql-editor"> <Text className="mb-2" as="div" size={"9"}>
<Container size={"2"} className="mt-0"> {data.title}
<Flex direction={"column"}> </Text>
<Text className="mb-2" as="div" size={"9"}> <Flex
{data.title} gap={"3"}
</Text> className="items-center mt-4 mb-2 overflow-hidden align-baseline"
<Flex >
gap={"3"} <Flex gap={"1"}>
className="items-center mt-4 mb-2 align-baseline" <VoteButton
> vote={UPVOTE}
<Flex gap={"1"}> postId={queryParams["postId"] || ""}
<VoteButton />
vote={UPVOTE}
postId={queryParams["postId"] || ""}
/>
<VoteCounter <VoteCounter postId={queryParams["postId"] || ""} />
postId={queryParams["postId"] || ""}
/>
<VoteButton <VoteButton
vote={DOWNVOTE} vote={DOWNVOTE}
postId={queryParams["postId"] || ""} postId={queryParams["postId"] || ""}
/> />
</Flex>
<Box hidden={data.user_id != user?.id}>
<ChangePostButton
postId={queryParams["postId"] || ""}
/>
</Box>
{user ? <AddPostToBlogDialog /> : null}
</Flex>
</Flex> </Flex>
<Separator size={"4"} className="mb-2" />
<Interweave content={data.content} /> <Box hidden={data.user_id != user?.id}>
</Container> <ChangePostButton
</div> postId={queryParams["postId"] || ""}
</Container> />
</> </Box>
{user ? <AddPostToBlogDialog /> : null}
</Flex>
</Flex>
<Separator size={"4"} className="my-2" />
<Interweave content={data.content} />
</ScrollArea>
); );
} }

2
enshi/src/Components/NavBar/NavBar.tsx
View File

@ -6,7 +6,7 @@ import SearchField from "./SearchField/SearchField";
export default function NavBar() { export default function NavBar() {
return ( return (
<Flex className="justify-center w-full"> <Flex className="justify-center w-full">
<nav className="flex justify-center pt-2 pb-2 ml-4 mr-4 mb-4 mt-2 flex-[1] max-h-fit max-w-[70rem]"> <nav className="flex justify-center pt-2 pb-2 ml-4 mr-4 mb-4 mt-2 flex-[1] max-h-fit max-w-pc-width">
<CustomNavigationMenu /> <CustomNavigationMenu />
<SearchField /> <SearchField />

21
enshi/src/Pages/PostCreatorPage/PostCreatorPage.tsx
View File

@ -1,8 +1,8 @@
import { Box, Container, Flex } from "@radix-ui/themes"; import { Box, Container, Flex, ScrollArea } from "@radix-ui/themes";
import { useAtom, useSetAtom } from "jotai"; import { useAtom, useSetAtom } from "jotai";
import { import {
postCreationAtom, postCreationAtom,
postCreationTitleAtom postCreationTitleAtom,
} from "../../AtomStore/AtomStore"; } from "../../AtomStore/AtomStore";
import Editor from "../../Components/Editor/Editor"; import Editor from "../../Components/Editor/Editor";
import SubmitPostButton from "./SubmitPostButton/SubmitPostButton"; import SubmitPostButton from "./SubmitPostButton/SubmitPostButton";
@ -10,13 +10,12 @@ import SubmitPostButton from "./SubmitPostButton/SubmitPostButton";
export default function PostCreatorPage() { export default function PostCreatorPage() {
const [titleValue, setTitleValue] = useAtom(postCreationTitleAtom); const [titleValue, setTitleValue] = useAtom(postCreationTitleAtom);
const setContentValue = useSetAtom(postCreationAtom); const setContentValue = useSetAtom(postCreationAtom);
return ( return (
<> <>
<Box className="flex flex-col flex-1 overflow-hidden">
<Box className="flex flex-col flex-1"> <Flex gap={"4"} direction={"column"} className="justify-start overflow-hidden">
<Flex gap={"4"} direction={"column"} className="flex-[1]"> <Container>
<Container className="flex-[1]">
<input <input
placeholder={"Post title"} placeholder={"Post title"}
className="mb-2 border-0 border-b-[1px] className="mb-2 border-0 border-b-[1px]
@ -29,9 +28,11 @@ export default function PostCreatorPage() {
/> />
</Container> </Container>
<Container className="overflow-y-auto flex-grow-[100]"> <ScrollArea>
<Editor onChange={setContentValue} /> <Container>
</Container> <Editor onChange={setContentValue} />
</Container>
</ScrollArea>
<Box className="flex justify-center flex-[1] mb-4"> <Box className="flex justify-center flex-[1] mb-4">
<SubmitPostButton className="text-2xl rounded-full w-52" /> <SubmitPostButton className="text-2xl rounded-full w-52" />

4
enshi/src/index.css
View File

@ -10,6 +10,10 @@
} }
} }
:root {
--max-content-width: 70rem;
}
.radix-themes { .radix-themes {
--default-font-family: "Times New Roman"; ; --default-font-family: "Times New Roman"; ;

2
enshi/src/layout/ProfilePage/ProfilePage.tsx
View File

@ -8,7 +8,7 @@ export default function ProfilePage() {
className={` className={`
relative flex-col flex-1 gap-0 mx-4 relative flex-col flex-1 gap-0 mx-4
sm:flex-row sm:gap-4 sm:flex-row sm:gap-4
md:w-full md:min-w-[45rem] md:max-w-[70rem] md:mx-auto md:w-full md:min-w-[45rem] md:max-w-pc-width md:mx-auto
overflow-hidden overflow-hidden
`} `}
> >

3
enshi/tailwind.config.js
View File

@ -7,6 +7,9 @@ export default {
"primary-color": "var(--primary-color)", "primary-color": "var(--primary-color)",
"secondary-color": "var(--secondary-color)", "secondary-color": "var(--secondary-color)",
}, },
maxWidth: {
"pc-width": "var(--max-content-width)",
},
fontFamily: { fontFamily: {
'times': "Times New Roman" 'times': "Times New Roman"
}, },