chore: tweak padding styles

This commit is contained in:
Steven 2023-12-19 23:09:57 +08:00
parent af68cae6ea
commit abc14217f6
13 changed files with 21 additions and 21 deletions

View File

@ -424,7 +424,7 @@ const MemoEditor = (props: Props) => {
onCompositionEnd={() => setIsInIME(false)}
>
<Editor ref={editorRef} {...editorConfig} />
<div className="relative w-full flex flex-row justify-between items-center pt-2 z-1">
<div className="relative w-full flex flex-row justify-between items-center pt-2">
<div className="flex flex-row justify-start items-center">
<TagSelector onTagSelectorClick={(tag) => handleTagSelectorClick(tag)} />
<IconButton

View File

@ -17,7 +17,7 @@ const MobileHeader = (props: Props) => {
return (
<div
className={classNames(
"sticky top-0 pt-4 sm:pt-1 px-4 pb-1 mb-1 bg-zinc-100 dark:bg-zinc-800 bg-opacity-80 backdrop-blur-lg flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2",
"sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-zinc-100 dark:bg-zinc-800 bg-opacity-80 backdrop-blur-lg flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-1",
offsetTop > 0 && "shadow-md"
)}
>

View File

@ -98,7 +98,7 @@ const Navigation = () => {
: [exploreNavLink, signInNavLink];
return (
<header className="w-full h-full overflow-auto flex flex-col justify-start items-start py-4 sm:pt-6 z-30">
<header className="w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30">
<UserBanner />
<div className="w-full px-1 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
{navLinks.map((navLink) => (

View File

@ -9,7 +9,7 @@ function Root() {
<div className="w-full min-h-full">
<div className="w-full sm:pl-56 md:pl-64 mx-auto flex flex-row justify-center items-start">
{sm && (
<div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-700 dark:bg-opacity-40 transition-all hover:shadow-xl">
<div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-700 dark:bg-opacity-40 transition-all hover:shadow-xl z-2">
<Navigation />
</div>
)}

View File

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

View File

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

View File

@ -10,7 +10,7 @@ const Home = () => {
return (
<div className="w-full max-w-5xl flex flex-row justify-center items-start">
<div className="w-full sm:pt-6">
<div className="w-full sm:pt-3 md:pt-6">
<MobileHeader>{!md && <HomeSidebarDrawer />}</MobileHeader>
<div className="w-full px-4 sm:px-6 md:pr-2">
<MemoEditor className="mb-2" cacheKey="home-memo-editor" />

View File

@ -20,9 +20,9 @@ const Inboxes = () => {
}, []);
return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4">
<div className="w-full px-4 sm:px-6">
<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">

View File

@ -110,9 +110,9 @@ const MemoDetail = () => {
};
return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4">
<div className="w-full px-4 sm:px-6">
<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">

View File

@ -66,9 +66,9 @@ const Resources = () => {
};
return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4">
<div className="w-full px-4 sm:px-6">
<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">

View File

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

View File

@ -64,9 +64,9 @@ const Timeline = () => {
};
return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4">
<div className="w-full px-4 sm:px-6">
<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

View File

@ -35,9 +35,9 @@ const UserProfile = () => {
}, [params.username]);
return (
<section className="w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
<section className="w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader />
<div className="w-full px-4 flex flex-col justify-start items-center">
<div className="w-full px-4 sm:px-6 flex flex-col justify-start items-center">
{!loadingState.isLoading &&
(user ? (
<>