fix: layout height style

blinko-space · Nov 30, 2024 · c10a5ee · c10a5ee
1 parent 01380f0
commit c10a5ee
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "db-seed": "prisma db seed",
     "build-seed": "tsc -p tsconfig.seed.json",
     "db-reset": "prisma migrate dev reset",
-    "dev": "next dev -p 1112",
+    "dev": "next dev -p 1111",
     "dev:https": "ngrok http 1111",
     "build": "set NODE_ENV=production & next build",
     "vercel-build": "prisma generate && prisma migrate deploy && prisma db seed && next build",

diff --git a/src/components/BlinkoEditor/index.tsx b/src/components/BlinkoEditor/index.tsx
@@ -28,13 +28,12 @@ export const BlinkoEditor = observer(({ mode, onSended, onHeightChange }: IProps
       originFiles={!isCreateMode ? blinko.curSelectedNote?.attachments : []}
       content={isCreateMode ? blinko.noteContent! : blinko.curSelectedNote?.content!}
       onChange={v => {
-        if (v == '') {
-          onHeightChange?.(editorRef.current?.clientHeight < 90 ? editorRef.current?.clientHeight : 90)
-        } else {
-          onHeightChange?.(editorRef.current?.clientHeight ?? 90)
-        }
+        onHeightChange?.(editorRef.current?.clientHeight ?? 75)
         isCreateMode ? (blinko.noteContent = v) : (blinko.curSelectedNote!.content = v)
       }}
+      onHeightChange={() => {
+        onHeightChange?.(editorRef.current?.clientHeight ?? 75)
+      }}
       isSendLoading={blinko.upsertNote.loading.value}
       bottomSlot={
         isCreateMode ? <div className='text-xs text-ignore ml-2'>Drop to upload files</div> :

diff --git a/src/components/Common/Editor/index.tsx b/src/components/Common/Editor/index.tsx
@@ -39,6 +39,7 @@ type IProps = {
   mode: 'create' | 'edit',
   content: string,
   onChange?: (content: string) => void,
+  onHeightChange?: () => void,
   onSend?: (args: OnSendContentType) => Promise<any>,
   isSendLoading?: boolean,
   bottomSlot?: ReactElement<any, any>,
@@ -84,7 +85,7 @@ export const handleEditorKeyEvents = () => {
   })
 }
 
-const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot, originFiles, mode }: IProps) => {
+const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot, originFiles, mode, onHeightChange }: IProps) => {
   content = ProcessCodeBlocks(content)
   const [canSend, setCanSend] = useState(false)
   const [isWriting, setIsWriting] = useState(false)
@@ -375,6 +376,9 @@ const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot,
           onChange?.('')
           store.files = []
         }
