diff options
-rw-r--r-- | src/App.js | 146 | ||||
-rw-r--r-- | src/localization.js | 5 |
2 files changed, 125 insertions, 26 deletions
@@ -22,6 +22,8 @@ import Card from '@material-ui/core/Card'; import CardHeader from '@material-ui/core/CardHeader'; import CardActionArea from '@material-ui/core/CardActionArea'; import CardMedia from '@material-ui/core/CardMedia'; +import Button from '@material-ui/core/Button'; +import Grid from '@material-ui/core/Grid'; import GridList from '@material-ui/core/GridList'; import GridListTile from '@material-ui/core/GridListTile'; import ShoppingCartIcon from '@material-ui/icons/ShoppingCart'; @@ -76,10 +78,10 @@ function StoreItemDetails(props) { 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) }, + controls: { position: 'relative', width: '100%', maxWidth: (cols > 4 ? 640 : '100%') }, 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' } + img: { width: '100%', height: (height > 1024 ? 480 : 240), objectFit: 'contain', backgroundImage: 'url(/loading.png)', backgroundRepeat: 'no-repeat', backgroundPosition: 'center' } }))(); return ( @@ -90,30 +92,122 @@ function StoreItemDetails(props) { <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> + <Grid + container + direction="row" + justify="flex-end" + alignItems="flex-start" + > + <Grid item style={{padding: 4}}> + <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} loading='lazy'/></Slide> + <Slide index={2}><img src='https://img.dlsite.jp/modpub/images2/work/doujin/RJ299000/RJ298293_img_smp1.jpg' className={classes.img} loading='lazy'/></Slide> + <Slide index={3}><img src='https://img.dlsite.jp/modpub/images2/work/doujin/RJ299000/RJ298293_img_smp2.jpg' className={classes.img} loading='lazy'/></Slide> + <Slide index={4}><img src='https://img.dlsite.jp/modpub/images2/work/doujin/RJ299000/RJ298293_img_smp3.jpg' className={classes.img} loading='lazy'/></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> + </Grid> + <Grid item style={{flexGrow: 1, padding: 4}}> + <Grid item> + <Rating size="large" readOnly defaultValue={5} precision={0.5}/> + </Grid> + <Grid item style={{padding: 4}}> + <Typography variant='subtitle2'>{t('Circle')}: Some Circle</Typography> + </Grid> + <Grid item style={{padding: 4}}> + <Typography variant='subtitle2'>{t('Release')}: 2020年10月24日</Typography> + </Grid> + <Grid item style={{padding: 4}}> + <Typography variant='subtitle2'>{t('Format')}: WAV / mp3同梱</Typography> + </Grid> + <Grid item style={{padding: 4}}> + <Typography variant='subtitle2'>{t('Size')}: 6.09GB</Typography> + </Grid> + <Grid item style={{padding: 4}}> + <StoreSeparator title={t('Authors')}/> + <Chip label={'進行豹'} size='small' style={{margin: 4}}/> + <Chip label={'麻の葉'} size='small' style={{margin: 4}}/> + <Chip label={'黒沢ともよ'} size='small' style={{margin: 4}}/> + </Grid> + <Grid item style={{padding: 4}}> + <StoreSeparator title={t('Keywords')}/> + <Chip label={t('Audio')} size='small' style={{margin: 4}}/> + <Chip label='ASMR' size='small' style={{margin: 4}}/> + <Chip label='Fantasy' size='small' style={{margin: 4}}/> + </Grid> + </Grid> + <Grid item style={{padding: 18, flexGrow: (cols <= 1), minWidth: (cols > 1 ? 260 : '100%')}}> + <Grid item style={{padding: 4}}> + <Grid container direction='row'> + <Grid item style={{flexGrow: 1}}> + <Typography>セール特価:</Typography> + </Grid> + <Grid item> + <Typography>1500円</Typography> + </Grid> + </Grid> + </Grid> + <Grid item style={{padding: 4}}> + <Grid container direction='row'> + <Grid item style={{flexGrow: 1}}> + <Typography>ポイント:</Typography> + </Grid> + <Grid item> + <Typography>200</Typography> + </Grid> + </Grid> + </Grid> + <Grid item style={{padding: 4}}> + <Button variant='contained' size='large' color='primary' style={{width: '100%'}}>カートに入れる</Button> + </Grid> + <Grid item style={{padding: 4}}> + <Button variant='contained' size='large' color='secondary' style={{width: '100%'}}>すぐに購入</Button> + </Grid> + </Grid> + </Grid> + <StoreSeparator title='作品内容'/> + <Typography variant='body2' style={{maxWidth: '64em', padding: 4}}> + 大廃線により鉄路のほとんどが失われてしまった国――日ノ本。 + それでも各地に、大廃線に抗い続ける鉄道事業者はぽつぽつと点在している。、 + そうした鉄道各社・各路線の沿線の魅力を、音という切り口から紹介しようという企画、「蓄音レヱル」が、とある大新聞社の主催によって立ち上げられた。 + 音を探し出して紹介する大役を担うことになるのは、普段はその路線を走る列車の運転制御をサポートしている人形/人形型のモジュール、“レイルロオド”たち。 + + 八ツ城から颯馬仙岱まで、隈元-鹿兒島両県の八ツ城海沿いを縫うように走る第三セクター鉄道事業者、肥薩みかん鉄道を走る紅にも、その依頼が届く。 + + + 「みかん鉄道沿線のいい音がする場所を教えたら――それを全国紙の記事で紹介してもらえるの!? + 得しかないじゃん! ぼく、やるよ!」 + + 旧南颯鉄道――いまは滅びてしまった鉄道事業者の最後の一両の動態機として、解体・廃棄された妹たちとの思い出を胸に、紅は相棒であるあなたの手をとり、音探しの旅へと駆け出します。 + + 颯馬仙岱の大名物であるぴんこ団子を焼くを聞き、出深(いずみ)の飛来地に群れなすツルたちの鳴き声に耳をそばだて、牛之濱の潮溜まりで波と戯れ、日凪久の足湯でくつろいで―― + + 紅とふたりで尋ねる沿線の音たちは、きっとあなたの鼓膜を、こころをここちよく揺すり、やわらかにほぐしてくれるでしょう。 + + まっすぐで純情な紅との音探しの旅。 + どうぞ、そのお耳を澄ませてお楽しみください。 + </Typography> + <StoreSeparator title='ユーザーレビュー'/> + <Typography variant='body2' style={{maxWidth: '64em', padding: 4}}> + なし + </Typography> </div> ); } diff --git a/src/localization.js b/src/localization.js index a265996..f6a6c2d 100644 --- a/src/localization.js +++ b/src/localization.js @@ -30,6 +30,11 @@ i18n 'Heterosexual': '異性愛者', 'Homosexual': '同性愛', 'Keywords': 'キーワード', + 'Circle': 'サークル', + 'Release': '販売日', + 'Format': 'ファイル形式', + 'Size': 'ファイル容量総計', + 'Authors': '作家', } } }, |