Skip to content

Commit a7d9a23

Browse files
ShMcKShMcK
committed
convert Less to inline styles in components
1 parent d32b813 commit a7d9a23

File tree

43 files changed

+259
-222
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+259
-222
lines changed

‎lib/components/AppMenu/index.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@ var React = require('react');
33
var AppBar_1 = require('material-ui/AppBar');
44
var menuIconLeft_1 = require('./menuIconLeft');
55
var menuRight_1 = require('./menuRight');
6+
var styles = {
7+
zIndex: '999 !important'
8+
};
69
exports.AppMenu = function (_a) {
710
var route = _a.route;
8-
return (React.createElement(AppBar_1.default, {title: 'CodeRoad', className: 'cr-menu-bar', iconElementLeft: menuIconLeft_1.menuIconLeft(), iconElementRight: menuRight_1.menuRight(route)}));
11+
return (React.createElement(AppBar_1.default, {title: 'CodeRoad', className: 'cr-menu-bar', styles: styles, iconElementLeft: menuIconLeft_1.menuIconLeft(), iconElementRight: menuRight_1.menuRight(route)}));
912
};

‎lib/components/Page/Chapter/index.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
"use strict";
22
var React = require('react');
33
var index_1 = require('../../index');
4+
var styles = {
5+
display: 'block',
6+
height: '33px',
7+
width: '100%',
8+
padding: '10px',
9+
textAlign: 'center',
10+
};
411
exports.Chapter = function (_a) {
512
var chapter = _a.chapter;
6-
return (React.createElement("section", {className: 'cr-chapter'}, React.createElement(index_1.Markdown, null, chapter.title)));
13+
return (React.createElement("section", {styles: styles}, React.createElement(index_1.Markdown, null, chapter.title)));
714
};

‎lib/components/Page/Hints/index.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,21 @@ var Card_1 = require('material-ui/Card');
44
var index_1 = require('../../index');
55
var HintButton_1 = require('./HintButton');
66
var help_1 = require('material-ui/svg-icons/action/help');
7+
var styles = {
8+
position: 'relative',
9+
margin: '-5px 20px',
10+
width: '360px',
11+
textAlign: 'center',
12+
zIndex: '0',
13+
};
714
exports.Hints = function (_a) {
815
var task = _a.task, hintPosition = _a.hintPosition;
916
var hints = task && task.hints ? task.hints : null;
1017
if (hintPosition < 0 || !hints || !hints.length) {
1118
return null;
1219
}
1320
var hint = hints[hintPosition];
14-
return (React.createElement(Card_1.Card, {className: 'cr-task-hints'}, React.createElement(Card_1.CardHeader, {title: 'Hints', avatar: React.createElement(help_1.default, null), actAsExpander: true, showExpandableButton: true}), React.createElement(Card_1.CardText, {className: 'cr-task-hint', expandable: true}, React.createElement(index_1.Markdown, null, hint)), hints.length > 1
15-
? React.createElement(Card_1.CardActions, {expandable: true, className: 'cr-task-hints-actions'}, React.createElement(HintButton_1.HintButton, {type: 'prev', label: 'Previous', hintPosition: hintPosition, hintsLength: hints.length}), React.createElement(HintButton_1.HintButton, {type: 'next', label: 'Next', hintPosition: hintPosition, hintsLength: hints.length}))
21+
return (React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardHeader, {title: 'Hints', avatar: React.createElement(help_1.default, null), actAsExpander: true, showExpandableButton: true}), React.createElement(Card_1.CardText, {className: 'cr-task-hint', expandable: true}, React.createElement(index_1.Markdown, null, hint)), hints.length > 1
22+
? React.createElement(Card_1.CardActions, {style: { paddingBottom: '30px !important' }, expandable: true, className: 'cr-task-hints-actions'}, React.createElement(HintButton_1.HintButton, {type: 'prev', label: 'Previous', hintPosition: hintPosition, hintsLength: hints.length}), React.createElement(HintButton_1.HintButton, {type: 'next', label: 'Next', hintPosition: hintPosition, hintsLength: hints.length}))
1623
: null));
1724
};

‎lib/components/Page/PageContent.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
var React = require('react');
33
var index_1 = require('../index');
44
var Card_1 = require('material-ui/Card');
5+
var styles = {
6+
margin: '5px'
7+
};
58
exports.PageContent = function (_a) {
69
var page = _a.page;
7-
return (React.createElement(Card_1.Card, {className: 'cr-page-content'}, React.createElement(Card_1.CardHeader, {title: page.title}), React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, null, page.description))));
10+
return (React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardHeader, {title: page.title}), React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, null, page.description))));
811
};

‎lib/components/Page/PageToolbar/index.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,16 @@ var Toolbar_1 = require('material-ui/Toolbar');
44
var ToggleLog_1 = require('./ToggleLog');
55
var Save_1 = require('./Save');
66
var Continue_1 = require('./Continue');
7+
var styles = {
8+
zIndex: '10000',
9+
position: 'fixed',
10+
bottom: '0',
11+
right: '0',
12+
height: '60px',
13+
width: '400px',
14+
};
715
exports.PageToolbar = function (_a) {
816
var tasks = _a.tasks, taskPosition = _a.taskPosition, children = _a.children;
9-
return (React.createElement("section", {className: 'cr-page-toolbar'}, children, React.createElement(Toolbar_1.Toolbar, null, React.createElement(Toolbar_1.ToolbarGroup, {float: 'left'}, React.createElement(ToggleLog_1.ToggleLog, null)), React.createElement(Toolbar_1.ToolbarGroup, {float: 'right'}, taskPosition >= tasks.length ?
17+
return (React.createElement("section", {styles: styles}, children, React.createElement(Toolbar_1.Toolbar, null, React.createElement(Toolbar_1.ToolbarGroup, {float: 'left'}, React.createElement(ToggleLog_1.ToggleLog, null)), React.createElement(Toolbar_1.ToolbarGroup, {float: 'right'}, taskPosition >= tasks.length ?
1018
React.createElement(Continue_1.Continue, null) : React.createElement(Save_1.Save, null)))));
1119
};

‎lib/components/Page/Tasks/Task.js

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,28 @@ var index_1 = require('../../index');
44
var TaskCheckbox_1 = require('./TaskCheckbox');
55
var List_1 = require('material-ui/List');
66
var colors_1 = require('material-ui/styles/colors');
7+
var styles = {
8+
margin: '5px',
9+
padding: '5px',
10+
position: 'relative'
11+
};
12+
var indexStyles = {
13+
position: 'absolute',
14+
top: '20px',
15+
left: '45px',
16+
};
17+
var descriptionStyles = {
18+
backgroundColor: 'inherit',
19+
paddingTop: '-10px',
20+
paddingLeft: '55px',
21+
fontSize: '14px',
22+
lineHeight: '1.6',
23+
};
724
function getStatus(index, taskPosition, testRun) {
825
return index < taskPosition ? colors_1.lightGreen200 : 'inherit';
926
}
1027
exports.Task = function (_a) {
1128
var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, testRun = _a.testRun;
1229
var backgroundColor = getStatus(index, taskPosition, testRun);
13-
return (React.createElement(List_1.ListItem, {key: index, className: 'cr-task', style: { backgroundColor: backgroundColor }}, testRun ? React.createElement(TaskCheckbox_1.TaskCheckbox, null) : null, React.createElement("span", {className: 'cr-task-index'}, index + 1, "."), React.createElement("div", {className: 'cr-task-description'}, React.createElement(index_1.Markdown, null, task.description))));
30+
return (React.createElement(List_1.ListItem, {key: index, style: Object.assign({}, styles, { backgroundColor: backgroundColor })}, testRun ? React.createElement(TaskCheckbox_1.TaskCheckbox, null) : null, React.createElement("span", {style: indexStyles}, index + 1, "."), React.createElement("div", {style: descriptionStyles}, React.createElement(index_1.Markdown, null, task.description))));
1431
};

‎lib/components/Page/Tasks/TaskCheckbox.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,8 @@
22
var React = require('react');
33
var colors_1 = require('material-ui/styles/colors');
44
var indeterminate_check_box_1 = require('material-ui/svg-icons/toggle/indeterminate-check-box');
5-
exports.TaskCheckbox = function () { return (React.createElement("span", {className: 'cr-task-checkbox'}, React.createElement(indeterminate_check_box_1.default, {color: colors_1.orange500}))); };
5+
var styles = {
6+
position: 'absolute',
7+
top: '15px'
8+
};
9+
exports.TaskCheckbox = function () { return (React.createElement("span", {style: styles}, React.createElement(indeterminate_check_box_1.default, {color: colors_1.orange500}))); };

‎lib/components/Page/Tasks/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,6 @@ function visibleTasks(tasks, taskPosition) {
1111
exports.Tasks = function (_a) {
1212
var tasks = _a.tasks, taskPosition = _a.taskPosition, testRun = _a.testRun, completed = _a.completed;
1313
var visTasks = visibleTasks(tasks, taskPosition);
14-
return (React.createElement(Card_1.Card, {className: 'cr-tasks', style: { backgroundColor: completed ? colors_1.lightGreen200 : 'white' }}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Tasks"), visTasks.map(function (task, index) { return (React.createElement(Task_1.Task, {key: index, index: index, task: task, taskPosition: taskPosition, testRun: testRun})); }))));
14+
var bg = completed ? colors_1.lightGreen200 : 'white';
15+
return (React.createElement(Card_1.Card, {style: { margin: '10px 5px', backGroundColor: bg }}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Tasks"), visTasks.map(function (task, index) { return (React.createElement(Task_1.Task, {key: index, index: index, task: task, taskPosition: taskPosition, testRun: testRun})); }))));
1516
};

‎lib/components/Page/index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,11 @@ var Hints_1 = require('./Hints');
2020
var PageComplete_1 = require('./PageComplete');
2121
var PageToolbar_1 = require('./PageToolbar');
2222
var ProgressBar_1 = require('./ProgressBar');
23-
var pageStyle = {
23+
var styles = {
2424
height: '100%',
2525
width: '100%',
26+
position: 'relative',
27+
overflowY: 'scroll',
2628
};
2729
var Page = (function (_super) {
2830
__extends(Page, _super);
@@ -36,7 +38,7 @@ var Page = (function (_super) {
3638
var _a = this.props, page = _a.page, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, tasks = _a.tasks, testRun = _a.testRun;
3739
var task = taskPosition <= tasks.length ? tasks[taskPosition] : null;
3840
var allComplete = taskPosition >= tasks.length;
39-
return (React.createElement("section", {className: 'cr-page'}, React.createElement(PageContent_1.PageContent, __assign({}, this.props)), React.createElement(Tasks_1.Tasks, __assign({}, this.props, {completed: page.completed})), React.createElement("div", {className: 'listEnd', ref: 'listEnd'}), React.createElement(PageComplete_1.PageComplete, __assign({}, this.props)), React.createElement(Hints_1.Hints, {task: task, hintPosition: hintPosition}), React.createElement(PageToolbar_1.PageToolbar, __assign({}, this.props), React.createElement(ProgressBar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length, completed: page.completed}))));
41+
return (React.createElement("section", {style: styles}, React.createElement(PageContent_1.PageContent, __assign({}, this.props)), React.createElement(Tasks_1.Tasks, __assign({}, this.props, {completed: page.completed})), React.createElement("div", {ref: 'listEnd', style: { marginBottom: '110px' }}), React.createElement(PageToolbar_1.PageToolbar, __assign({}, this.props), React.createElement(PageComplete_1.PageComplete, __assign({}, this.props)), React.createElement(Hints_1.Hints, {task: task, hintPosition: hintPosition}), React.createElement(ProgressBar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length, completed: page.completed}))));
4042
};
4143
return Page;
4244
}(React.Component));

‎lib/components/Progress/ProgressChapter.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
"use strict";
22
var React = require('react');
3-
var classnames = require('classnames');
43
var List_1 = require('material-ui/List');
54
var ProgressPage_1 = require('./ProgressPage');
65
var index_1 = require('../index');
6+
var styles = {
7+
marginBottom: '0'
8+
};
9+
var descriptionStyles = {
10+
fontSize: '14px'
11+
};
712
exports.ProgressChapter = function (_a) {
813
var chapter = _a.chapter, chapterIndex = _a.chapterIndex, position = _a.position;
914
var isActive = chapterIndex === position.chapter;
10-
return (React.createElement(List_1.ListItem, {key: 'c' + chapterIndex, className: classnames({
11-
'chapter': true,
12-
'isActive': isActive
13-
}), initiallyOpen: chapterIndex === 0, primaryTogglesNestedList: chapterIndex === position.chapter && !chapter.completed, nestedItems: chapter.pages.map(function (page, pageIndex) { return (React.createElement(ProgressPage_1.ProgressPage, {key: chapterIndex + '_' + pageIndex, pageIndex: pageIndex, page: page, chapterIndex: chapterIndex, position: position})); })}, React.createElement("h3", null, chapterIndex + 1, ". ", chapter.title), React.createElement("span", {className: 'chapter-description'}, React.createElement(index_1.Markdown, null, chapter.description))));
15+
return (React.createElement(List_1.ListItem, {key: 'c' + chapterIndex, className: isActive ? 'isActive' : null, style: styles, initiallyOpen: chapterIndex === 0, primaryTogglesNestedList: chapterIndex === position.chapter && !chapter.completed, nestedItems: chapter.pages.map(function (page, pageIndex) { return (React.createElement(ProgressPage_1.ProgressPage, {key: chapterIndex + '_' + pageIndex, pageIndex: pageIndex, page: page, chapterIndex: chapterIndex, position: position})); })}, React.createElement("h3", null, chapterIndex + 1, ". ", chapter.title), React.createElement("span", {style: descriptionStyles}, React.createElement(index_1.Markdown, null, chapter.description))));
1416
};

0 commit comments

Comments
 (0)