From bbd5fe4eb219faabd92970081208b6bcfbfd963f Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Fri, 16 Dec 2022 22:41:12 +0800
Subject: [PATCH] feat: remove sticky style for memo editor (#752)

---
 web/src/components/MemoFilter.tsx  | 2 +-
 web/src/components/MemosHeader.tsx | 2 +-
 web/src/less/home.less             | 2 +-
 web/src/less/memo-filter.less      | 6 +-----
 web/src/less/memo-list.less        | 6 +-----
 web/src/less/memos-header.less     | 3 +--
 web/src/less/search-bar.less       | 2 +-
 web/src/pages/Home.tsx             | 2 +-
 8 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/web/src/components/MemoFilter.tsx b/web/src/components/MemoFilter.tsx
index ff497aef..16a6de28 100644
--- a/web/src/components/MemoFilter.tsx
+++ b/web/src/components/MemoFilter.tsx
@@ -16,7 +16,7 @@ const MemoFilter = () => {
 
   return (
     <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
         className={"filter-item-container " + (shortcut ? "" : "!hidden")}
         onClick={() => {
diff --git a/web/src/components/MemosHeader.tsx b/web/src/components/MemosHeader.tsx
index 124e84bb..303022d9 100644
--- a/web/src/components/MemosHeader.tsx
+++ b/web/src/components/MemosHeader.tsx
@@ -36,7 +36,7 @@ const MemosHeader = () => {
   }, []);
 
   return (
-    <div className="section-header-container memos-header-container">
+    <div className="memos-header-container">
       <div className="title-container">
         <div className="action-btn" onClick={() => toggleSidebar(true)}>
           <Icon.Menu className="icon-img" />
diff --git a/web/src/less/home.less b/web/src/less/home.less
index 59d0f906..5843104a 100644
--- a/web/src/less/home.less
+++ b/web/src/less/home.less
@@ -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;
 
       > .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 {
diff --git a/web/src/less/memo-filter.less b/web/src/less/memo-filter.less
index 12107e4f..d300dfa2 100644
--- a/web/src/less/memo-filter.less
+++ b/web/src/less/memo-filter.less
@@ -1,9 +1,5 @@
 .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;
-
-  > .tip-text {
-    @apply mr-2;
-  }
+  @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;
 
   > .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;
diff --git a/web/src/less/memo-list.less b/web/src/less/memo-list.less
index 9ba16f5e..f800ae70 100644
--- a/web/src/less/memo-list.less
+++ b/web/src/less/memo-list.less
@@ -1,5 +1,5 @@
 .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 {
     @apply flex flex-col justify-start items-center w-full my-6;
@@ -12,8 +12,4 @@
       @apply text-sm text-gray-400 italic;
     }
   }
-
-  &.completed {
-    @apply pb-16;
-  }
 }
diff --git a/web/src/less/memos-header.less b/web/src/less/memos-header.less
index 1a230849..eb8a6165 100644
--- a/web/src/less/memos-header.less
+++ b/web/src/less/memos-header.less
@@ -1,6 +1,5 @@
-.section-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 {
     @apply flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden;
diff --git a/web/src/less/search-bar.less b/web/src/less/search-bar.less
index 06a67a64..73491964 100644
--- a/web/src/less/search-bar.less
+++ b/web/src/less/search-bar.less
@@ -25,7 +25,7 @@
 
     > .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;
-      box-shadow: 0 0 8px 0 rgb(0 0 0 / 40%);
+      box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);
 
       > .title-text {
         @apply text-gray-600 dark:text-gray-400 text-xs;
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index b71f63b5..e302be4a 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -41,8 +41,8 @@ function Home() {
       <div className="page-container">
         <Sidebar />
         <main className="memos-wrapper">
+          <MemosHeader />
           <div className="memos-editor-wrapper">
-            <MemosHeader />
             {!userService.isVisitorMode() && <MemoEditor />}
             <MemoFilter />
           </div>