From 75c523f39f332afb1e609f047c74ed2d605136f4 Mon Sep 17 00:00:00 2001 From: Jade Olivier Date: Fri, 14 Apr 2023 13:33:09 +0200 Subject: [PATCH 1/4] feat: Updated program details breakpoints --- lms/static/sass/views/_program-details.scss | 41 ++++++++++--------- .../program_details_view.underscore | 6 +-- 2 files changed, 24 insertions(+), 23 deletions(-) diff --git a/lms/static/sass/views/_program-details.scss b/lms/static/sass/views/_program-details.scss index 689bfcbe11..a34c3acc1f 100644 --- a/lms/static/sass/views/_program-details.scss +++ b/lms/static/sass/views/_program-details.scss @@ -108,9 +108,11 @@ $btn-color-primary: $primary-dark; font-family: 'Open Sans'; font-weight: normal; flex-wrap: wrap; + flex-direction: column; padding: 40px 10px 35px; @include media-breakpoint-up(md) { + flex-direction: row; padding: { left: 30px; right: 30px; @@ -197,10 +199,12 @@ $btn-color-primary: $primary-dark; .authoring-organizations { text-align: center; - display: flex; + display: block; + padding-left: 24px; + width: fit-content; @include media-breakpoint-up(md) { - display: block; + padding-left: 0px; } .heading { @@ -216,15 +220,16 @@ $btn-color-primary: $primary-dark; } } + .orgs .org-logo { + height: 40px; + } + @include media-breakpoint-up(md) { margin: initial; width: 30%; .orgs .org-logo { @include margin-left(2.5%); - - width: 46.5%; - height: auto; } } @@ -279,11 +284,7 @@ $btn-color-primary: $primary-dark; @include margin-left(15px); font-size: 0.9375em; - width: 310px; - - @include media-breakpoint-up(sm) { - width: auto; - } + width: auto; .motivating-heading { margin-bottom: 0; @@ -638,7 +639,7 @@ $btn-color-primary: $primary-dark; // CSS for the program sidebar .program-sidebar { - padding: $baseline*1.5 $baseline*0.5; + padding: 40px 40px; .program-record { text-align: left; @@ -649,11 +650,7 @@ $btn-color-primary: $primary-dark; @include margin-left($baseline*0.75); font-size: 0.9375em; - width: $baseline*15.5; - - @include media-breakpoint-up(sm) { - width: auto; - } + width: auto; .motivating-message { color: #414141; @@ -688,12 +685,9 @@ $btn-color-primary: $primary-dark; .pathway-wrapper { @include margin-left($baseline*0.75); - width: $baseline*15.5; + width: auto; border-bottom: 1px solid $gray-light3; - @include media-breakpoint-up(sm) { - width: auto; - } .pathway-info { margin: 15px 0; @@ -715,6 +709,7 @@ $btn-color-primary: $primary-dark; @include float(right); width: $baseline*15; + padding: $baseline*1.5 $baseline*0.5; padding-right: $baseline*1.5; position: relative; } @@ -732,6 +727,12 @@ $btn-color-primary: $primary-dark; } } +.program-sidebar.col-md-4 { + @include media-breakpoint-up(md) { + width: 100%; + } +} + .certificate-heading { margin-bottom: 10px; diff --git a/lms/templates/learner_dashboard/program_details_view.underscore b/lms/templates/learner_dashboard/program_details_view.underscore index 7cb90a980a..b53ac34db2 100644 --- a/lms/templates/learner_dashboard/program_details_view.underscore +++ b/lms/templates/learner_dashboard/program_details_view.underscore @@ -1,8 +1,8 @@
-
-
+
+
<% if (completedCount === totalCount) { %>

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

@@ -76,5 +76,5 @@
- +
From cadb2ad287b83c12c364d7ef43c886015e3af648 Mon Sep 17 00:00:00 2001 From: Jade Olivier Date: Fri, 14 Apr 2023 14:55:17 +0200 Subject: [PATCH 2/4] feat: Update Program Details breakpoints --- lms/static/sass/views/_program-details.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/lms/static/sass/views/_program-details.scss b/lms/static/sass/views/_program-details.scss index a34c3acc1f..a54cad06b5 100644 --- a/lms/static/sass/views/_program-details.scss +++ b/lms/static/sass/views/_program-details.scss @@ -727,12 +727,6 @@ $btn-color-primary: $primary-dark; } } -.program-sidebar.col-md-4 { - @include media-breakpoint-up(md) { - width: 100%; - } -} - .certificate-heading { margin-bottom: 10px; From 0c8f2f3a9328802832cefb2f170d0e9018f1e530 Mon Sep 17 00:00:00 2001 From: Jade Olivier Date: Mon, 17 Apr 2023 11:27:19 +0200 Subject: [PATCH 3/4] feat: Updated Program Details breakpoints --- lms/static/sass/views/_program-details.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lms/static/sass/views/_program-details.scss b/lms/static/sass/views/_program-details.scss index a54cad06b5..389219ce6e 100644 --- a/lms/static/sass/views/_program-details.scss +++ b/lms/static/sass/views/_program-details.scss @@ -709,8 +709,7 @@ $btn-color-primary: $primary-dark; @include float(right); width: $baseline*15; - padding: $baseline*1.5 $baseline*0.5; - padding-right: $baseline*1.5; + padding: $baseline*1.5 $baseline*1.5 $baseline*1.5 $baseline*0.5; position: relative; } From e6f484083e0d547555bbe6aba8d1090d73eb19ba Mon Sep 17 00:00:00 2001 From: Jade Olivier Date: Thu, 20 Apr 2023 09:56:53 +0200 Subject: [PATCH 4/4] feat: updated left margin on program details page --- lms/static/sass/views/_program-details.scss | 38 +++++++-------------- 1 file changed, 12 insertions(+), 26 deletions(-) diff --git a/lms/static/sass/views/_program-details.scss b/lms/static/sass/views/_program-details.scss index 389219ce6e..e7fe41b839 100644 --- a/lms/static/sass/views/_program-details.scss +++ b/lms/static/sass/views/_program-details.scss @@ -9,7 +9,11 @@ $btn-color-primary: $primary-dark; .program-details { .content-wrapper { max-width: 100%; - padding-top: 0; + padding: 0px 20px 10px 20px; + + @include media-breakpoint-up(lg){ + padding: 0px 20px 10px 40px; + } } } @@ -109,21 +113,15 @@ $btn-color-primary: $primary-dark; font-weight: normal; flex-wrap: wrap; flex-direction: column; - padding: 40px 10px 35px; + padding: 40px 10px 35px 0px; @include media-breakpoint-up(md) { flex-direction: row; - padding: { - left: 30px; - right: 30px; - } + padding-right: 30px; } @media (min-width: map-get($container-max-widths, xl)) { - padding: { - left: calc(((100% - 1180px) / 2) + 30px); - right: calc(((100% - 1180px) / 2) + 30px); - } + padding-right: calc(((100% - 1180px) / 2) + 30px); } .hd-1 { @@ -241,16 +239,10 @@ $btn-color-primary: $primary-dark; .program-details-content { margin-bottom: 30px; - padding: { - left: 40px; - right: 40px; - }; + padding-right: 40px; } .tab-content{ .tab-pane { - .program-details-content { - padding-left: 40px; - } .js-program-pathways { padding-left: 40px; } @@ -281,8 +273,6 @@ $btn-color-primary: $primary-dark; .course-list-headings { .motivating-section { - @include margin-left(15px); - font-size: 0.9375em; width: auto; @@ -447,7 +437,7 @@ $btn-color-primary: $primary-dark; .program-course-card { width: 100%; - padding: 15px; + padding: 15px 15px 15px 0px; @include media-breakpoint-up(md) { height: auto; @@ -639,7 +629,7 @@ $btn-color-primary: $primary-dark; // CSS for the program sidebar .program-sidebar { - padding: 40px 40px; + padding: 40px 40px 40px 0px; .program-record { text-align: left; @@ -647,8 +637,6 @@ $btn-color-primary: $primary-dark; } .motivating-section { - @include margin-left($baseline*0.75); - font-size: 0.9375em; width: auto; @@ -682,9 +670,7 @@ $btn-color-primary: $primary-dark; padding-bottom: 2em; } - .pathway-wrapper { - @include margin-left($baseline*0.75); - + .pathway-wrapper { width: auto; border-bottom: 1px solid $gray-light3;