From c77deeecff2fa5d78c413e28e222d51399e06b5d Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 2 Sep 2013 21:42:51 -0400
Subject: [PATCH] Verification: removes physical sizes from HTML templates and
 adds placeholder hooks

---
 lms/static/sass/views/_verification.scss       | 18 +++++++++++++++---
 .../verify_student/photo_verification.html     | 16 ++++++++++++----
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index 91d7332fa0..d1e22e6d57 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -878,9 +878,21 @@
   .cam {
 
     .placeholder-cam {
-      @include size(500px 375px);
-      margin: $baseline auto;
-      background: $m-blue-d1;
+      width: 95%;
+      height: 375px;
+      margin: ($baseline/2) auto;
+      background: $m-blue-l5;
+
+      // placeholders
+      .placeholder-art {
+        opacity: 0.5;
+      }
+
+      // previously defined in HTML
+      video, canvas {
+        display: block;
+        @include size(100% 100%);
+      }
     }
 
     .controls {
diff --git a/lms/templates/verify_student/photo_verification.html b/lms/templates/verify_student/photo_verification.html
index 5ffde8fced..cde1cc9057 100644
--- a/lms/templates/verify_student/photo_verification.html
+++ b/lms/templates/verify_student/photo_verification.html
@@ -245,8 +245,12 @@
               <div class="wrapper-task">
                 <div id="facecam" class="task cam">
                   <div class="placeholder-cam" id="face_capture_div">
-                    <video id="face_video" width="500" height="375" autoplay></video><br/>
-                    <canvas id="face_canvas" style="display:none;" width="640" height="480"></canvas>
+
+                    <div class="placeholder-art">
+                    </div>
+
+                    <video id="face_video" autoplay></video><br/>
+                    <canvas id="face_canvas" style="display:none;" ></canvas>
                   </div>
 
                   <div class="controls photo-controls">
@@ -325,8 +329,12 @@
               <div class="wrapper-task">
                 <div id="idcam" class="task cam">
                   <div class="placeholder-cam">
-                    <video id="photo_id_video" width="500" height="375" autoplay></video><br/>
-                    <canvas id="photo_id_canvas" style="display:none;" width="640" height="480"></canvas>
+
+                    <div class="placeholder-art">
+                    </div>
+
+                    <video id="photo_id_video" autoplay></video><br/>
+                    <canvas id="photo_id_canvas" style="display:none;"></canvas>
                   </div>
 
                   <div class="controls photo-controls">