Skip to content

E
edx-platform
Commit 07b94f7d by Frances Botsford
Options

added font variables for LMS, more sass for verification

parent 2e821be6
Showing with 256 additions and 121 deletions
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;
lms/static/sass/views/_verification.scss
......@@ -2,27 +2,120 @@
// ====================
body.register.verification {
font-family: 'Open Sans', sans-serif;
.page-header {
@extend .t-title3;
h1, h2, h3, h4, h5, h6, p {
font-family: 'Open Sans', sans-serif;
}
.page-header {
.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;
}
}
lms/templates/verify_student/face_upload.html
......@@ -20,7 +20,7 @@
<section class="progress">
<h3 class="sr">Your Progress</h3>
<ol>
<li class="progress-step" id="progress-step1"><span class="current">Current: </span>Step 1 Take Your Photo</li>
<li class="progress-step current" id="progress-step1"><span class="sr">Current: </span>Step 1 Take Your Photo</li>
<li class="progress-step" id="progress-step2">Step 2 ID Photo</li>
<li class="progress-step" id="progress-step3">Step 3 Review</li>
<li class="progress-step" id="progress-step4">Step 4 Payment</li>
......@@ -31,137 +31,167 @@
<section id="wrapper">
<div id="wrapper-facephoto block-photo">
<div id="wrapper-facephoto" class="block-photo">
<h3 class="title">Take Your Photo</h3>
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
<div id="facecam">
<div class="placeholder-cam">
<!-- cam image -->
<div class="wrapper-up">
<div id="facecam" class="cam">
<div class="placeholder-cam">
<!-- cam image -->
<p>cam image</p>
</div>
<div class="controls photo-controls">
<ul class="controls-list">
<li class="control control-do">
<a class="action action-do" href="">Take photo</a>
</li>
</ul>
<ul class="controls-list">
<li class="control control-redo">
<a class="action action-redo" href="">Retake</a>
</li>
<li class="control control-approve">
<a class="action action-approve" href="">Looks good</a>
</li>
</ul>
<ul class="controls-list">
<li class="control control-redo">
<a class="action action-redo" href="">Retake</a>
</li>
<li class="control-approve is-approved">
<a class="action action-approve" href="">Looks good</a>
</li>
</ul>
</div>
</div>
<div class="controls photo-controls">
<div class="photo-tips facetips">
<h4>Tips on taking a successful photo</h4>
<ul>
<li class="ctrl-do">
<a class="action action-do" href="">Take photo</a>
</li>
<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
<li>Maecenas faucibus mollis interdum.</li>
<li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
<li>Cras mattis consectetur purus sit amet fermentum.</li>
</ul>
</div>
</div>
<ul>
<li class="ctrl-redo">
<a class="action action-redo" href="">Retake</a>
</li>
<li class="ctrl-approve">
<a class="action action-approve" href="">Looks good</a>
</li>
</ul>
<div class="wrapper-down">
<div class="faq facefaq">
<h4 class="sr">Common Questions</h4>
<dl>
<dt>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
<dt>Vestibulum id ligula porta felis euismod semper.</dt>
<dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt>
<dd>Aenean eu leo quam.</dd>
<dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
<dd>Maecenas faucibus mollis interdum.</dd>
</dl>
</div>
<div class="actions">
<ul>
<li class="ctrl-redo">
<a class="action action-redo" href="">Retake</a>
</li>
<li class="ctrl-approve is-approved">
<a class="action action-approve" href="">Looks good</a>
<li class="action action-next">
<a href="#">Go to Step 2: Take ID Photo</a>
<p class="tips">Once you verify your photo looks good, you can move on to step 2.</p>
</li>
</ul>
</div>
</div>
<div class="tips facetips">
<h4>Tips on taking a successful photo</h4>
<ul>
<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
<li>Maecenas faucibus mollis interdum.</li>
<li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
<li>Cras mattis consectetur purus sit amet fermentum.</li>
</ul>
</div>
<div class="faq facefaq">
<h4 class="sr">Common Questions</h4>
<dl>
<dt>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
<dt>Vestibulum id ligula porta felis euismod semper.</dt>
<dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt>
<dd>Aenean eu leo quam.</dd>
<dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
<dd>Maecenas faucibus mollis interdum.</dd>
</dl>
</div>
<div class="actions">
<ul>
<li class="action action-next">
<a href="#">Go to Step 2: Take ID Photo</a>
<p class="tips">Once you verify your photo looks good, you can move on to step 2.</p>
</li>
</ul>
</div>
</div>
<div id="wrapper-idphoto block-photo">
<div id="wrapper-idphoto" class="block-photo">
<h3 class="title">Take Your Photo</h3>
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
<div id="idcam">
<div class="wrapper-up">
<div id="idcam" class="cam">
<div class="placeholder-cam">
<!-- cam image -->
<p>cam image</p>
</div>
<div class="controls photo-controls">
<ul class="controls-list">
<li class="control control-do">
<a class="action action-do" href="">Take photo</a>
</li>
</ul>
<ul class="controls-list">
<li class="control control-redo">
<a class="action action-redo" href="">Retake</a>
</li>
<li class="control control-approve">
<a class="action action-approve" href="">Looks good</a>
</li>
</ul>
<ul class="controls-list">
<li class="control control-redo">
<a class="action action-redo" href="">Retake</a>
</li>
<li class="control control-approve is-approved">
<a class="action action-approve" href="">Looks good</a>
</li>
</ul>
</div>
<div class="placeholder-cam">
<!-- cam image -->
</div>
<div class="controls photo-controls">
<a href="">Take photo</a>
<a href="">Retake</a>
<a class="" href="">Looks good</a>
<a class="clicked" href="">Looks good</a>
<div class="photo-tips idtips">
<h4>Tips on taking a successful photo</h4>
<ul>
<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
<li>Maecenas faucibus mollis interdum.</li>
<li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
<li>Cras mattis consectetur purus sit amet fermentum.</li>
</ul>
</div>
</div>
<div class="tips idtips">
<h4>Tips on taking a successful photo</h4>
<ul>
<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
<li>Maecenas faucibus mollis interdum.</li>
<li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
<li>Cras mattis consectetur purus sit amet fermentum.</li>
</ul>
</div>
<div class="wrapper-down">
<div class="faq idfaq">
<h4 class="sr">Common Questions</h4>
<dl>
<dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt>
<dd>Aenean eu leo quam.</dd>
<dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
<dd>Maecenas faucibus mollis interdum.</dd>
<dt>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
<dt>Vestibulum id ligula porta felis euismod semper.</dt>
</dl>
</div>
<div class="faq idfaq">
<h4 class="sr">Common Questions</h4>
<dl>
<dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt>
<dd>Aenean eu leo quam.</dd>
<dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
<dd>Maecenas faucibus mollis interdum.</dd>
<dt>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
<dt>Vestibulum id ligula porta felis euismod semper.</dt>
</dl>
<div class="actions">
<ul>
<li class="action action-next">
<a href="#">Go to Step 3: Review Your Info</a>
<p class="tips">Once you verify your ID photo looks good, you can move on to step 3.</p>
</li>
</ul>
</div>
</div>
<div class="actions">
<ul>
<li class="action action-next">
<a href="#">Go to Step 3: Review Your Info</a>
<p class="tips">Once you verify your ID photo looks good, you can move on to step 3.</p>
</li>
</ul>
</div>
</div>
<div id="wrapper-review block-photo">
<div id="wrapper-review" class="block-photo">
<h3 class="title">Verify Your Submission</h3>
<p>Make sure we can verify your identity with the photos and information below.</p>
......@@ -171,30 +201,32 @@
<p><a href="#">Edit my name</a></p>
</div>
<div id="review-facephoto">
<div class="placeholder-photo">
<!-- photo image -->
<div class="wrapper-up">
<div id="review-facephoto" class="review-photo">
<div class="placeholder-photo">
<!-- photo image -->
</div>
<h4>The photo above needs to meet the following requirements:</h4>
<ul>
<li>Be well lit</li>
<li>Show your whole face</li>
<li>Match your ID</li>
</ul>
</div>
<h4>The photo above needs to meet the following requirements:</h4>
<ul>
<li>Be well lit</li>
<li>Show your whole face</li>
<li>Match your ID</li>
</ul>
</div>
<div id="review-idphoto" class="review-photo">
<div class="placeholder-photo">
<!-- photo image -->
</div>
<div id="review-facephoto">
<div class="placeholder-photo">
<!-- photo image -->
<h4>The photo above needs to meet the following requirements:</h4>
<ul>
<li>Be readable (not too far away, no glare)</li>
<li>Show your name</li>
<li>Match the photo of your face and your name above</li>
</ul>
</div>
<h4>The photo above needs to meet the following requirements:</h4>
<ul>
<li>Be readable (not too far away, no glare)</li>
<li>Show your name</li>
<li>Match the photo of your face and your name above</li>
</ul>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment