Update the student view for the reviews to show the test tube UI instead of the module screenshot

schoolyourself/schoolyourself_lesson.py

@@ -39,7 +39,8 @@ class SchoolYourselfLessonXBlock(SchoolYourselfXBlock):
 
       # Now actually render the fragment, which is just a button with
       # some JS code that handles the click event on that button.
-      fragment = Fragment(self.render_template("student_view.html", context))
+      fragment = Fragment(self.render_template("lesson_student_view.html",
+                                               context))
 
       # Load the common JS/CSS libraries:
       fragment.add_css_url(

schoolyourself/schoolyourself_review.py

@@ -38,12 +38,14 @@ class SchoolYourselfReviewXBlock(SchoolYourselfXBlock):
       context = {
         "iframe_url": "%s/review/player?%s" % (self.base_url,
                                                urllib.urlencode(url_params)),
-        "screenshot_url": screenshot_url
+        "icon_url": self.runtime.local_resource_url(self,
+                                                    "public/review_icon.png")
       }
 
       # Now actually render the fragment, which is just a button with
       # some JS code that handles the click event on that button.
-      fragment = Fragment(self.render_template("student_view.html", context))
+      fragment = Fragment(self.render_template("review_student_view.html",
+                                               context))
 
       # Load the common JS/CSS libraries:
       fragment.add_css_url(

schoolyourself/static/css/student_view.css

+.schoolyourself-container {
+  border: 1px solid #737c95;
+  text-align: center;
+}
+
 .schoolyourself-lesson-player {
   position: relative;
   display: inline-block;
   cursor: pointer;
   cursor: hand;
+  width: 100%;
 }
 
 .schoolyourself-play-button {
@@ -73,3 +79,32 @@
 .schoolyourself-lesson-player:hover .schoolyourself-screenshot-curtain {
   background: rgba(0,0,0,0.2);
 }
+
+.schoolyourself-review-box {
+  position: relative;
+  width: 100%;
+  height: 384px;
+  text-align: center;
+}
+
+
+.schoolyourself-review-icon {
+  width: 100px;
+  line-height: 384px;
+  display: inline-block;
+}
+
+.schoolyourself-review-icon > img {
+  vertical-align: middle;
+  width: 100%;
+  opacity: 0.7;
+  transition: opacity 100ms ease-in;
+  -webkit-transition: opacity 100ms ease-in;
+  -moz-transition: opacity 100ms ease-in;
+  -ms-transition: opacity 100ms ease-in;
+  -o-transition: opacity 100ms ease-in;
+}
+
+.schoolyourself-lesson-player:hover .schoolyourself-review-icon > img {
+  opacity: 1;
+}

schoolyourself/templates/student_view.html → schoolyourself/templates/lesson_student_view.html

-<div class="schoolyourself-lesson-player" data-url="${iframe_url}">
-  <div class="schoolyourself-screenshot">
-    <div class="schoolyourself-screenshot-curtain"></div>
-    <img src="${screenshot_url}" />
-  </div>
-  <div class="schoolyourself-play-button">
-    <div class="schoolyourself-arrow-container">
-      <div class="schoolyourself-arrow"></div>
+<div class="schoolyourself-container">
+  <div class="schoolyourself-lesson-player" data-url="${iframe_url}">
+    <div class="schoolyourself-screenshot">
+      <div class="schoolyourself-screenshot-curtain"></div>
+      <img src="${screenshot_url}" />
+    </div>
+    <div class="schoolyourself-play-button">
+      <div class="schoolyourself-arrow-container">
+        <div class="schoolyourself-arrow"></div>
+      </div>
     </div>
   </div>
 </div>

schoolyourself/templates/review_student_view.html

+<div class="schoolyourself-container">
+  <div class="schoolyourself-lesson-player" data-url="${iframe_url}">
+    <div class="schoolyourself-review-box">
+      <div class="schoolyourself-review-icon">
+        <img src="${icon_url}" />
+      </div>
+    </div>
+  </div>
+</div>