From f3067cd8c88ed0b732ecc1059f6ccacebe80581e Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Fri, 14 Dec 2012 16:17:03 -0500 Subject: [PATCH] restyling of dashboard with pearson exam notifications --- lms/static/sass/multicourse/_dashboard.scss | 220 ++++++++------------ lms/templates/dashboard.html | 162 +++++++------- 2 files changed, 176 insertions(+), 206 deletions(-) diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index 458888b658..249e8a0513 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -267,13 +267,12 @@ } .my-course { - @include border-radius(3px); - @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)); + clear: both; @include clearfix; - height: 120px; margin-right: flex-gutter(); - margin-bottom: 10px; - overflow: hidden; + margin-bottom: 50px; + padding-bottom: 50px; + border-bottom: 1px solid $light-gray; position: relative; width: flex-grid(12); z-index: 20; @@ -283,13 +282,7 @@ margin-bottom: none; } - .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)); + .cover { @include box-sizing(border-box); float: left; height: 100%; @@ -299,100 +292,51 @@ position: relative; @include transition(all, 0.15s, linear); width: 200px; + height: 120px; - .shade { - @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; + img { 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 { - background: rgb(250,250,250); - @include background-image(linear-gradient(-90deg, rgb(253,253,253), rgb(240,240,240))); - @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; + @include clearfix; + padding: 0 10px 0 230px; > hgroup { - @include clearfix; - border-bottom: 1px solid rgb(210,210,210); - @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); - padding: 12px 0px; + padding: 0; width: 100%; .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; - display: block; - font-style: italic; font-family: $sans-serif; font-size: 16px; - font-weight: 800; - @include inline-block; - margin-right: 10px; - margin-bottom: 0; - padding: 5px 10px; - float: left; + font-weight: 400; + margin: 0 0 6px; + text-transform: none; + letter-spacing: 0; } - h3 { + .date-block { + position: absolute; + top: 0; + right: 0; + font-family: $sans-serif; + font-size: 13px; + font-style: italic; + color: $lighter-base-font-color; + } + + h3 a { display: block; - margin-bottom: 0px; - overflow: hidden; - padding-top: 2px; - text-overflow: ellipsis; - white-space: nowrap; + margin-bottom: 10px; + font-family: $sans-serif; + font-size: 34px; + line-height: 42px; + font-weight: 300; - a { - color: $base-font-color; - font-weight: 700; - text-shadow: 0 1px rgba(255,255,255, 0.6); - - &:hover { - text-decoration: underline; - } + &:hover { + text-decoration: none; } } } @@ -430,71 +374,52 @@ } .enter-course { - @include button(shiny, $blue); + @include button(simple, $blue); @include box-sizing(border-box); @include border-radius(3px); display: block; float: left; - font: normal 1rem/1.6rem $sans-serif; - letter-spacing: 1px; - padding: 6px 0px; - text-transform: uppercase; + font: normal 15px/1.6rem $sans-serif; + letter-spacing: 0; + padding: 6px 32px 7px; text-align: center; margin-top: 16px; - width: flex-grid(4); - } - } - > a:hover { - .cover { - .shade { - background: rgba(255,255,255, 0.1); - @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.3) 0%, - rgba(0,0,0, 0.3) 100%)); + &.archived { + @include button(simple, #eee); + font: normal 15px/1.6rem $sans-serif; + padding: 6px 32px 7px; + + &:hover { + text-decoration: none; + } } - .arrow { - opacity: 1; - } - } - - .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 { - background: #888; - color: #fff; + &:hover { + text-decoration: none; } } } } .message-status { + @include clearfix; @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; - position: relative; - top: -15px; z-index: 10; - margin: 0 0 20px 0; + margin: 20px 0 10px; padding: 15px 20px; - font-family: "Open Sans", Verdana, Geneva, sans-serif; + font-family: $sans-serif; background: #fffcf0; border: 1px solid #ccc; .message-copy { + font-family: $sans-serif; + font-size: 13px; margin: 0; .grade-value { - font-size: 1.4rem; + font-size: 1.2rem; font-weight: bold; } } @@ -502,19 +427,18 @@ .actions { @include clearfix; list-style: none; - margin: 15px 0 0 0; + margin: 0; padding: 0; .action { float: left; - margin:0 15px 10px 0; + margin: 0 15px 0 0; .btn, .cta { display: inline-block; } .btn { - @include button(shiny, $blue); @include box-sizing(border-box); @include border-radius(3px); float: left; @@ -524,7 +448,6 @@ text-align: center; &.disabled { - @include button(shiny, #eee); cursor: default !important; &:hover { @@ -539,7 +462,6 @@ } .cta { - @include button(shiny, #666); float: left; font: normal 0.8rem/1.2rem $sans-serif; letter-spacing: 1px; @@ -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 { display: block; } @@ -577,17 +528,16 @@ a.unenroll { float: right; + display: block; font-style: italic; color: #a0a0a0; text-decoration: underline; font-size: .8em; - @include inline-block; - margin-bottom: 40px; + margin-top: 32px; &:hover { color: #333; } } - } } diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html index d9b57ac044..0c920afbed 100644 --- a/lms/templates/dashboard.html +++ b/lms/templates/dashboard.html @@ -198,87 +198,107 @@ course_target = reverse('about_course', args=[course.id]) %> - -
-
-
❯
-
-
-
-

${get_course_about_section(course, 'university')}

-

${course.number} ${course.title}

-
-
-

+ + + + + +

+
+

% if course.has_ended(): - Course Completed - ${course.end_date_text} + Course Completed - ${course.end_date_text} % elif course.has_started(): - Course Started - ${course.start_date_text} + Course Started - ${course.start_date_text} % else: # hasn't started yet - Course Starts - ${course.start_date_text} + Course Starts - ${course.start_date_text} % endif

-
- % if course.id in show_courseware_links_for: -

View Courseware

- % endif -
- - +

${get_course_about_section(course, 'university')}

+

${course.number} ${course.title}

+ - <% - cert_status = cert_statuses.get(course.id) - %> - % if course.has_ended() and cert_status: - <% - if cert_status['status'] == 'generating': - 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' - %> -
- - % if cert_status['status'] == 'processing': -

Final course details are being wrapped up at - this time. Your final standing will be available shortly.

- % elif cert_status['status'] in ('generating', 'ready', 'notpassing'): -

Your final grade: - ${"{0:.0f}%".format(float(cert_status['grade'])*100)}. - % if cert_status['status'] == 'notpassing': - Grade required for a certificate: - ${"{0:.0f}%".format(float(course.lowest_passing_grade)*100)}. - % endif -

- % endif - - % if cert_status['show_disabled_download_button'] or cert_status['show_download_url'] or cert_status['show_survey_button']: - - % endif +
+ Register for Pearson exam +

Registration for the Pearson exam is now open.

- % endif +
+

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.

+
- Unregister +
+ Schedule Pearson exam +

Registration number: edx00015879548

+

Write this down! You’ll need it to schedule your exam.

+
+ + + + <% + cert_status = cert_statuses.get(course.id) + %> + % if course.has_ended() and cert_status: + <% + if cert_status['status'] == 'generating': + 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' + %> +
+ + % if cert_status['status'] == 'processing': +

Final course details are being wrapped up at + this time. Your final standing will be available shortly.

+ % elif cert_status['status'] in ('generating', 'ready', 'notpassing'): +

Your final grade: + ${"{0:.0f}%".format(float(cert_status['grade'])*100)}. + % if cert_status['status'] == 'notpassing': + Grade required for a certificate: + ${"{0:.0f}%".format(float(course.lowest_passing_grade)*100)}. + % endif +

+ % endif + + % if cert_status['show_disabled_download_button'] or cert_status['show_download_url'] or cert_status['show_survey_button']: + + % endif +
+ + % endif + + % if course.id in show_courseware_links_for: + % if course.has_ended(): + View Archived Course + % else: + View Course + % endif + % endif + Unregister +
+ + + % endfor % else: