From 07b94f7dd4cc356e8c64d2e18392423bea24359e Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Tue, 20 Aug 2013 21:59:23 -0400 Subject: [PATCH] added font variables for LMS, more sass for verification --- lms/static/sass/base/_variables.scss | 13 +- lms/static/sass/views/_verification.scss | 101 ++++++- lms/templates/verify_student/face_upload.html | 264 ++++++++++-------- 3 files changed, 257 insertions(+), 121 deletions(-) diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 93297f4043..2028b95efb 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -9,6 +9,7 @@ $fg-max-columns: 12; $fg-max-width: 1400px; $fg-min-width: 810px; +// fonts $sans-serif: 'Open Sans', $verdana; $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; $body-font-family: $sans-serif; @@ -197,4 +198,14 @@ $homepage-bg-image: '../images/homepage-bg.jpg'; $login-banner-image: url(../images/bg-banner-login.png); $register-banner-image: url(../images/bg-banner-register.png); -$video-thumb-url: '../images/courses/video-thumb.jpg'; \ No newline at end of file +$video-thumb-url: '../images/courses/video-thumb.jpg'; + +//----------------- +// Newer variables ported from Studio +//----------------- + +// fonts +$f-serif: 'Bree Serif', Georgia, Cambria, 'Times New Roman', Times, serif; +$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; +$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace; + diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index e65901ab50..a0eebf0fea 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -2,27 +2,120 @@ // ==================== body.register.verification { + font-family: 'Open Sans', sans-serif; + + h1, h2, h3, h4, h5, h6, p { + font-family: 'Open Sans', sans-serif; + } + .page-header { - @extend .t-title3; - - .title { - + @extend .t-title5; } } .progress { + .progress-step { + border: 1px solid #eee; + display: inline-block; + padding: ($baseline/2) $baseline; + } + } + + + // for dev placement only + .placeholder-cam, + .placeholder-photo { + height: 300px; + background-color: #eee; + position: relative; + + p { + position: absolute; + top: 40%; + left: 40%; + color: #ccc; + } + } + + + #wrapper { + overflow: hidden; } .block-photo { + @include clearfix(); + + .title { + font-weight: bold; + } + + .wrapper-up, + .wrapper-down { + @include clearfix(); + } + + .cam { + width: 45%; + float: left; + padding-right: $baseline; + } + + .photo-controls { + background-color: #ddd; + + .controls-list { + margin: 0; + padding: 0; + list-style-type: none; + + .control { + display: inline-block; + } + } + } + + .faq { + width: 45%; + float: left; + padding-right: $baseline; + + dt { + font-weight: bold; + padding: 0 0 ($baseline/2) 0; + } + + dd { + margin: 0; + padding: 0 0 $baseline 0; + } + } + } + .photo-tips { + width: 45%; + float: left; + } + .actions { + width: 45%; + float: right; + } + + .review-photo { + width: 45%; + float: left; + } + + #review-facephoto { + margin-right: $baseline; + } } diff --git a/lms/templates/verify_student/face_upload.html b/lms/templates/verify_student/face_upload.html index 5f2c7959bc..2010ec53fe 100644 --- a/lms/templates/verify_student/face_upload.html +++ b/lms/templates/verify_student/face_upload.html @@ -20,7 +20,7 @@

Your Progress

    -
  1. Current: Step 1 Take Your Photo
    2. +
  2. Current: Step 1 Take Your Photo
  3. Step 2 ID Photo
  4. Step 3 Review
  5. Step 4 Payment
    6. @@ -31,137 +31,167 @@
    -
    +

    Take Your Photo

    Use your webcam to take a picture of your face so we can match it with the picture on your ID.

    -
    +
    -
    - +
    +
    + +

    cam image

    +
    + +
    + + + + + +
    -
    +
    +

    Tips on taking a successful photo

      -
    • - Take photo -
      • +
    • Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
      • +
    • Maecenas faucibus mollis interdum.
      • +
    • Nullam id dolor id nibh ultricies vehicula ut id elit.
      • +
    • Cras mattis consectetur purus sit amet fermentum.
    +
    +
    - +
    +
    +

    Common Questions

    +
    +
    Cras justo odio, dapibus ac facilisis in, egestas eget quam.
    +
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    +
    Vestibulum id ligula porta felis euismod semper.
    +
    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
    +
    Aenean eu leo quam.
    +
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    +
    Maecenas faucibus mollis interdum.
    +
    +
    +
    - -
    - -
    -

    Tips on taking a successful photo

    -
      -
    • Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
      • -
    • Maecenas faucibus mollis interdum.
      • -
    • Nullam id dolor id nibh ultricies vehicula ut id elit.
      • -
    • Cras mattis consectetur purus sit amet fermentum.
      • -
    -
    - -
    -

    Common Questions

    -
    -
    Cras justo odio, dapibus ac facilisis in, egestas eget quam.
    -
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    -
    Vestibulum id ligula porta felis euismod semper.
    -
    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
    -
    Aenean eu leo quam.
    -
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    -
    Maecenas faucibus mollis interdum.
    -
    -
    - -
    -
    -
    +

    Take Your Photo

    Use your webcam to take a picture of your face so we can match it with the picture on your ID.

    -
    +
    + +
    + +
    + +

    cam image

    +
    + +
    + + + + + +
    -
    -
    -
    - Take photo - - Retake - Looks good - - Looks good +
    +

    Tips on taking a successful photo

    +
      +
    • Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
      • +
    • Maecenas faucibus mollis interdum.
      • +
    • Nullam id dolor id nibh ultricies vehicula ut id elit.
      • +
    • Cras mattis consectetur purus sit amet fermentum.
      • +
    -
    -

    Tips on taking a successful photo

    -
      -
    • Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
      • -
    • Maecenas faucibus mollis interdum.
      • -
    • Nullam id dolor id nibh ultricies vehicula ut id elit.
      • -
    • Cras mattis consectetur purus sit amet fermentum.
      • -
    +
    + +
    +

    Common Questions

    +
    +
    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
    +
    Aenean eu leo quam.
    +
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    +
    Maecenas faucibus mollis interdum.
    +
    Cras justo odio, dapibus ac facilisis in, egestas eget quam.
    +
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    +
    Vestibulum id ligula porta felis euismod semper.
    +
    +
    + +
    + +
    -
    -

    Common Questions

    -
    -
    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
    -
    Aenean eu leo quam.
    -
    Pellentesque ornare sem lacinia quam venenatis vestibulum.
    -
    Maecenas faucibus mollis interdum.
    -
    Cras justo odio, dapibus ac facilisis in, egestas eget quam.
    -
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    -
    Vestibulum id ligula porta felis euismod semper.
    -
    -
    - -
    - -
    -
    +

    Verify Your Submission

    Make sure we can verify your identity with the photos and information below.

    @@ -171,30 +201,32 @@

    Edit my name

    -
    -
    - +
    +
    +
    + +
    + +

    The photo above needs to meet the following requirements:

    +
      +
    • Be well lit
      • +
    • Show your whole face
      • +
    • Match your ID
      • +
    -

    The photo above needs to meet the following requirements:

    -
      -
    • Be well lit
      • -
    • Show your whole face
      • -
    • Match your ID
      • -
    -
    +
    +
    + +
    -
    -
    - +

    The photo above needs to meet the following requirements:

    +
      +
    • Be readable (not too far away, no glare)
      • +
    • Show your name
      • +
    • Match the photo of your face and your name above
      • +
    - -

    The photo above needs to meet the following requirements:

    -
      -
    • Be readable (not too far away, no glare)
      • -
    • Show your name
      • -
    • Match the photo of your face and your name above
      • -