Skip to content

Commit

Permalink
Fix duplicate navigation for lesson nav (#2806)
Browse files Browse the repository at this point in the history 
* Add previous lesson button.

* Do not display screen reader text.
  • Loading branch information
@renintw
renintw authored Aug 1, 2024
1 parent 64846d6 commit 6f967f4
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 35 deletions.
38 changes: 24 additions & 14 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 @@ -7,6 +7,11 @@
* Original source: https://github.com/Automattic/sensei/blob/af62fb1115daf2063bc56331a7d8b1b3ea805866/themes/sensei-course-theme/templates/default/lesson.php
*/

$prev_next_lessons = sensei_get_prev_next_lessons( get_the_ID() );
$prev_url = $prev_next_lessons['previous']['url'] ?? null;
$next_url = $prev_next_lessons['next']['url'] ?? null;
$is_completed = Sensei_Utils::user_completed_lesson( get_the_ID() );

?>

<!-- wp:sensei-lms/lesson-actions {"toggledBlocks":{"sensei-lms/button-reset-lesson":false}} -->
Expand All @@ -28,21 +33,26 @@
</div>
<!-- /wp:sensei-lms/button-view-quiz -->

<!-- wp:sensei-lms/button-lesson-completed {"inContainer":true,"className":"is-style-outline"} -->
<div class="wp-block-sensei-lms-button-lesson-completed is-style-outline sensei-buttons-container__button-block wp-block-sensei-lms-button-lesson-completed__wrapper">
<div class="wp-block-sensei-lms-button-lesson-completed is-style-outline wp-block-sensei-button wp-block-button has-text-align-left">
<div class="wp-block-button__link"><?php esc_html_e( 'Completed', 'sensei-lms' ); ?></div>
<?php if ( $is_completed && ( $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>
</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>
</div>
<!-- /wp:button -->
<?php endif; ?>
</div>
</div>
<!-- /wp:sensei-lms/button-lesson-completed -->

<!-- wp:sensei-lms/button-next-lesson {"inContainer":true} -->
<div class="wp-block-sensei-lms-button-next-lesson is-style-default sensei-buttons-container__button-block wp-block-sensei-lms-button-next-lesson__wrapper">
<div class="wp-block-sensei-lms-button-next-lesson is-style-default wp-block-sensei-button wp-block-button has-text-align-left">
<div class="wp-block-button__link"><?php esc_html_e( 'Next lesson', 'sensei-lms' ); ?></div>
</div>
</div>
<!-- /wp:sensei-lms/button-next-lesson -->
<!-- /wp:buttons -->
<?php endif; ?>
</div>
</div>
<!-- /wp:sensei-lms/lesson-actions -->
8 changes: 4 additions & 4 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 @@ -29,12 +29,12 @@

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

<!-- wp:group {"style":{"spacing":{"margin":{"top":"40px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:40px">
<!-- 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"}}},"className":"sensei-lesson-footer"} -->
<div class="wp-block-group sensei-lesson-footer" style="margin-top:20px">
<!-- wp:group {"style":{"spacing":{"margin":{"top":"20px"}}}} -->
<div class="wp-block-group" style="margin-top:20px">

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

Expand Down
8 changes: 4 additions & 4 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 @@ -41,12 +41,12 @@

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

<!-- wp:group {"style":{"spacing":{"margin":{"top":"40px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:40px">
<!-- 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"}}},"className":"sensei-lesson-footer","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group sensei-lesson-footer" 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"} /-->

Expand Down
28 changes: 15 additions & 13 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 @@ -69,14 +69,20 @@ body.sensei {
}

&.single-lesson {
.sensei-lesson-footer .sensei-buttons-container {
margin: unset;
display: flex;
gap: var(--wp--preset--spacing--10);
.sensei-lesson-footer {
.screen-reader-text {
display: none;
}

.sensei-buttons-container {
margin: unset;
display: flex;
gap: var(--wp--preset--spacing--10);

> *,
.sensei-buttons-container__button-block {
padding: unset;
> *,
.sensei-buttons-container__button-block {
padding: unset;
}
}
}

Expand All @@ -102,12 +108,8 @@ body.sensei {
}

@media screen and (max-width: 782px) {
.sensei-lesson-footer .wp-block-sensei-lms-button-lesson-completed {
display: flex;

.wp-block-button__link {
flex: 1;
}
.sensei-lesson-footer .sensei-lesson-actions-nav {
width: 100%;
}
}

Expand Down

0 comments on commit 6f967f4

Please sign in to comment.