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 padding styles

Browse Source
This commit is contained in:
Steven
2024-03-15 08:52:11 +08:00
parent 606a30640d
commit 0f48cfbb4e
5 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/components/MemoContent/index.tsx
View File

@ -69,7 +69,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
embeddedMemos: embeddedMemos || new Set(),
}}
>
<div className={`mt-1 w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-300 ${className || ""}`}>
<div className={`w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-300 ${className || ""}`}>
<div
ref={memoContentContainerRef}
className={classNames(
@ -89,19 +89,19 @@ const MemoContent: React.FC<Props> = (props: Props) => {
return <Renderer key={`${node.type}-${index}`} index={String(index)} node={node} />;
})}
</div>
{memo && showCompactMode && (
<div className="w-full mt-1">
<div
className="w-auto inline-flex flex-row justify-start items-center cursor-pointer text-sm text-blue-600 dark:text-blue-400 hover:opacity-80"
onClick={() => setShowCompactMode(false)}
>
<span>{t("memo.show-more")}</span>
<Icon.ChevronRight className="w-4 h-auto" />
</div>
</div>
)}
</div>
</RendererContext.Provider>
{memo && showCompactMode && (
<div className="w-full mt-2">
<div
className="w-auto inline-flex flex-row justify-start items-center cursor-pointer text-sm text-blue-600 dark:text-blue-400 hover:opacity-80"
onClick={() => setShowCompactMode(false)}
>
<span>{t("memo.show-more")}</span>
<Icon.ChevronRight className="w-4 h-auto" />
</div>
</div>
)}
</>
);
};

2
web/src/components/MemoReactionListView.tsx
View File

@ -34,7 +34,7 @@ const MemoReactionListView = (props: Props) => {
return (
reactions.length > 0 && (
<div className="w-full mt-2 flex flex-row justify-start items-start flex-wrap gap-1 select-none">
<div className="w-full flex flex-row justify-start items-start flex-wrap gap-1 select-none">
{Array.from(reactionGroup).map(([reactionType, users]) => {
return <ReactionView key={`${reactionType.toString()} ${users.length}`} memo={memo} reactionType={reactionType} users={users} />;
})}

4
web/src/components/MemoRelationListView.tsx
View File

@ -37,7 +37,7 @@ const MemoRelationListView = (props: Props) => {
return (
<>
{referencingMemoList.length > 0 && (
<div className="w-full mt-2 flex flex-row justify-start items-center flex-wrap gap-2">
<div className="w-full flex flex-row justify-start items-center flex-wrap gap-2">
{referencingMemoList.map((memo) => {
return (
<div key={memo.name} className="block w-auto max-w-[50%]">
@ -57,7 +57,7 @@ const MemoRelationListView = (props: Props) => {
</div>
)}
{referencedMemoList.length > 0 && (
<div className="w-full mt-2 flex flex-row justify-start items-center flex-wrap gap-2">
<div className="w-full flex flex-row justify-start items-center flex-wrap gap-2">
{referencedMemoList.map((memo) => {
return (
<div key={memo.name} className="block w-auto max-w-[50%]">

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

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

@ -76,14 +76,14 @@ const MemoView: React.FC<Props> = (props: Props) => {
return (
<div
className={classNames(
"group relative flex flex-col justify-start items-start w-full px-4 pt-4 pb-3 mb-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700",
"group relative flex flex-col justify-start items-start w-full px-4 pt-4 pb-3 mb-2 gap-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700",
"memos-" + memo.id,
memo.pinned && props.showPinned && "border-gray-200 border dark:border-zinc-700",
className,
)}
ref={memoContainerRef}
>
<div className="w-full h-7 flex flex-row justify-between items-center mb-2 gap-2">
<div className="w-full h-7 flex flex-row justify-between items-center gap-2">
<div className="w-auto max-w-[calc(100%-8rem)] grow flex flex-row justify-start items-center">
{creator && (
<div className="w-full flex flex-row justify-start items-center">
@ -151,7 +151,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
/>
<MemoResourceListView resources={memo.resources} />
<div className="w-full flex flex-row justify-between items-center">
<div className="text-sm leading-6 text-gray-400 select-none">
<div className="text-sm leading-none text-gray-400 select-none">
<relative-time datetime={memo.displayTime?.toISOString()} tense="past" onClick={handleGotoMemoDetailPage}></relative-time>
</div>
</div>