Skip to content

E
edx-platform
Commit f3067cd8 by Tom Giannattasio
Options

restyling of dashboard with pearson exam notifications

parent a725bae3
Showing with 171 additions and 201 deletions
lms/static/sass/multicourse/_dashboard.scss
...@@ -267,13 +267,12 @@ ...@@ -267,13 +267,12 @@
} }
.my-course { .my-course {
@include border-radius(3px); clear: both;
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 -1px 0 0 rgba(255,255,255, 0.8), inset 0 1px 0 0 rgba(255,255,255, 0.8));
@include clearfix; @include clearfix;
height: 120px;
margin-right: flex-gutter(); margin-right: flex-gutter();
margin-bottom: 10px; margin-bottom: 50px;
overflow: hidden; padding-bottom: 50px;
border-bottom: 1px solid $light-gray;
position: relative; position: relative;
width: flex-grid(12); width: flex-grid(12);
z-index: 20; z-index: 20;
...@@ -283,13 +282,7 @@ ...@@ -283,13 +282,7 @@
margin-bottom: none; margin-bottom: none;
} }
.cover { .cover {
background: rgb(225,225,225);
background-size: cover;
background-position: center center;
border: 1px solid rgb(120,120,120);
@include border-left-radius(3px);
@include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.6), 1px 0 0 0 rgba(255,255,255, 0.8));
@include box-sizing(border-box); @include box-sizing(border-box);
float: left; float: left;
height: 100%; height: 100%;
...@@ -299,100 +292,51 @@ ...@@ -299,100 +292,51 @@
position: relative; position: relative;
@include transition(all, 0.15s, linear); @include transition(all, 0.15s, linear);
width: 200px; width: 200px;
height: 120px;
.shade { img {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.3) 0%,
rgba(0,0,0, 0.3) 100%));
bottom: 0px;
content: "";
display: block;
left: 0px;
position: absolute;
z-index: 50;
top: 0px;
@include transition(all, 0.15s, linear);
right: 0px;
}
.arrow {
position: absolute;
z-index: 100;
width: 100%; width: 100%;
font-size: 70px;
line-height: 110px;
text-align: center;
text-decoration: none;
color: rgba(0, 0, 0, .7);
opacity: 0;
@include transition(all, 0.15s, linear);
}
&:hover {
.shade {
background: rgba(255,255,255, 0.3);
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.3) 0%,
rgba(0,0,0, 0.3) 100%));
}
} }
} }
.info { .info {
background: rgb(250,250,250); @include clearfix;
@include background-image(linear-gradient(-90deg, rgb(253,253,253), rgb(240,240,240))); padding: 0 10px 0 230px;
@include box-sizing(border-box);
border: 1px solid rgb(190,190,190);
border-left: none;
@include border-right-radius(3px);
left: 201px;
height: 100%;
max-height: 100%;
padding: 0px 10px;
position: absolute;
right: 0px;
top: 0px;
z-index: 2;
> hgroup { > hgroup {
@include clearfix; padding: 0;
border-bottom: 1px solid rgb(210,210,210);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
padding: 12px 0px;
width: 100%; width: 100%;
.university { .university {
background: rgba(255,255,255, 1);
border: 1px solid rgb(180,180,180);
@include border-radius(3px);
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.2), 0 1px 0 0 rgba(255,255,255, 0.6));
color: $lighter-base-font-color; color: $lighter-base-font-color;
display: block;
font-style: italic;
font-family: $sans-serif; font-family: $sans-serif;
font-size: 16px; font-size: 16px;
font-weight: 800; font-weight: 400;
@include inline-block; margin: 0 0 6px;
margin-right: 10px; text-transform: none;
margin-bottom: 0; letter-spacing: 0;
padding: 5px 10px;
float: left;
} }
h3 { .date-block {
display: block; position: absolute;
margin-bottom: 0px; top: 0;
overflow: hidden; right: 0;
padding-top: 2px; font-family: $sans-serif;
text-overflow: ellipsis; font-size: 13px;
white-space: nowrap; font-style: italic;
color: $lighter-base-font-color;
}
a { h3 a {
color: $base-font-color; display: block;
font-weight: 700; margin-bottom: 10px;
text-shadow: 0 1px rgba(255,255,255, 0.6); font-family: $sans-serif;
font-size: 34px;
line-height: 42px;
font-weight: 300;
&:hover { &:hover {
text-decoration: underline; text-decoration: none;
}
} }
} }
} }
...@@ -430,71 +374,52 @@ ...@@ -430,71 +374,52 @@
} }
.enter-course { .enter-course {
@include button(shiny, $blue); @include button(simple, $blue);
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px); @include border-radius(3px);
display: block; display: block;
float: left; float: left;
font: normal 1rem/1.6rem $sans-serif; font: normal 15px/1.6rem $sans-serif;
letter-spacing: 1px; letter-spacing: 0;
padding: 6px 0px; padding: 6px 32px 7px;
text-transform: uppercase;
text-align: center; text-align: center;
margin-top: 16px; margin-top: 16px;
width: flex-grid(4);
}
}
> a:hover { &.archived {
.cover { @include button(simple, #eee);
.shade { font: normal 15px/1.6rem $sans-serif;
background: rgba(255,255,255, 0.1); padding: 6px 32px 7px;
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.3) 0%,
rgba(0,0,0, 0.3) 100%));
}
.arrow { &:hover {
opacity: 1; text-decoration: none;
} }
}
.info {
background: darken(rgb(250,250,250), 5%);
@include background-image(linear-gradient(-90deg, darken(rgb(253,253,253), 3%), darken(rgb(240,240,240), 5%)));
border-color: darken(rgb(190,190,190), 10%);
.course-status {
background: darken($yellow, 3%);
border-color: darken(rgb(200,200,200), 3%);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
} }
.course-status-completed { &:hover {
background: #888; text-decoration: none;
color: #fff;
} }
} }
} }
} }
.message-status { .message-status {
@include clearfix;
@include border-radius(3px); @include border-radius(3px);
@include box-shadow(0 1px 4px 0 rgba(0,0,0, 0.1), inset 0 -1px 0 0 rgba(255,255,255, 0.8), inset 0 1px 0 0 rgba(255,255,255, 0.8));
display: none; display: none;
position: relative;
top: -15px;
z-index: 10; z-index: 10;
margin: 0 0 20px 0; margin: 20px 0 10px;
padding: 15px 20px; padding: 15px 20px;
font-family: "Open Sans", Verdana, Geneva, sans-serif; font-family: $sans-serif;
background: #fffcf0; background: #fffcf0;
border: 1px solid #ccc; border: 1px solid #ccc;
.message-copy { .message-copy {
font-family: $sans-serif;
font-size: 13px;
margin: 0; margin: 0;
.grade-value { .grade-value {
font-size: 1.4rem; font-size: 1.2rem;
font-weight: bold; font-weight: bold;
} }
} }
...@@ -502,19 +427,18 @@ ...@@ -502,19 +427,18 @@
.actions { .actions {
@include clearfix; @include clearfix;
list-style: none; list-style: none;
margin: 15px 0 0 0; margin: 0;
padding: 0; padding: 0;
.action { .action {
float: left; float: left;
margin:0 15px 10px 0; margin: 0 15px 0 0;
.btn, .cta { .btn, .cta {
display: inline-block; display: inline-block;
} }
.btn { .btn {
@include button(shiny, $blue);
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px); @include border-radius(3px);
float: left; float: left;
...@@ -524,7 +448,6 @@ ...@@ -524,7 +448,6 @@
text-align: center; text-align: center;
&.disabled { &.disabled {
@include button(shiny, #eee);
cursor: default !important; cursor: default !important;
&:hover { &:hover {
...@@ -539,7 +462,6 @@ ...@@ -539,7 +462,6 @@
} }
.cta { .cta {
@include button(shiny, #666);
float: left; float: left;
font: normal 0.8rem/1.2rem $sans-serif; font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
...@@ -549,6 +471,35 @@ ...@@ -549,6 +471,35 @@
} }
} }
.exam-registration-number {
font-family: $sans-serif;
font-size: 18px;
}
&.exam-register {
.message-copy {
margin-top: 5px;
}
}
&.exam-schedule {
.exam-button {
margin-top: 5px;
}
}
.exam-button {
@include button(simple, $pink);
float: right;
padding: 9px 18px 10px;
font-size: 13px;
font-weight: 400;
&:hover {
text-decoration: none;
}
}
&.is-shown { &.is-shown {
display: block; display: block;
} }
...@@ -577,17 +528,16 @@ ...@@ -577,17 +528,16 @@
a.unenroll { a.unenroll {
float: right; float: right;
display: block;
font-style: italic; font-style: italic;
color: #a0a0a0; color: #a0a0a0;
text-decoration: underline; text-decoration: underline;
font-size: .8em; font-size: .8em;
@include inline-block; margin-top: 32px;
margin-bottom: 40px;
&:hover { &:hover {
color: #333; color: #333;
} }
} }
} }
} }
lms/templates/dashboard.html
...@@ -198,87 +198,107 @@ ...@@ -198,87 +198,107 @@
course_target = reverse('about_course', args=[course.id]) course_target = reverse('about_course', args=[course.id])
%> %>
<a href="${course_target}">
<section class="cover" style="background-image: url('${course_image_url(course)}')">
<div class="shade"></div> <a href="${course_target}" class="cover">
<div class="arrow">&#10095;</div> <img src="${course_image_url(course)}" />
</section> </a>
<section class="info"> <section class="info">
<hgroup> <hgroup>
<h2 class="university">${get_course_about_section(course, 'university')}</h2> <p class="date-block">
<h3>${course.number} ${course.title}</h3>
</hgroup>
<section class="course-status course-status-completed">
<p>
% if course.has_ended(): % if course.has_ended():
Course Completed - <span>${course.end_date_text}</span> Course Completed - ${course.end_date_text}
% elif course.has_started(): % elif course.has_started():
Course Started - <span>${course.start_date_text}</span> Course Started - ${course.start_date_text}
% else: # hasn't started yet % else: # hasn't started yet
Course Starts - <span>${course.start_date_text}</span> Course Starts - ${course.start_date_text}
% endif % endif
</p> </p>
</section> <h2 class="university">${get_course_about_section(course, 'university')}</h2>
% if course.id in show_courseware_links_for: <h3><a href="${course_target}">${course.number} ${course.title}</a></h3>
<p class="enter-course">View Courseware</p> </hgroup>
% endif
</section> <div class="message message-status is-shown exam-register">
</a> <a href="#" class="exam-button">Register for Pearson exam</a>
</article> <p class="message-copy">Registration for the Pearson exam is now open.</p>
</div>
<div class="message message-status is-shown">
<p class="message-copy">Your registration for the Pearson exam is pending. Within a few days, you should receive a confirmation number, which can be used to schedule your exam.</p>
</div>
<div class="message message-status is-shown exam-schedule">
<a href="#" class="exam-button">Schedule Pearson exam</a>
<p class="exam-registration-number">Registration number: <strong>edx00015879548</strong></p>
<p class="message-copy">Write this down! You’ll need it to schedule your exam.</p>
</div>
<%
cert_status = cert_statuses.get(course.id)
%>
% if course.has_ended() and cert_status:
<% <%
if cert_status['status'] == 'generating': cert_status = cert_statuses.get(course.id)
status_css_class = 'course-status-certrendering'
elif cert_status['status'] == 'ready':
status_css_class = 'course-status-certavailable'
elif cert_status['status'] == 'notpassing':
status_css_class = 'course-status-certnotavailable'
else:
status_css_class = 'course-status-processing'
%> %>
<div class="message message-status ${status_css_class} is-shown"> % if course.has_ended() and cert_status:
<%
% if cert_status['status'] == 'processing': if cert_status['status'] == 'generating':
<p class="message-copy">Final course details are being wrapped up at status_css_class = 'course-status-certrendering'
this time. Your final standing will be available shortly.</p> elif cert_status['status'] == 'ready':
% elif cert_status['status'] in ('generating', 'ready', 'notpassing'): status_css_class = 'course-status-certavailable'
<p class="message-copy">Your final grade: elif cert_status['status'] == 'notpassing':
<span class="grade-value">${"{0:.0f}%".format(float(cert_status['grade'])*100)}</span>. status_css_class = 'course-status-certnotavailable'
% if cert_status['status'] == 'notpassing': else:
Grade required for a certificate: <span class="grade-value"> status_css_class = 'course-status-processing'
${"{0:.0f}%".format(float(course.lowest_passing_grade)*100)}</span>. %>
% endif <div class="message message-status ${status_css_class} is-shown">
</p>
% endif % if cert_status['status'] == 'processing':
<p class="message-copy">Final course details are being wrapped up at
% if cert_status['show_disabled_download_button'] or cert_status['show_download_url'] or cert_status['show_survey_button']: this time. Your final standing will be available shortly.</p>
<ul class="actions"> % elif cert_status['status'] in ('generating', 'ready', 'notpassing'):
% if cert_status['show_disabled_download_button']: <p class="message-copy">Your final grade:
<li class="action"><span class="btn disabled" href=""> <span class="grade-value">${"{0:.0f}%".format(float(cert_status['grade'])*100)}</span>.
Your Certificate is Generating</span></li> % if cert_status['status'] == 'notpassing':
% elif cert_status['show_download_url']: Grade required for a certificate: <span class="grade-value">
<li class="action"> ${"{0:.0f}%".format(float(course.lowest_passing_grade)*100)}</span>.
<a class="btn" href="${cert_status['download_url']}" % endif
title="This link will open/download a PDF document"> </p>
Download Your PDF Certificate</a></li>
% endif % endif
% if cert_status['show_survey_button']: % if cert_status['show_disabled_download_button'] or cert_status['show_download_url'] or cert_status['show_survey_button']:
<li class="action"><a class="cta" href="${cert_status['survey_url']}"> <ul class="actions">
Complete our course feedback survey</a></li> % if cert_status['show_disabled_download_button']:
<li class="action"><span class="disabled">
Your Certificate is Generating</span></li>
% elif cert_status['show_download_url']:
<li class="action">
<a class="btn" href="${cert_status['download_url']}"
title="This link will open/download a PDF document">
Download Your PDF Certificate</a></li>
% endif
% if cert_status['show_survey_button']:
<li class="action"><a class="cta" href="${cert_status['survey_url']}">
Complete our course feedback survey</a></li>
% endif
</ul>
% endif % endif
</ul> </div>
% endif % endif
</div>
% endif % if course.id in show_courseware_links_for:
% if course.has_ended():
<a href="${course_target}" class="enter-course archived">View Archived Course</a>
% else:
<a href="${course_target}" class="enter-course">View Course</a>
% endif
% endif
<a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id}" data-course-number="${course.number}">Unregister</a>
</section>
</article>
<a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id}" data-course-number="${course.number}">Unregister</a>
% endfor % endfor
% else: % else:
......
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