usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-03-09 20:13:46 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: tweak memo content styles

Browse source
This commit is contained in:
Steven 2024-03-14 00:01:33 +08:00
parent ded4da07a3
commit 2516431b20
2 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/components/MemoContent/index.tsx
View file

@ -70,11 +70,11 @@ const MemoContent: React.FC<Props> = (props: Props) => {
embeddedMemos: embeddedMemos || new Set(),
}}
>
<div className={`w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-300 ${className || ""}`}>
<div className={`mt-1 w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-300 ${className || ""}`}>
<div
ref={memoContentContainerRef}
className={classNames(
"w-full max-w-full word-break text-base leading-7 space-y-1 whitespace-pre-wrap",
"w-full max-w-full word-break text-base leading-6 space-y-2 whitespace-pre-wrap",
showCompactMode && "line-clamp-6",
)}
onClick={handleMemoContentClick}

10
web/src/components/MemoResourceListView.tsx
View file

@ -62,7 +62,7 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
if (resources.length === 1) {
return (
<div className="mt-2 max-w-full flex justify-center items-center border dark:border-zinc-800 rounded overflow-hidden hide-scrollbar hover:shadow-md">
<div className="mt-2 mb-1 max-w-full flex justify-center items-center border dark:border-zinc-800 rounded overflow-hidden hide-scrollbar hover:shadow-md">
<MediaCard resource={mediaResources[0]} />
</div>
);
@ -78,19 +78,19 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
));
if (resources.length === 2 || resources.length === 4) {
return <div className="w-full mt-2 grid gap-2 grid-cols-2">{cards}</div>;
return <div className="w-full mt-2 mb-1 grid gap-2 grid-cols-2">{cards}</div>;
}
return <div className="w-full mt-2 grid gap-2 grid-cols-2 sm:grid-cols-3">{cards}</div>;
return <div className="w-full mt-2 mb-1 grid gap-2 grid-cols-2 sm:grid-cols-3">{cards}</div>;
};
const OtherList = ({ resources = [] }: { resources: Resource[] }) => {
if (resources.length === 0) return <></>;
return (
<div className="w-full flex flex-row justify-start flex-wrap mt-2">
<div className="w-full flex flex-row justify-start flex-wrap mt-2 mb-1 gap-2">
{otherResources.map((resource) => (
<MemoResource key={resource.id} className="my-1 mr-2" resource={resource} />
<MemoResource key={resource.id} resource={resource} />
))}
</div>
);