-
Notifications
You must be signed in to change notification settings - Fork 166
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
User stats enhancement #505
Changes from all commits
0951b79
b115763
50d65b9
335a5a0
a854a7a
f1575db
2cf72ab
067b6d3
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,47 +4,63 @@ const styles = theme => ({ | |
root: { | ||
flex: '1 0 auto', | ||
}, | ||
classFlex: { | ||
display: 'flex', | ||
[theme.breakpoints.down('657')]: { | ||
flexDirection: 'column', | ||
alignItems: 'center', | ||
}, | ||
}, | ||
profileHeaderStyle: { | ||
paddingTop: '1.5em', | ||
paddingBottom: '1.5em', | ||
background: 'rgba(255,204,0,1)', | ||
background: | ||
'linear-gradient(to bottom, rgba(255,204,0,1) 0%, rgba(255,229,133,1) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)', | ||
[theme.breakpoints.down('511')]: { | ||
paddingTop: '4em', | ||
}, | ||
'linear-gradient(to bottom, rgba(255,204,0,1) 0%, rgba(255,229,133,1) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)', | ||
}, | ||
avatarBoxStyle: { | ||
width: '100%', | ||
minWidth: '35%', | ||
display: 'flex', | ||
flexDirection: 'column', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
}, | ||
profileShareButtonStyle: { | ||
borderRadius: '50% !important', | ||
}, | ||
avatarStyle: { | ||
width: '100%', | ||
height: '100%', | ||
paddingTop: '1.5em', | ||
paddingBottom: '1.5em', | ||
width: '80%', | ||
height: '80%', | ||
paddingLeft: '1em', | ||
paddingRight: '1em', | ||
'& img': { | ||
width: '10em', | ||
width: '8em', | ||
backgroundColor: 'white', | ||
height: '10em', | ||
height: '8em', | ||
borderRadius: '50%', | ||
boxShadow: `0 3px 5px 2px rgba(0, 0, 0, .12)`, | ||
}, | ||
}, | ||
ProfileDetailStyle: { | ||
width: '100%', | ||
minWidth: '30%', | ||
display: 'flex', | ||
flexDirection: 'column', | ||
alignItems: 'center', | ||
alignItems: 'start', | ||
justifyContent: 'center', | ||
marginRight: '1.5em', | ||
[theme.breakpoints.down('657')]: { | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
marginTop: '1.5em' | ||
}, | ||
}, | ||
userNameStyle: { | ||
fontWeight: 900, | ||
fontSize: '2rem', | ||
position: 'relative', | ||
[theme.breakpoints.down('470')]: { | ||
overflowWrap: 'anywhere', | ||
|
||
[theme.breakpoints.down('750')]: { | ||
display: 'flex', | ||
flexDirection: 'column', | ||
justifyContent: 'center', | ||
|
@@ -54,24 +70,50 @@ const styles = theme => ({ | |
tagsContainerStyle: { | ||
display: 'flex', | ||
flexWrap: 'wrap', | ||
paddingTop: '0.5em', | ||
paddingBottom: '0.5em', | ||
[theme.breakpoints.down('657')]: { | ||
paddingTop: '0', | ||
paddingBottom: '0', | ||
}, | ||
}, | ||
removeTagMargin: { | ||
marginLeft: '0 !important', | ||
}, | ||
centerTag: { | ||
alignItems: 'center', | ||
}, | ||
emailStyle: { | ||
overflowWrap: 'anywhere', | ||
}, | ||
emailStyle: { marginBottom: '0.5em' }, | ||
dividerStyle: { | ||
width: '100vw', | ||
}, | ||
moreInfoBoxStyle: { | ||
height: '3em', | ||
display: 'flex', | ||
flexDirection: 'row', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
justifyContent: 'space-evenly', | ||
alignItems: 'end', | ||
flexWrap: 'wrap', | ||
[theme.breakpoints.down('657')]: { | ||
marginTop: '1.3em', | ||
}, | ||
}, | ||
moreInfoStyle: { | ||
marginLeft: '0.5em', | ||
marginRight: '0.5em', | ||
fontWeight: 'bold', | ||
display: 'flex', | ||
flexDirection: 'column', | ||
alignItems: 'center', | ||
}, | ||
moreInfoStyle1: { | ||
fontWeight: '500', | ||
fontSize: '0.9rem', | ||
color: '#00B8C4', | ||
paddingLeft: '5px', | ||
paddingRight: '5px', | ||
}, | ||
moreInfoStyle2: { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This could be There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. noted. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Also, @tuxology I needed a little help in here, you see there is some padding involve on the Count_values which makes it look a little bit distant from the title. So I was trying to remove the padding but couldn't do much(padding is also not inherited, I tried inspecting it ). Can you suggest something or anything which I might be missing so that it can look more closer and similar to the mockup. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe its not padding but There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @tuxology you see I remove the line-height here, but still, it is same There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @Deepanshu039 OK, lets just proceed with this for now. We can do the design stuff later. I feel there is a lot of more stuff to implement for now such as Badges API, latest user activity (probably via API) etc. These are more pressing issues |
||
fontWeight: '550', | ||
fontSize: '3.5em', | ||
color: '#00B8C4', | ||
}, | ||
profileLowerStyle: { | ||
margin: '1em', | ||
|
@@ -128,7 +170,21 @@ const styles = theme => ({ | |
textDecorationNone: { | ||
textDecoration: 'none', | ||
}, | ||
floatRight: { float: 'right' }, | ||
floatRight: | ||
{ | ||
float: 'right', | ||
}, | ||
secondaryButtonMargin: | ||
{ | ||
marginTop: '1em', | ||
}, | ||
verticalOption: | ||
{ | ||
float: 'right' , | ||
[theme.breakpoints.down('657')]: { | ||
float: 'none', | ||
}, | ||
}, | ||
displayNone: { display: 'none' }, | ||
largeLabel: { | ||
fontSize: '1.3rem', | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe give it a more relevant name than
moreInfoStyle1 - such as
moreInfoTitle`?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
noted.