summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/App.js146
-rw-r--r--src/localization.js5
2 files changed, 125 insertions, 26 deletions
diff --git a/src/App.js b/src/App.js
index 96f3aa9..9c41e5f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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': '作家',
}
}
},