jfl ireading 2015 03 20

src/api.coffee

@@ -124,6 +124,7 @@ start = ->
     url: "/api/courses/#{courseId}/practice"
 
   apiHelper TaskStepActions, TaskStepActions.load, TaskStepActions.loaded, 'GET', (id) ->
+    throw new Error('BUG: Wrong type') unless typeof id is 'string'
     url: "/api/steps/#{id}"
 
   # Go from complete to load so we fetch the new JSON

style/nav.less

@@ -1,9 +1,15 @@
 .navbar.navbar, .navbar-default.navbar {
-  color: #333333;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid @border-color;
   background-color: #ffffff;
 }
 
 .navbar {
   .container-fluid { padding: 0 40px; }
 }
+
+.ui-brand-logo {
+  display: inline-block;
+  height: 30px;
+  width: 217px;
+  background-image: url('../style/resources/logo-brand.svg');
+}

style/question.less

@@ -3,13 +3,13 @@
 @wrong-answer-color: #c22032;
 @wrong-answer-background: #ffe0e0;
 @answer-hover-color: #e6f9fc;
-@answer-select-color: #e6f9fc; // darker than hover
+@answer-select-color: #def4f7; // darker than hover
 
 .task-step .exercise,
 .question {
   font-size: 2.1rem;
   font-weight: 400;
-  padding: 0.5em 100px;
+  padding: 10px 140px;
 
   textarea {
     margin: 1em 0;
@@ -30,7 +30,7 @@
   .free-response {
     font-style: italic;
     color: #888;
-    padding: 20px 40px;
+    padding: 15px 40px;
     display: block;
     width: 100%;
     margin: 20px 0 5px 0;
@@ -131,7 +131,7 @@
 
         .answer-content {
           display: table-cell;
-          padding: 20px 40px 20px 0;
+          padding: 15px 40px 15px 0;
         }
       }
     }
@@ -153,7 +153,6 @@
       float:left;
       background: #f3fcfd;
       transition: background-color .1s ease-in;
-      transition: padding-left .05s ease-in;
 
       &:hover {
         background-color: @answer-hover-color;
@@ -164,9 +163,9 @@
 
       .answer-input-box:checked + label.answer-label,
       .answer-input-box:checked + label.answer-label:hover {
-        font-weight: 700;
+        color: #2a2a2a;
+        font-weight: 600;
         background-color: @answer-select-color; // darker than hover
-        padding-left: 60px;
       }
 
     }

style/reading.less

@@ -1,30 +1,95 @@
-.reading-step {
-  .para {
-    margin-bottom: 1em;
+
+@physics-color-primary: #79b142;
+@physics-background-primary: #232e66;
+@physics-background-secondary: #79b142;
+// @tips-for-success-color:#bf007b;
+// @grasp-check-color:#39b531;
+// @grasp-check-color-background:#fff;
+@reading-title-font: #fonts > .sans;
+
+@import 'reading/video';
+@import 'reading/links-to-physics';
+@import 'reading/work-in-physics';
+// @import 'reading/tips-for-success';
+// @import 'reading/grasp-check';
+
+.task-step .panel-body {
+
+  .reading-step .section-opener .learning-objectives {
+    width: 100%;
+    min-height: 100px;
+    display: inline-flex;
+    color: #ffffff;
+    padding: 10px 40px;
+    background: @physics-background-secondary;
+
+    > div {
+      display: none
+    }
+
+    p {
+      color: rgba(255,255,255,.75);
+      #fonts > .sans;
+      text-transform: uppercase;
+      text-align: right;
+      margin: auto 15px;
+    }
+
+    ul {
+      margin: 0 0;
+      padding: 0 15px 0 30px;
+      border-left: 1px solid rgba(255,255,255,.4);
+    }
+
+  }
+
+  .section-opener ~ section h1 + p::first-letter, div[data-type="document-title"] ~ p::first-letter {
+    float: left;
+    #fonts > .sans(6.4rem, 6.4rem);
+    font-weight: 600;
+    color: @physics-color-primary;
+    margin: 0 4px 0 -4px;
+  }
+
+  .reading-step section[data-depth="1"], .reading-step .work-in-physics, .reading-step .links-to-physics {
+    padding: 0 140px;
+
+    section[data-depth="1"] {
+      padding: 0;
+    }
+
+  }
+
+  div[data-type="document-title"] ~ p {
+    padding: 0 140px;
+  }
+
+  p {
+    #fonts > .serif(1.75rem, 190%);
+    margin: 0 0 2.4rem 0;
+    padding: 0;
   }
 
   figure {
-    width: 100%;
-    margin-bottom: 1em;
-    text-align: center;
+    width: 60%;
+    float: left;
+    text-align: left;
+    margin: 0 30px 0 -80px;
+    padding: 0;
 
     img {
-      width: auto;
-      margin: 0 auto 1em;
+      width: 100%;
+      border: 1px solid @border-color;
+      margin: 0;
+      padding: 0;
+      align: left;
     }
+
     figcaption {
-      text-align:left;
+      font-style: italic;
+      line-height: 150%;
     }
-  }
-}
 
-@links-to-physics-color:#d22120;
-@links-to-physics-background-color:#f5f5f5;
-@tips-for-success-color:#bf007b;
-@grasp-check-color:#39b531;
-@grasp-check-color-background:#fff;
-@reading-title-font:impact;
+  }
 
-@import 'reading/links-to-physics';
-@import 'reading/tips-for-success';
-@import 'reading/grasp-check';
+}

style/reading/links-to-physics.less

@@ -1,27 +1,34 @@
+.panel-body .reading-step .links-to-physics {
+  margin-top: 20px;
 
-.reading-step .note.links-to-physics {
-  margin-bottom: 1em;
+  &:before {
+    content: "Links to Physics";
+    #fonts > .sans(3.2rem, 3.2rem);
+    font-weight: 900;
+    color: @physics-color-primary;
+    background: #232e66;
+    padding: 10px 20px;
+  }
 
-  > .title {
-    background: @links-to-physics-color;
+  div[data-type="title"] {
+    margin: 10px 0 20px 0;
+    padding: 10px 20px;
+    #fonts > .sans(2rem, 2.4rem);
     color: white;
-    font-family: @reading-title-font;
-    padding: 10px 25px;
-    font-size: 2.2em;
-    width: 250px;
-  }
+    font-weight: 300;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    text-align: center;
+    background: @physics-background-secondary;
 
-  p, .para {
-    background: @links-to-physics-background-color;
-    padding: 0 25px 1em;
-    margin-bottom: 0;
+    &:before {
+      content: "\2014  ";
+    }
 
-    > .title {
-      color: @links-to-physics-color;
-      font-family: @reading-title-font;
-      font-size: 1.7em;
-      padding-top: 1em;
-      margin-bottom: 1em;
+    &:after {
+      content: "  \2014";
     }
+
   }
+
 }

style/reading/video.less

@@ -0,0 +1,9 @@
+.task-step .panel-body .-video-step {
+	padding: 20px 140px;
+
+	iframe {
+		width: 720px;
+		height: 405px;
+	}
+
+}

style/reading/work-in-physics.less

@@ -0,0 +1,34 @@
+.panel-body .reading-step .work-in-physics {
+  margin-top: 20px;
+
+  &:before {
+    content: "Work in Physics";
+    #fonts > .sans(3.2rem, 3.2rem);
+    font-weight: 900;
+    color: @physics-color-primary;
+    background: #232e66;
+    padding: 10px 20px;
+  }
+
+  div[data-type="title"] {
+    margin: 10px 0 20px 0;
+    padding: 10px 20px;
+    #fonts > .sans(2rem, 2.4rem);
+    color: white;
+    font-weight: 300;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    text-align: center;
+    background: @physics-background-secondary;
+
+    &:before {
+      content: "\2014  ";
+    }
+
+    &:after {
+      content: "  \2014";
+    }
+
+  }
+
+}

style/scaffold.less

@@ -0,0 +1,60 @@
+
+body {
+  padding-top: 60px; // For the top navbar
+  padding-bottom: 50px;
+  padding-left: 40px;
+  padding-right: 40px;
+  background: #f1f1f1;
+}
+
+.task {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.panel {
+  margin: 20px auto;
+  border-radius: 0;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+
+  &.ui-interactive {
+    .panel-body {
+      height: 100%;
+
+      iframe {
+        height: 100%;
+        width: 100%;
+        border: 1px solid black;
+      }
+    }
+  }
+
+  // Similar to a dismissable alert, line up the action button in the panel heading
+  .ui-action {
+    position: relative;
+    top: -5px;
+  }
+
+  // The little bit of gray text next to a task in the task list that says `(3 steps)`
+  .panel-heading small.details {
+    color: #ccc;
+    margin-left: .5em;
+  }
+}
+
+.panel-header {
+  margin: 20px auto;
+  border-radius: 0;
+}
+
+.panel-body {
+  padding: 20px 0;
+}
+
+.panel-footer {
+  padding: 20px 50px;
+  background-color: #f5f5f5;
+  border-top: 1px solid @border-color;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}