Skip to content
This repository has been archived by the owner on May 29, 2024. It is now read-only.

Improve home page UI. #144

Merged
merged 25 commits into from
Apr 1, 2021
Merged

Improve home page UI. #144

Show file tree
Hide file tree
Changes from 23 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
bae124f
Align Dungeons horizantally
xaerru Mar 27, 2021
a04cc66
Add textDecoration: none
xaerru Mar 27, 2021
a6793f4
Add responsiveness
xaerru Mar 27, 2021
d31a61d
Add responsiveness
xaerru Mar 27, 2021
96f9e8a
Add responsiveness
xaerru Mar 27, 2021
9c0b7aa
Remove hidebar
xaerru Mar 27, 2021
e8c86f5
Beautify code using Prettier
xaerru Mar 27, 2021
0f47147
Order imports by type
xaerru Mar 27, 2021
b476dc4
Refactored code and removed warnings
xaerru Mar 28, 2021
8eb83f8
Add Mobile Support
xaerru Mar 28, 2021
1d6cfc6
Replace double quotes with single quotes
xaerru Mar 30, 2021
e5dbc4b
Add double quotes in GraphQL query
xaerru Mar 30, 2021
47a5b83
Change order of imports
xaerru Mar 30, 2021
b5ac858
Add appbar
xaerru Apr 1, 2021
d23d1c1
Re-order imports
xaerru Apr 1, 2021
e3d1a36
Change double quote to single quote
xaerru Apr 1, 2021
592a6da
Fix indentation
xaerru Apr 1, 2021
87c112e
Align buttons to right
xaerru Apr 1, 2021
e6fedd4
3 cards in a row
xaerru Apr 1, 2021
5056257
Change spacing
xaerru Apr 1, 2021
d8e8b2a
Increase spacing in CardGrid
xaerru Apr 1, 2021
222cb7d
Fix size
xaerru Apr 1, 2021
59cde74
Fix card size
xaerru Apr 1, 2021
a5018c5
Change truncate pruneLength
xaerru Apr 1, 2021
9e0fc91
Set pruneLength to 100
xaerru Apr 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 27 additions & 21 deletions src/components/card-grid.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@ 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';
import infos from '../data/dungeon-info.json';
import { homeStyles } from '../utils/styles';

export default function CardGrid(props) {
const classes = homeStyles();
Expand All @@ -25,25 +26,30 @@ export default function CardGrid(props) {
: `${process.env.GATSBY_BASE_IMAGE_URL}${info.image}`;

return info ? (
<Grid item xs={12} sm={6} md={4}>
<Card className={classes.card}>
<CardMedia
className={classes.cardMedia}
image={defaultImage}
title={info.display}
/>
<CardContent className={classes.cardContent}>
<Typography gutterBottom variant='h5' component='h2'>
{info.display}
</Typography>
<Typography>{post.excerpt}</Typography>
</CardContent>
<CardActions dir='rtl'>
<Button size='small' color='primary' href={slug.slice(0, -1)}>
<ArrowForwardIcon />
</Button>
</CardActions>
</Card>
<Grid item xs={props.xs} sm={props.sm} md={props.md}>
<CardActionArea
href={slug.slice(0, -1)}
style={{ textDecoration: 'none' }}
>
<Card className={classes.card}>
<CardMedia
className={classes.cardMedia}
image={defaultImage}
title={info.display}
/>
<CardContent className={classes.cardContent}>
<Typography gutterBottom variant='h5' component='h2'>
{info.display}
</Typography>
<Typography>{post.excerpt.slice(0, 65)}</Typography>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why just 65 characters?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you just want 65 characters, you could use the gatsby graphql query, on the pruneLength change to 65
image

</CardContent>
<CardActions dir='rtl'>
<Button size='small' color='primary'>
<ArrowForwardIcon />
</Button>
</CardActions>
</Card>
</CardActionArea>
</Grid>
) : null;
}
2 changes: 1 addition & 1 deletion src/components/hide-appbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,4 +44,4 @@ export default function HideAppBar(props) {
</HideOnScroll>
</React.Fragment>
);
}
}
7 changes: 3 additions & 4 deletions src/pages/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { homeStyles } from '../utils/styles';
export default function Home({ data }) {
const classes = homeStyles();
const posts = data.allMarkdownRemark.nodes;

return (
<React.Fragment>
<CssBaseline />
Expand Down Expand Up @@ -41,11 +40,11 @@ export default function Home({ data }) {
</Typography>
</Container>
</div>
<Container className={classes.cardGrid} maxWidth='md'>
<Container className={classes.cardGrid} maxWidth='lg'>
{/* End hero unit */}
<Grid container spacing={4}>
<Grid container spacing={6}>
{posts.map((post, index) => (
<CardGrid item key={index} post={post} />
<CardGrid item key={index} post={post} xs={12} sm={6} md={3} />
))}
</Grid>
</Container>
Expand Down
1 change: 1 addition & 0 deletions src/utils/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export const homeStyles = makeStyles((theme) => ({
},
cardContent: {
flexGrow: 1,
textAlign: 'center',
},
footer: {
backgroundColor: theme.palette.background.paper,
Expand Down