feat: remove sticky style for memo editor (#752)

pull/754/head
boojack 3 years ago committed by GitHub
parent 575a0610a3
commit bbd5fe4eb2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -16,7 +16,7 @@ const MemoFilter = () => {
return ( return (
<div className={`filter-query-container ${showFilter ? "" : "!hidden"}`}> <div className={`filter-query-container ${showFilter ? "" : "!hidden"}`}>
<span className="tip-text">{t("common.filter")}:</span> <span className="mx-2 text-gray-400">{t("common.filter")}:</span>
<div <div
className={"filter-item-container " + (shortcut ? "" : "!hidden")} className={"filter-item-container " + (shortcut ? "" : "!hidden")}
onClick={() => { onClick={() => {

@ -36,7 +36,7 @@ const MemosHeader = () => {
}, []); }, []);
return ( return (
<div className="section-header-container memos-header-container"> <div className="memos-header-container">
<div className="title-container"> <div className="title-container">
<div className="action-btn" onClick={() => toggleSidebar(true)}> <div className="action-btn" onClick={() => toggleSidebar(true)}>
<Icon.Menu className="icon-img" /> <Icon.Menu className="icon-img" />

@ -16,7 +16,7 @@
@apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6; @apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6;
> .memos-editor-wrapper { > .memos-editor-wrapper {
@apply sticky top-0 w-full h-full flex flex-col justify-start items-start z-10 bg-zinc-100 dark:bg-zinc-800; @apply w-full h-auto flex flex-col justify-start items-start bg-zinc-100 dark:bg-zinc-800;
} }
> .addition-btn-container { > .addition-btn-container {

@ -1,9 +1,5 @@
.filter-query-container { .filter-query-container {
@apply flex flex-row justify-start items-start w-full flex-wrap p-2 pb-1 text-sm font-mono leading-7 dark:text-gray-300; @apply flex flex-row justify-start items-start w-full flex-wrap px-2 pt-2 text-sm font-mono leading-7 dark:text-gray-300;
> .tip-text {
@apply mr-2;
}
> .filter-item-container { > .filter-item-container {
@apply flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through; @apply flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through;

@ -1,5 +1,5 @@
.memo-list-container { .memo-list-container {
@apply flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll !pb-36 hide-scrollbar; @apply flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll hide-scrollbar;
> .status-text-container { > .status-text-container {
@apply flex flex-col justify-start items-center w-full my-6; @apply flex flex-col justify-start items-center w-full my-6;
@ -12,8 +12,4 @@
@apply text-sm text-gray-400 italic; @apply text-sm text-gray-400 italic;
} }
} }
&.completed {
@apply pb-16;
}
} }

@ -1,6 +1,5 @@
.section-header-container,
.memos-header-container { .memos-header-container {
@apply sticky top-4 flex flex-row justify-between items-center w-full h-10 flex-nowrap mt-4 mb-2 shrink-0 z-10; @apply sticky top-0 pt-4 pb-1 mb-1 backdrop-blur-sm flex flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-10;
> .title-container { > .title-container {
@apply flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden; @apply flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden;

@ -25,7 +25,7 @@
> .quickly-action-container { > .quickly-action-container {
@apply flex flex-col justify-start items-start w-full bg-white dark:bg-zinc-700 px-4 py-3 rounded-lg; @apply flex flex-col justify-start items-start w-full bg-white dark:bg-zinc-700 px-4 py-3 rounded-lg;
box-shadow: 0 0 8px 0 rgb(0 0 0 / 40%); box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);
> .title-text { > .title-text {
@apply text-gray-600 dark:text-gray-400 text-xs; @apply text-gray-600 dark:text-gray-400 text-xs;

@ -41,8 +41,8 @@ function Home() {
<div className="page-container"> <div className="page-container">
<Sidebar /> <Sidebar />
<main className="memos-wrapper"> <main className="memos-wrapper">
<MemosHeader />
<div className="memos-editor-wrapper"> <div className="memos-editor-wrapper">
<MemosHeader />
{!userService.isVisitorMode() && <MemoEditor />} {!userService.isVisitorMode() && <MemoEditor />}
<MemoFilter /> <MemoFilter />
</div> </div>

Loading…
Cancel
Save