yaha/memos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: daily review page style (#1332)

Browse Source
This commit is contained in:
boojack 2023-03-11 10:08:36 +08:00 committed by GitHub
parent a9218ed5f0
commit 7c92805aac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/components/Header.tsx
View File

@ -8,6 +8,7 @@ import showResourcesDialog from "./ResourcesDialog";
import showSettingDialog from "./SettingDialog";
import showAskAIDialog from "./AskAIDialog";
import showArchivedMemoDialog from "./ArchivedMemoDialog";
import showAboutSiteDialog from "./AboutSiteDialog";
import UserBanner from "./UserBanner";
const Header = () => {
@ -117,6 +118,28 @@ const Header = () => {
</button>
</>
)}
{isVisitorMode && (
<>
<NavLink
to="/auth"
className={({ isActive }) =>
`${
isActive && "bg-white dark:bg-zinc-700 shadow"
} px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
}
>
<>
<Icon.LogIn className="mr-4 w-6 h-auto opacity-80" /> {t("common.sign-in")}
</>
</NavLink>
<button
className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
onClick={() => showAboutSiteDialog()}
>
<Icon.CupSoda className="mr-4 w-6 h-auto opacity-80" /> {t("common.about")}
</button>
</>
)}
</div>
</header>
</div>

2
web/src/less/daily-memo.less
View File

@ -12,7 +12,7 @@
}
> .time-wrapper {
@apply mt-px mr-4 w-12 h-7 shrink-0 text-xs leading-6 text-center font-mono rounded-lg bg-gray-100 dark:bg-zinc-600 border-2 border-white dark:border-zinc-800 text-gray-600 dark:text-gray-300 z-10;
@apply mt-px mr-4 w-12 h-7 shrink-0 text-xs leading-6 text-center font-mono rounded-lg bg-gray-100 dark:bg-zinc-600 border-2 border-white dark:border-zinc-700 text-gray-600 dark:text-gray-300 z-10;
}
> .memo-container {

16
web/src/pages/DailyReview.tsx
View File

@ -63,7 +63,7 @@ const DailyReview = () => {
return (
<section className="w-full max-w-2xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
<MobileHeader showSearch={false} />
<div className="w-full flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700">
<div className="w-full 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 cursor-pointer select-none rounded hover:bg-gray-100 dark:hover:bg-zinc-700"
@ -92,27 +92,29 @@ const DailyReview = () => {
</button>
</div>
<DatePicker
className={`absolute top-8 bg-white mt-2 z-20 mx-auto border dark:border-zinc-800 rounded-lg mb-6 ${
className={`absolute top-8 mt-2 z-20 mx-auto border bg-white dark:border-zinc-800 rounded-lg mb-6 ${
showDatePicker ? "" : "!hidden"
}`}
datestamp={currentDateStamp}
handleDateStampChange={handleDataPickerChange}
/>
</div>
<div className="w-full h-auto flex flex-col justify-start items-start p-6 pb-0 bg-white dark:bg-zinc-800" ref={memosElRef}>
<div className="w-full h-auto flex flex-col justify-start items-start p-12 pt-26" ref={memosElRef}>
<div className="flex flex-col justify-center items-center mx-auto pb-6 select-none">
<div className="mx-auto font-bold text-gray-600 dark:text-gray-300 text-center leading-6 mb-2">{currentDate.getFullYear()}</div>
<div className="flex flex-col justify-center items-center m-auto w-24 h-24 shadow rounded-3xl">
<div className="flex flex-col justify-center items-center m-auto w-24 h-24 shadow rounded-3xl dark:bg-zinc-800">
<div className="text-center w-full leading-6 text-sm text-white bg-blue-700 rounded-t-3xl">
{monthChineseStrArray[currentDate.getMonth()]}
</div>
<div className="text-black text-4xl font-medium leading-12">{currentDate.getDate()}</div>
<div className="text-center w-full leading-6 -mt-2 text-xs">{weekdayChineseStrArray[currentDate.getDay()]}</div>
<div className="text-black dark:text-white text-4xl font-medium leading-12">{currentDate.getDate()}</div>
<div className="dark:text-gray-300 text-center w-full leading-6 -mt-2 text-xs">
{weekdayChineseStrArray[currentDate.getDay()]}
</div>
</div>
</div>
{dailyMemos.length === 0 ? (
<div className="mx-auto py-6 pb-12 px-0">
<p className="italic">{t("daily-review.oops-nothing")}</p>
<p className="italic text-gray-400">{t("daily-review.oops-nothing")}</p>
</div>
) : (
<div className="flex flex-col justify-start items-start w-full mt-2">