gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(Settings): Always use ChildContainer

Browse Source 
othersize content is rendered off screen
This commit is contained in:
Berkeley Martinez
2018-01-12 16:57:26 -08:00
parent 4a911931d0
commit 8e5275ca56
4 changed files with 207 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
common/app/routes/Settings/Settings-Skeleton.jsx
View File

@ -19,7 +19,7 @@ const shortString = (
export default function SettingsSkeleton() { export default function SettingsSkeleton() {
return ( return (
<div className={ `${ns}-skeleton` }> <div className={ `${ns}-container ${ns}-skeleton` }>
<Row> <Row>
<Col xs={ 12 }> <Col xs={ 12 }>
<Button <Button

341
common/app/routes/Settings/Settings.jsx
View File

@ -6,15 +6,15 @@ import { createSelector } from 'reselect';
import { Button, Row, Col } from 'react-bootstrap'; import { Button, Row, Col } from 'react-bootstrap';
import FA from 'react-fontawesome'; import FA from 'react-fontawesome';
import ns from './ns.json';
import LockedSettings from './Locked-Settings.jsx'; import LockedSettings from './Locked-Settings.jsx';
import JobSettings from './Job-Settings.jsx'; import JobSettings from './Job-Settings.jsx';
import SocialSettings from './Social-Settings.jsx'; import SocialSettings from './Social-Settings.jsx';
import EmailSettings from './Email-Setting.jsx'; import EmailSettings from './Email-Setting.jsx';
import LanguageSettings from './Language-Settings.jsx'; import LanguageSettings from './Language-Settings.jsx';
import SettingsSkeleton from './Settings-Skeleton.jsx'; import SettingsSkeleton from './Settings-Skeleton.jsx';
import UpdateEmail from './routes/update-email';
import { toggleUserFlag, showUpdateEmailViewSelector } from './redux'; import { toggleUserFlag } from './redux';
import { import {
toggleNightMode, toggleNightMode,
updateTitle, updateTitle,
@ -24,13 +24,11 @@ import {
themeSelector, themeSelector,
hardGoTo hardGoTo
} from '../../redux'; } from '../../redux';
import ChildContainer from '../../Child-Container.jsx';
const mapStateToProps = createSelector( const mapStateToProps = createSelector(
userSelector, userSelector,
themeSelector, themeSelector,
signInLoadingSelector, signInLoadingSelector,
showUpdateEmailViewSelector,
( (
{ {
username, username,
@ -46,7 +44,6 @@ const mapStateToProps = createSelector(
}, },
theme, theme,
showLoading, showLoading,
showUpdateEmailView
) => ({ ) => ({
currentTheme: theme, currentTheme: theme,
email, email,
@ -59,7 +56,6 @@ const mapStateToProps = createSelector(
sendNotificationEmail, sendNotificationEmail,
sendQuincyEmail, sendQuincyEmail,
showLoading, showLoading,
showUpdateEmailView,
username username
}) })
); );
@ -91,7 +87,6 @@ const propTypes = {
sendNotificationEmail: PropTypes.bool, sendNotificationEmail: PropTypes.bool,
sendQuincyEmail: PropTypes.bool, sendQuincyEmail: PropTypes.bool,
showLoading: PropTypes.bool, showLoading: PropTypes.bool,
showUpdateEmailView: PropTypes.bool,
toggleIsAvailableForHire: PropTypes.func.isRequired, toggleIsAvailableForHire: PropTypes.func.isRequired,
toggleIsLocked: PropTypes.func.isRequired, toggleIsLocked: PropTypes.func.isRequired,
toggleMonthlyEmail: PropTypes.func.isRequired, toggleMonthlyEmail: PropTypes.func.isRequired,
@ -137,7 +132,6 @@ export class Settings extends React.Component {
sendNotificationEmail, sendNotificationEmail,
sendQuincyEmail, sendQuincyEmail,
showLoading, showLoading,
showUpdateEmailView,
toggleIsAvailableForHire, toggleIsAvailableForHire,
toggleIsLocked, toggleIsLocked,
toggleMonthlyEmail, toggleMonthlyEmail,
@ -149,181 +143,176 @@ export class Settings extends React.Component {
if (!username && showLoading) { if (!username && showLoading) {
return <SettingsSkeleton />; return <SettingsSkeleton />;
} }
if (showUpdateEmailView) {
return <UpdateEmail />;
}
return ( return (
<ChildContainer> <div className={ `${ns}-container` }>
<div className='container'> <Row>
<Row> <Col xs={ 12 }>
<Col xs={ 12 }> <Button
<Button block={ true }
block={ true } bsSize='lg'
bsSize='lg' bsStyle='primary'
bsStyle='primary' className='btn-link-social'
className='btn-link-social' href={ `/${username}` }
href={ `/${username}` }
>
<FA name='user' />
Show me my public profile
</Button>
<Button
block={ true }
bsSize='lg'
bsStyle='primary'
className='btn-link-social'
href={ '/signout' }
>
Sign me out of freeCodeCamp
</Button>
<Button
block={ true }
bsSize='lg'
bsStyle='primary'
className='btn-link-social'
href={ 'mail:team@freecodecamp.com' }
>
Email us at team@freecodecamp.com
</Button>
</Col>
</Row>
<h1 className='text-center'>Settings for your Account</h1>
<h2 className='text-center'>Actions</h2>
<Row>
<Col xs={ 12 }>
<Button
block={ true }
bsSize='lg'
bsStyle='primary'
className='btn-link-social'
onClick={ () => toggleNightMode(username, currentTheme) }
>
Toggle Night Mode
</Button>
</Col>
</Row>
<Row>
<Col xs={ 12 }>
<SocialSettings
isGithubCool={ isGithubCool }
isLinkedIn={ isLinkedIn }
isTwitter={ isTwitter }
/>
</Col>
</Row>
<div className='spacer' />
<h2 className='text-center'>Account Settings</h2>
<Row>
<Col xs={ 12 }>
<Button
block={ true }
bsSize='lg'
bsStyle='primary'
className='btn-link-social'
href='/commit'
>
Edit my pledge
</Button>
</Col>
</Row>
<div className='spacer' />
<h2 className='text-center'>Privacy Settings</h2>
<Row>
<Col
md={ 6 }
mdOffset={ 3 }
sm={ 8 }
smOffset={ 2 }
xs={ 12 }
> >
<LockedSettings <FA name='user' />
isLocked={ isLocked } Show me my public profile
toggle={ toggleIsLocked } </Button>
/> <Button
</Col> block={ true }
</Row> bsSize='lg'
<div className='spacer' /> bsStyle='primary'
<h2 className='text-center'>Job Search Settings</h2> className='btn-link-social'
<Row> href={ '/signout' }
<Col
md={ 6 }
mdOffset={ 3 }
sm={ 8 }
smOffset={ 2 }
xs={ 12 }
> >
<JobSettings Sign me out of freeCodeCamp
isAvailableForHire={ isAvailableForHire } </Button>
toggle={ toggleIsAvailableForHire } <Button
/> block={ true }
</Col> bsSize='lg'
</Row> bsStyle='primary'
<div className='spacer' /> className='btn-link-social'
<h2 className='text-center'>Email Settings</h2> href={ 'mail:team@freecodecamp.com' }
<Row>
<Col
md={ 6 }
mdOffset={ 3 }
sm={ 8 }
smOffset={ 2 }
xs={ 12 }
> >
<EmailSettings Email us at team@freecodecamp.com
email={ email } </Button>
sendMonthlyEmail={ sendMonthlyEmail } </Col>
sendNotificationEmail={ sendNotificationEmail } </Row>
sendQuincyEmail={ sendQuincyEmail } <h1 className='text-center'>Settings for your Account</h1>
toggleMonthlyEmail={ toggleMonthlyEmail } <h2 className='text-center'>Actions</h2>
toggleNotificationEmail={ toggleNotificationEmail } <Row>
toggleQuincyEmail={ toggleQuincyEmail } <Col xs={ 12 }>
/> <Button
</Col> block={ true }
</Row> bsSize='lg'
<div className='spacer' /> bsStyle='primary'
<h2 className='text-center'>Display challenges in:</h2> className='btn-link-social'
<Row> onClick={ () => toggleNightMode(username, currentTheme) }
<Col
md={ 6 }
mdOffset={ 3 }
sm={ 8 }
smOffset={ 2 }
xs={ 12 }
> >
<LanguageSettings /> Toggle Night Mode
</Col> </Button>
</Row> </Col>
<div className='spacer' /> </Row>
<h2 className='text-center'>Danger Zone</h2> <Row>
<Row> <Col xs={ 12 }>
<Col <SocialSettings
md={ 6 } isGithubCool={ isGithubCool }
mdOffset={ 3 } isLinkedIn={ isLinkedIn }
sm={ 8 } isTwitter={ isTwitter }
smOffset={ 2 } />
xs={ 12 } </Col>
</Row>
<div className='spacer' />
<h2 className='text-center'>Account Settings</h2>
<Row>
<Col xs={ 12 }>
<Button
block={ true }
bsSize='lg'
bsStyle='primary'
className='btn-link-social'
href='/commit'
> >
<Button Edit my pledge
block={ true } </Button>
bsSize='lg' </Col>
bsStyle='danger' </Row>
className='btn-link-social' <div className='spacer' />
href='/delete-my-account' <h2 className='text-center'>Privacy Settings</h2>
> <Row>
Delete my freeCodeCamp account <Col
</Button> md={ 6 }
<Button mdOffset={ 3 }
block={ true } sm={ 8 }
bsSize='lg' smOffset={ 2 }
bsStyle='danger' xs={ 12 }
className='btn-link-social' >
href='/reset-my-progress' <LockedSettings
> isLocked={ isLocked }
Reset all of my progress and brownie points toggle={ toggleIsLocked }
</Button> />
</Col> </Col>
</Row> </Row>
<div className='spacer' />
<h2 className='text-center'>Job Search Settings</h2>
<Row>
<Col
md={ 6 }
mdOffset={ 3 }
sm={ 8 }
smOffset={ 2 }
xs={ 12 }
>
<JobSettings
isAvailableForHire={ isAvailableForHire }
toggle={ toggleIsAvailableForHire }
/>
</Col>
</Row>
<div className='spacer' />
<h2 className='text-center'>Email Settings</h2>
<Row>
<Col
md={ 6 }
mdOffset={ 3 }
sm={ 8 }
smOffset={ 2 }
xs={ 12 }
>
<EmailSettings
email={ email }
sendMonthlyEmail={ sendMonthlyEmail }
sendNotificationEmail={ sendNotificationEmail }
sendQuincyEmail={ sendQuincyEmail }
toggleMonthlyEmail={ toggleMonthlyEmail }
toggleNotificationEmail={ toggleNotificationEmail }
toggleQuincyEmail={ toggleQuincyEmail }
/>
</Col>
</Row>
<div className='spacer' />
<h2 className='text-center'>Display challenges in:</h2>
<Row>
<Col
md={ 6 }
mdOffset={ 3 }
sm={ 8 }
smOffset={ 2 }
xs={ 12 }
>
<LanguageSettings />
</Col>
</Row>
<div className='spacer' />
<h2 className='text-center'>Danger Zone</h2>
<Row>
<Col
md={ 6 }
mdOffset={ 3 }
sm={ 8 }
smOffset={ 2 }
xs={ 12 }
>
<Button
block={ true }
bsSize='lg'
bsStyle='danger'
className='btn-link-social'
href='/delete-my-account'
>
Delete my freeCodeCamp account
</Button>
<Button
block={ true }
bsSize='lg'
bsStyle='danger'
className='btn-link-social'
href='/reset-my-progress'
>
Reset all of my progress and brownie points
</Button>
</Col>
</Row>
</div> </div>
</ChildContainer>
); );
} }
} }

38
common/app/routes/Settings/Show.jsx Normal file
View File

@ -0,0 +1,38 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import ns from './ns.json';
import { showUpdateEmailViewSelector } from './redux';
import Settings from './Settings.jsx';
import UpdateEmail from './routes/update-email';
import ChildContainer from '../../Child-Container.jsx';
const mapStateToProps = state => ({
showUpdateEmailView: showUpdateEmailViewSelector(state)
});
const mapDispatchToProps = null;
const propTypes = {
showUpdateEmailView: PropTypes.bool
};
export function ShowSettings({ showUpdateEmailView }) {
let Comp = Settings;
if (showUpdateEmailView) {
Comp = UpdateEmail;
}
return (
<ChildContainer>
<div className={ `${ns}-container` }>
<Comp />
</div>
</ChildContainer>
);
}
ShowSettings.displayName = 'ShowSettings';
ShowSettings.propTypes = propTypes;
export default connect(
mapStateToProps,
mapDispatchToProps
)(ShowSettings);

3
common/app/routes/Settings/settings.less
View File

@ -15,6 +15,9 @@
} }
} }
.@{ns}-container {
.center(@value: @container-xl, @padding: @grid-gutter-width);
}
.@{ns}-skeleton { .@{ns}-skeleton {
background-color: #fff; background-color: #fff;
z-index: 10; z-index: 10;