diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/page-course-complete-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/page-course-complete-content.php new file mode 100644 index 000000000..484a52794 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/patterns/page-course-complete-content.php @@ -0,0 +1,52 @@ + + + +

+ +

+ + + +

+ +

+ + + +

+ +

+ + + +
+ +
+ + + +
+ +
+ + + + + +
+ +
+ + + +
+ +
+ diff --git a/wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.php b/wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.php index 3edfa7a82..0f2aff752 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.php +++ b/wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.php @@ -4,6 +4,10 @@ * Enqueue scripts and styles. */ function enqueue_assets() { + if ( ! is_singular( 'course' ) ) { + return; + } + $script_asset_path = get_stylesheet_directory() . '/build/course-outline/index.asset.php'; if ( ! file_exists( $script_asset_path ) ) { wp_die( 'You need to run `yarn start` or `yarn build` to build the required assets.' ); @@ -18,14 +22,12 @@ function enqueue_assets() { true ); - if ( is_singular( 'course' ) ) { - $lesson_data = get_lesson_data(); - wp_localize_script( - 'wporg-learn-2024-course-outline', - 'wporgCourseOutlineData', - $lesson_data - ); - } + $lesson_data = get_lesson_data(); + wp_localize_script( + 'wporg-learn-2024-course-outline', + 'wporgCourseOutlineData', + $lesson_data + ); } add_action( 'wp_enqueue_scripts', 'enqueue_assets' ); diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss index f4e287b35..de473f58a 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss @@ -77,7 +77,7 @@ body.sensei { section.wp-block-sensei-lms-course-outline { > section.wp-block-sensei-lms-course-outline-module-bordered { border: 1px solid var(--wp--preset--color--light-grey-1) !important; - border-radius: 2px; + border-radius: var(--wp--custom--box--border--radius); header { background-color: var(--wp--preset--color--light-grey-2) !important; @@ -90,7 +90,7 @@ body.sensei { } div.wp-block-sensei-lms-course-outline-module__progress-indicator { - border-radius: 2px; + border-radius: var(--wp--custom--box--border--radius); &.completed { color: var(--wp--custom--color--green-50) !important; @@ -160,7 +160,7 @@ body.sensei { padding-bottom: 5px; border: 1px solid var(--wp--preset--color--light-grey-1) !important; margin-bottom: var(--wp--preset--spacing--20) !important; - border-radius: 2px; + border-radius: var(--wp--custom--box--border--radius); } } @@ -170,6 +170,68 @@ body.sensei { border: solid 1px var(--sensei-secondary-color); } } + + section.wp-block-sensei-lms-course-results { + display: flex; + flex-direction: column; + margin-top: 40px; + margin-bottom: 40px; + + > h2 { + text-align: left; + font-size: var(--wp--preset--font-size--heading-6); + margin-top: 0; + margin-bottom: var(--wp--preset--spacing--20); + } + + > div.wp-block-sensei-lms-course-results__separator { + display: none; + } + + > section.wp-block-sensei-lms-course-results__module { + margin-bottom: var(--wp--preset--spacing--20); + margin-top: 0; + border-radius: var(--wp--custom--box--border--radius); + + header { + padding-top: var(--wp--preset--spacing--20); + padding-bottom: var(--wp--preset--spacing--20); + + h3 { + margin: 0; + } + } + } + + // wrapper of lesson items that don't belong to a module + > ul.wp-block-sensei-lms-course-results__lessons { + margin: 0; + + > li.wp-block-sensei-lms-course-results__lesson { + border: 1px solid var(--wp--custom--color--border); + margin-bottom: var(--wp--preset--spacing--20); + border-radius: var(--wp--custom--box--border--radius); + } + } + + > .wp-block-sensei-lms-course-results__grade { + order: 3; + display: flex; + background: var(--wp--preset--color--light-grey-2); + padding: var(--wp--preset--spacing--20); + border-radius: var(--wp--custom--box--border--radius); + + > * { + font-size: var(--wp--preset--font-size--normal); + font-weight: 700; + line-height: 26px; + } + + > span.wp-block-sensei-lms-course-results__grade-score::before { + content: ": "; + } + } + } } .course:not(body) { diff --git a/wp-content/themes/pub/wporg-learn-2024/templates/page-course-complete.html b/wp-content/themes/pub/wporg-learn-2024/templates/page-course-complete.html new file mode 100644 index 000000000..7f65d75f5 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/templates/page-course-complete.html @@ -0,0 +1,17 @@ + + + +
+ + +
+ + + +
+ + +
+ + + diff --git a/wp-content/themes/pub/wporg-learn-2024/theme.json b/wp-content/themes/pub/wporg-learn-2024/theme.json index 10533afe6..fc035991e 100644 --- a/wp-content/themes/pub/wporg-learn-2024/theme.json +++ b/wp-content/themes/pub/wporg-learn-2024/theme.json @@ -27,6 +27,11 @@ ] }, "custom": { + "box": { + "border": { + "radius": "2px" + } + }, "color": { "border": "var(--wp--preset--color--light-grey-1)", "green-50": "#008A20",