diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6a1fe966..08902c81 100644
--- 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 (
-
{store.showEditor &&
- store.editorHeight = height} />
+ {
+ store.editorHeight = height
+ }} />
}
@@ -47,7 +49,7 @@ const Home = observer(() => {
{
!blinko.noteList.isEmpty && 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`}>
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;
}
\ No newline at end of file