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

fix(Settings): Email settings refactor

Browse Source 
broke after a couple of other changes
This commit is contained in:
Berkeley Martinez
2018-01-12 17:09:18 -08:00
parent 8b7199223d
commit 4a6123ce70
4 changed files with 21 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
client/less/main.less
View File

@ -695,27 +695,6 @@ code {
z-index: 20000 !important; z-index: 20000 !important;
} }
.email-settings {
@media (max-width: 768px) {
text-align: center;
}
}
.toggle-btn-group {
float: right;
.btn[disabled] {
opacity: 1;
}
@media (max-width: 768px) {
float: none;
.btn-toggle {
margin-top: 10px;
margin-bottom: 20px;
}
}
}
//uncomment this to see the dimensions of all elements outlined in red //uncomment this to see the dimensions of all elements outlined in red
//* { //* {
// border-color: red; // border-color: red;

136
common/app/routes/Settings/Email-Setting.jsx
View File

@ -1,15 +1,10 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import { import { Button, Row, Col } from 'react-bootstrap';
ToggleButtonGroup, import TB from './Toggle-Button';
ToggleButton,
Button,
Row,
Col
} from 'react-bootstrap';
import FA from 'react-fontawesome'; import FA from 'react-fontawesome';
import classnames from 'classnames';
import ns from './ns.json';
import { onRouteUpdateEmail } from './redux'; import { onRouteUpdateEmail } from './redux';
import { Link } from '../../Router'; import { Link } from '../../Router';
@ -66,7 +61,7 @@ export default function EmailSettings({
); );
} }
return ( return (
<div className='email-settings'> <div className={ `${ns}-email-container` }>
<Row> <Row>
<p className='large-p text-center'> <p className='large-p text-center'>
<em>{ email }</em> <em>{ email }</em>
@ -84,45 +79,10 @@ export default function EmailSettings({
</p> </p>
</Col> </Col>
<Col sm={ 4 }> <Col sm={ 4 }>
<ToggleButtonGroup <TB
className='toggle-btn-group'
name='monthly-email'
onChange={ toggleMonthlyEmail } onChange={ toggleMonthlyEmail }
type='radio' value={ sendMonthlyEmail }
> />
<ToggleButton
bsSize='lg'
bsStyle='primary'
className={
classnames(
'positive-20',
{ active: sendMonthlyEmail },
'btn-toggle'
)
}
disabled={ sendMonthlyEmail }
type='radio'
value={ 1 }
>
On
</ToggleButton>
<ToggleButton
bsSize='lg'
bsStyle='primary'
className={
classnames(
'positive-20',
{ active: !sendMonthlyEmail },
'btn-toggle'
)
}
disabled={ !sendMonthlyEmail }
type='radio'
value={ 2 }
>
Off
</ToggleButton>
</ToggleButtonGroup>
</Col> </Col>
</Row> </Row>
<Row> <Row>
@ -134,45 +94,10 @@ export default function EmailSettings({
</p> </p>
</Col> </Col>
<Col sm={ 4 }> <Col sm={ 4 }>
<ToggleButtonGroup <TB
className='toggle-btn-group'
name='notification-email'
onChange={ toggleNotificationEmail } onChange={ toggleNotificationEmail }
type='radio' value={ sendNotificationEmail }
> />
<ToggleButton
bsSize='lg'
bsStyle='primary'
className={
classnames(
'positive-20',
{ active: sendNotificationEmail },
'btn-toggle'
)
}
disabled={ sendNotificationEmail }
type='radio'
value={ 1 }
>
On
</ToggleButton>
<ToggleButton
bsSize='lg'
bsStyle='primary'
className={
classnames(
'positive-20',
{ active: !sendNotificationEmail },
'btn-toggle'
)
}
disabled={ !sendNotificationEmail }
type='radio'
value={ 2 }
>
Off
</ToggleButton>
</ToggleButtonGroup>
</Col> </Col>
</Row> </Row>
<Row> <Row>
@ -184,45 +109,10 @@ export default function EmailSettings({
</p> </p>
</Col> </Col>
<Col sm={ 4 }> <Col sm={ 4 }>
<ToggleButtonGroup <TB
className='toggle-btn-group'
name='quincy-email'
onChange={ toggleQuincyEmail } onChange={ toggleQuincyEmail }
type='radio' value={ sendQuincyEmail }
> />
<ToggleButton
bsSize='lg'
bsStyle='primary'
className={
classnames(
'positive-20',
{ active: sendQuincyEmail },
'btn-toggle'
)
}
disabled={ sendQuincyEmail }
type='radio'
value={ 1 }
>
On
</ToggleButton>
<ToggleButton
bsSize='lg'
bsStyle='primary'
className={
classnames(
'positive-20',
{ active: !sendQuincyEmail },
'btn-toggle'
)
}
disabled={ !sendQuincyEmail }
type='radio'
value={ 2 }
>
Off
</ToggleButton>
</ToggleButtonGroup>
</Col> </Col>
</Row> </Row>
</div> </div>

2
common/app/routes/Settings/index.js
View File

@ -1,6 +1,6 @@
import { types } from './redux'; import { types } from './redux';
export { default } from './Settings.jsx'; export { default } from './Show.jsx';
export const routes = { export const routes = {
[types.onRouteSettings]: '/settings', [types.onRouteSettings]: '/settings',

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

@ -18,6 +18,13 @@
.@{ns}-container { .@{ns}-container {
.center(@value: @container-xl, @padding: @grid-gutter-width); .center(@value: @container-xl, @padding: @grid-gutter-width);
} }
.@{ns}-email-container {
.below(sm, {
text-align: center;
})
}
.@{ns}-skeleton { .@{ns}-skeleton {
background-color: #fff; background-color: #fff;
z-index: 10; z-index: 10;