Last active
April 17, 2024 12:26
-
-
Save adrianhajdin/83194cd8c920e6cf79dd83f03076f167 to your computer and use it in GitHub Desktop.
Memories Part 4 Code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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', | |
}, | |
}, | |
})); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div className={classes.overlay2} name="edit"> | |
<Button | |
onClick={(e) => { | |
e.stopPropagation(); | |
setCurrentId(post._id); | |
}} | |
style={{ color: 'white' }} | |
size="small" | |
> | |
<MoreHorizIcon fontSize="default" /> | |
</Button> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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', | |
}, | |
})); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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', | |
}, | |
})); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
it should be @material-ui/core