diff --git a/tutorindigo/plugin.py b/tutorindigo/plugin.py index 090a69faf..6ce6324aa 100644 --- a/tutorindigo/plugin.py +++ b/tutorindigo/plugin.py @@ -131,6 +131,22 @@ def _override_openedx_docker_image( """ RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^1.0.0' RUN npm install '@edx/frontend-component-footer@npm:@edly-io/indigo-frontend-component-footer@^1.0.0' +""", + ), + ( + "mfe-dockerfile-post-npm-install-profile", + """ +RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^1.0.0' +RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^1.0.0' +RUN npm install '@edx/frontend-component-footer@npm:@edly-io/indigo-frontend-component-footer@^1.0.0' +""", + ), + ( + "mfe-dockerfile-post-npm-install-account", + """ +RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^1.0.0' +RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^1.0.0' +RUN npm install '@edx/frontend-component-footer@npm:@edly-io/indigo-frontend-component-footer@^1.0.0' """, ), ] diff --git a/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_extras.scss b/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_extras.scss new file mode 100644 index 000000000..bee7047e9 --- /dev/null +++ b/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_extras.scss @@ -0,0 +1,5 @@ +@import "fonts"; + +#main{ + background-color: $secondary; +} diff --git a/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_fonts.scss b/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_fonts.scss new file mode 100644 index 000000000..b7005296e --- /dev/null +++ b/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_fonts.scss @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); diff --git a/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables-v1.scss b/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables-v1.scss new file mode 100644 index 000000000..0acf71700 --- /dev/null +++ b/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables-v1.scss @@ -0,0 +1,292 @@ + +$baseline: 20px; + +// +Paths +// ==================== +$static-path: '..' !default; + +@import "fonts"; + +// +Grid +// ==================== +$gw-column: ($baseline*3); +$gw-gutter: $baseline; +$fg-column: $gw-column; +$fg-gutter: $gw-gutter; +$fg-max-columns: 12; +$fg-max-width: 1280px; +$fg-min-width: 900px; + +// +Fonts +// ==================== +$f-sans-serif: 'Inter', 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; +$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace; + +// +Colors - Utility +// ==================== +$transparent: rgba(0, 0, 0, 0) !default; // used when color value is needed for UI width/transitions but element is transparent + +// +Colors - UXPL new pattern library colors +// ==================== +$uxpl-blue-hover-active: #065683 !default; // wcag2a compliant +$uxpl-light-blue-base: rgb(242, 248, 251) !default; + +$uxpl-green-base: rgb(21, 55, 109) !default; // wcag2a compliant +$uxpl-green-hover-active: lighten($uxpl-green-base, 8%) !default; // wcag2a compliant +$uxpl-green-dark-hover-active: lighten($uxpl-green-base, 8%) !default; + +$uxpl-pink-base: rgb(194, 56, 125) !default; // wcag2a compliant +$uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%) !default; // wcag2a compliant + +$uxpl-grayscale-x-back: rgb(245, 245, 245) !default; // UXPL grayscale, x-back + +$uxpl-primary-accent: rgb(14, 166, 236) !default; + +// +Colors - Primary +// ==================== +$black: rgb(0, 0, 0) !default; +$black-t0: rgba($black, 0.125) !default; +$black-t1: rgba($black, 0.25) !default; +$black-t2: rgba($black, 0.5) !default; +$black-t3: rgba($black, 0.75) !default; +$black-t4: rgba($black, 0.85) !default; + +$white: rgb(255, 255, 255) !default; +$white-t0: rgba($white, 0.125) !default; +$white-t1: rgba($white, 0.25) !default; +$white-t2: rgba($white, 0.5) !default; +$white-t3: rgba($white, 0.75) !default; + +$gray: rgb(127, 127, 127) !default; +$gray-l1: tint($gray, 20%) !default; +$gray-l2: tint($gray, 40%) !default; +$gray-l3: tint($gray, 60%) !default; +$gray-l4: tint($gray, 80%) !default; +$gray-l5: tint($gray, 90%) !default; +$gray-l6: tint($gray, 95%) !default; +$gray-l7: tint($gray, 99%) !default; +$gray-d1: shade($gray, 20%) !default; +$gray-d2: shade($gray, 40%) !default; +$gray-d3: shade($gray, 60%) !default; +$gray-d4: shade($gray, 80%) !default; +$gray-u1: #ecf0f1; + + +// These define button styles similar to LMS +// The goal here is consistency (until we can overhaul all of this...) +$btn-lms-border: #d2c9c9 !default; +$btn-lms-background: #f1f1f1 !default; +$btn-lms-gradient: #d9d1d1 !default; +$btn-lms-shadow: #fcfbfb !default; +$btn-lms-shadow-hover: #fefefe !default; +$btn-lms-background-hover: #e4e4e4 !default; +$btn-lms-gradient-hover: #d1c9c9 !default; +$btn-lms-shadow-active: #cac2c2 !default; + +$blue: rgb(0, 159, 230) !default; +$blue-l1: tint($blue, 20%) !default; +$blue-l2: tint($blue, 40%) !default; +$blue-l3: tint($blue, 60%) !default; +$blue-l4: tint($blue, 80%) !default; +$blue-l5: tint($blue, 90%) !default; +$blue-d1: shade($blue, 20%) !default; +$blue-d2: shade($blue, 40%) !default; +$blue-d3: shade($blue, 60%) !default; +$blue-d4: shade($blue, 80%) !default; +$blue-s1: saturate($blue, 15%) !default; +$blue-s2: saturate($blue, 30%) !default; +$blue-s3: saturate($blue, 45%) !default; +$blue-u1: desaturate($blue, 15%) !default; +$blue-u2: desaturate($blue, 30%) !default; +$blue-u3: desaturate($blue, 45%) !default; +$blue-t0: rgba($blue, 0.125) !default; +$blue-t1: rgba($blue, 0.25) !default; +$blue-t2: rgba($blue, 0.5) !default; +$blue-t3: rgba($blue, 0.75) !default; + +$pink: rgb(183, 37, 103) !default; // #b72567; +$pink-l1: tint($pink, 20%) !default; +$pink-l2: tint($pink, 40%) !default; +$pink-l3: tint($pink, 60%) !default; +$pink-l4: tint($pink, 80%) !default; +$pink-l5: tint($pink, 90%) !default; +$pink-d1: shade($pink, 20%) !default; +$pink-d2: shade($pink, 40%) !default; +$pink-d3: shade($pink, 60%) !default; +$pink-d4: shade($pink, 80%) !default; +$pink-s1: saturate($pink, 15%) !default; +$pink-s2: saturate($pink, 30%) !default; +$pink-s3: saturate($pink, 45%) !default; +$pink-u1: desaturate($pink, 15%) !default; +$pink-u2: desaturate($pink, 30%) !default; +$pink-u3: desaturate($pink, 45%) !default; + +$red: rgb(178, 6, 16) !default; // #b20610; +$red-l1: tint($red, 20%) !default; +$red-l2: tint($red, 40%) !default; +$red-l3: tint($red, 60%) !default; +$red-l4: tint($red, 80%) !default; +$red-l5: tint($red, 90%) !default; +$red-d1: shade($red, 20%) !default; +$red-d2: shade($red, 40%) !default; +$red-d3: shade($red, 60%) !default; +$red-d4: shade($red, 80%) !default; +$red-s1: saturate($red, 15%) !default; +$red-s2: saturate($red, 30%) !default; +$red-s3: saturate($red, 45%) !default; +$red-u1: desaturate($red, 15%) !default; +$red-u2: desaturate($red, 30%) !default; +$red-u3: desaturate($red, 45%) !default; + +$green: rgb(37, 184, 90) !default; // #25b85a +$green-l1: tint($green, 20%) !default; +$green-l2: tint($green, 40%) !default; +$green-l3: tint($green, 60%) !default; +$green-l4: tint($green, 80%) !default; +$green-l5: tint($green, 90%) !default; +$green-d1: shade($green, 20%) !default; +$green-d2: shade($green, 40%) !default; +$green-d3: shade($green, 60%) !default; +$green-d4: shade($green, 80%) !default; +$green-s1: saturate($green, 15%) !default; +$green-s2: saturate($green, 30%) !default; +$green-s3: saturate($green, 45%) !default; +$green-u1: desaturate($green, 15%) !default; +$green-u2: desaturate($green, 30%) !default; +$green-u3: desaturate($green, 45%) !default; + +$yellow: rgb(237, 189, 60) !default; +$yellow-l1: tint($yellow, 20%) !default; +$yellow-l2: tint($yellow, 40%) !default; +$yellow-l3: tint($yellow, 60%) !default; +$yellow-l4: tint($yellow, 80%) !default; +$yellow-l5: tint($yellow, 90%) !default; +$yellow-d1: shade($yellow, 20%) !default; +$yellow-d2: shade($yellow, 40%) !default; +$yellow-d3: shade($yellow, 60%) !default; +$yellow-d4: shade($yellow, 80%) !default; +$yellow-s1: saturate($yellow, 15%) !default; +$yellow-s2: saturate($yellow, 30%) !default; +$yellow-s3: saturate($yellow, 45%) !default; +$yellow-u1: desaturate($yellow, 15%) !default; +$yellow-u2: desaturate($yellow, 30%) !default; +$yellow-u3: desaturate($yellow, 45%) !default; + +$orange: rgb(237, 189, 60) !default; +$orange-l1: tint($orange, 20%) !default; +$orange-l2: tint($orange, 40%) !default; +$orange-l3: tint($orange, 60%) !default; +$orange-l4: tint($orange, 80%) !default; +$orange-l5: tint($orange, 90%) !default; +$orange-d1: shade($orange, 20%) !default; +$orange-d2: shade($orange, 40%) !default; +$orange-d3: shade($orange, 60%) !default; +$orange-d4: shade($orange, 80%) !default; +$orange-s1: saturate($orange, 15%) !default; +$orange-s2: saturate($orange, 30%) !default; +$orange-s3: saturate($orange, 45%) !default; +$orange-u1: desaturate($orange, 15%) !default; +$orange-u2: desaturate($orange, 30%) !default; +$orange-u3: desaturate($orange, 45%) !default; + +// +Colors - Shadows +// ==================== +$shadow: rgba($black, 0.2) !default; +$shadow-l1: rgba($black, 0.1) !default; +$shadow-l2: rgba($black, 0.05) !default; +$shadow-d1: rgba($black, 0.4) !default; +$shadow-d2: rgba($black, 0.6) !default; + +// +Colors - Application +// ==================== +$color-draft: $gray-l3 !default; +$color-live: $blue !default; +$color-ready: $green !default; +$color-warning: $orange-l2 !default; +$color-error: $red-l2 !default; +$color-staff-only: $black !default; +$color-gated: $black !default; + +$color-heading-base: $gray-d2 !default; +$color-copy-base: $gray-d2 !default; +$color-copy-emphasized: $gray-d2 !default; + +// +Timing +// ==================== +// used for animation/transition mixin syncing +$tmg-s3: 3s; +$tmg-s2: 2s; +$tmg-s1: 1s; +$tmg-avg: 0.75s; +$tmg-f1: 0.5s; +$tmg-f2: 0.25s; +$tmg-f3: 0.125s; + +// +Archetype UI +// ==================== +$ui-action-primary-color: $blue-u2 !default; +$ui-action-primary-color-focus: $blue-s1 !default; + +$ui-link-color: $blue-u2 !default; +$ui-link-color-focus: $blue-s1 !default; +$link-color: $ui-link-color; + +// +Specific UI +// ==================== +$ui-notification-height: ($baseline*10); +$ui-update-color: $blue-l4 !default; + +// +Deprecated +// ==================== +// do not use, future clean up will use updated styles +$lighter-base-font-color: rgb(100, 100, 100) !default; +$offBlack: #3c3c3c !default; +$green: #108614 !default; +$lightGrey: #edf1f5 !default; +$mediumGrey: #b0b6c2 !default; +$darkGrey: #8891a1 !default; +$extraDarkGrey: #3d4043 !default; +$paleYellow: #fffcf1 !default; +$yellow: rgb(255, 254, 223) !default; +$green: rgb(37, 184, 90) !default; +$brightGreen: rgb(22, 202, 87) !default; +$disabledGreen: rgb(124, 206, 153) !default; +$darkGreen: rgb(52, 133, 76) !default; +$lightBluishGrey: rgb(197, 207, 223) !default; +$lightBluishGrey2: rgb(213, 220, 228) !default; +$error-red: rgb(253, 87, 87) !default; + + +//carryover from LMS for xmodules +$sidebar-color: rgb(246, 246, 246) !default; + +// type +$body-line-height: golden-ratio(0.875em, 1); + +// carried over from LMS for xmodules +$action-primary-active-bg: #1aa1de !default; // $m-blue +$very-light-text: $white !default; + +$color-background-alternate: rgb(242, 248, 251) !default; + +// ---------------------------- +// #COLORS- Bootstrap-style +// ---------------------------- + +$state-success-text: $black !default; +$state-success-bg: #dff0d8 !default; +$state-success-border: darken($state-success-bg, 5%) !default; + +$state-info-text: $black !default; +$state-info-bg: #d9edf7 !default; +$state-info-border: darken($state-info-bg, 7%) !default; + +$state-warning-text: $black !default; +$state-warning-bg: #fcf8e3 !default; +$state-warning-border: darken($state-warning-bg, 5%) !default; + +$state-danger-text: $black !default; +$state-danger-bg: #f2dede !default; +$state-danger-border: darken($state-danger-bg, 5%) !default; + +$text-dark-black-blue: #2c3e50; \ No newline at end of file diff --git a/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables.scss b/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables.scss new file mode 100644 index 000000000..888b6611a --- /dev/null +++ b/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables.scss @@ -0,0 +1,20 @@ +$primary: {{ INDIGO_PRIMARY_COLOR }}; +$secondary: #F2F7F8; + +$blue: $primary !default; +$m-blue-d1: mix(white, $primary, 5%) !default; +$m-blue-d2: mix(white, $primary, 15%) !default; +$m-blue-d3: $primary !default; +$m-blue-d4: mix(rgb(74, 137, 245), $primary, 20%) !default; +$m-blue-d5: mix(rgb(56, 148, 252), $primary, 30%) !default; +$m-blue-d6: mix(rgb(42, 134, 226), $primary, 40%) !default; + +$uxpl-blue-hover-active: lighten($primary, 7%) !default; + +$serif: 'Inter'; +$f-sans-serif: 'Inter', 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; +$font-family-title: 'Inter'; +$font-family-sans-serif: 'Inter', 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; + +// Initialize the Open edX Bootstrap theme +@import 'edx-bootstrap/sass/open-edx/theme'; diff --git a/tutorindigo/templates/indigo/lms/static/images/no_course_image.png b/tutorindigo/templates/indigo/lms/static/images/no_course_image.png index a1568b7a6..e520f0787 100644 Binary files a/tutorindigo/templates/indigo/lms/static/images/no_course_image.png and b/tutorindigo/templates/indigo/lms/static/images/no_course_image.png differ diff --git a/tutorindigo/templates/indigo/lms/static/images/profile.svg b/tutorindigo/templates/indigo/lms/static/images/profile.svg index 5f4befb56..c050138d5 100644 --- a/tutorindigo/templates/indigo/lms/static/images/profile.svg +++ b/tutorindigo/templates/indigo/lms/static/images/profile.svg @@ -2,7 +2,7 @@ - + diff --git a/tutorindigo/templates/indigo/lms/static/sass/certificates/_certificate.scss b/tutorindigo/templates/indigo/lms/static/sass/certificates/_certificate.scss new file mode 100644 index 000000000..ec60d6d66 --- /dev/null +++ b/tutorindigo/templates/indigo/lms/static/sass/certificates/_certificate.scss @@ -0,0 +1,40 @@ +// Include custom cirtificate + +body.certificate { + .wrapper-header { + padding: 0; + } + .accomplishment-metadata { + .recipient-img { + display: none; + } + .recipient-name, .recipient-username { + margin: 0; + } + } + .layout-accomplishment { + .wrapper-introduction { + padding: 0; + } + } + .wrapper-about { + padding: 20px 0 0 !important; + } + .header-app, .banner-user, .introduction, .wrapper-accomplishment-metadata, .wrapper-accomplishment-rendering, .introduction, aside.about { + display: block; + max-width: 1090px !important; + margin: 0 auto; + padding: 0 15px !important; + box-sizing: border-box; + .header-app-title { + text-align: left; + a { + display: inline-block; + vertical-align: top; + width: 45px; + margin: 10px 0; + } + } + } +} + diff --git a/tutorindigo/templates/indigo/lms/static/sass/courseware/_about.scss b/tutorindigo/templates/indigo/lms/static/sass/courseware/_about.scss index 982e6ba78..3a5efba39 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/courseware/_about.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/courseware/_about.scss @@ -42,7 +42,7 @@ } .org { display: block; - color: #6B7280; + color: #515661; font-size: 16px; line-height: 22px; } @@ -74,21 +74,13 @@ border: none; &:after { position: absolute; - left: -35px; - top: -25px; - width: 100%; - height: 100%; + left: 1px; + top: 1px; + width: calc(100% - 2px); + height: calc(100% - 2px); content: ""; border-radius: 8px; - background: $primary-light; - display: none; - @include media-breakpoint-up(md) { - display: block; - } - @include media-breakpoint-up(lg) { - left: -57px; - top: -44px; - } + border: 1px solid $primary-light; } } } @@ -136,6 +128,17 @@ opacity: .8; } } + span.closed { + background: $primary-light; + border-radius: 6px; + color: #9CA3AF; + font-size: 16px; + line-height: 24px; + padding: 16px; + font-weight: 500; + display: inline-block; + vertical-align: top; + } } .about-content { display: flex; @@ -164,7 +167,7 @@ } .about, .prerequisites, .course-staff, .faq { font: 16px/20px $font-family-title; - color: #6B7280; + color: #515661; border-radius: 8px; border: 1px solid $primary-light; border-left: 14px solid $primary-light; @@ -335,7 +338,7 @@ float: none; font-size: 12px; line-height: 24px; - color: #6B7280; + color: #515661; display: block; font-weight: normal; font-family: $font-family-title; diff --git a/tutorindigo/templates/indigo/lms/static/sass/courseware/_bookmarks.scss b/tutorindigo/templates/indigo/lms/static/sass/courseware/_bookmarks.scss index b242a999e..89801370f 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/courseware/_bookmarks.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/courseware/_bookmarks.scss @@ -35,7 +35,7 @@ .breadcrumbs { font-weight: 500; font-size: 14px; - color: #6B7280; + color: #515661; } } .courseware-results.search-result { @@ -46,7 +46,7 @@ border: none; border-radius: 8px; padding: 20px; - color: #6B7280; + color: #515661; font-size: 14px; max-width: 540px; margin: 0 auto; @@ -152,7 +152,7 @@ font-size: 30px; padding: 0; background: none !important; - color: #6B7280 !important; + color: #515661 !important; line-height: 30px; } .current-page, .page-number-input, .total-pages { @@ -163,6 +163,6 @@ } .page-divider { font-weight: bold; - color: #6B7280; + color: #515661; } } diff --git a/tutorindigo/templates/indigo/lms/static/sass/courseware/_discover.scss b/tutorindigo/templates/indigo/lms/static/sass/courseware/_discover.scss index cf991fb2c..bf801239a 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/courseware/_discover.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/courseware/_discover.scss @@ -107,7 +107,7 @@ border-top: 1px solid #ECF0F4; padding: 10px 20px; margin: 0 -20px; - color: #6B7280; + color: #515661; font-size: 14px; line-height: 20px; svg { @@ -229,7 +229,7 @@ min-height: auto; width: 100%; float: none; - color: #6B7280; + color: #515661; } } } diff --git a/tutorindigo/templates/indigo/lms/static/sass/dashbord/_dashbord.scss b/tutorindigo/templates/indigo/lms/static/sass/dashbord/_dashbord.scss index 237f05191..60f4c21a4 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/dashbord/_dashbord.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/dashbord/_dashbord.scss @@ -58,7 +58,7 @@ .course-heading-area { margin: 0 0 20px; font-size: 14px; - color: #6B7280; + color: #515661; @include media-breakpoint-up(md) { margin: 0 0 30px; font-size: 16px; @@ -326,7 +326,7 @@ border-top: 1px solid #ECF0F4; padding: 10px 20px; margin: 0 -20px; - color: #6B7280; + color: #515661; font-size: 14px; line-height: 20px; svg { @@ -365,7 +365,7 @@ .inner-wrapper { text-align: center; font-size: 14px; - color: #6B7280; + color: #515661; img { margin: 0 0 20px; } diff --git a/tutorindigo/templates/indigo/lms/static/sass/extra/_footer.scss b/tutorindigo/templates/indigo/lms/static/sass/extra/_footer.scss index 6ae66b2ce..2a41e86f7 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/extra/_footer.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/extra/_footer.scss @@ -45,7 +45,7 @@ footer.tutor-container { position: relative; font-size: 12px; line-height: 18px; - color: #6B7280; + color: #515661; &:first-child { padding-left: 0; } @@ -59,7 +59,7 @@ footer.tutor-container { width: 1px; height: 29px; margin: -14px 0 0; - background: #6B7280;; + background: #515661;; } } } diff --git a/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss b/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss index 4b21aff45..9d25586b8 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss @@ -77,6 +77,9 @@ header.global-header { display: inline-block; vertical-align: top; } + .username { + font: -webkit-control; + } } .dropdown-user-menu { position: absolute; diff --git a/tutorindigo/templates/indigo/lms/static/sass/home/_home.scss b/tutorindigo/templates/indigo/lms/static/sass/home/_home.scss index f7bf44ad7..b25a422d8 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/home/_home.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/home/_home.scss @@ -61,7 +61,7 @@ section.home { p { font-size: 16px; line-height: 20px; - color: #6B7280; + color: #515661; font-style: normal; margin: 0; } @@ -130,4 +130,4 @@ section.home { } } } -} \ No newline at end of file +} diff --git a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss index 80f0ba6f2..3b2173c69 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss @@ -253,7 +253,7 @@ nav.wrapper-preview-menu { padding: 30px 0; font-size: 16px; line-height: 24px; - color: #6B7280; + color: #515661; h1 { font-size: 24px; font-weight: 700; @@ -289,6 +289,8 @@ nav.wrapper-preview-menu { @import '../../../courseware/about'; @import '../../../courseware/bookmarks'; @import '../../../home/home'; +@import '../../../programs/programs'; +@import '../../../certificates/certificate'; diff --git a/tutorindigo/templates/indigo/lms/static/sass/programs/_programs.scss b/tutorindigo/templates/indigo/lms/static/sass/programs/_programs.scss new file mode 100644 index 000000000..5a0134801 --- /dev/null +++ b/tutorindigo/templates/indigo/lms/static/sass/programs/_programs.scss @@ -0,0 +1,419 @@ +// Include custom programs page + +.program-list-wrapper { + color: #111827; + padding: 20px 15px; + @include media-breakpoint-up(md) { + padding: 40px 15px; + } + &:after { + clear: both; + content: ""; + display: block; + } + .program-list-container { + float: none; + width: 100%; + max-width: 100%; + @include media-breakpoint-up(lg) { + float: left; + width: calc(100% - 28% - 40px); + margin: 0 40px 0 0; + } + .js-program-list-header { + h2 { + font-size: 24px; + font-weight: 700; + margin: 0 0 30px; + color: #111827; + text-transform: capitalize; + } + } + .program-cards-container { + margin: 0 -5px; + letter-spacing: -.32em; + .program-card { + border: none; + border-radius: 8px; + margin: 0 5px 10px; + overflow: hidden; + width: calc(50% - 10px); + letter-spacing: normal; + box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.05); + display: inline-block; + .text-section { + position: static; + padding: 15px; + h3 { + font-size: 14px; + line-height: 20px; + font-weight: 500; + color: #292C2E; + margin: 0 0 5px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-height: 10px; + } + .meta-info { + z-index: 3; + background: #ffff; + display: block; + padding: 2px 12px; + border-radius: 6px; + font-size: 14px; + line-height: 20px; + font-weight: 500; + color: #292C2E; + width: auto; + top: 15px; + left: 15px; + .col { + display: inline-block; + vertical-align: top; + width: auto; + padding: 0 !important; + max-width: 100%; + } + } + } + .status-text { + display: block; + padding: 0 15px 10px; + .number-status, .number-circle { + display: inline-block; + vertical-align: top; + width: auto; + background: $primary-light; + margin: 0 10px 10px 0; + border-radius: 5px; + color: #15376D; + padding: 17px 0; + font: 10px/18px $font-family-title; + text-align: center; + display: block; + min-width: 80px; + } + .number-circle { + height: auto; + width: 100%; + margin: 0 0 5px; + font-weight: 600; + background: none !important; + padding: 0; + font-size: 14px; + } + } + .card-link { + opacity: 1; + .banner-image-container { + background: $primary; + picture { + display: block; + } + .banner-image { + position: static; + transform: none; + width: 100%; + object-fit: cover; + } + } + } + } + .progress-container { + display: none; + } + } + } + .sidebar { + max-width: 100%; + float: none; + width: 100%; + padding: 20px 0 0; + @include media-breakpoint-up(lg) { + width: 28%; + float: left; + padding-top: 58px; + } + .program-advertise { + border-radius: 5px; + background: $primary-light; + padding: 15px; + border: none; + display: block; + text-align: center; + p { + margin: 0 0 10px; + text-align: left; + font-size: 14px; + font-weight: 500; + } + a.btn { + background: $primary; + border-radius: 6px; + font-size: 14px; + line-height: 18px; + font-weight: 500; + padding: 9px 11px; + } + } + } + .program-cards-container { + margin: 0; + padding: 0; + } + .empty-programs-message { + box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.05); + border: none; + border-radius: 8px; + padding: 20px; + text-align: center; + background: white; + letter-spacing: normal; + h2 { + color: #111827; + font-size: 16px; + font-weight: 700; + line-height: 24px; + margin: 0 0 12px; + @include media-breakpoint-up(md) { + font-size: 18px; + line-height: 30px; + margin: 0 0 20px; + } + } + a.btn { + background: $primary; + border-radius: 6px; + font-size: 14px; + line-height: 18px; + font-weight: 500; + padding: 9px 11px; + } + } +} +.program-details-wrapper { + max-width: 1090px; + margin: 0 auto; + padding: 30px 15px 10px; + @include media-breakpoint-up(md) { + padding: 40px 15px; + } + .program-details-header { + padding: 0 0 20px; + background: none; + .authoring-organizations { + display: none; + } + .meta-info.grid-container { + width: 100%; + overflow: hidden; + .xseries { + float: right; + width: 100%; + @include media-breakpoint-up(md) { + width: 32%; + } + @include media-breakpoint-up(lg) { + width: 24%; + } + svg { + width: 150px; + } + } + h2.program-title { + float: left; + width: 100%; + font-size: 24px; + font-weight: 700; + margin: 0; + text-transform: capitalize; + @include media-breakpoint-up(md) { + width: calc(100% - 32% - 40px); + } + } + } + } + .col-12.flex-column { + padding: 0 !important; + display: block !important; + overflow: hidden; + .program-details-content { + padding: 0; + width: 100%; + float: left; + max-width: 100%; + @include media-breakpoint-up(md) { + max-width: calc(100% - 32% - 40px); + } + .program-heading { + background: $primary-light; + border-radius: 16px; + padding: 15px 20px; + margin: 0 0 30px; + h3 { + color: #292C2E !important; + font: 600 16px/20px $font-family-title; + margin: 0 0 10px; + } + .program-heading-message { + font-size: 12px; + line-height: 16px; + color: #70787E; + } + } + .course-list-headings { + .remaining-group, .in-progress-group, .completed-group { + margin: 0 0 15px; + h4, h5 { + text-align: left; + font-size: 16px; + color: #111827; + font-weight: 600; + font: 600 16px/22px $font-family-title; + margin: 0 0 10px; + padding: 0; + border: none; + a { + color: #111827; + } + } + .course-list { + margin: 0; + } + .program-course-card, .motivating-section { + border: 1px solid #F2F7F8; + border-left: 8px solid #F2F7F8; + border-radius: 8px; + padding: 15px; + margin: 0 0 15px; + font-size: 12px; + line-height: 16px; + color: #70787E; + background: none !important; + .section:empty { + display: none; + } + a.btn-brand, button.btn-brand { + background: $primary; + border-color: $primary; + height: auto; + display: inline-block; + padding: 5px 10px; + border-radius: 6px; + font-size: 14px; + font-weight: 500; + line-height: 20px; + margin: 10px 0 0; + } + .motivating-message { + margin: 0; + } + .certificate-status { + margin: 0; + padding: 0; + } + .course-text { + .run-period { + font-size: 12px; + line-height: 16px; + color: #0F8B8D; + } + } + } + } + } + } + .program-sidebar { + float: right; + margin: 0 !important; + max-width: 100%; + width: 100%; + padding: 0; + @include media-breakpoint-up(md) { + max-width: 32%; + margin: 0 0 0 40px !important; + } + @include media-breakpoint-up(lg) { + max-width: 24%; + } + } + } + .program-sidebar { + .aside { + background: $primary-light; + border-radius: 6px; + padding: 15px; + margin: 0 0 20px; + text-align: left; + width: 100%; + font-size: 12px; + color: #515661; + p.motivating-message { + margin: 0; + } + &:empty { + display: none; + } + h2 { + text-align: left; + font-size: 16px; + color: #111827; + font-weight: 600; + font: 600 16px/22px $font-family-title; + margin: 0 0 10px; + padding: 0; + border: none; + } + .progress-circle-wrapper { + width: 200px; + height: 200px; + margin: -20px auto -11px; + svg { + width: 200px; + height: 200px; + } + .progress-circle { + .complete { + stroke: $primary; + } + } + } + .progress-label { + top: 82px; + font-size: 12px; + font-weight: 600; + color: #111827; + } + .numbers { + font-size: 12px; + color: #111827; + .complete { + color: #111827; + } + } + .certificate-list { + list-style: none; + margin: 0 0 -15px; + padding: 0; + li { + padding: 0 0 15px; + display: block; + text-align: center; + .image-link { + display: block; + width: 120px; + margin: 0 auto 10px; + } + .certificate-link { + font-size: 12px; + line-height: 18px; + font-weight: 600; + color: #111827; + margin: 0; + } + } + } + } + } +} diff --git a/tutorindigo/templates/indigo/lms/templates/certificates/accomplishment-base.html b/tutorindigo/templates/indigo/lms/templates/certificates/accomplishment-base.html new file mode 100644 index 000000000..2a04e6913 --- /dev/null +++ b/tutorindigo/templates/indigo/lms/templates/certificates/accomplishment-base.html @@ -0,0 +1,66 @@ +<%page expression_filter="h"/> +<%namespace name='static' file='/static_content.html'/> +<%! from django.utils.translation import gettext as _%> + +<% +# set doc language direction +from django.utils.translation import get_language_bidi +dir_rtl = 'rtl' if get_language_bidi() else 'ltr' +course_mode_class = course_mode if course_mode else '' +%> + + + + + + + + % if facebook_share_enabled: + ## OG (Open Graph) url, title, type, image and description added below to give social media info to display + ## (https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#tags) + + + + + + %endif + ${document_title} + + <%static:css group='style-certificates'/> + + <%static:css group='style-main-v1'/> + + <% ga_4_id = static.get_value("GOOGLE_ANALYTICS_4_ID", settings.GOOGLE_ANALYTICS_4_ID) %> + % if ga_4_id: + + + % endif + + + + +
+ + <%include file="_accomplishment-header.html" /> + +
+ + ${self.body()} + +
+ + <%include file="../footer.html" /> +
+ + <%include file="_assets-secondary.html" /> + %if badge: + <%include file="_badges-modal.html" /> + %endif + + \ No newline at end of file diff --git a/tutorindigo/templates/indigo/lms/templates/course.html b/tutorindigo/templates/indigo/lms/templates/course.html index 4bc826b74..dcfc96275 100644 --- a/tutorindigo/templates/indigo/lms/templates/course.html +++ b/tutorindigo/templates/indigo/lms/templates/course.html @@ -8,6 +8,7 @@
+ ${course.display_name_with_default} ${course.display_number_with_default}
diff --git a/tutorindigo/templates/indigo/lms/templates/courseware/course_about.html b/tutorindigo/templates/indigo/lms/templates/courseware/course_about.html index f231ec2a0..48f1a59d6 100644 --- a/tutorindigo/templates/indigo/lms/templates/courseware/course_about.html +++ b/tutorindigo/templates/indigo/lms/templates/courseware/course_about.html @@ -71,7 +71,8 @@ %else:
- + +
% endif @@ -105,7 +106,7 @@

