usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-01 01:58:14 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: fix memo container max width

Browse source
This commit is contained in:
Steven 2023-10-13 23:26:56 +08:00
parent ed2e299797
commit 20e5597104
7 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web/src/components/HomeSidebar.tsx
View file

@ -9,18 +9,18 @@ const HomeSidebar = () => {
return (
<div
className={`fixed md:sticky top-0 left-0 w-full md:w-56 h-full shrink-0 pointer-events-none md:pointer-events-auto z-10 ${
className={`fixed lg:sticky top-0 left-0 w-full lg:w-56 h-full shrink-0 pointer-events-none lg:pointer-events-auto z-10 ${
showHomeSidebar && "pointer-events-auto"
}`}
>
<div
className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 md:!hidden ${
className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 lg:!hidden ${
showHomeSidebar && "opacity-60 pointer-events-auto"
}`}
onClick={() => layoutStore.setHomeSidebarStatus(false)}
></div>
<aside
className={`absolute md:relative top-0 right-0 w-56 pr-2 md:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-zinc-100 dark:bg-zinc-800 md:bg-transparent md:shadow-none transition-all duration-300 translate-x-full md:translate-x-0 ${
className={`absolute lg:relative top-0 right-0 w-56 pr-2 lg:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-zinc-100 dark:bg-zinc-800 lg:bg-transparent lg:shadow-none transition-all duration-300 translate-x-full lg:translate-x-0 ${
showHomeSidebar && "!translate-x-0 shadow-2xl"
}`}
>

2
web/src/components/MobileHeader.tsx
View file

@ -12,7 +12,7 @@ const MobileHeader = (props: Props) => {
const [titleText] = useState("MEMOS");
return (
<div className="sticky top-0 pt-4 sm:pt-1 pb-1 mb-1 backdrop-blur bg-zinc-100 dark:bg-zinc-800 bg-opacity-70 flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
<div className="sticky top-0 pt-4 sm:pt-1 pb-1 mb-1 backdrop-blur bg-zinc-100 dark:bg-zinc-800 bg-opacity-70 flex lg:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
<div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
<div
className="flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0 bg-transparent"

6
web/src/labs/marked/parser/BlockLatex.tsx
View file

@ -25,7 +25,11 @@ const blockRenderer = (rawStr: string) => {
latexCode = matchResult[3];
}
return <TeX block={true}>{latexCode}</TeX>;
return (
<div className="w-full max-w-full overflow-x-auto">
<TeX block={true}>{latexCode}</TeX>
</div>
);
};
export default {

6
web/src/labs/marked/parser/InlineLatex.tsx
View file

@ -12,7 +12,11 @@ const inlineRenderer = (rawStr: string) => {
} else if (matchResult[2]) {
latexCode = matchResult[2];
}
return <TeX key={latexCode}>{latexCode}</TeX>;
return (
<div className="w-full max-w-full overflow-x-auto">
<TeX key={latexCode}>{latexCode}</TeX>
</div>
);
}
return rawStr;
};

2
web/src/pages/Archived.tsx
View file

@ -36,7 +36,7 @@ const Archived = () => {
}, [memos, textQuery]);
return (
<section className="w-full max-w-3xl min-h-full flex flex-col md:flex-row justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
<section className="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 bg-zinc-100 dark:bg-zinc-800">
<MobileHeader showSearch={false} />
<div className="archived-memo-page">
<MemoFilter />

2
web/src/pages/Home.tsx
View file

@ -7,7 +7,7 @@ import MobileHeader from "@/components/MobileHeader";
const Home = () => {
return (
<div className="w-full flex flex-row justify-start items-start">
<div className="flex-grow shrink w-auto px-4 sm:px-2 sm:pt-4">
<div className="grow shrink w-auto max-w-full px-4 lg:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
<MobileHeader />
<div className="w-full h-auto flex flex-col justify-start items-start bg-zinc-100 dark:bg-zinc-800 rounded-lg">
<MemoEditor className="mb-2" cacheKey="home-memo-editor" />

2
web/src/pages/Setting.tsx
View file

@ -43,7 +43,7 @@ const Setting = () => {
};
return (
<section className="w-full max-w-3xl min-h-full flex flex-col md:flex-row justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
<section className="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 bg-zinc-100 dark:bg-zinc-800">
<MobileHeader showSearch={false} />
<div className="setting-page-wrapper">
<div className="section-selector-container">