From 39d7534246d51009ed33159083db78bd11cdec4c Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 2 Sep 2013 21:20:02 -0400
Subject: [PATCH 1/2] Verification: adds in progress styling support based on
 body classes

---
 lms/static/sass/views/_verification.scss | 151 ++++++++++++++++++++++-
 1 file changed, 148 insertions(+), 3 deletions(-)

diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index 764d19f6b7..91d7332fa0 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -125,7 +125,7 @@
   }
 
   .expandable-area {
-    @include transition(opacity 0.25s ease-in-out 0s);
+    @include transition(opacity 0.25s ease-in-out 0s, height 0.25s ease-in-out 0s);
   }
 
   // STATE: active
@@ -145,8 +145,10 @@
     }
 
     .expandable-area {
-      display: none;
+      visibility: none;
+      height: 0;
       opacity: 0.0;
+      overflow: scroll;
     }
   }
 
@@ -159,7 +161,8 @@
     }
 
     .expandable-area {
-      display: block;
+      visibility: visible;
+      height: ($baseline*10.5);
       opacity: 1.0;
     }
   }
@@ -1264,6 +1267,24 @@
   // VIEW: requirements
   &.step-requirements {
 
+    // progress nav
+    .progress .progress-step {
+
+      // STATE: is current
+      &#progress-step0 {
+        border-bottom: ($baseline/5) solid $m-blue-d1;
+        opacity: 1.0;
+
+        .wrapper-step-number {
+          border-color: $m-blue-d1;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-d3;
+        }
+      }
+    }
+
     // progress indicator
     .progress-sts-value {
       width: 0%;
@@ -1396,6 +1417,37 @@
   // VIEW: take cam photo
   &.step-photos-cam {
 
+    // progress nav
+    .progress .progress-step {
+
+      // STATE: is completed
+       &#progress-step0 {
+        border-bottom: ($baseline/5) solid $m-green-l2;
+
+        .wrapper-step-number {
+          border-color: $m-green-l2;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-l3;
+        }
+      }
+
+      // STATE: is current
+      &#progress-step1 {
+        border-bottom: ($baseline/5) solid $m-blue-d1;
+        opacity: 1.0;
+
+        .wrapper-step-number {
+          border-color: $m-blue-d1;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-d3;
+        }
+      }
+    }
+
     // progress indicator
     .progress-sts-value {
       width: 20%;
@@ -1405,6 +1457,37 @@
   // VIEW: take id photo
   &.step-photos-id {
 
+    // progress nav
+    .progress .progress-step {
+
+      // STATE: is completed
+       &#progress-step0, &#progress-step1 {
+        border-bottom: ($baseline/5) solid $m-green-l2;
+
+        .wrapper-step-number {
+          border-color: $m-green-l2;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-l3;
+        }
+      }
+
+      // STATE: is current
+      &#progress-step2 {
+        border-bottom: ($baseline/5) solid $m-blue-d1;
+        opacity: 1.0;
+
+        .wrapper-step-number {
+          border-color: $m-blue-d1;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-d3;
+        }
+      }
+    }
+
     // progress indicator
     .progress-sts-value {
       width: 40%;
@@ -1449,6 +1532,37 @@
       }
     }
 
+    // progress nav
+    .progress .progress-step {
+
+      // STATE: is completed
+       &#progress-step0, &#progress-step1, &#progress-step2 {
+        border-bottom: ($baseline/5) solid $m-green-l2;
+
+        .wrapper-step-number {
+          border-color: $m-green-l2;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-l3;
+        }
+      }
+
+      // STATE: is current
+      &#progress-step3 {
+        border-bottom: ($baseline/5) solid $m-blue-d1;
+        opacity: 1.0;
+
+        .wrapper-step-number {
+          border-color: $m-blue-d1;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-d3;
+        }
+      }
+    }
+
     // progress indicator
     .progress-sts-value {
       width: 60%;
@@ -1458,6 +1572,37 @@
   // VIEW: take and review photos
   &.step-confirmation {
 
+    // progress nav
+    .progress .progress-step {
+
+      // STATE: is completed
+       &#progress-step0, &#progress-step1, &#progress-step2, &#progress-step3, &#progress-step4 {
+        border-bottom: ($baseline/5) solid $m-green-l2;
+
+        .wrapper-step-number {
+          border-color: $m-green-l2;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-l3;
+        }
+      }
+
+      // STATE: is current
+      &#progress-step5 {
+        border-bottom: ($baseline/5) solid $m-blue-d1;
+        opacity: 1.0;
+
+        .wrapper-step-number {
+          border-color: $m-blue-d1;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-d3;
+        }
+      }
+    }
+
     // progress indicator
     .progress-sts-value {
       width: 100%;

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 2/2] 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">