Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Memories Part 4 Code
import { makeStyles } from '@material-ui/core/styles';
export default makeStyles((theme) => ({
appBarSearch: {
borderRadius: 4,
marginBottom: '1rem',
display: 'flex',
padding: '16px',
},
pagination: {
borderRadius: 4,
marginTop: '1rem',
padding: '16px',
},
gridContainer: {
[theme.breakpoints.down('xs')]: {
flexDirection: 'column-reverse',
},
},
}));
import { makeStyles } from '@material-ui/core/styles';
import { deepPurple } from '@material-ui/core/colors';
export default makeStyles((theme) => ({
appBar: {
borderRadius: 15,
margin: '30px 0',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: '10px 50px',
[theme.breakpoints.down('sm')]: {
flexDirection: 'column',
},
},
heading: {
color: theme.palette.primary.main,
textDecoration: 'none',
fontSize: '2em',
fontWeight: 300,
},
image: {
marginLeft: '10px',
marginTop: '5px',
},
toolbar: {
display: 'flex',
justifyContent: 'flex-end',
width: '400px',
[theme.breakpoints.down('sm')]: {
width: 'auto',
},
},
profile: {
display: 'flex',
justifyContent: 'space-between',
width: '400px',
alignItems: 'center',
[theme.breakpoints.down('sm')]: {
width: 'auto',
marginTop: 20,
justifyContent: 'center',
},
},
logout: {
marginLeft: '20px',
},
userName: {
display: 'flex',
alignItems: 'center',
textAlign: 'center',
},
brandContainer: {
display: 'flex',
alignItems: 'center',
},
purple: {
color: theme.palette.getContrastText(deepPurple[500]),
backgroundColor: deepPurple[500],
},
}));
<div className={classes.overlay2} name="edit">
<Button
onClick={(e) => {
e.stopPropagation();
setCurrentId(post._id);
}}
style={{ color: 'white' }}
size="small"
>
<MoreHorizIcon fontSize="default" />
</Button>
</div>
<div className={classes.card}>
<div className={classes.section}>
<Typography variant="h3" component="h2">{post.title}</Typography>
<Typography gutterBottom variant="h6" color="textSecondary" component="h2">{post.tags.map((tag) => `#${tag} `)}</Typography>
<Typography gutterBottom variant="body1" component="p">{post.message}</Typography>
<Typography variant="h6">Created by: {post.name}</Typography>
<Typography variant="body1">{moment(post.createdAt).fromNow()}</Typography>
<Divider style={{ margin: '20px 0' }} />
<Typography variant="body1"><strong>Realtime Chat - coming soon!</strong></Typography>
<Divider style={{ margin: '20px 0' }} />
<Typography variant="body1"><strong>Comments - coming soon!</strong></Typography>
<Divider style={{ margin: '20px 0' }} />
</div>
<div className={classes.imageSection}>
<img className={classes.media} src={post.selectedFile || 'https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png'} alt={post.title} />
</div>
</div>
import { makeStyles } from '@material-ui/core/styles';
export default makeStyles((theme) => ({
media: {
borderRadius: '20px',
objectFit: 'cover',
width: '100%',
maxHeight: '600px',
},
card: {
display: 'flex',
width: '100%',
[theme.breakpoints.down('sm')]: {
flexWrap: 'wrap',
flexDirection: 'column',
},
},
section: {
borderRadius: '20px',
margin: '10px',
flex: 1,
},
imageSection: {
marginLeft: '20px',
[theme.breakpoints.down('sm')]: {
marginLeft: 0,
},
},
recommendedPosts: {
display: 'flex',
[theme.breakpoints.down('sm')]: {
flexDirection: 'column',
},
},
loadingPaper: {
display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '20px', borderRadius: '15px', height: '39vh',
},
}));
import { makeStyles } from '@material-ui/core/styles';
import { deepPurple } from '@material-ui/core/colors';
export default makeStyles((theme) => ({
mainContainer: {
borderRadius: 15,
margin: '30px 0',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: '10px 50px',
},
heading: {
color: 'rgba(0,183,255, 1)',
textDecoration: 'none',
},
image: {
marginLeft: '15px',
},
toolbar: {
display: 'flex',
justifyContent: 'flex-end',
width: '400px',
},
profile: {
display: 'flex',
justifyContent: 'space-between',
width: '400px',
},
userName: {
display: 'flex',
alignItems: 'center',
},
brandContainer: {
display: 'flex',
alignItems: 'center',
},
smMargin: {
margin: theme.spacing(1),
},
purple: {
color: theme.palette.getContrastText(deepPurple[500]),
backgroundColor: deepPurple[500],
},
[theme.breakpoints.down('sm')]: {
appBar: {
padding: '10px 20px',
},
heading: {
display: 'none',
},
userName: {
display: 'none',
},
image: {
marginLeft: '5px',
},
toolbar: {
display: 'flex',
justifyContent: 'flex-end',
width: '160px',
},
},
actionDiv: {
textAlign: 'center',
},
}));
import { makeStyles } from '@material-ui/core/styles';
export default makeStyles({
media: {
height: 0,
paddingTop: '56.25%',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
backgroundBlendMode: 'darken',
},
border: {
border: 'solid',
},
fullHeightCard: {
height: '100%',
},
card: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
borderRadius: '15px',
height: '100%',
position: 'relative',
},
overlay: {
position: 'absolute',
top: '20px',
left: '20px',
color: 'white',
},
overlay2: {
position: 'absolute',
top: '20px',
right: '20px',
color: 'white',
},
grid: {
display: 'flex',
},
details: {
display: 'flex',
justifyContent: 'space-between',
margin: '20px',
},
title: {
padding: '0 16px',
},
cardActions: {
padding: '0 16px 8px 16px',
display: 'flex',
justifyContent: 'space-between',
},
cardAction: {
display: 'block',
textAlign: 'initial',
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment