fix: fix scroll error

IronKinoko · Oct 29, 2020 · 2c4f9b0 · 2c4f9b0
1 parent e65b0c1
commit 2c4f9b0
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 50 deletions.
diff --git a/app/src/index/GalleryCard.tsx b/app/src/index/GalleryCard.tsx
@@ -36,53 +36,56 @@ function storageHistory(record: IndexListItemPorps) {
   )
 }
 
-const useMobileStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: { minHeight: 136 },
-    img: {
-      width: 95,
-      height: 136,
-    },
-    title: {
-      fontSize: '10pt',
-      overflow: 'hidden',
-      WebkitLineClamp: 3,
-      WebkitBoxOrient: 'vertical',
-      textOverflow: 'ellipsis',
-      display: '-webkit-box',
-    },
-    full: {
-      height: '100%',
-      width: '100%',
-    },
-    gutterBottom: { marginBottom: theme.spacing(0.5) },
-    content: { padding: theme.spacing(1) },
-    tagContent: {
-      margin: theme.spacing(1),
-      padding: 0,
-      overflow: 'hidden',
-      height: 19,
-    },
-    tag: {
-      display: 'inline-block',
-      fontWeight: 'bold',
-      padding: '1px 4px',
-      margin: '0 2px 5px 2px',
-      borderRadius: 5,
-      border:
-        theme.palette.type === 'dark' ? '1px solid #989898' : '1px solid #ddd',
-      background: theme.palette.type === 'dark' ? '#4f535b' : '',
-      color: theme.palette.type === 'dark' ? '#ddd' : '#666',
-    },
-    watched: {
-      color: theme.palette.type === 'dark' ? '#f1f1f1' : '#fff',
-      borderColor: fade('#1357df', 0.9),
-      background: fade('#1357df', 0.9),
-    },
-  })
+const useMobileStyles = makeStyles<Theme, { showTag: boolean }>(
+  (theme: Theme) =>
+    createStyles({
+      root: { minHeight: (props) => (props.showTag ? 171 : 136) },
+      img: {
+        width: 95,
+        height: 136,
+      },
+      title: {
+        fontSize: '10pt',
+        overflow: 'hidden',
+        WebkitLineClamp: 3,
+        WebkitBoxOrient: 'vertical',
+        textOverflow: 'ellipsis',
+        display: '-webkit-box',
+      },
+      full: {
+        height: '100%',
+        width: '100%',
+      },
+      gutterBottom: { marginBottom: theme.spacing(0.5) },
+      content: { padding: theme.spacing(1) },
+      tagContent: {
+        margin: theme.spacing(1),
+        padding: 0,
+        overflow: 'hidden',
+        height: 19,
+      },
+      tag: {
+        display: 'inline-block',
+        fontWeight: 'bold',
+        padding: '1px 4px',
+        margin: '0 2px 5px 2px',
+        borderRadius: 5,
+        border:
+          theme.palette.type === 'dark'
+            ? '1px solid #989898'
+            : '1px solid #ddd',
+        background: theme.palette.type === 'dark' ? '#4f535b' : '',
+        color: theme.palette.type === 'dark' ? '#ddd' : '#666',
+      },
+      watched: {
+        color: theme.palette.type === 'dark' ? '#f1f1f1' : '#fff',
+        borderColor: fade('#1357df', 0.9),
+        background: fade('#1357df', 0.9),
+      },
+    })
 )
 export const MobileLoadingCard = () => {
-  const classes = useMobileStyles()
+  const classes = useMobileStyles({ showTag: false })
 
   return (
     <Card className={classes.root}>
@@ -117,13 +120,13 @@ export const MobileLoadingCard = () => {
 export const MobileCard: React.FC<{ record: IndexListItemPorps }> = ({
   record,
 }) => {
-  const classes = useMobileStyles()
   const [config] = useGalleryConfig()
   const [inview, ref] = useInViewportWithDistance(600)
   const showTag =
-    config.showTag === 'watched'
+    (config.showTag === 'watched'
       ? /\/?watched/.test(Router.pathname)
-      : config.showTag
+      : config.showTag) && record.tags?.length > 0
+  const classes = useMobileStyles({ showTag })
   return (
     <Card className={classes.root} ref={ref}>
       {inview && (
@@ -206,7 +209,7 @@ export const MobileCard: React.FC<{ record: IndexListItemPorps }> = ({
                 </div>
               </Grid>
             </Grid>
-            {showTag && record.tags?.length > 0 && (
+            {showTag && (
               <ul className={classes.tagContent}>
                 {record.tags.map((o) => (
                   <li

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "e-hentai-view",
   "productName": "EhentaiView",
-  "version": "3.11.3",
+  "version": "3.11.4",
   "main": "server/src/app.js",
   "license": "MIT",
   "homepage": "https://exhentai.appspot.com",