fix: 🐛 修复网格模式在移动端上间隔过长的 bug

hymbz · Jul 3, 2024 · 933f65d · 933f65d
1 parent 81820ef
commit 933f65d
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 17 deletions.
diff --git a/src/components/Manga/components/ComicImg.module.css b/src/components/Manga/components/ComicImg.module.css
@@ -167,7 +167,7 @@
   overflow: auto;
   grid-auto-columns: unset;
   grid-auto-flow: row;
-  grid-auto-rows: calc(100% / 3);
+  grid-auto-rows: max-content;
   grid-row-gap: 1.5em;
   grid-template-rows: unset;
 
@@ -176,6 +176,7 @@
 
   & .img {
     transform: none;
+    overflow: unset;
     height: auto;
 
     & > img {

diff --git a/src/components/Manga/components/ComicImg.tsx b/src/components/Manga/components/ComicImg.tsx
@@ -3,9 +3,7 @@ import { createMemoMap } from 'helper/solidJs';
 
 import { store } from '../store';
 import {
-  activePage,
   getImgTip,
-  imgPageMap,
   imgShowState,
   isAbreastMode,
   abreastArea,
@@ -32,17 +30,6 @@ export const ComicImg: Component<ComicImg & { index: number }> = (img) => {
     'grid-area': () => (isAbreastMode() ? undefined : `_${img.index}`),
     '--width': () =>
       store.option.scrollMode.enabled ? `${img.size.width}px` : undefined,
-    'box-shadow'() {
-      if (!store.gridMode || !activePage().includes(img.index))
-        return undefined;
-
-      const page = store.pageList[imgPageMap()[img.index]].filter(
-        (i) => i !== -1,
-      );
-      const showState = page.length === 1 ? 2 : imgShowState()[img.index];
-      if (showState === 2) return '0 0 1em 0.5em var(--text-secondary)';
-      return `${showState ? -1 : 1}em 0 1em -0.5em var(--text-secondary)`;
-    },
   });
 
   /** 并排卷轴模式下需要复制的图片数量 */

diff --git a/src/components/Manga/components/ComicImgFlow.tsx b/src/components/Manga/components/ComicImgFlow.tsx
@@ -81,7 +81,11 @@ export const ComicImgFlow: Component = () => {
     if (store.pageList.length === 0) return undefined;
 
     if (store.gridMode) {
-      const columnNum = isOnePageMode() ? 5 : 3;
+      let columnNum: number;
+      if (store.isMobile) columnNum = 2;
+      else if (isOnePageMode()) columnNum = 4;
+      else columnNum = 2;
+
       const areaList: string[][] = [[]];
       for (const page of store.pageList) {
         if (areaList.at(-1)!.length === columnNum) areaList.push([]);
@@ -139,8 +143,7 @@ export const ComicImgFlow: Component = () => {
     },
     'grid-template-areas': gridAreas,
     'grid-template-columns'() {
-      if (store.imgList.length === 0) return undefined;
-      if (store.gridMode) return `repeat(${isOnePageMode() ? 10 : 6}, 1fr)`;
+      if (store.imgList.length === 0 || store.gridMode) return undefined;
       if (store.page.vertical) return '50% 50%';
       if (isAbreastMode())
         return `repeat(${abreastArea().columns.length}, ${abreastColumnWidth()}px)`;