From bae124f4513072b3a7e0ad5abfc668e55fa745de Mon Sep 17 00:00:00 2001 From: gauravsingh5 Date: Sun, 28 Mar 2021 01:55:15 +0530 Subject: [PATCH 01/25] Align Dungeons horizantally --- src/components/card-grid.jsx | 7 +++++-- src/pages/index.jsx | 8 +++----- src/utils/styles.js | 15 ++++++++------- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/components/card-grid.jsx b/src/components/card-grid.jsx index 5a21fa49..73569cb8 100644 --- a/src/components/card-grid.jsx +++ b/src/components/card-grid.jsx @@ -2,6 +2,7 @@ import React from 'react'; import Button from '@material-ui/core/Button'; import Card from '@material-ui/core/Card'; import CardActions from '@material-ui/core/CardActions'; +import CardActionArea from '@material-ui/core/CardActionArea'; import CardContent from '@material-ui/core/CardContent'; import CardMedia from '@material-ui/core/CardMedia'; import Typography from '@material-ui/core/Typography'; @@ -25,7 +26,8 @@ export default function CardGrid(props) { : `${process.env.GATSBY_BASE_IMAGE_URL}${info.image}`; return info ? ( - + + + ) : null; -} +} \ No newline at end of file diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 619b7047..cca8f22a 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -12,11 +12,9 @@ import { homeStyles } from '../utils/styles'; export default function Home({ data }) { const classes = homeStyles(); const posts = data.allMarkdownRemark.nodes; - return ( -
{/* Hero unit */}
@@ -41,9 +39,9 @@ export default function Home({ data }) {
- + {/* End hero unit */} - + {posts.map((post, index) => ( ))} @@ -72,4 +70,4 @@ export const query = graphql` } } } -`; +`; \ No newline at end of file diff --git a/src/utils/styles.js b/src/utils/styles.js index 5dd364ba..1ce6cd5f 100644 --- a/src/utils/styles.js +++ b/src/utils/styles.js @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from "@material-ui/core/styles"; export const homeStyles = makeStyles((theme) => ({ icon: { @@ -12,19 +12,20 @@ export const homeStyles = makeStyles((theme) => ({ marginTop: theme.spacing(4), }, cardGrid: { - paddingTop: theme.spacing(8), - paddingBottom: theme.spacing(8), + paddingTop: theme.spacing(1), + paddingBottom: theme.spacing(1), }, card: { - height: '100%', - display: 'flex', - flexDirection: 'column', + height: "100%", + display: "flex", + flexDirection: "column", }, cardMedia: { - paddingTop: '56.25%', // 16:9 + paddingTop: "56.25%", // 16:9 }, cardContent: { flexGrow: 1, + textAlign: "center", }, footer: { backgroundColor: theme.palette.background.paper, From a04cc667ea9237db1cbcda706f13ffef3e13fe8f Mon Sep 17 00:00:00 2001 From: gauravsingh5 Date: Sun, 28 Mar 2021 01:56:18 +0530 Subject: [PATCH 02/25] Add textDecoration: none --- src/components/card-grid.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/card-grid.jsx b/src/components/card-grid.jsx index 73569cb8..72df65c5 100644 --- a/src/components/card-grid.jsx +++ b/src/components/card-grid.jsx @@ -27,7 +27,7 @@ export default function CardGrid(props) { return info ? ( - + Date: Sun, 28 Mar 2021 02:39:27 +0530 Subject: [PATCH 03/25] Add responsiveness --- src/components/card-grid.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/card-grid.jsx b/src/components/card-grid.jsx index 72df65c5..b7d6322d 100644 --- a/src/components/card-grid.jsx +++ b/src/components/card-grid.jsx @@ -41,7 +41,7 @@ export default function CardGrid(props) { {post.excerpt} - From d31a61d97996c5d63cd55c02e2ddcf0568648e06 Mon Sep 17 00:00:00 2001 From: gauravsingh5 Date: Sun, 28 Mar 2021 02:39:32 +0530 Subject: [PATCH 04/25] Add responsiveness --- src/components/mobile-card-grid.jsx | 52 +++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 src/components/mobile-card-grid.jsx diff --git a/src/components/mobile-card-grid.jsx b/src/components/mobile-card-grid.jsx new file mode 100644 index 00000000..ab013da9 --- /dev/null +++ b/src/components/mobile-card-grid.jsx @@ -0,0 +1,52 @@ +import React from 'react'; +import Button from '@material-ui/core/Button'; +import Card from '@material-ui/core/Card'; +import CardActions from '@material-ui/core/CardActions'; +import CardActionArea from '@material-ui/core/CardActionArea'; +import CardContent from '@material-ui/core/CardContent'; +import CardMedia from '@material-ui/core/CardMedia'; +import Typography from '@material-ui/core/Typography'; +import infos from '../data/dungeon-info.json'; +import Grid from '@material-ui/core/Grid'; +import { homeStyles } from '../utils/styles'; +import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; + +export default function MobileCardGrid(props) { + const classes = homeStyles(); + const post = props.post; + const slug = post.fields.slug; + const splited = slug.split('/'); + const info = infos.find( + (d) => d.name === splited[2] && d.language === splited[1] + ); + post.excerpt = post.excerpt.replace(' 🤠開始', ''); + const defaultImage = + info === undefined || info.image === '' + ? `${process.env.GATSBY_BASE_IMAGE_URL}${process.env.GATSBY_DEFAULT_IMAGE_NAME}` + : `${process.env.GATSBY_BASE_IMAGE_URL}${info.image}`; + + return info ? ( + + + + + + + {info.display} + + {post.excerpt} + + + + + + + + ) : null; +} \ No newline at end of file From 96f9e8a36a474620ea0aa41eef8d05d0445db4c2 Mon Sep 17 00:00:00 2001 From: gauravsingh5 Date: Sun, 28 Mar 2021 02:39:39 +0530 Subject: [PATCH 05/25] Add responsiveness --- src/pages/index.jsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/pages/index.jsx b/src/pages/index.jsx index cca8f22a..f38854ec 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { BrowserView, MobileView } from 'react-device-detect'; import { graphql } from 'gatsby'; import CssBaseline from '@material-ui/core/CssBaseline'; import Grid from '@material-ui/core/Grid'; @@ -6,6 +7,7 @@ import Typography from '@material-ui/core/Typography'; import Container from '@material-ui/core/Container'; import Copyright from '../components/copyright'; import CardGrid from '../components/card-grid'; +import MobileCardGrid from '../components/mobile-card-grid'; import HideAppBar from '../components/hide-appbar'; import { homeStyles } from '../utils/styles'; @@ -39,7 +41,8 @@ export default function Home({ data }) { - + + {/* End hero unit */} {posts.map((post, index) => ( @@ -47,6 +50,17 @@ export default function Home({ data }) { ))} + + + + {/* End hero unit */} + + {posts.map((post, index) => ( + + ))} + + +
{/* Footer */}