usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-01 10:07:59 +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 ( return (
<div <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" showHomeSidebar && "pointer-events-auto"
}`} }`}
> >
<div <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" showHomeSidebar && "opacity-60 pointer-events-auto"
}`} }`}
onClick={() => layoutStore.setHomeSidebarStatus(false)} onClick={() => layoutStore.setHomeSidebarStatus(false)}
></div> ></div>
<aside <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" 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"); const [titleText] = useState("MEMOS");
return ( 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 flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
<div <div
className="flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0 bg-transparent" 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]; 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 { export default {

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

@ -12,7 +12,11 @@ const inlineRenderer = (rawStr: string) => {
} else if (matchResult[2]) { } else if (matchResult[2]) {
latexCode = 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; return rawStr;
}; };

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

@ -36,7 +36,7 @@ const Archived = () => {
}, [memos, textQuery]); }, [memos, textQuery]);
return ( 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} /> <MobileHeader showSearch={false} />
<div className="archived-memo-page"> <div className="archived-memo-page">
<MemoFilter /> <MemoFilter />

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

@ -7,7 +7,7 @@ import MobileHeader from "@/components/MobileHeader";
const Home = () => { const Home = () => {
return ( return (
<div className="w-full flex flex-row justify-start items-start"> <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 /> <MobileHeader />
<div className="w-full h-auto flex flex-col justify-start items-start bg-zinc-100 dark:bg-zinc-800 rounded-lg"> <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" /> <MemoEditor className="mb-2" cacheKey="home-memo-editor" />

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

@ -43,7 +43,7 @@ const Setting = () => {
}; };
return ( 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} /> <MobileHeader showSearch={false} />
<div className="setting-page-wrapper"> <div className="setting-page-wrapper">
<div className="section-selector-container"> <div className="section-selector-container">