Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Single Lesson: Polish the design #2862

Merged
merged 33 commits into from
Sep 6, 2024
Merged

Single Lesson: Polish the design #2862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
8d49683
Align nav with design.
renintw Aug 26, 2024
bfa2008
Update styles of the main content.
renintw Aug 26, 2024
c2fe0e0
Tidy up.
renintw Aug 26, 2024
4c643ed
Make progress bar rounded.
renintw Aug 26, 2024
c4a17a0
Update styles for single lesson.
renintw Aug 26, 2024
a648755
Align the completion icons with the first line
renintw Sep 1, 2024
84e3c5a
Align the dropdown arrows with the first line
renintw Sep 1, 2024
559c6ca
Align the start of lessons with modules.
renintw Sep 1, 2024
f2300a2
Align padding with design for header
renintw Sep 1, 2024
4a99270
Remove redundant margin-top for main and sidebar
renintw Sep 1, 2024
3153385
Add separator for sensei-course-theme__header__info
renintw Sep 1, 2024
79b59d0
Align progress bar style with design
renintw Sep 1, 2024
93012ff
Fix tablet/mobile toggled menu progress bar
renintw Sep 1, 2024
ac5e79b
Update Next Lesson styles
renintw Sep 1, 2024
cb14857
Update the copy for take quiz
renintw Sep 1, 2024
f243c93
Align lesson actions style with design
renintw Sep 1, 2024
ccd08a2
Dont show lesson actions when logged out as it's empty
renintw Sep 1, 2024
58fc5d8
Reposition sign-in block
renintw Sep 1, 2024
5657c0f
Always display next/prev lesson
renintw Sep 2, 2024
62fe4bd
Update Complete lesson & View quiz styles
renintw Sep 2, 2024
f6c663d
Reposition suggestions block
renintw Sep 2, 2024
6e6ac77
Fix all layout issues for single lesson while login & non-login
renintw Sep 2, 2024
91e685e
Fix layout issues for standalone lesson
renintw Sep 2, 2024
da730f3
Fix course-theme-notice on a wider screen
renintw Sep 2, 2024
f60b1ca
Add completed notice
renintw Sep 2, 2024
7d00822
Remove redundant flex and width:100%
renintw Sep 2, 2024
6709efd
Fix layout for actions on smaller screens
renintw Sep 2, 2024
51a500a
Set sidebar left padding as 60px
renintw Sep 2, 2024
44fbab0
Fix post content layout, making it align to left
renintw Sep 2, 2024
5d1faf8
Update h1 font styles
renintw Sep 5, 2024
06eeda5
Fix progress bar styles on tablet/mobile
renintw Sep 5, 2024
3bdadac
Fix action focus/active style issue
renintw Sep 5, 2024
0dc0f03
Use built-in tools rather than CSS for h1 styles fix
renintw Sep 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/assets/icon-check.svg
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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