YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: tweak responsible styles

Browse Source
This commit is contained in:
Steven
2023-12-19 08:41:41 +08:00
parent fe4ec0b156
commit a3a1bbe8de
16 changed files with 411 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
store/db/sqlite/seed/10002__memo.sql
View File

@ -20,8 +20,7 @@ VALUES
'#TODO
- [x] Take more photos about **🌄 sunset**;
- [x] Clean the room;
- [ ] Read *📖 The Little Prince*;
(👆 click to toggle status)',
- [ ] Read *📖 The Little Prince*;',
101,
'PROTECTED'
);

1
web/src/components/MemoEditor/index.tsx
View File

@ -72,7 +72,6 @@ const MemoEditor = (props: Props) => {
useEffect(() => {
editorRef.current?.setContent(contentCache || "");
handleEditorFocus();
}, []);
useEffect(() => {

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

@ -1,4 +1,6 @@
import classNames from "classnames";
import { useState } from "react";
import { useWindowScroll } from "react-use";
import useResponsiveWidth from "@/hooks/useResponsiveWidth";
import NavigationDrawer from "./NavigationDrawer";
@ -10,9 +12,15 @@ const MobileHeader = (props: Props) => {
const { children } = props;
const { sm } = useResponsiveWidth();
const [titleText] = useState("MEMOS");
const { y: offsetTop } = useWindowScroll();
return (
<div className="sticky top-0 pt-4 sm:pt-1 pb-1 mb-1 backdrop-blur flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
<div
className={classNames(
"sticky top-0 pt-4 sm:pt-1 px-4 pb-1 mb-1 backdrop-blur flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2",
offsetTop > 0 && "shadow-md"
)}
>
<div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
{!sm && <NavigationDrawer />}
<span

2
web/src/css/global.css
View File

@ -1,5 +1,5 @@
body {
@apply text-base w-full min-h-full p-0 m-0 bg-zinc-100 dark:bg-zinc-800;
@apply text-base w-full min-h-[100svh] p-0 m-0 bg-zinc-100 dark:bg-zinc-800;
}
#root {

2
web/src/layouts/Root.tsx
View File

@ -13,7 +13,7 @@ function Root() {
<Navigation />
</div>
)}
<main className="w-full sm:px-4 h-auto flex-grow shrink flex flex-col justify-start items-center">
<main className="w-full h-auto flex-grow shrink flex flex-col justify-start items-center">
<Outlet />
</main>
</div>

4
web/src/pages/Archived.tsx
View File

@ -30,8 +30,9 @@ const Archived = () => {
}, [memos]);
return (
<section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8">
<section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-start sm:pt-4 pb-8">
<MobileHeader />
<div className="w-full px-4">
{loadingState.isLoading ? (
<div className="w-full h-32 flex flex-col justify-center items-center">
<p className="opacity-70">{t("memo.fetching-data")}</p>
@ -48,6 +49,7 @@ const Archived = () => {
))}
</div>
)}
</div>
</section>
);
};

4
web/src/pages/Explore.tsx
View File

