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;
}
.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
//* {
// border-color: red;

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

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

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

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

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

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