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
1664 ui make homepage mobile friendly #1692
1664 ui make homepage mobile friendly #1692
Conversation
ui/src/components/Homepage/index.jsx
Outdated
@@ -20,6 +20,9 @@ import SignInDialog from '../SignInDialog'; | |||
[theme.breakpoints.down('sm')]: { | |||
marginBottom: theme.spacing.double, | |||
}, | |||
'@media (max-width: 400px)': { |
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.
Use material-ui breakpoints instead of hard-coding width values. See line above for an example.
ui/src/components/Homepage/index.jsx
Outdated
@@ -34,6 +37,11 @@ import SignInDialog from '../SignInDialog'; | |||
fill: theme.palette.common.white, | |||
marginRight: theme.spacing.unit, | |||
}, | |||
text: { | |||
'@media (max-width: 400px)': { |
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.
See other comment.
ui/src/components/Homepage/index.jsx
Outdated
@@ -20,6 +20,9 @@ import SignInDialog from '../SignInDialog'; | |||
[theme.breakpoints.down('sm')]: { | |||
marginBottom: theme.spacing.double, | |||
}, | |||
'@media (max-width: 400px)': { | |||
fontSize: '40px', |
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.
fontSize: 40,
ui/src/components/Homepage/index.jsx
Outdated
@@ -34,6 +37,11 @@ import SignInDialog from '../SignInDialog'; | |||
fill: theme.palette.common.white, | |||
marginRight: theme.spacing.unit, | |||
}, | |||
text: { | |||
'@media (max-width: 400px)': { | |||
fontSize: '20px', |
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.
fontSize: 20,
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.
Tests are failing. You can fix the linting error with yarn lint --fix
inside the ui
directory. Also, you'll need to add a changelog with yarn changelog --silent --issue 1664
from the root directory (not the ui directory).
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.
Looks really good. Just minor changes then we also need to rebase on master and fix the linting issues inside the ui
directory.
ui/src/components/Homepage/index.jsx
Outdated
@@ -34,6 +35,11 @@ import SignInDialog from '../SignInDialog'; | |||
fill: theme.palette.common.white, | |||
marginRight: theme.spacing.unit, | |||
}, | |||
text: { | |||
[theme.breakpoints.down('sm')]: { | |||
fontSize: 20 |
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.
fontSize: 16,
ui/src/components/Homepage/index.jsx
Outdated
@@ -34,6 +35,11 @@ import SignInDialog from '../SignInDialog'; | |||
fill: theme.palette.common.white, | |||
marginRight: theme.spacing.unit, | |||
}, | |||
text: { |
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.
Rename class to ciDescription
.
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.
@helfi92 i made the changes you requested ! :) |
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.
🎉
Bugzilla Bug: XXXXX
@helfi92