modify language button display location #4
Conversation
src/components/YepsNavBar.css
Outdated
| border: 1px solid transparent; | ||
| border-radius: 4px; | ||
| } | ||
| @media (min-width: 768px) { |
There was a problem hiding this comment.
Where is 768px from? Most mobile device has width of 480px or lower. Also hardcoding pixel is not responsive design.
There was a problem hiding this comment.
Get this value from chrome inspect
There was a problem hiding this comment.
Let's not hard code. I can think of two ways: 1) detect the device type 2) use the DOM object to get its current dev width.
src/components/YepsNavBar.css
Outdated
| .test-language-button { | ||
| position: relative; | ||
| float: right!important; | ||
| margin-top: 8px; |
There was a problem hiding this comment.
Let's not hard code pixels on margin either. Maybe at least use percentage. Ideally, I think there may be some out-of-the-box solution from react-bootstrap.
src/components/YepsNavBar.tsx
Outdated
| @@ -31,10 +30,12 @@ export default class YepsNavBar extends React.Component<Props, State> { | |||
| <img className={'logo-wrapper'} src={logo} alt="logo"/> | |||
| </Navbar.Brand> | |||
| <Navbar.Toggle onClick={this.expandCollapse}/> | |||
| <Button className={'language-button, test-language-button'} type="submit">Language</Button> | |||
There was a problem hiding this comment.
You may be able to achieve ideal button positioning by using Narbar.Form with pullLeft, just like below. Also, latter on we will need to unilaterally deal with the form submit with some state transition, in maybe redux store. Let me know if there's any difficulty wrapping button around in the Navbar.Form
… collapse-expand context instead of checking the device source, for better accuracy. If the expand is undefined, then the nav items must not be collapsed, a golden source of truth
Add 2 button to display at different screen width condition