Skip to content

Commit

Permalink
Course completed page (#2600)
Browse files Browse the repository at this point in the history 
* Add course complete template and pattern

* Add sensei-lms/course-results

* Update border-radius to --wp--custom--box--border--radius
  • Loading branch information
@renintw
renintw authored Jul 4, 2024
1 parent dedc04f commit 2b1f642
Show file tree
Hide file tree
Showing 5 changed files with 149 additions and 11 deletions.
52 changes: 52 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/patterns/page-course-complete-content.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<?php
/**
* Title: Course Complete Page Content
* Slug: wporg-learn-2024/page-course-complete-content
* Inserter: no
*/

?>

<!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">
<?php esc_html_e( 'Course Completed', 'wporg-learn' ); ?>
</h1>
<!-- /wp:heading -->

<!-- wp:heading {"style":{"spacing":{"margin":{"top":"40px","bottom":"10px"}}},"fontSize":"large","fontFamily":"inter"} -->
<h2 class="wp-block-heading has-inter-font-family has-large-font-size" style="margin-top:40px;margin-bottom:10px">
<?php esc_html_e( 'Congratulations on completing this course!', 'wporg-learn' ); ?>
</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0"}}},"fontSize":"normal","fontFamily":"inter"} -->
<p class="has-inter-font-family has-normal-font-size" style="margin-top:0">
<?php esc_html_e( 'Please share your feedback on this course by completing a brief survey.', 'wporg-learn' ); ?>
</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"style":{"spacing":{"padding":{"left":"32px","right":"32px","top":"17px","bottom":"17px"}}}} -->
<div class="wp-block-button">
<a class="wp-block-button__link wp-element-button" href="https://docs.google.com/forms/d/e/1FAIpQLSf0QMflUedxjta0u5qS4_pl-9aY06BDBXgRn2PoZA1gRvD9jw/viewform" style="padding-top:17px;padding-right:32px;padding-bottom:17px;padding-left:32px">
<?php esc_html_e( 'Complete the survey', 'wporg-learn' ); ?>
</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

<!-- wp:sensei-lms/course-results {"mainColor":"light-grey-2","textColor":"charcoal-1","borderColor":"light-grey-1","borderColorValue":"#d9d9d9","defaultTextColor":"black-opacity-15"} /-->

<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"style":{"spacing":{"padding":{"left":"32px","right":"32px","top":"17px","bottom":"17px"}}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline">
<a class="wp-block-button__link wp-element-button" href="<?php echo esc_url( site_url( '/courses/' ) ); ?>" style="padding-top:17px;padding-right:32px;padding-bottom:17px;padding-left:32px">
<?php esc_html_e( 'Find more courses', 'wporg-learn' ); ?>
</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
18 changes: 10 additions & 8 deletions wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.' );
Expand All @@ -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' );

Expand Down
68 changes: 65 additions & 3 deletions wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
}

Expand All @@ -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) {
Expand Down
17 changes: 17 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/templates/page-course-complete.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!-- wp:template-part {"slug":"header","className":"has-display-contents","tagName":"div"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"},"className":"entry-content","style":{"spacing":{"blockGap":"0px"}}} -->
<main class="wp-block-group entry-content">

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"var:preset|spacing|30","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained","contentSize":"680px"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--edge-space)">

<!-- wp:pattern {"slug":"wporg-learn-2024/page-course-complete-content"} /-->

</div>
<!-- /wp:group -->

</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer"} /-->
5 changes: 5 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@
]
},
"custom": {
"box": {
"border": {
"radius": "2px"
}
},
"color": {
"border": "var(--wp--preset--color--light-grey-1)",
"green-50": "#008A20",
Expand Down

0 comments on commit 2b1f642

Please sign in to comment.