Skip to content

Commit 5825d38

Browse files
philschatzphilschatz
committed
Merge pull request #73 from openstax/jfl-ireading-2015-03-20
jfl ireading 2015 03 20
2 parents 3ad8752 + 00ebd82 commit 5825d38

File tree

10 files changed

+263
-115
lines changed

10 files changed

+263
-115
lines changed

‎src/api.coffee

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ start = ->
120120

121121

122122
apiHelper TaskStepActions, TaskStepActions.load, TaskStepActions.loaded, 'GET', (id) ->
123+
throw new Error('BUG: Wrong type') unless typeof id is 'string'
123124
url: "/api/steps/#{id}"
124125

125126
# Go from complete to load so we fetch the new JSON

‎style/nav.less

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
.navbar.navbar, .navbar-default.navbar {
2-
color: #333333;
3-
border-bottom: 1px solid #e5e5e5;
2+
border-bottom: 1px solid @border-color;
43
background-color: #ffffff;
54
}
65

76
.navbar {
87
.container-fluid { padding: 0 40px; }
98
}
9+
10+
.ui-brand-logo {
11+
display: inline-block;
12+
height: 30px;
13+
width: 217px;
14+
background-image: url('../style/resources/logo-brand.svg');
15+
}

‎style/question.less

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
@wrong-answer-color: #c22032;
44
@wrong-answer-background: #ffe0e0;
55
@answer-hover-color: #e6f9fc;
6-
@answer-select-color: #e6f9fc; // darker than hover
6+
@answer-select-color: #def4f7; // darker than hover
77

