Add lesson complete indicator

WordPress · Aug 1, 2024 · 8925326 · 8925326
1 parent 89400f3
commit 8925326
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 19 deletions.
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-actions.php b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-actions.php
@@ -36,19 +36,30 @@
 		<?php if ( $is_completed ) : ?>
 			<!-- wp:buttons -->
 			<div class="wp-block-buttons">
-				<?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 -->
+				<!-- wp:button {"className":"is-style-outline"} -->
+				<div class="wp-block-button is-style-outline has-text-align-left disabled">
+					<a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Lesson completed', 'wporg-learn' ); ?></a>
+				</div>
+				<!-- /wp:button -->
+				<?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>
+						</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>
+				<!-- /wp:buttons -->
 				<?php endif; ?>
 			</div>
 			<!-- /wp:buttons -->			

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
@@ -102,12 +102,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%;
 		}
 	}
 

diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss
@@ -51,3 +51,9 @@ body {
 		padding-top: unset !important;
 	}
 }
+
+.disabled {
+	color: var(--wp--preset--color--charcoal-5) !important;
+    border-color: var(--wp--preset--color--charcoal-5) !important;
+    pointer-events: none;
+}