@ -54,9 +54,9 @@ const Explore = () => {
};
return (
<section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8">
<section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
<MobileHeader />
<div className="relative w-full h-auto flex flex-col justify-start items-start">
<div className="relative w-full h-auto flex flex-col justify-start items-start px-4">
<MemoFilter />
{sortedMemos.map((memo) => (
<Memo key={memo.id} memo={memo} lazyRendering showCreator showParent />

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

@ -9,14 +9,16 @@ const Home = () => {
const { md } = useResponsiveWidth();
return (
<div className="w-full flex flex-row justify-center items-start">
<div className="w-full px-4 max-w-3xl sm:px-2 sm:pt-4">
<div className="w-full max-w-4xl flex flex-row justify-center items-start">
<div className="w-full sm:pt-4">
<MobileHeader>{!md && <HomeSidebarDrawer />}</MobileHeader>
<div className="w-full px-4 md:pr-2">
<MemoEditor className="mb-2" cacheKey="home-memo-editor" />
<MemoList />
</div>
</div>
{md && (
<div className="hidden md:block sticky top-0 left-0 w-56">
<div className="hidden md:block sticky top-0 left-0 shrink-0 w-56">
<HomeSidebar />
</div>
)}

4
web/src/pages/Inboxes.tsx
View File

@ -20,8 +20,9 @@ const Inboxes = () => {
}, []);
return (
<section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8">
<section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
<MobileHeader />
<div className="w-full px-4">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
<div className="relative w-full flex flex-row justify-between items-center">
<p className="px-2 py-1 flex flex-row justify-start items-center select-none opacity-80">
@ -47,6 +48,7 @@ const Inboxes = () => {
</div>
</div>
</div>
</div>
</section>
);
};

4
web/src/pages/MemoDetail.tsx
View File

@ -110,8 +110,9 @@ const MemoDetail = () => {
};
return (
<section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8">
<section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
<MobileHeader />
<div className="w-full px-4">
<div className="relative flex-grow w-full min-h-full flex flex-col justify-start items-start border dark:border-zinc-700 bg-white dark:bg-zinc-700 shadow hover:shadow-xl transition-all p-4 pb-3 rounded-lg">
{memo.parent && (
<div className="w-auto mb-2">
@ -220,6 +221,7 @@ const MemoDetail = () => {
)}
</div>
</div>
</div>
</section>
);
};

4
web/src/pages/Resources.tsx
View File

@ -66,8 +66,9 @@ const Resources = () => {
};
return (
<section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8">
<section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
<MobileHeader />
<div className="w-full px-4">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
<div className="relative w-full flex flex-row justify-between items-center">
<p className="px-2 py-1 flex flex-row justify-start items-center select-none opacity-80">
@ -168,6 +169,7 @@ const Resources = () => {
)}
</div>
</div>
</div>
</section>
);
};

4
web/src/pages/Setting.tsx
View File

@ -42,8 +42,9 @@ const Setting = () => {
};
return (
<section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8">
<section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-start sm:pt-4 pb-8">
<MobileHeader />
<div className="w-full px-4">
<div className="setting-page-wrapper">
<div className="section-selector-container">
<span className="section-title">{t("common.basic")}</span>
@ -120,6 +121,7 @@ const Setting = () => {
) : null}
</div>
</div>
</div>
</section>
);
};

2
web/src/pages/SignIn.tsx
View File

@ -104,7 +104,7 @@ const SignIn = () => {
};
return (
<div className="pt-12 pb-8 w-80 max-w-full h-auto mx-auto flex flex-col justify-start items-center">
<div className="py-8 w-80 max-w-full min-h-[100svh] mx-auto flex flex-col justify-start items-center">
<div className="w-full py-4 grow flex flex-col justify-center items-center">
<div className="w-full flex flex-row justify-center items-center mb-6">
<img className="h-14 w-auto rounded-full shadow" src={systemStatus.customizedProfile.logoUrl} alt="" />

2
web/src/pages/SignUp.tsx
View File

@ -70,7 +70,7 @@ const SignUp = () => {
};
return (
<div className="pt-12 pb-8 w-80 max-w-full h-auto mx-auto flex flex-col justify-start items-center">
<div className="py-8 w-80 max-w-full min-h-[100svh] mx-auto flex flex-col justify-start items-center">
<div className="w-full py-4 grow flex flex-col justify-center items-center">
<div className="w-full flex flex-row justify-center items-center mb-6">
<img className="h-14 w-auto rounded-full shadow" src={systemStatus.customizedProfile.logoUrl} alt="" />

4
web/src/pages/Timeline.tsx
View File

@ -64,8 +64,9 @@ const Timeline = () => {
};
return (
<section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8">
<section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
<MobileHeader />
<div className="w-full px-4">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
<div className="relative w-full flex flex-row justify-start items-center">
<p
@ -134,6 +135,7 @@ const Timeline = () => {
</div>
</div>
</div>
</div>
</section>
);
};

12
web/src/pages/UserProfile.tsx
View File

@ -35,28 +35,20 @@ const UserProfile = () => {
}, [params.username]);
return (
<section className="relative top-0 w-full min-h-full overflow-x-hidden">
<section className="w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
<MobileHeader />
<div className="relative w-full min-h-full mx-auto flex flex-col justify-start items-center">
<div className="w-full px-4 flex flex-col justify-start items-center">
{!loadingState.isLoading &&
(user ? (
<>
<div className="relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4">
<div className="w-full flex flex-row justify-start items-start">
<div className="flex-grow shrink w-full">
<div className="w-full flex flex-col justify-start items-center py-8">
<UserAvatar className="!w-20 !h-20 mb-2 drop-shadow" avatarUrl={user?.avatarUrl} />
<p className="text-3xl text-black opacity-80 dark:text-gray-200">{user?.nickname}</p>
</div>
<MemoList />
</div>
</div>
</div>
</>
) : (
<>
<p>Not found</p>
</>
))}
</div>
</section>