Merge pull request #48 from ForFansubs/dev

Hata düzeltmeleri, tasarım güncellemeleri
ForFansubs · Jul 10, 2020 · 7ac626c · 7ac626c
2 parents 9b4a299 + a9daa2d
commit 7ac626c
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 98 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "forfansubsfront",
-  "version": "3.1.0hotfix1",
-  "private": true,
+  "version": "3.2.0",
+  "private": false,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-brands-svg-icons": "^5.13.0",

diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
@@ -1,14 +1,16 @@
 import React from 'react'
 import { useGlobal } from 'reactn'
 
-import { Box, makeStyles } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core'
 import Typography from '@material-ui/core/Typography'
 
 import FooterItems from '../../config/footer_items'
 
 const useStyles = makeStyles(theme => ({
     FooterInnerDiv: {
-        padding: `${theme.spacing(2)}px`
+        padding: `${theme.spacing(2)}px`,
+        display: "flex",
+        flexWrap: "wrap"
     },
     FooterAuthor: {
         color: theme.palette.grey["A200"],
@@ -28,20 +30,20 @@ export default function Footer() {
     return (
         <>
             <footer>
-                <Box className={classes.FooterInnerDiv}>
-                    <Typography variant="h6">
-                        {FooterItems.length !== 0 ?
-                            FooterItems.map((item, index) => {
-                                return (
-                                    <a key={item.title} href={item.link} rel="noopener noreferrer" target="_blank" className={classes.FooterItem}>
+                <div className={classes.FooterInnerDiv}>
+                    {FooterItems.length !== 0 ?
+                        FooterItems.map((item, index) => {
+                            return (
+                                <a key={item.title} href={item.link} rel="noopener noreferrer" target="_blank" className={classes.FooterItem}>
+                                    <Typography variant="h6">
                                         {item.title}
-                                    </a>
-                                )
-                            })
-                            :
-                            ""
-                        }
-                    </Typography>
+                                    </Typography>
+                                </a>
+                            )
+                        })
+                        :
+                        ""
+                    }
                     <Typography variant="subtitle1" className={classes.FooterAuthor}>
                         <a href="https://forfansubs.github.io/" rel="noopener noreferrer" target="_blank">
                             ForFansubs v{settings.version}
@@ -53,7 +55,7 @@ export default function Footer() {
                             aybertocarlos &copy; {(new Date()).getFullYear()}
                         </a>
                     </Typography>
-                </Box>
+                </div>
             </footer>
         </>
     )

diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -134,7 +134,9 @@ const useStyles = makeStyles(theme => ({
         },
         '& $iconContainer': {
             alignItems: "initial",
-            width: `${theme.spacing(6)}px`
+            width: `${theme.spacing(6)}px`,
+            maxWidth: `${theme.spacing(6)}px`,
+            minWidth: `${theme.spacing(6)}px`
         },
         [theme.breakpoints.up('sm')]: {
             width: drawerWidth,

diff --git a/src/components/index/index.js b/src/components/index/index.js
@@ -26,6 +26,44 @@ const useStyles = makeStyles(theme => ({
     },
     IndexHeader: {
         marginBottom: theme.spacing(2)
+    },
+    EpisodeContainer: {
+        display: "grid",
+        gridTemplateColumns: "repeat(8, 1fr)",
+        gridTemplateRows: "repeat(2, 1fr)",
+        gap: `${theme.spacing(2)}px`,
+        gridTemplateAreas: `"Title Title Title . . . . ." ". . . . . . . ."`,
+    },
+    Title: {
+        gridArea: "Title"
+    },
+    [theme.breakpoints.down("md")]: {
+        EpisodeContainer: {
+            display: "grid",
+            gridTemplateColumns: "repeat(5, 1fr)",
+            gridTemplateRows: "repeat(1, 1fr)",
+            gap: `${theme.spacing(2)}px`,
+            gridTemplateAreas: `"Title Title . . ." ". . . . ."`,
+        },
+        Title: {
+            "& h2": {
+                fontSize: "3em"
+            }
+        }
+    },
+    [theme.breakpoints.down("xs")]: {
+        EpisodeContainer: {
+            display: "grid",
+            gridTemplateColumns: "repeat(3, 1fr)",
+            gridTemplateRows: "repeat(2, 1fr)",
+            gap: `${theme.spacing(2)}px`,
+            gridTemplateAreas: `"Title Title ." ". . ."`,
+        },
+        Title: {
+            "& h2": {
+                fontSize: "3em"
+            }
+        }
     }
 }))
 

diff --git a/src/components/index/latest/latestepisode.js b/src/components/index/latest/latestepisode.js
@@ -55,33 +55,31 @@ export default function LatestEpisode(props) {
 
     return (
         <>
-            <Grid item xs={4} sm={3} md={2} lg={2} xl={2}>
-                <Link to={episodePage(props.anime_slug, episodeInfo.slug)}>
-                    <Grid container className={classes.Container}>
-                        <Grid item xs={12} className={classes.Image}>
-                            <img
-                                src={contentCover("anime", props.anime_slug)}
-                                onError={img => {
-                                    img.target.onerror = null
-                                    if (imageError) return img.target.src = CoverPlaceholder
-                                    img.target.src = cover_art
-                                    setImageError(true)
-                                }}
-                                alt={`${anime_name} ${episodeInfo.title} Poster Resmi`} />
-                        </Grid>
-                        <Grid item xs={12} className={classes.Metadata}>
-                            <Dotdotdot clamp={2} useNativeClamp>
-                                <Typography variant="body2">
-                                    {episodeInfo.title}
-                                </Typography>
-                            </Dotdotdot>
-                            <Typography variant="subtitle2">
-                                {formattedDate} - {created_by}
+            <Link to={episodePage(props.anime_slug, episodeInfo.slug)}>
+                <Grid container className={classes.Container}>
+                    <Grid item xs={12} className={classes.Image}>
+                        <img
+                            src={contentCover("anime", props.anime_slug)}
+                            onError={img => {
+                                img.target.onerror = null
+                                if (imageError) return img.target.src = CoverPlaceholder
+                                img.target.src = cover_art
+                                setImageError(true)
+                            }}
+                            alt={`${anime_name} ${episodeInfo.title} Poster Resmi`} />
+                    </Grid>
+                    <Grid item xs={12} className={classes.Metadata}>
+                        <Dotdotdot clamp={2} useNativeClamp>
+                            <Typography variant="body2">
+                                {episodeInfo.title}
                             </Typography>
-                        </Grid>
+                        </Dotdotdot>
+                        <Typography variant="subtitle2">
+                            {formattedDate} - {created_by}
+                        </Typography>
                     </Grid>
-                </Link>
-            </Grid>
+                </Grid>
+            </Link>
         </>
     )
 }

diff --git a/src/components/index/latest/latestmangaepisode.js b/src/components/index/latest/latestmangaepisode.js
@@ -51,31 +51,29 @@ export default function LatestMangaEpisode(props) {
 
     return (
         <>
-            <Grid item xs={4} sm={3} md={2} lg={2} xl={2}>
-                <Link to={mangaEpisodePage(manga_slug, episode_number)}>
-                    <Grid container className={classes.Container}>
-                        <Grid item xs={12} className={classes.Image}>
-                            <img
-                                src={contentCover("manga", manga_slug)}
-                                onError={img => {
-                                    img.target.onerror = null
-                                    if (imageError) return img.target.src = CoverPlaceholder
-                                    img.target.src = manga_cover
-                                    setImageError(true)
-                                }}
-                                alt={`${manga_name} Poster Resmi`} />
-                        </Grid>
-                        <Grid item xs={12} className={classes.Metadata}>
-                            <Typography variant="body2">
-                                {episode_number}. Bölüm{episode_name ? `: ${episode_name}` : ""}
-                            </Typography>
-                            <Typography variant="subtitle2">
-                                {formattedDate} - {created_by}
-                            </Typography>
-                        </Grid>
+            <Link to={mangaEpisodePage(manga_slug, episode_number)}>
+                <Grid container className={classes.Container}>
+                    <Grid item xs={12} className={classes.Image}>
+                        <img
+                            src={contentCover("manga", manga_slug)}
+                            onError={img => {
+                                img.target.onerror = null
+                                if (imageError) return img.target.src = CoverPlaceholder
+                                img.target.src = manga_cover
+                                setImageError(true)
+                            }}
+                            alt={`${manga_name} Poster Resmi`} />
                     </Grid>
-                </Link>
-            </Grid>
+                    <Grid item xs={12} className={classes.Metadata}>
+                        <Typography variant="body2">
+                            {episode_number}. Bölüm{episode_name ? `: ${episode_name}` : ""}
+                        </Typography>
+                        <Typography variant="subtitle2">
+                            {formattedDate} - {created_by}
+                        </Typography>
+                    </Grid>
+                </Grid>
+            </Link>
         </>
     )
 }

diff --git a/src/pages/episode/index.js b/src/pages/episode/index.js
@@ -8,7 +8,7 @@ import ReactGA from 'react-ga'
 import find from 'lodash-es/find'
 import Loading from '../../components/progress/index'
 
-import { getEpisodePageInfo, getEpisodeInfo } from '../../config/api-routes'
+import { getEpisodePageInfo, getEpisodeInfo, contentCover } from '../../config/api-routes'
 import { episodePage, animePage } from '../../config/front-routes'
 
 import {
@@ -26,6 +26,7 @@ import { Grid, Box, Button, Typography } from '@material-ui/core'
 import { format } from 'date-fns'
 import Dotdotdot from 'react-dotdotdot'
 import MotdContainer from '../../components/motd'
+import { CoverPlaceholder } from '../../config/theming/images'
 
 export default function EpisodePage(props) {
     const classes = useStyles()
@@ -52,6 +53,7 @@ export default function EpisodePage(props) {
     const [loading, setLoading] = useState(true)
     const [episodeLoading, setEpisodeLoading] = useState(false)
     const [iframeLoading, setIframeLoading] = useState(false)
+    const [coverArtError, setCoverArtError] = useState(false)
 
     useEffect(() => {
         const fetchData = async () => {
@@ -298,7 +300,20 @@ export default function EpisodePage(props) {
                             <Box>
                                 <Grid container className={classes.MetadataContainer} alignItems="center">
                                     <Grid item xs={3} md={4}>
-                                        <img src={animeData.cover_art} alt={`${animeData.name} cover_art`} />
+                                        <img
+                                            title={`${animeData.name} cover_art`}
+                                            loading="lazy"
+                                            alt={`${animeData.name} cover_art`}
+                                            src={contentCover("anime", animeData.slug)}
+                                            onError={(img) => {
+                                                if (coverArtError) {
+                                                    img.target.src = CoverPlaceholder
+                                                    return null
+                                                }
+                                                img.target.src = animeData.cover_art
+                                                setCoverArtError(true)
+                                            }}
+                                        />
                                     </Grid>
                                     <Grid item xs={9} md={8}>
                                         <Box p={2}>

diff --git a/src/pages/index/index.js b/src/pages/index/index.js
@@ -171,21 +171,17 @@ export default function IndexPage(props) {
                 : ""}
             {latestEpisodesWindow.length ?
                 <section className={classes.ContainerDiv}>
-                    <Grid container spacing={2}>
-                        <Grid item xs={12} md={4} lg={4} className={classes.TitleContainer}>
+                    <div className={classes.EpisodeContainer}>
+                        <div className={classes.Title}>
                             <Typography variant={mobile ? "h2" : "h1"} component="h2" noWrap>
                                 En Yeni
                             </Typography>
                             <Typography variant={mobile ? "h2" : "h1"} component="h2">
                                 Bölümler
                             </Typography>
-                        </Grid>
-                        <Grid item xs={12} md={8} lg={8}>
-                            <Grid container spacing={2} direction="row" justify="center" alignItems="stretch">
-                                {latestEpisodesWindow}
-                            </Grid>
-                        </Grid>
-                    </Grid>
+                        </div>
+                        {latestEpisodesWindow}
+                    </div>
                 </section>
                 : ""}
             {latestMangasWindow.length ?
@@ -200,21 +196,17 @@ export default function IndexPage(props) {
                 : ""}
             {latestMangaEpisodesWindow.length ?
                 <section className={classes.ContainerDiv}>
-                    <Grid container spacing={2}>
-                        <Grid item xs={12} md={3} lg={4} className={classes.TitleContainer}>
+                    <div className={classes.EpisodeContainer}>
+                        <div className={classes.Title}>
                             <Typography variant={mobile ? "h2" : "h1"} component="h2" noWrap>
                                 En Yeni
-                            </Typography>
+                        </Typography>
                             <Typography variant={mobile ? "h2" : "h1"} component="h2">
                                 Bölümler
-                            </Typography>
-                        </Grid>
-                        <Grid item xs={12} md={9} lg={8}>
-                            <Grid container spacing={2} direction="row" justify="center" alignItems="stretch">
-                                {latestMangaEpisodesWindow}
-                            </Grid>
-                        </Grid>
-                    </Grid>
+                        </Typography>
+                        </div>
+                        {latestMangaEpisodesWindow}
+                    </div>
                 </section>
                 : ""}
         </>

diff --git a/src/pages/manga-episode/index.js b/src/pages/manga-episode/index.js
@@ -38,7 +38,6 @@ export default function MangaEpisodePage(props) {
     })
     const [activePageNumber, setActivePageNumber] = useState(1)
     const [settings] = useGlobal('settings')
-    const [mobile] = useGlobal('mobile')
     const setSettings = useDispatch('setSettings')
 
     const NavigatorRef = useRef()
@@ -147,15 +146,14 @@ export default function MangaEpisodePage(props) {
                                 <InputLabel htmlFor="episode-selector">Okumak istediğiniz bölümü seçin</InputLabel>
                                 <Select
                                     fullWidth
-                                    native={mobile}
                                     value={`${activeEpisodeData.episode_number}`}
                                     onChange={handleChange}
                                     inputProps={{
                                         name: "episode",
                                         id: "episode-selector"
                                     }}
                                 >
-                                    {episodeData.map(d => mobile ? <option key={d.episode_number} value={`${d.episode_number}`}>{d.episode_number}. Bölüm: {d.episode_name}</option> : <MenuItem key={d.episode_number} value={`${d.episode_number}`}>{d.episode_number}. Bölüm: {d.episode_name}</MenuItem>)}
+                                    {episodeData.map(d => <MenuItem key={d.episode_number} value={`${d.episode_number}`}>{d.episode_number}. Bölüm: {d.episode_name}</MenuItem>)}
                                 </Select>
                             </FormControl>
                             {settings.readingStyle === "pagebypage" ?

diff --git a/src/serviceWorker.js b/src/serviceWorker.js
@@ -24,10 +24,6 @@ function isAdminRoute() {
   return window.location.pathname.startsWith('/admin')
 }
 
-function isAPIRoute() {
-  return window.location.pathname.startsWith('/api')
-}
-
 export function register(config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
@@ -40,7 +36,7 @@ export function register(config) {
     }
 
     window.addEventListener('load', () => {
-      if (isAdminRoute() || isAPIRoute()) {
+      if (isAdminRoute()) {
         console.info('unregistering service worker for admin route')
         unregister()
         console.info('reloading')