88
.task-step .exercise,
99
.question {
1010
font-size: 2.1rem;
1111
font-weight: 400;
12-
padding: 0.5em 100px;
12+
padding: 10px 140px;
1313

1414
textarea {
1515
margin: 1em 0;
@@ -30,7 +30,7 @@
3030
.free-response {
3131
font-style: italic;
3232
color: #888;
33-
padding: 20px 40px;
33+
padding: 15px 40px;
3434
display: block;
3535
width: 100%;
3636
margin: 20px 0 5px 0;
@@ -131,7 +131,7 @@
131131

132132
.answer-content {
133133
display: table-cell;
134-
padding: 20px 40px 20px 0;
134+
padding: 15px 40px 15px 0;
135135
}
136136
}
137137
}
@@ -153,7 +153,6 @@
153153
float:left;
154154
background: #f3fcfd;
155155
transition: background-color .1s ease-in;
156-
transition: padding-left .05s ease-in;
157156

158157
&:hover {
159158
background-color: @answer-hover-color;
@@ -164,9 +163,9 @@
164163

165164
.answer-input-box:checked + label.answer-label,
166165
.answer-input-box:checked + label.answer-label:hover {
167-
font-weight: 700;
166+
color: #2a2a2a;
167+
font-weight: 600;
168168
background-color: @answer-select-color; // darker than hover
169-
padding-left: 60px;
170169
}
171170

172171
}

‎style/reading.less

Lines changed: 85 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,95 @@
1-
.reading-step {
2-
.para {
3-
margin-bottom: 1em;
1+
2+
@physics-color-primary: #79b142;
3+
@physics-background-primary: #232e66;
4+
@physics-background-secondary: #79b142;
5+
// @tips-for-success-color:#bf007b;
6+
// @grasp-check-color:#39b531;
7+
// @grasp-check-color-background:#fff;
8+
@reading-title-font: #fonts > .sans;
9+
10+
@import 'reading/video';
11+
@import 'reading/links-to-physics';
12+
@import 'reading/work-in-physics';
13+
// @import 'reading/tips-for-success';
14+
// @import 'reading/grasp-check';
15+
16+
.task-step .panel-body {
17+
18+
.reading-step .section-opener .learning-objectives {
19+
width: 100%;
20+
min-height: 100px;
21+
display: inline-flex;
22+
color: #ffffff;
23+
padding: 10px 40px;
24+
background: @physics-background-secondary;
25+
26+
> div {
27+
display: none
28+
}
29+
30+
p {
31+
color: rgba(255,255,255,.75);
32+
#fonts > .sans;
33+
text-transform: uppercase;
34+
text-align: right;
35+
margin: auto 15px;
36+
}
37+
38+
ul {
39+
margin: 0 0;
40+
padding: 0 15px 0 30px;
41+
border-left: 1px solid rgba(255,255,255,.4);
42+
}
43+
44+
}
45+
46+
.section-opener ~ section h1 + p::first-letter, div[data-type="document-title"] ~ p::first-letter {
47+
float: left;
48+
#fonts > .sans(6.4rem, 6.4rem);
49+
font-weight: 600;
50+
color: @physics-color-primary;
51+
margin: 0 4px 0 -4px;
52+
}
53+
54+
.reading-step section[data-depth="1"], .reading-step .work-in-physics, .reading-step .links-to-physics {
55+
padding: 0 140px;
56+
57+
section[data-depth="1"] {
58+
padding: 0;
59+
}
60+
61+
}
62+
63+
div[data-type="document-title"] ~ p {
64+
padding: 0 140px;
65+
}
66+
67+
p {
68+
#fonts > .serif(1.75rem, 190%);
69+
margin: 0 0 2.4rem 0;
70+
padding: 0;
471
}
572

673
figure {
7-
width: 100%;
8-
margin-bottom: 1em;
9-
text-align: center;
74+
width: 60%;
75+
float: left;
76+
text-align: left;
77+
margin: 0 30px 0 -80px;
78+
padding: 0;
1079

1180
img {
12-
width: auto;
13-
margin: 0 auto 1em;
81+
width: 100%;
82+
border: 1px solid @border-color;
83+
margin: 0;
84+
padding: 0;
85+
align: left;
1486
}
87+
1588
figcaption {
16-
text-align:left;
89+
font-style: italic;
90+
line-height: 150%;
1791
}
18-
}
19-
}
2092

21-
@links-to-physics-color:#d22120;
22-
@links-to-physics-background-color:#f5f5f5;
23-
@tips-for-success-color:#bf007b;
24-
@grasp-check-color:#39b531;
25-
@grasp-check-color-background:#fff;
26-
@reading-title-font:impact;
93+
}
2794

28-
@import 'reading/links-to-physics';
29-
@import 'reading/tips-for-success';
30-
@import 'reading/grasp-check';
95+
}

‎style/reading/links-to-physics.less

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,34 @@
1+
.panel-body .reading-step .links-to-physics {
2+
margin-top: 20px;
13

2-
.reading-step .note.links-to-physics {
3-
margin-bottom: 1em;
4+
&:before {
5+
content: "Links to Physics";
6+
#fonts > .sans(3.2rem, 3.2rem);
7+
font-weight: 900;
8+
color: @physics-color-primary;
9+
background: #232e66;
10+
padding: 10px 20px;
11+
}
412

5-
> .title {
6-
background: @links-to-physics-color;
13+
div[data-type="title"] {
14+
margin: 10px 0 20px 0;
15+
padding: 10px 20px;
16+
#fonts > .sans(2rem, 2.4rem);
717
color: white;
8-
font-family: @reading-title-font;
9-
padding: 10px 25px;
10-
font-size: 2.2em;
11-
width: 250px;
12-
}
18+
font-weight: 300;
19+
text-transform: uppercase;
20+
letter-spacing: 2px;
21+
text-align: center;
22+
background: @physics-background-secondary;
1323

14-
p, .para {
15-
background: @links-to-physics-background-color;
16-
padding: 0 25px 1em;
17-
margin-bottom: 0;
24+
&:before {
25+
content: "\2014 ";
26+
}
1827

19-
> .title {
20-
color: @links-to-physics-color;
21-
font-family: @reading-title-font;
22-
font-size: 1.7em;
23-
padding-top: 1em;
24-
margin-bottom: 1em;
28+
&:after {
29+
content: " \2014";
2530
}
31+
2632
}
33+
2734
}

‎style/reading/video.less

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.task-step .panel-body .-video-step {
2+
padding: 20px 140px;
3+
4+
iframe {
5+
width: 720px;
6+
height: 405px;
7+
}
8+
9+
}

‎style/reading/work-in-physics.less

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.panel-body .reading-step .work-in-physics {
2+
margin-top: 20px;
3+
4+
&:before {
5+
content: "Work in Physics";
6+
#fonts > .sans(3.2rem, 3.2rem);
7+
font-weight: 900;
8+
color: @physics-color-primary;
9+
background: #232e66;
10+
padding: 10px 20px;
11+
}
12+
13+
div[data-type="title"] {
14+
margin: 10px 0 20px 0;
15+
padding: 10px 20px;
16+
#fonts > .sans(2rem, 2.4rem);
17+
color: white;
18+
font-weight: 300;
19+
text-transform: uppercase;
20+
letter-spacing: 2px;
21+
text-align: center;
22+
background: @physics-background-secondary;
23+
24+
&:before {
25+
content: "\2014 ";
26+
}
27+
28+
&:after {
29+
content: " \2014";
30+
}
31+
32+
}
33+
34+
}

‎style/scaffold.less

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
2+
body {
3+
padding-top: 60px; // For the top navbar
4+
padding-bottom: 50px;
5+
padding-left: 40px;
6+
padding-right: 40px;
7+
background: #f1f1f1;
8+
}
9+
10+
.task {
11+
max-width: 1000px;
12+
margin: 0 auto;
13+
}
14+
15+
.panel {
16+
margin: 20px auto;
17+
border-radius: 0;
18+
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
19+
20+
&.ui-interactive {
21+
.panel-body {
22+
height: 100%;
23+
24+
iframe {
25+
height: 100%;
26+
width: 100%;
27+
border: 1px solid black;
28+
}
29+
}
30+
}
31+
32+
// Similar to a dismissable alert, line up the action button in the panel heading
33+
.ui-action {
34+
position: relative;
35+
top: -5px;
36+
}
37+
38+
// The little bit of gray text next to a task in the task list that says `(3 steps)`
39+
.panel-heading small.details {
40+
color: #ccc;
41+
margin-left: .5em;
42+
}
43+
}
44+
45+
.panel-header {
46+
margin: 20px auto;
47+
border-radius: 0;
48+
}
49+
50+
.panel-body {
51+
padding: 20px 0;
52+
}
53+
54+
.panel-footer {
55+
padding: 20px 50px;
56+
background-color: #f5f5f5;
57+
border-top: 1px solid @border-color;
58+
border-bottom-right-radius: 0;
59+
border-bottom-left-radius: 0;
60+
}

0 commit comments

Comments
 (0)