diff options
Diffstat (limited to 'src/App.js')
| -rw-r--r-- | src/App.js | 79 |
1 files changed, 60 insertions, 19 deletions
@@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; import he from 'he'; import { useTranslation } from "react-i18next"; import { makeStyles, withStyles, createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; @@ -42,6 +42,8 @@ import HelpOutlineIcon from '@material-ui/icons/HelpOutline'; import NavigateNextIcon from '@material-ui/icons/NavigateNext'; import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'; import Grow from '@material-ui/core/Grow'; +import Link from '@material-ui/core/Link'; +import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import LazyLoad from 'react-lazyload'; import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel'; import useTimeout from 'use-timeout' @@ -54,7 +56,7 @@ import { Switch, Route, Redirect, - Link, + Link as RouteLink, useLocation } from "react-router-dom"; @@ -70,18 +72,49 @@ const StyledBadge = withStyles((theme) => ({ function StoreItemDetails(props) { const { t } = useTranslation(); + const { height, width } = useWindowDimensions(); + const cols = Math.floor(width / 240); const classes = makeStyles((theme) => ({ + root: { paddingLeft: cols > 1 ? 18 : 4, paddingRight: cols > 1 ? 18 : 4 }, + controls: { position: 'relative', width: '100%', maxWidth: 640, margin: (cols > 1 ? 20 : 0) }, + prev: { position: 'absolute', left: cols > 1 ? -15 : -4, top: '50%', backgroundColor: 'rgba(0, 0, 0, 0.5)', color: 'white' }, + next: { position: 'absolute', right: cols > 1 ? -15 : -4, top: '50%', backgroundColor: 'rgba(0, 0, 0, 0.5)', color: 'white' }, + img: { width: '100%', height: (height > 1024 ? 480 : 240), objectFit: 'contain' } }))(); return ( - <> - <Typography variant="h6" gutterBottom> - {props.data.title} - </Typography> - <Typography variant="body2" color="textSecondary" component="p"> - {props.data.desc} - </Typography> - </> + <div className={classes.root}> + <Breadcrumbs aria-label="breadcrumb"> + <Link component={RouteLink} to='/store'>{t('Store')}</Link> + <Typography>author</Typography> + <Typography>id</Typography> + </Breadcrumbs> + <StoreSeparator title='Some Title'/> + <CarouselProvider + infinite + isPlaying + lockOnWindowScroll + isIntrinsicHeight + naturalSlideWidth={640} + naturalSlideHeight={480} + visibleSlides={1} + totalSlides={4}> + <div className={classes.controls}> + <Slider> + <Slide index={1}><img src='https://img.dlsite.jp/modpub/images2/work/doujin/RJ299000/RJ298293_img_main.jpg' className={classes.img}/></Slide> + <Slide index={2}><img src='https://img.dlsite.jp/modpub/images2/work/doujin/RJ299000/RJ298293_img_smp1.jpg' className={classes.img}/></Slide> + <Slide index={3}><img src='https://img.dlsite.jp/modpub/images2/work/doujin/RJ299000/RJ298293_img_smp2.jpg' className={classes.img}/></Slide> + <Slide index={4}><img src='https://img.dlsite.jp/modpub/images2/work/doujin/RJ299000/RJ298293_img_smp3.jpg' className={classes.img}/></Slide> + </Slider> + <IconButton size='small' aria-label='previous' component={ButtonBack} className={classes.prev}> + <NavigateBeforeIcon/> + </IconButton> + <IconButton size='small' aria-label='next' component={ButtonNext} className={classes.next}> + <NavigateNextIcon/> + </IconButton> + </div> + </CarouselProvider> + </div> ); } @@ -127,7 +160,7 @@ function StoreItem(props) { <LazyLoad resize once placeholder={<StoreItemSkeleton className={props.className}/>}> <Grow in={true}> <Card className={props.className} variant="outlined"> - <CardActionArea> + <CardActionArea component={RouteLink} to={'/store/' + props.data.id}> <CardHeader avatar={ <Avatar aria-label={props.data.author} className={classes.avatar}> @@ -406,9 +439,9 @@ function BottomBar(props) { }))(); return ( <BottomNavigation className={classes.stickyBottom} value={props.path} showLabels> - <BottomNavigationAction label={t('Store')} value='store' icon={<StoreIcon/>} component={Link} to='/store'/> - <BottomNavigationAction label={t('Library')} value='library' icon={<LibraryBooksIcon/>} component={Link} to='/library'/> - <BottomNavigationAction label={t('Account')} value='account' icon={<AccountCircleIcon/>} component={Link} to='/account'/> + <BottomNavigationAction label={t('Store')} value='store' icon={<StoreIcon/>} component={RouteLink} to='/store'/> + <BottomNavigationAction label={t('Library')} value='library' icon={<LibraryBooksIcon/>} component={RouteLink} to='/library'/> + <BottomNavigationAction label={t('Account')} value='account' icon={<AccountCircleIcon/>} component={RouteLink} to='/account'/> </BottomNavigation> ); } @@ -417,10 +450,17 @@ function TopBar(props) { const { t } = useTranslation(); const classes = makeStyles((theme) => ({ title: { flexGrow: 1 }, + backButton: { marginRight: theme.spacing(1) }, }))(); + const search = (props.components[1] !== 'account'); return ( <AppBar position="fixed"> <Toolbar variant="dense"> + <Grow in={props.components.length > 2} unmountOnExit> + <IconButton edge="start" color="inherit" aria-label="back" className={classes.backButton} onClick={() => window.history.back()}> + <NavigateBeforeIcon/> + </IconButton> + </Grow> <Typography variant="h6" className={classes.title}> {t('DoujinSea')} </Typography> @@ -433,12 +473,14 @@ function TopBar(props) { </StyledBadge> </IconButton> </Toolbar> - <Collapse in={props.search} timeout='auto' unmountOnExit><ItemSearch/></Collapse> + <Collapse in={search} timeout='auto' unmountOnExit><ItemSearch/></Collapse> </AppBar> ); } function Routing() { + var location = useLocation(); + const components = location.pathname.split('/'); const classes = makeStyles((theme) => ({ content: { paddingTop: 105, @@ -446,20 +488,19 @@ function Routing() { minHeight: '100vh', }, }))(); - var location = useLocation(); - const path = location.pathname.split('/')[1]; return ( <> - <TopBar search={path !== 'account'}/> + <TopBar components={components}/> <Paper className={classes.content} elevation={0} square> <Switch> + <Route path='/store/:id' component={StoreItemDetails}/> <Route path='/store' component={StoreView}/> <Route path='/library' component={LibraryView}/> <Route path='/account' component={AccountView}/> <Route path='/'><Redirect to='/store'/></Route> </Switch> </Paper> - <BottomBar path={path}/> + <BottomBar path={components[1]}/> </> ); } |