+      }}
+      onKeyDown={e => {
+        onHeightChange?.()
       }}>
       <MDXEditor
         translation={(key, defaultValue) => {

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -209,8 +209,8 @@ export const CommonLayout = observer(({
         </header>
         {/* backdrop  */}
 
-        <ScrollArea onBottom={() => { }} className="flex h-[calc(100%_-_70px)] overflow-y-scroll scroll-container">
-          <div className="relative flex h-full w-full flex-col rounded-medium " >
+        <ScrollArea onBottom={() => {}} className="flex h-[calc(100%_-_70px)] overflow-y-scroll scroll-container">
+          <div className="relative flex h-full w-full flex-col rounded-medium layout-container" >
             {children}
           </div>
         </ScrollArea>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -12,14 +12,15 @@ import { ScrollArea } from '@/components/Common/ScrollArea';
 import { BlinkoCard } from '@/components/BlinkoCard';
 import { BaseStore } from '@/store/baseStore';
 import Webcam from "react-webcam";
+import { useMediaQuery } from 'usehooks-ts';
 
 const Home = observer(() => {
   const { t } = useTranslation();
+  const isPc = useMediaQuery('(min-width: 768px)')
   const blinko = RootStore.Get(BlinkoStore)
   blinko.useQuery(useRouter())
-
   const store = RootStore.Local(() => ({
-    editorHeight: 75,
+    editorHeight: 65,
     get showEditor() {
       return !blinko.noteListFilterConfig.isArchived
     },
@@ -30,9 +31,10 @@ const Home = observer(() => {
 
   return (
     <div className="md:p-0 relative h-full flex flex-col-reverse md:flex-col">
-
       {store.showEditor && <div className='px-2 md:px-6' >
-        <BlinkoEditor mode='create' key='create-key' onHeightChange={height => store.editorHeight = height} />
+        <BlinkoEditor mode='create' key='create-key' onHeightChange={height => {
+          store.editorHeight = height
+        }} />
       </div>}
       <div className='text-ignore flex items-center justify-center gap-1 w-full '>
         <Icon className={`text-ignore mt-2 mb-[-5px] transition-all ${blinko.noteList.isLoading ? 'h-[30px]' : 'h-0'}`} icon="eos-icons:three-dots-loading" width="40" height="40" />
@@ -47,7 +49,7 @@ const Home = observer(() => {
       {
         !blinko.noteList.isEmpty && <ScrollArea
           onBottom={() => blinko.onBottom()}
-          style={{ height: store.showEditor ? `calc(100vh - ${100 + store.editorHeight}px)` : '100vh' }}
+          style={{ height: store.showEditor ? `calc(100% - ${(isPc ? 60 : 0) + store.editorHeight}px)` : '100%' }}
           className={`px-2 mt-0 md:mt-6 md:px-6 w-full h-full transition-all scroll-area`}>
           <Masonry
             breakpointCols={{

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -2,19 +2,18 @@
 @tailwind components;
 @tailwind utilities;
 
-.bm-burger-button
- {
+.bm-burger-button {
   display: none;
 }
 
 .bm-menu-wrap {
   width: fit-content;
   height: 100%;
-  overflow: hidden!important;
+  overflow: hidden !important;
 }
 
 .bm-menu {
-  overflow: hidden!important;
+  overflow: hidden !important;
 }
 
 ::selection {
@@ -49,6 +48,11 @@
   margin-bottom: 10px;
 }
 
+/* Fix card height  */
+.layout-container>div {
+  height: 100%;
+}
+
 html,
 body {
   scroll-behavior: smooth;
@@ -73,22 +77,28 @@ body {
 .blinko-tag {
   margin-right: 4px;
   margin-left: 4px;
-  color: var(--tag)!important;
-  background: var(--tag-foreground)!important;
+  color: var(--tag) !important;
+  background: var(--tag-foreground) !important;
   border-radius: 7px;
   font-size: 13px;
   padding: 3px;
-  text-decoration: none!important;
+  text-decoration: none !important;
 }
 
 .contextmenu {
-  padding: 2px!important;;
-  padding-top: 6px!important;;
-  padding-bottom: 6px!important;;
-  box-shadow: var(--shadow)!important;;
-  border-radius: 17px!important;;
-  border: 2px solid var(--desc)!important;;
-  background-color: var(--background)!important;
+  padding: 2px !important;
+  ;
+  padding-top: 6px !important;
+  ;
+  padding-bottom: 6px !important;
+  ;
+  box-shadow: var(--shadow) !important;
+  ;
+  border-radius: 17px !important;
+  ;
+  border: 2px solid var(--desc) !important;
+  ;
+  background-color: var(--background) !important;
 }
 
 .contextmenu .contextmenu__item {
@@ -98,7 +108,7 @@ body {
 }
 
 .contextmenu .contextmenu__item:hover {
-  background-color: var(--sencondbackground)!important;
+  background-color: var(--sencondbackground) !important;
 }
 
 #__next {
@@ -111,14 +121,14 @@ body {
   }
 }
 
-.swiper-3d .swiper-slide-shadow{
-  background: var(--swiper-3d-shadow)!important;
+.swiper-3d .swiper-slide-shadow {
+  background: var(--swiper-3d-shadow) !important;
 }
 
 
 @layer base {
   :root {
-    --swiper-3d-shadow: rgba(0,0,0,.15);
+    --swiper-3d-shadow: rgba(0, 0, 0, .15);
     --background: hsl(0 0% 100%);
     --foreground: hsl(222.2 47.4% 11.2%);
     --sencondbackground: #f8f8f8;
@@ -253,10 +263,10 @@ body {
 }
 
 .hide-scrollbar {
-  -ms-overflow-style: none;  
-  scrollbar-width: none;  
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
 .hide-scrollbar::-webkit-scrollbar {
-  display: none;   
+  display: none;
 }