From b2b2c54057e2365045257378beac499b58df54d5 Mon Sep 17 00:00:00 2001
From: Jari Vetoniemi <jari.vetoniemi@indooratlas.com>
Date: Thu, 12 Nov 2020 19:34:10 +0900
Subject: wip store item details page

---
 src/App.js | 146 ++++++++++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 120 insertions(+), 26 deletions(-)

(limited to 'src/App.js')

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>
    );
 }
-- 
cgit v1.2.3