YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-16 03:12:13 +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();
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 />
<PersonalStatistics user={currentUser} />
<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" />
</IconButton>
<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 />
</div>
</Drawer>

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

@ -5,11 +5,12 @@ import useResponsiveWidth from "@/hooks/useResponsiveWidth";
import NavigationDrawer from "./NavigationDrawer";
interface Props {
className?: string;
children?: React.ReactNode;
}
const MobileHeader = (props: Props) => {
const { children } = props;
const { className, children } = props;
const { sm } = useResponsiveWidth();
const [titleText] = useState("Memos");
const { y: offsetTop } = useWindowScroll();
@ -18,7 +19,8 @@ const MobileHeader = (props: Props) => {
<div
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",
offsetTop > 0 && "shadow-md"
offsetTop > 0 && "shadow-md",
className
)}
>
<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 (
<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)]")}>
<MobileHeader>{!md && <HomeSidebarDrawer />}</MobileHeader>
<div className="w-full px-4 sm:px-6 md:pr-2">
<MobileHeader className="sm:px-0">{!md && <HomeSidebarDrawer />}</MobileHeader>
<div className="w-full px-4 sm:px-0">
<MemoEditor className="mb-2" cacheKey="home-memo-editor" />
<div className="flex flex-col justify-start items-start w-full max-w-full pb-28">
<MemoFilter />