Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: ui fixes in program tabs

Browse Source 
theme fixes
This commit is contained in:
Mehak Nasir
2022-02-10 12:28:12 +05:00
committed by Mehak Nasir
parent efa0f4c644
commit cf8104eb76
3 changed files with 158 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
lms/static/sass/views/_program-details.scss
View File

@@ -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;
}
}

265
lms/templates/learner_dashboard/program_details_tab_view.underscore
View File

@@ -26,142 +26,161 @@
</div>
<div class="tab-content" id="ProgramTabContent">
<div class="tab-pane fade show active" id="journey" role="tabpanel" aria-labelledby="journey-tab">
<article class="program-details-content">
<div class="program-heading">
<% if (completedCount === totalCount) { %>
<h3 class="program-heading-title"><%- gettext('Congratulations!') %></h3>
<div class="program-heading-message">
<div><%- interpolate(gettext(
'You have successfully completed all the requirements for the %(title)s %(type)s.'),
{ title: title, type: type }, true) %>
<div class="col-md-12 d-flex">
<article class="program-details-content col-md-8">
<div class="program-heading">
<% if (completedCount === totalCount) { %>
<h2 class="program-heading-title"><%- gettext('Congratulations!') %></h2>
<div class="program-heading-message">
<div><%- interpolate(gettext(
'You have successfully completed all the requirements for the %(title)s %(type)s.'),
{ title: title, type: type }, true) %>
</div>
</div>
</div>
<% } else { %>
<h3 class="program-heading-title"><%- gettext('Your Program Journey') %></h3>
<div class="program-heading-message">
<div>
<%- interpolate(gettext(
'Track and plan your progress through the %(count)s courses in this program.'),
{ count: totalCount }, true) %>
<% } else { %>
<h2 class="program-heading-title"><%- gettext('Your Program Journey') %></h2>
<div class="program-heading-message">
<div>
<%- 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) %>
</div>
</div>
<div><%- gettext('To complete the program, you must earn a verified certificate for each course.') %></div>
</div>
<% } %>
<% if (is_learner_eligible_for_one_click_purchase && (typeof is_mobile_only === 'undefined' || is_mobile_only === false)) { %>
<a href="<%- completeProgramURL %>" class="btn-brand btn cta-primary upgrade-button complete-program" id="program_dashboard_course_upsell_all_button">
<%- gettext('Upgrade All Remaining Courses (')%>
<% if (discount_data.is_discounted) { %>
<span class='list-price'>
<%- StringUtils.interpolate(
gettext('${listPrice}'), {listPrice: discount_data.total_incl_tax_excl_discounts.toFixed(2)}
)
%>
</span>
<% } %>
<%- StringUtils.interpolate(
gettext(' ${price} {currency} )'),
{price: full_program_price.toFixed(2), currency: discount_data.currency}
)
%>
</a>
<% } %>
</div>
<div class="course-list-headings">
<% if (inProgressCount) { %>
<div class="in-progress-group">
<h4 class="course-list-heading">
<span class="status"><%- gettext('COURSES IN PROGRESS') %></span>
<span class="count"><%- inProgressCount %></span>
</h4>
<div class="course-list js-course-list-in-progress row"></div>
<% if (is_learner_eligible_for_one_click_purchase && (typeof is_mobile_only === 'undefined' || is_mobile_only === false)) { %>
<a href="<%- completeProgramURL %>" class="btn-brand btn cta-primary upgrade-button complete-program" id="program_dashboard_course_upsell_all_button">
<%- gettext('Upgrade All Remaining Courses (')%>
<% if (discount_data.is_discounted) { %>
<span class='list-price'>
<%- StringUtils.interpolate(
gettext('${listPrice}'), {listPrice: discount_data.total_incl_tax_excl_discounts.toFixed(2)}
)
%>
</span>
<% } %>
<%- StringUtils.interpolate(
gettext(' ${price} {currency} )'),
{price: full_program_price.toFixed(2), currency: discount_data.currency}
)
%>
</a>
<% } %>
</div>
<% } %>
<% if (remainingCount) { %>
<div class="remaining-group">
<h4 class="course-list-heading">
<span class="status"><%- gettext('REMAINING COURSES') %></span>
<span class="count"><%- remainingCount %></span>
</h4>
<div class="course-list js-course-list-remaining row"></div>
</div>
<% } %>
<div class="completed-group">
<h4 class="course-list-heading">
<span class="status"><%- gettext('COMPLETED COURSES') %></span>
<span class="count"><%- completedCount %></span>
</h4>
<% if (completedCount) { %>
<div class="course-list js-course-list-completed row"></div>
<% } else { %>
<div class="motivating-section">
<p class='motivating-heading'><%- gettext("As you complete courses, you will see them listed here.") %></p>
<p class='motivating-message'><%- gettext('Complete courses on your schedule to ensure you stand out in your field!') %></p>
<div class="course-list-headings">
<% if (inProgressCount) { %>
<div class="in-progress-group">
<h4 class="course-list-heading">
<span class="status"><%- gettext('COURSES IN PROGRESS') %></span>
<span class="count"><%- inProgressCount %></span>
</h4>
<div class="course-list js-course-list-in-progress row"></div>
</div>
<% } %>
<% if (remainingCount) { %>
<div class="remaining-group">
<h4 class="course-list-heading">
<span class="status"><%- gettext('REMAINING COURSES') %></span>
<span class="count"><%- remainingCount %></span>
</h4>
<div class="course-list js-course-list-remaining row"></div>
</div>
<% } %>
<div class="completed-group">
<h4 class="course-list-heading">
<span class="status"><%- gettext('COMPLETED COURSES') %></span>
<span class="count"><%- completedCount %></span>
</h4>
<% if (completedCount) { %>
<div class="course-list js-course-list-completed row"></div>
<% } else { %>
<div class="motivating-section">
<p class='motivating-heading'><%- gettext("As you complete courses, you will see them listed here.") %></p>
<p class='motivating-message'><%- gettext('Complete courses on your schedule to ensure you stand out in your field!') %></p>
</div>
<% } %>
</div>
<% } %>
</div>
</div>
</article>
<aside class="js-program-sidebar program-sidebar col-md-4"></aside>
</div>
</article>
<aside class="js-program-sidebar program-sidebar"></aside>
</div>
</div>
<% if (discussionFragment.configured) { %>
<div class="tab-pane fade" id="community" role="tabpanel" aria-labelledby="community-tab"><%= HtmlUtils.HTML(discussionFragment.iframe) %></div>
<div class="tab-pane fade" id="community" role="tabpanel" aria-labelledby="community-tab"><%= HtmlUtils.HTML(discussionFragment.iframe) %></div>
<% } %>
<% if (live_fragment.configured) { %>
<div class="tab-pane fade" id="live" role="tabpanel" aria-labelledby="live-tab"></div>
<div class="tab-pane fade" id="live" role="tabpanel" aria-labelledby="live-tab"></div>
<% } %>
<div class="tab-pane fade" id="pathways" role="tabpanel" aria-labelledby="pathaways-tab">
<% if (creditPathways.length > 0) { %>
<aside class="aside js-program-pathways program-credit-pathways">
<h2 class = "divider-heading"><%- gettext('Additional Credit Opportunities') %></h2>
<% if (creditPathways.length > 0) { %>
<div class="js-program-pathways program-credit-pathways col-md-12 d-flex">
<aside class="col-md-4 program-heading">
<h2 class = "divider-heading program-heading-title"><%- gettext('Additional Credit Opportunities') %></h2>
<div class="program-heading-message">
<div class="pb-4"><%- interpolate(gettext(
'Transform your %(org)s %(type)s into a full master’s degree'),
{ org: authoring_organizations[0].key, type: type }, true) %>
</div>
<div class="pb-4"><%- interpolate(gettext(
'Successful completion of %(org)s %(program)s credential can be applied towards flexible, rigorous, and affordable masters degrees from the world’s leading universities.'),
{org: authoring_organizations[0].key, program: title}, true) %>
</div>
</div>
</aside>
<div class="col-md-8">
<% for (var i = 0; i < creditPathways.length; i++) {
var pathway = creditPathways[i];
%>
<div class="pathway-wrapper pb-4">
<div class = "pathway-info">
<h2 class="pathway-heading"> <%- pathway.name %> </h2>
<% if (pathway.description) { %>
<p> <%- pathway.description %> </p>
<% } %>
<% if (pathway.destination_url) { %>
<div class="sidebar-button-wrapper">
<a href="<%- pathway.destination_url %>" class="pathway-link">
<button class="btn pathway-button sidebar-button btn-outline-primary" data-pathway-uuid="<%- pathway.uuid %>" data-pathway-name="<%- pathway.name %>"><%- gettext('Learn More') %></button>
</a>
</div>
<% } %>
</div>
</div>
<% } %>
</div>
</div>
<% } %>
<% for (var i = 0; i < creditPathways.length; i++) {
var pathway = creditPathways[i];
%>
<div class="pathway-wrapper">
<div class = "pathway-info">
<h2 class="pathway-heading"> <%- pathway.name %> </h2>
<% if (pathway.description) { %>
<p> <%- pathway.description %> </p>
<% } %>
<% if (pathway.destination_url) { %>
<div class="sidebar-button-wrapper">
<a href="<%- pathway.destination_url %>" class="pathway-link">
<button class="btn pathway-button sidebar-button" data-pathway-uuid="<%- pathway.uuid %>" data-pathway-name="<%- pathway.name %>"><%- gettext('Learn More') %></button>
</a>
</div>
<% } %>
</div>
</div>
<% } %>
</aside>
<% } %>
<% if (industryPathways.length > 0) { %>
<aside class="aside js-program-pathways program-industry-pathways">
<h2 class = "divider-heading"><%- gettext('Additional Professional Opportunities') %></h2>
<% for (var i = 0; i < industryPathways.length; i++) {
var pathway = industryPathways[i];
%>
<div class="pathway-wrapper">
<div class = "pathway-info">
<h2 class="pathway-heading"> <%- pathway.name %> </h2>
<% if (pathway.description) { %>
<p> <%- pathway.description %> </p>
<% } %>
<% if (pathway.destination_url) { %>
<div class="sidebar-button-wrapper">
<a href="<%- pathway.destination_url %>" class="pathway-link">
<button class="btn pathway-button sidebar-button" data-pathway-uuid="<%- pathway.uuid %>" data-pathway-name="<%- pathway.name %>"><%- gettext('Learn More') %></button>
</a>
</div>
<% } %>
</div>
</div>
<% } %>
</aside>
<% } %>
<% if (industryPathways.length > 0) { %>
<div class="js-program-pathways program-industry-pathways col-md-12 d-flex">
<aside class="col-md-4">
<h2 class ="program-heading-title"><%- gettext('Additional Professional Opportunities') %></h2>
</aside>
<div class="col-md-8">
<% for (var i = 0; i < industryPathways.length; i++) {
var pathway = industryPathways[i];
%>
<div class="pathway-wrapper pb-4">
<div class = "pathway-info">
<h3 class="pathway-heading"> <%- pathway.name %> </h3>
<% if (pathway.description) { %>
<p> <%- pathway.description %> </p>
<% } %>
<% if (pathway.destination_url) { %>
<div class="sidebar-button-wrapper">
<a href="<%- pathway.destination_url %>" class="pathway-link">
<button class="btn pathway-button sidebar-button" data-pathway-uuid="<%- pathway.uuid %>" data-pathway-name="<%- pathway.name %>"><%- gettext('Learn More') %></button>
</a>
</div>
<% } %>
</div>
</div>
<% } %>
</div>
</div>
<% } %>
</div>
</div>
<% } %>

10
lms/templates/learner_dashboard/program_details_view.underscore
View File

@@ -1,7 +1,8 @@
<header class="js-program-header program-header full-width-banner"></header>
<!-- TODO: consider if article is the most appropriate element here -->
<article class="program-details-content">
<div class="col-md-12 d-flex">
<article class="program-details-content col-md-8">
<div class="program-heading">
<% if (completedCount === totalCount) { %>
<h3 class="program-heading-title"><%- gettext('Congratulations!') %></h3>
@@ -16,10 +17,9 @@
<div class="program-heading-message">
<div>
<%- 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) %>
</div>
<div><%- gettext('To complete the program, you must earn a verified certificate for each course.') %></div>
</div>
<% } %>
<% if (is_learner_eligible_for_one_click_purchase && (typeof is_mobile_only === 'undefined' || is_mobile_only === false)) { %>
@@ -76,5 +76,5 @@
</div>
</div>
</article>
<aside class="js-program-sidebar program-sidebar"></aside>
<aside class="js-program-sidebar program-sidebar col-md-4"></aside>
</div>