Skip to content

Commit

Permalink
Theme: Polish the design of the single Lesson (#2862)
Browse files Browse the repository at this point in the history 
* Align sidebar nav with design.

* Add separator for sensei-course-theme__header__info

* Align progress bar style with design

* Fix tablet/mobile toggled menu progress bar

* Update the copy for take quiz

* Align lesson actions style with design

* Reposition sign-in block

* Always display next/prev lesson

* Reposition suggestions block

* Fix layout for standalone lesson

* Add completed notice
  • Loading branch information
@renintw
renintw authored Sep 6, 2024
1 parent 80b006c commit b917e59
Show file tree
Hide file tree
Showing 6 changed files with 249 additions and 99 deletions.
3 changes: 3 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/assets/icon-check.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 23 additions & 24 deletions wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-actions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,43 +17,42 @@
<!-- wp:sensei-lms/lesson-actions {"toggledBlocks":{"sensei-lms/button-reset-lesson":false}} -->
<div class="wp-block-sensei-lms-lesson-actions">
<div class="sensei-buttons-container">

<!-- wp:sensei-lms/button-view-quiz {"inContainer":true} -->
<div class="wp-block-sensei-lms-button-view-quiz is-style-default sensei-buttons-container__button-block wp-block-sensei-lms-button-view-quiz__wrapper">
<div class="wp-block-sensei-lms-button-view-quiz is-style-default wp-block-sensei-button wp-block-button has-text-align-left">
<button class="wp-block-button__link"><?php esc_html_e( 'Take quiz', 'sensei-lms' ); ?></button>
</div>
</div>
<!-- /wp:sensei-lms/button-view-quiz -->

<!-- wp:sensei-lms/button-complete-lesson {"inContainer":true,"className":"is-style-outline"} -->
<div class="wp-block-sensei-lms-button-complete-lesson is-style-outline sensei-buttons-container__button-block wp-block-sensei-lms-button-complete-lesson__wrapper">
<div class="wp-block-sensei-lms-button-complete-lesson is-style-outline wp-block-sensei-button wp-block-button has-text-align-left">
<button class="wp-block-button__link sensei-stop-double-submission"><?php esc_html_e( 'Complete lesson', 'sensei-lms' ); ?></button>
</div>
</div>
<!-- /wp:sensei-lms/button-complete-lesson -->

<?php if ( $is_completed && ( $prev_url || $next_url ) ) : ?>
<?php if ( $prev_url || $next_url ) : ?>
<!-- wp:buttons {"className":"sensei-lesson-actions-nav"} -->
<div class="wp-block-buttons sensei-lesson-actions-nav">
<?php if ( $prev_url ) : ?>
<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline has-text-align-left">
<a class="wp-block-button__link wp-element-button" href="<?php echo esc_attr( $prev_url ); ?>"><?php esc_html_e( 'Previous Lesson', 'wporg-learn' ); ?></a>
<!-- wp:button {"className":"has-text-align-center is-style-outline","fontSize":"normal","fontFamily":"inter"} -->
<div class="wp-block-button has-custom-font-size has-text-align-center is-style-outline has-inter-font-family has-normal-font-size">
<a class="wp-block-button__link wp-element-button" style="font-weight:600;line-height:1" href="<?php echo esc_attr( $prev_url ); ?>"><?php esc_html_e( 'Previous Lesson', 'wporg-learn' ); ?></a>
</div>
<!-- /wp:button -->
<?php endif; ?>
<?php if ( $next_url ) : ?>
<!-- wp:button {"className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill has-text-align-left">
<a class="wp-block-button__link wp-element-button" href="<?php echo esc_attr( $next_url ); ?>"><?php esc_html_e( 'Next Lesson', 'wporg-learn' ); ?></a>
<!-- wp:button {"className":"has-text-align-center is-style-outline","fontSize":"normal","fontFamily":"inter"} -->
<div class="wp-block-button has-custom-font-size has-text-align-center is-style-outline has-inter-font-family has-normal-font-size">
<a class="wp-block-button__link wp-element-button" style="font-weight:600;line-height:1" href="<?php echo esc_attr( $next_url ); ?>"><?php esc_html_e( 'Next Lesson', 'wporg-learn' ); ?></a>
</div>
<!-- /wp:button -->
<?php endif; ?>
</div>
<!-- /wp:buttons -->
<?php endif; ?>

<!-- wp:sensei-lms/button-view-quiz {"inContainer":true} -->
<div class="wp-block-sensei-lms-button-view-quiz sensei-buttons-container__button-block wp-block-sensei-lms-button-view-quiz__wrapper">
<div class="wp-block-sensei-lms-button-view-quiz wp-block-sensei-button wp-block-button has-text-align-center has-inter-font-family has-normal-font-size">
<button class="wp-block-button__link"><?php esc_html_e( 'Take quiz to complete lesson', 'wporg-learn' ); ?></button>
</div>
</div>
<!-- /wp:sensei-lms/button-view-quiz -->

<!-- wp:sensei-lms/button-complete-lesson {"inContainer":true} -->
<div class="wp-block-sensei-lms-button-complete-lesson sensei-buttons-container__button-block wp-block-sensei-lms-button-complete-lesson__wrapper">
<div class="wp-block-sensei-lms-button-complete-lesson wp-block-sensei-button wp-block-button has-text-align-center has-inter-font-family has-normal-font-size">
<button class="wp-block-button__link sensei-stop-double-submission"><?php esc_html_e( 'Complete lesson', 'sensei-lms' ); ?></button>
</div>
</div>
<!-- /wp:sensei-lms/button-complete-lesson -->
</div>
</div>
<!-- /wp:sensei-lms/lesson-actions -->
64 changes: 46 additions & 18 deletions wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-columns.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,20 @@
* Inserter: no
*/

$lesson_id = Sensei_Utils::get_current_lesson();
$module = Sensei()->modules->get_lesson_module( $lesson_id );
$is_completed = Sensei_Utils::user_completed_lesson( $lesson_id );

?>

<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__columns","className":"sensei-version\u002d\u002d4-16-2"} -->
<div class="wp-block-sensei-lms-ui sensei-course-theme__columns sensei-version--4-16-2">

<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__sidebar","className":"","style"={"spacing":{"margin":{"top":"var:preset|spacing|50"},"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|30","bottom":"var:preset|spacing|50","left":"var:preset|spacing|edge-space"}}}} -->
<div class="wp-block-sensei-lms-ui sensei-course-theme__frame sensei-course-theme__sidebar" style="margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--edge-space)">
<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__sidebar","style"={"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|30","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50"}}}} -->
<div class="wp-block-sensei-lms-ui sensei-course-theme__frame sensei-course-theme__sidebar" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">

<!-- wp:sensei-lms/course-navigation /-->

<!-- wp:group {"style":{"border":{"top":{"color":"var:preset|color|light-grey-1","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:var(--wp--preset--color--light-grey-1);border-top-width:1px;padding-top:var(--wp--preset--spacing--20)">

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

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

</div>
<!-- /wp:sensei-lms/ui -->

Expand All @@ -31,25 +27,57 @@

<!-- wp:sensei-lms/course-theme-lesson-module /-->

<!-- wp:post-title {"level":1,"fontSize":"heading-1"} /-->
<?php if ( $is_completed ) : ?>
<!-- wp:wporg/notice {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}}} -->
<div class="wp-block-wporg-notice is-tip-notice" style="margin-top:var(--wp--preset--spacing--20)">
<div class="wp-block-wporg-notice__icon"></div>
<div class="wp-block-wporg-notice__content">
<p><?php esc_html_e( 'You already completed this lesson', 'wporg-learn' ); ?></p>
</div>
</div>
<!-- /wp:wporg/notice -->
<?php endif; ?>

<?php if ( $module ) : ?>
<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}},"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"heading-3","fontFamily":"inter"} /-->
<?php else : ?>
<!-- wp:post-title {"level":1,"fontSize":"heading-3","fontFamily":"inter","style":{"spacing":{"margin":{"top":"0"}},"typography":{"lineHeight":"1","fontStyle":"normal","fontWeight":"600"}}} /-->
<?php endif; ?>

<!-- wp:post-content {"layout":{"type":"constrained","justifyContent":"left"}} /-->

<!-- wp:sensei-lms/course-theme-notices /-->

<!-- wp:post-content {"layout":{"inherit":true}} /-->
<?php if ( is_user_logged_in() ) : ?>
<!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"var(--wp--preset--spacing--50)"}}},"layout":{"type":"constrained"},"className":"sensei-lesson-footer"} -->
<div class="wp-block-group sensei-lesson-footer" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--50)">
<!-- wp:sensei-lms/page-actions {"style":{"spacing":{"blockGap":"43px"}}} /-->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"0"}}}} -->
<div class="wp-block-group" style="margin-top:0">

