From cf8104eb7652ed0438805ba19dde2bb2050654ea Mon Sep 17 00:00:00 2001 From: Mehak Nasir Date: Thu, 10 Feb 2022 12:28:12 +0500 Subject: [PATCH] style: ui fixes in program tabs theme fixes --- lms/static/sass/views/_program-details.scss | 42 +-- .../program_details_tab_view.underscore | 265 ++++++++++-------- .../program_details_view.underscore | 10 +- 3 files changed, 158 insertions(+), 159 deletions(-) diff --git a/lms/static/sass/views/_program-details.scss b/lms/static/sass/views/_program-details.scss index 36e2bfb52b..e40af8791b 100644 --- a/lms/static/sass/views/_program-details.scss +++ b/lms/static/sass/views/_program-details.scss @@ -235,29 +235,11 @@ $btn-color-primary: $primary-dark; } .program-details-content { - width: 100%; margin-bottom: 30px; - padding: 30px 10px; - - @include media-breakpoint-up(md) { - @include float(left); - padding: { - left: 30px; - right: 30px; - } - - width: calc(100% - 330px); - position: relative; - } - - @include media-breakpoint-up(lg) { - width: calc(100% - 510px); - max-width: 700px; - } - - @media (min-width: map-get($container-max-widths, xl)) { - @include margin-left(calc((100% - 1180px) / 2)); - } + padding: { + left: 40px; + right: 40px; + }; } .tab-content{ .tab-pane { @@ -322,15 +304,15 @@ $btn-color-primary: $primary-dark; .program-heading-title { font-family: $font-family-sans-serif; - font-weight: 600; - font-size: 1.3em; - color: $gray-base; + font-weight: 700; margin-bottom: 5px; line-height: normal; } .program-heading-message { - font-weight: 300; + font-weight: 400; + font-size: 18px; + line-height: 28px; } } @@ -453,10 +435,6 @@ $btn-color-primary: $primary-dark; margin: 10px 15px 10px 5px; align-self: flex-start; - @include media-breakpoint-up(md) { - align-self: flex-end; - } - .list-price { text-decoration: line-through; } @@ -693,9 +671,11 @@ $btn-color-primary: $primary-dark; .sidebar-button-wrapper { text-align: right; - .sidebar-button { font-size: 0.9375em; + background: transparent; + border: 1px solid; + padding: 10px 16px; } } diff --git a/lms/templates/learner_dashboard/program_details_tab_view.underscore b/lms/templates/learner_dashboard/program_details_tab_view.underscore index c1e3d7b8bc..62da7208ad 100644 --- a/lms/templates/learner_dashboard/program_details_tab_view.underscore +++ b/lms/templates/learner_dashboard/program_details_tab_view.underscore @@ -26,142 +26,161 @@
-
-
- <% if (completedCount === totalCount) { %> -

<%- gettext('Congratulations!') %>

-
-
<%- interpolate(gettext( - 'You have successfully completed all the requirements for the %(title)s %(type)s.'), - { title: title, type: type }, true) %> +
+
+
+ <% if (completedCount === totalCount) { %> +

<%- gettext('Congratulations!') %>

+
+
<%- interpolate(gettext( + 'You have successfully completed all the requirements for the %(title)s %(type)s.'), + { title: title, type: type }, true) %> +
-
- <% } else { %> -

<%- gettext('Your Program Journey') %>

-
-
- <%- interpolate(gettext( - 'Track and plan your progress through the %(count)s courses in this program.'), - { count: totalCount }, true) %> + <% } else { %> +

<%- gettext('Your Program Journey') %>

+
+
+ <%- interpolate(gettext( + 'Track and plan your progress through the %(count)s course(s) in this program. To complete the program, you must earn a verified certificate for each course.'), + { count: totalCount }, true) %> +
-
<%- gettext('To complete the program, you must earn a verified certificate for each course.') %>
-
- <% } %> - <% if (is_learner_eligible_for_one_click_purchase && (typeof is_mobile_only === 'undefined' || is_mobile_only === false)) { %> - - <%- gettext('Upgrade All Remaining Courses (')%> - <% if (discount_data.is_discounted) { %> - - <%- StringUtils.interpolate( - gettext('${listPrice}'), {listPrice: discount_data.total_incl_tax_excl_discounts.toFixed(2)} - ) - %> - <% } %> - <%- StringUtils.interpolate( - gettext(' ${price} {currency} )'), - {price: full_program_price.toFixed(2), currency: discount_data.currency} - ) - %> - - <% } %> -
-
- <% if (inProgressCount) { %> -
-

- <%- gettext('COURSES IN PROGRESS') %> - <%- inProgressCount %> -

-
+ <% if (is_learner_eligible_for_one_click_purchase && (typeof is_mobile_only === 'undefined' || is_mobile_only === false)) { %> + + <%- gettext('Upgrade All Remaining Courses (')%> + <% if (discount_data.is_discounted) { %> + + <%- StringUtils.interpolate( + gettext('${listPrice}'), {listPrice: discount_data.total_incl_tax_excl_discounts.toFixed(2)} + ) + %> + + <% } %> + <%- StringUtils.interpolate( + gettext(' ${price} {currency} )'), + {price: full_program_price.toFixed(2), currency: discount_data.currency} + ) + %> + + <% } %>
- <% } %> - <% if (remainingCount) { %> -
-

- <%- gettext('REMAINING COURSES') %> - <%- remainingCount %> -

-
-
- <% } %> -
-

- <%- gettext('COMPLETED COURSES') %> - <%- completedCount %> -

- <% if (completedCount) { %> -
- <% } else { %> -
-

<%- gettext("As you complete courses, you will see them listed here.") %>

-

<%- gettext('Complete courses on your schedule to ensure you stand out in your field!') %>

+
+ <% if (inProgressCount) { %> +
+

+ <%- gettext('COURSES IN PROGRESS') %> + <%- inProgressCount %> +

+
+
+ <% } %> + <% if (remainingCount) { %> +
+

+ <%- gettext('REMAINING COURSES') %> + <%- remainingCount %> +

+
+
+ <% } %> +
+

+ <%- gettext('COMPLETED COURSES') %> + <%- completedCount %> +

+ <% if (completedCount) { %> +
+ <% } else { %> +
+

<%- gettext("As you complete courses, you will see them listed here.") %>

+

<%- gettext('Complete courses on your schedule to ensure you stand out in your field!') %>

+
+ <% } %>
- <% } %> -
+
+
+
-
- +
-
<% if (discussionFragment.configured) { %> -
<%= HtmlUtils.HTML(discussionFragment.iframe) %>
+
<%= HtmlUtils.HTML(discussionFragment.iframe) %>
<% } %> + <% if (live_fragment.configured) { %> -
+
<% } %> +
-<% if (creditPathways.length > 0) { %> - -<% } %> - -<% if (industryPathways.length > 0) { %> - -<% } %> + <% if (industryPathways.length > 0) { %> +
+ +
+ <% for (var i = 0; i < industryPathways.length; i++) { + var pathway = industryPathways[i]; + %> +
+
+

<%- pathway.name %>

+ <% if (pathway.description) { %> +

<%- pathway.description %>

+ <% } %> + <% if (pathway.destination_url) { %> +
+ + + +
+ <% } %> +
+
+ <% } %> +
+
+ <% } %>
<% } %> diff --git a/lms/templates/learner_dashboard/program_details_view.underscore b/lms/templates/learner_dashboard/program_details_view.underscore index 5216c1ef55..76b6bdfcd3 100644 --- a/lms/templates/learner_dashboard/program_details_view.underscore +++ b/lms/templates/learner_dashboard/program_details_view.underscore @@ -1,7 +1,8 @@
-
+
+
<% if (completedCount === totalCount) { %>

<%- gettext('Congratulations!') %>

@@ -16,10 +17,9 @@
<%- interpolate(gettext( - 'Track and plan your progress through the %(count)s courses in this program.'), + 'Track and plan your progress through the %(count)s courses in this program. To complete the program, you must earn a verified certificate for each course.'), { count: totalCount }, true) %>
-
<%- gettext('To complete the program, you must earn a verified certificate for each course.') %>
<% } %> <% if (is_learner_eligible_for_one_click_purchase && (typeof is_mobile_only === 'undefined' || is_mobile_only === false)) { %> @@ -76,5 +76,5 @@
- - + +