Skip to content

Instantly share code, notes, and snippets.

@adrianhajdin
Last active April 17, 2024 12:26
Show Gist options
  • Save adrianhajdin/83194cd8c920e6cf79dd83f03076f167 to your computer and use it in GitHub Desktop.
Save adrianhajdin/83194cd8c920e6cf79dd83f03076f167 to your computer and use it in GitHub Desktop.
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',
},
});
@romelmahmud
Copy link

Thank you, I am learning lot from you

@ChrisPG2022
Copy link

Module not found: Can't resolve '@amaterial-ui/core' in 'C:\Users\Owner\Desktop\dailytips project\client\src\components\Posts'
Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'

please . Help Me

@adityagantayat
Copy link

Module not found: Can't resolve '@amaterial-ui/core' in 'C:\Users\Owner\Desktop\dailytips project\client\src\components\Posts' Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'

please . Help Me

You need to install using 'npm i @material-ui/core'

@adityagantayat
Copy link

Hi everyone,
I am getting a 404 not found error, when I search with multiple tags.
Any help is appreciated

@MarkivV
Copy link

MarkivV commented Jul 3, 2022

Hi everyone Im getting an error 431(Header are too long) after I finished part with creating authorization, does anybody know the solution?

@ashish12345bisht
Copy link

Module not found: Can't resolve '@amaterial-ui/core' in 'C:\Users\Owner\Desktop\dailytips project\client\src\components\Posts' Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'

please . Help Me

Hey ... i didnt know how to reply here but try removing 'a' from '@amaterial-ui/core'... so it is '@material-ui/core'

@justiniyke29
Copy link

Awesome tutorial bro, could you do a tutorial on styling with css and material ui

@justiniyke29
Copy link

Module not found: Can't resolve '@amaterial-ui/core' in 'C:\Users\Owner\Desktop\dailytips project\client\src\components\Posts' Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
please . Help Me

Hey ... i didnt know how to reply here but try removing 'a' from '@amaterial-ui/core'... so it is '@material-ui/core'

it should be @material-ui/core

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment