Skip to content

Commit b34f4f1

Browse files
ShMcKShMcK
committed
adjust page styles, add margin gaps
1 parent 10fa9b7 commit b34f4f1

File tree

16 files changed

+59
-59
lines changed

16 files changed

+59
-59
lines changed

‎lib/components/app.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
2424
var React = require('react');
2525
var react_redux_1 = require('react-redux');
2626
var _components_1 = require('./_components');
27-
var theme_1 = require('./theme/theme');
28-
var MuiThemeProvider_1 = require('material-ui/styles/MuiThemeProvider');
2927
var height = atom.getSize().height;
3028
window.onresize = function () {
3129
height = atom.getSize().height;
@@ -36,7 +34,7 @@ var App = (function (_super) {
3634
_super.apply(this, arguments);
3735
}
3836
App.prototype.render = function () {
39-
return (React.createElement(MuiThemeProvider_1.default, {muiTheme: theme_1.muiTheme}, React.createElement("section", {className: 'cr', key: 'main', style: { height: height }}, React.createElement(_components_1.AppMenu, __assign({}, this.props.store)), React.createElement(_components_1.Routes, __assign({}, this.props.store, {ref: 'route'})), React.createElement(_components_1.Alert, __assign({}, this.props.store)))));
37+
return (React.createElement("section", {className: 'cr', key: 'main', style: { height: height }}, React.createElement(_components_1.AppMenu, __assign({}, this.props.store)), React.createElement(_components_1.Routes, __assign({}, this.props.store, {ref: 'route'})), React.createElement(_components_1.Alert, __assign({}, this.props.store))));
4038
};
4139
App = __decorate([
4240
react_redux_1.connect(function (store) {

‎lib/components/page/content.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ var _components_1 = require('../_components');
44
var Card_1 = require('material-ui/Card');
55
exports.PageContent = function (_a) {
66
var page = _a.page;
7-
return (React.createElement(Card_1.Card, null, React.createElement(Card_1.CardHeader, {title: page.title}), React.createElement(Card_1.CardText, null, React.createElement(_components_1.Markdown, null, page.description))));
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(_components_1.Markdown, null, page.description))));
88
};

‎lib/components/page/page.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
1414
};
1515
var React = require('react');
1616
var ReactDOM = require('react-dom');
17-
var Paper_1 = require('material-ui/Paper');
18-
var Divider_1 = require('material-ui/Divider');
1917
var content_1 = require('./content');
2018
var tasks_1 = require('./tasks/tasks');
2119
var hints_1 = require('./hints/hints');
@@ -38,7 +36,7 @@ var Page = (function (_super) {
3836
var _a = this.props, page = _a.page, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, tasks = _a.tasks, testRun = _a.testRun;
3937
var task = taskPosition <= tasks.length ? tasks[taskPosition] : null;
4038
var allComplete = taskPosition >= tasks.length;
41-
return (React.createElement(Paper_1.default, {style: pageStyle, zDepth: 1, className: 'cr-page', ref: 'page'}, React.createElement(content_1.PageContent, __assign({}, this.props)), React.createElement(Divider_1.default, null), React.createElement(tasks_1.Tasks, __assign({}, this.props)), React.createElement("div", {className: 'listEnd', ref: 'listEnd'}), React.createElement(page_complete_1.PageCompleteMessage, {page: page}), React.createElement(hints_1.Hints, {task: task, hintPosition: hintPosition}), React.createElement(toolbar_1.PageToolbar, __assign({}, this.props), React.createElement(progress_bar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length}))));
39+
return (React.createElement("section", {className: 'cr-page'}, React.createElement(content_1.PageContent, __assign({}, this.props)), React.createElement(tasks_1.Tasks, __assign({}, this.props)), React.createElement("div", {className: 'listEnd', ref: 'listEnd'}), React.createElement(page_complete_1.PageCompleteMessage, {page: page}), React.createElement(hints_1.Hints, {task: task, hintPosition: hintPosition}), React.createElement(toolbar_1.PageToolbar, __assign({}, this.props), React.createElement(progress_bar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length}))));
4240
};
4341
return Page;
4442
}(React.Component));

‎lib/components/page/tasks/tasks.js

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11
"use strict";
2+
var __assign = (this && this.__assign) || Object.assign || function(t) {
3+
for (var s, i = 1, n = arguments.length; i < n; i++) {
4+
s = arguments[i];
5+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6+
t[p] = s[p];
7+
}
8+
return t;
9+
};
10+
var _this = this;
211
var React = require('react');
312
var _components_1 = require('../../_components');
413
var List_1 = require('material-ui/List');
14+
var Card_1 = require('material-ui/Card');
515
var Subheader_1 = require('material-ui/Subheader');
616
var colors_1 = require('material-ui/styles/colors');
717
var check_box_1 = require('material-ui/svg-icons/toggle/check-box');
@@ -24,21 +34,13 @@ var TaskCheckbox = function (_a) {
2434
}
2535
return React.createElement("span", {className: 'cr-task-checkbox'}, icon);
2636
};
27-
var TaskIndex = function (_a) {
28-
var index = _a.index;
29-
return (React.createElement("span", {className: 'cr-task-index'}, index + 1, "."));
30-
};
31-
var TaskContent = function (_a) {
32-
var task = _a.task;
33-
return (React.createElement("div", {className: 'cr-task-description'}, React.createElement(_components_1.Markdown, null, task.description)));
34-
};
3537
exports.Task = function (_a) {
3638
var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, testRun = _a.testRun;
3739
var isCompleted = index < taskPosition;
38-
return (React.createElement(List_1.ListItem, {key: index, className: 'cr-task', style: { backgroundColor: isCompleted ? '#c8e6c9' : 'inherit' }}, React.createElement(TaskCheckbox, {index: index, taskPosition: taskPosition, testRun: testRun}), React.createElement(TaskIndex, {index: index}), React.createElement(TaskContent, {task: task})));
40+
return (React.createElement(List_1.ListItem, {key: index, className: 'cr-task', style: { backgroundColor: isCompleted ? '#c8e6c9' : 'inherit' }}, React.createElement(TaskCheckbox, __assign({}, _this.props)), React.createElement("span", {className: 'cr-task-index'}, index + 1, "."), React.createElement("div", {className: 'cr-task-description'}, React.createElement(_components_1.Markdown, null, task.description))));
3941
};
4042
exports.Tasks = function (_a) {
4143
var tasks = _a.tasks, taskPosition = _a.taskPosition, testRun = _a.testRun;
4244
var visTasks = visibleTasks(tasks, taskPosition);
43-
return React.createElement(List_1.List, {className: 'cr-tasks'}, React.createElement(Subheader_1.default, null, "Tasks"), visTasks.map(function (task, index) { return React.createElement(exports.Task, {key: index, task: task, taskPosition: taskPosition, index: index, testRun: testRun}); }));
45+
return React.createElement(Card_1.Card, {className: 'cr-tasks'}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Tasks"), visTasks.map(function (task, index) { return React.createElement(exports.Task, {key: index, index: index, task: task, taskPosition: taskPosition, testRun: testRun}); })));
4446
};

‎lib/components/progress/progress.js

-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@ var ProgressPage = (function (_super) {
7676
}(React.Component));
7777
;
7878
var style = {
79-
height: '100%',
8079
width: '100%',
8180
margin: 0
8281
};

‎lib/components/render.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
'use strict';
1+
"use strict";
22
var React = require('react');
33
var ReactDOM = require('react-dom');
44
var react_redux_1 = require('react-redux');
55
var store_1 = require('../store/store');
66
var app_1 = require('./app');
7+
var theme_1 = require('./theme/theme');
8+
var MuiThemeProvider_1 = require('material-ui/styles/MuiThemeProvider');
79
require('./remove-later');
810
function render(target) {
9-
ReactDOM.render(React.createElement(react_redux_1.Provider, {store: store_1.store}, React.createElement(app_1.App, null)), target);
11+
ReactDOM.render(React.createElement(react_redux_1.Provider, {store: store_1.store}, React.createElement(MuiThemeProvider_1.default, {muiTheme: theme_1.muiTheme}, React.createElement(app_1.App, null))), target);
1012
}
1113
exports.render = render;
1214
var rootName = 'crv';

‎lib/components/start/start.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@ var __extends = (this && this.__extends) || function (d, b) {
44
function __() { this.constructor = d; }
55
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
66
};
7+
var __assign = (this && this.__assign) || Object.assign || function(t) {
8+
for (var s, i = 1, n = arguments.length; i < n; i++) {
9+
s = arguments[i];
10+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11+
t[p] = s[p];
12+
}
13+
return t;
14+
};
715
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
816
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
917
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -13,6 +21,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
1321
var __metadata = (this && this.__metadata) || function (k, v) {
1422
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
1523
};
24+
var _this = this;
1625
var React = require('react');
1726
var react_redux_1 = require('react-redux');
1827
var store_1 = require('../../store/store');
@@ -51,5 +60,5 @@ exports.Start = function (_a) {
5160
var checks = _a.checks;
5261
return (React.createElement("section", {className: 'cr-start'}, React.createElement("div", {className: 'cr-start-header'}, checks.passed
5362
? React.createElement(Welcome, null)
54-
: React.createElement(checks_1.Checks, {checks: checks}))));
63+
: React.createElement(checks_1.Checks, __assign({}, _this.props)))));
5564
};

‎src/components/app.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import * as React from 'react';
22
import {connect} from 'react-redux';
33
import {AppMenu, Routes, Alert} from './_components';
4-
import {muiTheme} from './theme/theme';
5-
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
4+
65

76
let height: number = atom.getSize().height;
87
window.onresize = function() {
@@ -15,14 +14,11 @@ window.onresize = function() {
1514
export class App extends React.Component<{store?: CR.State}, {}> {
1615
render(): React.ReactElement<{}> {
1716
return (
18-
<MuiThemeProvider muiTheme={muiTheme}>
1917
<section className='cr' key='main' style={{height}}>
2018
<AppMenu {...this.props.store} />
2119
<Routes {...this.props.store} ref='route' />
2220
<Alert {...this.props.store} />
2321
</section>
24-
</MuiThemeProvider>
25-
2622
);
2723
}
2824
};

‎src/components/page/_page.less

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
.cr-page {
88
position: relative;
99
overflow-y: scroll;
10+
&-content {
11+
margin: 5px;
12+
}
1013
.listEnd {
11-
margin-bottom: 100px;
14+
margin-bottom: 130px;
1215
}
1316
}

‎src/components/page/content.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {Card, CardHeader, CardText} from 'material-ui/Card';
55
export const PageContent: React.StatelessComponent<{
66
page: CR.Page
77
}> = ({page}) => (
8-
<Card>
8+
<Card className='cr-page-content'>
99
<CardHeader title={page.title} />
1010
<CardText>
1111
<Markdown>{page.description}</Markdown>

‎src/components/page/page.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import * as ReactDOM from 'react-dom';
33
import Paper from 'material-ui/Paper';
44
import Divider from 'material-ui/Divider';
5+
import {Card} from 'material-ui/Card';
56
import {PageContent} from './content';
67
import {Tasks} from './tasks/tasks';
78
import {Hints} from './hints/hints';
@@ -31,10 +32,10 @@ render() {
3132
const task = taskPosition <= tasks.length ? tasks[taskPosition] : null;
3233
const allComplete = taskPosition >= tasks.length;
3334

35+
// <Paper style={pageStyle} zDepth={1} className='cr-page' ref='page'>
3436
return (
35-
<Paper style={pageStyle} zDepth={1} className='cr-page' ref='page'>
37+
<section className='cr-page'>
3638
<PageContent {...this.props} />
37-
<Divider />
3839

3940
<Tasks {...this.props} />
4041
<div className='listEnd' ref='listEnd'></div>
@@ -44,7 +45,7 @@ render() {
4445
<PageToolbar {...this.props}>
4546
<ProgressBar taskPosition={taskPosition} taskCount={tasks.length}/>
4647
</PageToolbar>
47-
</Paper>
48+
</section>
4849
);
4950
}
5051
}

‎src/components/page/tasks/_tasks.less

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
.cr-tasks {
2+
margin: 10px 5px;
23
.cr-task {
3-
padding: 10px;
4+
margin: 5px;
5+
padding: 5px;
46
position: relative;
57
&-checkbox {
68
position: absolute;

‎src/components/page/tasks/tasks.tsx

+11-24
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import {Markdown} from '../../_components';
33
import {List, ListItem} from 'material-ui/List';
4+
import {Card} from 'material-ui/Card';
45
import Subheader from 'material-ui/Subheader';
56
import {green500, orange500} from 'material-ui/styles/colors';
67

@@ -27,29 +28,17 @@ const TaskCheckbox: React.StatelessComponent<{
2728
return <span className='cr-task-checkbox'>{icon}</span>;
2829
};
2930

30-
const TaskIndex: React.StatelessComponent<{
31-
index: number
32-
}> = ({index}) => (
33-
<span className='cr-task-index'>{index + 1}.</span>
34-
);
35-
36-
const TaskContent: React.StatelessComponent<{
37-
task: CR.Task
38-
}> = ({task}) => (
39-
<div className='cr-task-description'>
40-
<Markdown>{task.description}</Markdown>
41-
</div>
42-
);
43-
4431
export const Task: React.StatelessComponent<{
4532
task: CR.Task, taskPosition: number, index: number, testRun: boolean
4633
}> = ({task, taskPosition, index, testRun}) => {
4734
const isCompleted = index < taskPosition;
4835
return (
4936
<ListItem key={index} className='cr-task' style={{backgroundColor: isCompleted ? '#c8e6c9' : 'inherit'}}>
50-
<TaskCheckbox index={index} taskPosition={taskPosition} testRun={testRun}/>
51-
<TaskIndex index={index} />
52-
<TaskContent task={task} />
37+
<TaskCheckbox {...this.props}/>
38+
<span className='cr-task-index'>{index + 1}.</span>
39+
<div className='cr-task-description'>
40+
<Markdown >{task.description}</Markdown>
41+
</div>
5342
</ListItem>
5443
);
5544
};
@@ -58,13 +47,11 @@ export const Tasks: React.StatelessComponent<{
5847
tasks: CR.Task[], taskPosition: number, testRun: boolean
5948
}> = ({tasks, taskPosition, testRun}) => {
6049
const visTasks = visibleTasks(tasks, taskPosition);
61-
return <List className='cr-tasks'>
50+
return <Card className='cr-tasks'>
51+
<List>
6252
<Subheader>Tasks</Subheader>
6353
{visTasks.map((task, index) => <Task
64-
key={index}
65-
task={task}
66-
taskPosition={taskPosition}
67-
index={index}
68-
testRun={testRun} />)}
69-
</List>;
54+
key={index} index={index} task={task} taskPosition={taskPosition} testRun={testRun}/>)}
55+
</List>
56+
</Card>;
7057
};

‎src/components/progress/progress.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ class ProgressPage extends React.Component<{page: CR.Page, itemPosition: CR.Posi
6060
};
6161

6262
const style = {
63-
height: '100%',
63+
// height: '100%',
6464
width: '100%',
6565
margin: 0
6666
};

‎src/components/render.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
'use strict';
21
import * as React from 'react';
32
import * as ReactDOM from 'react-dom';
43
import {Provider} from 'react-redux';
54
import {store} from '../store/store';
65
import {App} from './app';
6+
import {muiTheme} from './theme/theme';
7+
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
78
import './remove-later';
89

910
/**
@@ -12,7 +13,9 @@ import './remove-later';
1213
export function render(target: HTMLElement) {
1314
ReactDOM.render(
1415
<Provider store={store}>
16+
<MuiThemeProvider muiTheme={muiTheme}>
1517
<App />
18+
</MuiThemeProvider>
1619
</Provider>,
1720
target
1821
);

‎src/components/start/start.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const Start = ({checks}) => (
4242
<div className='cr-start-header'>
4343
{checks.passed
4444
? <Welcome />
45-
: <Checks checks={checks}/>}
45+
: <Checks {...this.props}/>}
4646
</div>
4747
</section>
4848
);

0 commit comments

Comments
 (0)