<!-- wp:pattern {"slug":"wporg-learn-2024/sensei-lesson-actions"} /-->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
<?php endif; ?>

<!-- wp:group {"style":{"spacing":{"margin":{"top":"40px"}}},"layout":{"type":"constrained"},"className":"sensei-lesson-footer"} -->
<div class="wp-block-group sensei-lesson-footer" style="margin-top:40px">
<!-- wp:sensei-lms/page-actions {"style":{"spacing":{"blockGap":"43px"}}} /-->
<!-- wp:group {"align":"full","style":{"border":{"top":{"color":"var:preset|color|light-grey-1","width":"1px"},"right":{},"bottom":{},"left":{}},"spacing":{"margin":{"top":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="margin-top:0;border-top-color:var(--wp--preset--color--light-grey-1);border-top-width:1px">

<!-- wp:group {"style":{"spacing":{"margin":{"top":"20px"}}}} -->
<div class="wp-block-group" style="margin-top:20px">
<!-- wp:group {"layout":{"type":"constrained"},"spacing":{"margin":{"top":"var(--wp--preset--spacing--30)"}}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--30)">

<!-- wp:pattern {"slug":"wporg-learn-2024/sensei-lesson-actions"} /-->
<!-- wp:pattern {"slug":"wporg-learn-2024/content-feedback"} /-->

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

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

</div>
<!-- /wp:sensei-lms/ui -->
</div>
Expand Down
4 changes: 2 additions & 2 deletions wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__header","className":"sensei-version\u002d\u002d4-16-2"} -->
<div class="wp-block-sensei-lms-ui sensei-course-theme__frame sensei-version--4-16-2 sensei-course-theme__header">

<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"0px","bottom":"0px"}}},"backgroundColor":"white","className":"sensei-course-theme-header-content","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group sensei-course-theme-header-content has-white-background-color has-background" style="padding-top:0px;padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:0px;padding-left:var(--wp--preset--spacing--edge-space)">
<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|30","right":"var:preset|spacing|30","top":"0px","bottom":"0px"}}},"backgroundColor":"white","className":"sensei-course-theme-header-content","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group sensei-course-theme-header-content has-white-background-color has-background" style="padding-top:0px;padding-right:var(--wp--preset--spacing--30);padding-bottom:0px;padding-left:var(--wp--preset--spacing--30)">

<!-- wp:wporg/site-breadcrumbs {"fontSize":"small","style":{"spacing":{"padding":{"top":"18px","bottom":"18px"}}}} /-->

Expand Down
32 changes: 17 additions & 15 deletions wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-standalone.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__header","className":"sensei-version\u002d\u002d4-16-2 sensei-course-theme__header--standalone"} -->
<div class="wp-block-sensei-lms-ui sensei-course-theme__frame sensei-version--4-16-2 sensei-course-theme__header sensei-course-theme__header--standalone">

<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"0px","bottom":"0px"}}},"backgroundColor":"white","className":"sensei-course-theme-header-content","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group sensei-course-theme-header-content has-white-background-color has-background" style="padding-top:0px;padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:0px;padding-left:var(--wp--preset--spacing--edge-space)">
<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|30","right":"var:preset|spacing|30","top":"0px","bottom":"0px"}}},"backgroundColor":"white","className":"sensei-course-theme-header-content","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group sensei-course-theme-header-content has-white-background-color has-background" style="padding-top:0px;padding-right:var(--wp--preset--spacing--30);padding-bottom:0px;padding-left:var(--wp--preset--spacing--30)">

<!-- wp:wporg/site-breadcrumbs {"fontSize":"small","style":{"spacing":{"padding":{"top":"18px","bottom":"18px"}}}} /-->

Expand All @@ -34,33 +34,35 @@
<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__columns","className":"sensei-version\u002d\u002d4-16-2 sensei-course-theme__columns--standalone"} -->
<div class="wp-block-sensei-lms-ui sensei-course-theme__columns sensei-course-theme__columns--standalone sensei-version--4-16-2">

<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__main-content","lock":{"move":false,"remove":false},"style"={"spacing":{"margin":{"top":"var:preset|spacing|30"},"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|60","right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}}}} -->
<div class="wp-block-sensei-lms-ui sensei-course-theme__main-content" style="margin-top:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">
<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__main-content","lock":{"move":false,"remove":false},"style"={"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}}}} -->
<div class="wp-block-sensei-lms-ui sensei-course-theme__main-content" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">

<!-- wp:post-title {"level":1,"fontSize":"heading-1"} /-->
<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"top":"0"}},"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"heading-3","fontFamily":"inter"} /-->

<!-- wp:post-content {"layout":{"inherit":true}} /-->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"40px"}}},"layout":{"type":"constrained"},"className":"sensei-lesson-footer"} -->
<div class="wp-block-group sensei-lesson-footer" style="margin-top:40px">
<!-- wp:sensei-lms/page-actions {"style":{"spacing":{"blockGap":"43px"}}} /-->
<?php if ( is_user_logged_in() ) : ?>
<!-- wp:group {"style":{"spacing":{"margin":{"top":"40px"}}},"layout":{"type":"constrained"},"className":"sensei-lesson-footer"} -->
<div class="wp-block-group sensei-lesson-footer" style="margin-top:40px">
<!-- wp:sensei-lms/page-actions {"style":{"spacing":{"blockGap":"43px"}}} /-->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"20px"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group" style="margin-top:20px">
<!-- wp:group {"style":{"spacing":{"margin":{"top":"20px"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group" style="margin-top:20px">

<!-- wp:pattern {"slug":"wporg-learn-2024/sensei-lesson-actions"} /-->
<!-- wp:pattern {"slug":"wporg-learn-2024/sensei-lesson-actions"} /-->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
<?php endif; ?>
</div>
<!-- /wp:sensei-lms/ui -->
</div>
<!-- /wp:sensei-lms/ui -->

<!-- wp:group {"align":"full","style":{"border":{"top":{"color":"var:preset|color|light-grey-1","width":"1px"},"right":{},"bottom":{},"left":{}},"spacing":{"margin":{"top":"var:preset|spacing|20"},"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="margin-top:var(--wp--preset--spacing--20);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--edge-space);border-top-color:var(--wp--preset--color--light-grey-1);border-top-width:1px">
<!-- wp:group {"align":"full","style":{"border":{"top":{"color":"var:preset|color|light-grey-1","width":"1px"},"right":{},"bottom":{},"left":{}},"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<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--60);padding-left:var(--wp--preset--spacing--edge-space);border-top-color:var(--wp--preset--color--light-grey-1);border-top-width:1px">

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide">
Expand Down
Loading

0 comments on commit b917e59

Please sign in to comment.