## because AnonymousUsers cause can_enroll for shib courses to be False, but we need them to be able to click ## so that they can register and become a real user that can enroll. % elif not is_shib_course and not can_enroll: - ${_("Enrollment is Closed")} + ${_("Enrollment is Closed")} %elif allow_anonymous: %if show_courseware_link: diff --git a/tutorindigo/templates/indigo/lms/templates/discovery/course_card.underscore b/tutorindigo/templates/indigo/lms/templates/discovery/course_card.underscore index c98e1414f..d3be84f72 100644 --- a/tutorindigo/templates/indigo/lms/templates/discovery/course_card.underscore +++ b/tutorindigo/templates/indigo/lms/templates/discovery/course_card.underscore @@ -1,6 +1,7 @@
+ <%- content.display_name %> <%- content.number %>
diff --git a/tutorindigo/templates/indigo/lms/templates/learner_dashboard/program_card.underscore b/tutorindigo/templates/indigo/lms/templates/learner_dashboard/program_card.underscore new file mode 100644 index 000000000..1a7c142a6 --- /dev/null +++ b/tutorindigo/templates/indigo/lms/templates/learner_dashboard/program_card.underscore @@ -0,0 +1,70 @@ +
+

<%- gettext(title) %>

+
+
<%- orgList %>
+
+ <%- gettext(type) %> + +
+
+
+<% if (progress) { %> +
+
+
<%- progress.completed %>
+ + <%- ngettext('Course', 'Courses', progress.completed) %> + + <%- gettext('Completed') %> +
+ +
+
<%- progress.in_progress %>
+ + <%- ngettext('Course', 'Courses', progress.in_progress) %> + + <%- gettext('In Progress') %> +
+ +
+
<%- progress.not_started %>
+ + <%- ngettext('Course', 'Courses', progress.not_started) %> + + <%- gettext('Remaining') %> +
+
+<% } %> +<% if (progress) { %> +
+
+ <% _.times(progress.completed, function() { %> +
+ <% }) %> + <% _.times(progress.in_progress, function() { %> +
+ <% }) %> + <% _.times(progress.not_started, function() { %> +
+ <% }) %> +
+
+<% } %> + + + +<% if (isSubscribed) { %> +
+ <%- gettext('Subscribed') %> +
+<% } %> diff --git a/tutorindigo/templates/indigo/lms/templates/learner_dashboard/programs_fragment.html b/tutorindigo/templates/indigo/lms/templates/learner_dashboard/programs_fragment.html new file mode 100644 index 000000000..dd3e94bcb --- /dev/null +++ b/tutorindigo/templates/indigo/lms/templates/learner_dashboard/programs_fragment.html @@ -0,0 +1,42 @@ +## mako + +<%page expression_filter="h"/> + +<%namespace name='static' file='../static_content.html'/> +<%! +from openedx.core.djangolib.js_utils import ( + dump_js_escaped_json, js_escaped_string +) +%> + +% if mobile_only: +
+
+
+
+
+
+% else: +
+
+
+
+
+
+
+% endif + +<%block name="js_extra"> +<%static:webpack entry="ProgramListFactory"> +ProgramListFactory({ + marketingUrl: '${marketing_url | n, js_escaped_string}', + programsData: ${programs | n, dump_js_escaped_json}, + programsSubscriptionData: ${programs_subscription_data | n, dump_js_escaped_json}, + subscriptionUpsellData: ${subscription_upsell_data | n, dump_js_escaped_json}, + userProgress: ${progress | n, dump_js_escaped_json}, + userPreferences: ${user_preferences | n, dump_js_escaped_json}, + isUserB2CSubscriptionsEnabled: ${is_user_b2c_subscriptions_enabled | n, dump_js_escaped_json}, + mobileOnly: ${mobile_only | n, dump_js_escaped_json} +}); + + diff --git a/tutorindigo/templates/indigo/lms/templates/static_templates/contact.html b/tutorindigo/templates/indigo/lms/templates/static_templates/contact.html index 680008d46..8c99d6a6c 100644 --- a/tutorindigo/templates/indigo/lms/templates/static_templates/contact.html +++ b/tutorindigo/templates/indigo/lms/templates/static_templates/contact.html @@ -8,7 +8,7 @@

- <%block name="pageheader">${page_header or _("Contact Us")} + <%block name="pageheader">${page_header or _("Contact")}

<%block name="pagecontent">${page_content or _("This page left intentionally blank. Feel free to add your own content.")}