scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-26 17:16:11 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #3266 from benjiwheeler/join-flow-info-responsive

Browse source 
use media queries to make info message responsive
This commit is contained in:
Benjamin Wheeler 2019-08-19 18:01:30 +02:00 committed by GitHub
commit 3f150be19b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 49 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/info-button/info-button.jsx
View file

@ -1,6 +1,9 @@
const bindAll = require('lodash.bindall');
const PropTypes = require('prop-types');
const React = require('react');
const MediaQuery = require('react-responsive').default;
const frameless = require('../../lib/frameless');
require('./info-button.scss');
@ -22,25 +25,38 @@ class InfoButton extends React.Component {
this.setState({visible: true});
}
render () {
const messageJsx = this.state.visible && (
<div className="info-button-message">
{this.props.message}
</div>
);
return (
<React.Fragment>
<div
className="info-button"
onClick={this.handleShowMessage}
onMouseOut={this.handleHideMessage}
onMouseOver={this.handleShowMessage}
>
{this.state.visible && (
<div className="info-button-message">
{this.props.message}
<MediaQuery minWidth={frameless.desktop}>
{messageJsx}
</MediaQuery>
</div>
)}
{/* for small screens, add additional position: relative element,
so info message can position itself relative to the width which
encloses info-button -- rather than relative to info-button itself */}
<MediaQuery maxWidth={frameless.desktop - 1}>
<div style={{position: 'relative'}}>
{messageJsx}
</div>
</MediaQuery>
</React.Fragment>
);
}
}
InfoButton.propTypes = {
message: PropTypes.string
message: PropTypes.string.isRequired
};
module.exports = InfoButton;

9
src/components/info-button/info-button.scss
View file

@ -65,11 +65,12 @@
@media #{$intermediate-and-smaller} {
.info-button-message {
position: relative;
position: absolute;
transform: none;
margin: inherit;
width: 100%;
height: inherit;
/* since we're positioning message relative to info-button's parent,
we need to center this element within its width. */
margin: 0 calc((100% - 16.5rem) / 2);;
top: .125rem;
&:before {
display: none;

5
test/__mocks__/react-responsive.js vendored Normal file
View file

@ -0,0 +1,5 @@
// __mocks__/react-responsive.js
const MediaQuery = ({children}) => children;
export default MediaQuery;

11
test/unit/components/info-button.test.jsx
View file

@ -11,6 +11,15 @@ describe('InfoButton', () => {
);
expect(component.find('div.info-button-message').exists()).toEqual(false);
});
test('mouseOver on info button makes info message visible', () => {
const component = mountWithIntl(
<InfoButton
message="Here is some info about something!"
/>
);
component.find('div.info-button').simulate('mouseOver');
expect(component.find('div.info-button-message').exists()).toEqual(true);
});
test('clicking on info button makes info message visible', () => {
const component = mountWithIntl(
<InfoButton
@ -26,7 +35,7 @@ describe('InfoButton', () => {
message="Here is some info about something!"
/>
);
component.find('div.info-button').simulate('click');
component.find('div.info-button').simulate('mouseOver');
expect(component.find('div.info-button-message').exists()).toEqual(true);
component.find('div.info-button').simulate('mouseOut');
expect(component.find('div.info-button-message').exists()).toEqual(false);