YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-19 12:50:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: update home padding styles

Browse Source
This commit is contained in:
Steven 2024-01-04 22:50:46 +08:00
parent d7ed59581c
commit 6320d042c8
4 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/HomeSidebar.tsx
View File

@ -7,7 +7,7 @@ const HomeSidebar = () => {
const currentUser = useCurrentUser(); const currentUser = useCurrentUser();
return ( return (
<aside className="relative w-full px-4 h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 sm:pt-6"> <aside className="relative w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 sm:pt-6">
<SearchBar /> <SearchBar />
<PersonalStatistics user={currentUser} /> <PersonalStatistics user={currentUser} />
<TagList /> <TagList />

2
web/src/components/HomeSidebarDrawer.tsx
View File

@ -26,7 +26,7 @@ const HomeSidebarDrawer = () => {
<Icon.Search className="w-5 h-auto dark:text-gray-400" /> <Icon.Search className="w-5 h-auto dark:text-gray-400" />
</IconButton> </IconButton>
<Drawer anchor="right" size="sm" open={open} onClose={toggleDrawer(false)}> <Drawer anchor="right" size="sm" open={open} onClose={toggleDrawer(false)}>
<div className="w-full h-full px-1 bg-zinc-100 dark:bg-zinc-900"> <div className="w-full h-full px-5 bg-zinc-100 dark:bg-zinc-900">
<HomeSidebar /> <HomeSidebar />
</div> </div>
</Drawer> </Drawer>

6
web/src/components/MobileHeader.tsx
View File

@ -5,11 +5,12 @@ import useResponsiveWidth from "@/hooks/useResponsiveWidth";
import NavigationDrawer from "./NavigationDrawer"; import NavigationDrawer from "./NavigationDrawer";
interface Props { interface Props {
className?: string;
children?: React.ReactNode; children?: React.ReactNode;
} }
const MobileHeader = (props: Props) => { const MobileHeader = (props: Props) => {
const { children } = props; const { className, children } = props;
const { sm } = useResponsiveWidth(); const { sm } = useResponsiveWidth();
const [titleText] = useState("Memos"); const [titleText] = useState("Memos");
const { y: offsetTop } = useWindowScroll(); const { y: offsetTop } = useWindowScroll();
@ -18,7 +19,8 @@ const MobileHeader = (props: Props) => {
<div <div
className={classNames( className={classNames(
"sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-zinc-100 dark:bg-zinc-900 bg-opacity-80 backdrop-blur-lg flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-1", "sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-zinc-100 dark:bg-zinc-900 bg-opacity-80 backdrop-blur-lg flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-1",
offsetTop > 0 && "shadow-md" offsetTop > 0 && "shadow-md",
className
)} )}
> >
<div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden"> <div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">

6
web/src/pages/Home.tsx
View File

@ -61,10 +61,10 @@ const Home = () => {
}; };
return ( return (
<div className="w-full max-w-5xl flex flex-row justify-center items-start"> <div className="w-full max-w-5xl sm:px-6 flex flex-row justify-center items-start sm:gap-6">
<div className={classNames("w-full sm:pt-3 md:pt-6", md && "max-w-[calc(100%-14rem)]")}> <div className={classNames("w-full sm:pt-3 md:pt-6", md && "max-w-[calc(100%-14rem)]")}>
<MobileHeader>{!md && <HomeSidebarDrawer />}</MobileHeader> <MobileHeader className="sm:px-0">{!md && <HomeSidebarDrawer />}</MobileHeader>
<div className="w-full px-4 sm:px-6 md:pr-2"> <div className="w-full px-4 sm:px-0">
<MemoEditor className="mb-2" cacheKey="home-memo-editor" /> <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
<div className="flex flex-col justify-start items-start w-full max-w-full pb-28"> <div className="flex flex-col justify-start items-start w-full max-w-full pb-28">
<MemoFilter /> <MemoFilter />