Merge pull request #7106 from Automattic/add/footer-style-update-lm-quiz

Footer style improvements for quiz on learning mode
Automattic · Sep 7, 2023 · c4052cc · c4052cc
2 parents d12743d + ca30787
commit c4052cc
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 60 deletions.
diff --git a/assets/css/3rd-party/themes/course/quiz.scss b/assets/css/3rd-party/themes/course/quiz.scss
@@ -1,7 +1,24 @@
 .sensei-course-theme__quiz {
+
 	&__main-content {
 		.wp-block-post-title {
 			margin-bottom: 3.75rem;
 		}
 	}
+	&__footer {
+		.sensei-quiz-actions {
+			.sensei-quiz-action {
+				button {
+					padding: 1rem 32px;
+				}
+			}
+			.sensei-quiz-actions-secondary {
+				.sensei-quiz-action {
+					button {
+						font-family: var( --wp--preset--font-family--body );
+					}
+				}
+			}
+		}
+	}
 }
diff --git a/assets/css/frontend.scss b/assets/css/frontend.scss
@@ -495,20 +495,17 @@ div.sensei-quiz-actions {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: 1.5em;
+	row-gap: 32px;
 
 	@media only screen and (min-width: $tablet-breakpoint) {
 		flex-direction: row;
 		margin-left: auto;
+		justify-content: space-between;
 	}
 
 	.sensei-quiz-action {
 		margin: 0;
 		padding: 0;
-
-		.button {
-			padding: 8px 11px;
-		}
 	}
 
 	.sensei-quiz-actions-primary {
@@ -518,21 +515,17 @@ div.sensei-quiz-actions {
 
 	.sensei-quiz-actions-secondary {
 		display: flex;
-		order: 1;
+		column-gap: 56px;
+		flex-direction: column;
+		row-gap: 32px;
+		align-items: center;
 
 		@media only screen and (min-width: $tablet-breakpoint) {
 			order: 0;
+			flex-direction: row;
 		}
 
 		.sensei-quiz-action {
-			display: flex;
-
-			&:not(:first-child) {
-				margin-left: 0.5em;
-				padding-left: 0.5em;
-				border-left: 2px solid;
-			}
-
 			.button, button {
 				@include button-link;
 			}

diff --git a/assets/css/sensei-course-theme/buttons.scss b/assets/css/sensei-course-theme/buttons.scss
@@ -6,19 +6,17 @@ $breakpoint: 782px;
 	gap: 12px;
 }
 
+
 .sensei-course-theme__button,
-.sensei-course-theme__link {
+.sensei-course-theme__link,
+.sensei-course-theme .wp-block-button.is-style-outline > .wp-block-button__link {
 	align-items: center;
 	height: 100%;
 	justify-content: center;
 	white-space: nowrap;
 	width: 100%;
-
-	@media screen and (max-width: $breakpoint) {
-		padding: 20px;
-		line-height: 100%;
-		letter-spacing: -0.14px;
-	}
+	padding: 1rem 32px;
+	line-height: 100%;
 
 	&.has-icon {
 		display: flex;

diff --git a/assets/css/sensei-course-theme/quiz.scss b/assets/css/sensei-course-theme/quiz.scss
@@ -1,16 +1,18 @@
-/**
- * Variables
- */
-$tablet-breakpoint: 768px;
-
 @import '~@wordpress/base-styles/breakpoints';
 @import '../../shared/blocks/progress-bar/progress-bar';
 
+$vertical-spacing: 60px;
+$vertical-spacing-desktop: 80px;
+
 .sensei-course-theme__quiz {
 	&__main-content {
-		margin-bottom: 100px !important;
+		margin-bottom: $vertical-spacing;
 		padding-top: clamp(2.5rem, 1.346rem + 3.846vw, 3.75rem);
 
+		@media (min-width: $break-medium) {
+			margin-bottom: $vertical-spacing-desktop;
+		}
+
 		.wp-block-post-title {
 			margin-top: clamp(1.688rem, 0.534rem + 3.846vw, 2.938rem);
 		}
@@ -41,31 +43,24 @@ $tablet-breakpoint: 768px;
 		}
 	}
 
-	&__header, &__footer {
-		padding: 24px;
-
-		margin: 0 auto;
-		max-width: 1200px;
-
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 24px;
-
-	}
-
 	&__footer {
+		align-items: center;
 		display: flex;
 		flex-direction: row;
+		gap: 24px;
 		justify-content: flex-end;
-		align-items: center;
-		max-width: var(--content-size);
 		margin: 0 auto;
-		padding: 24px 0;
+		max-width: var(--content-size);
 
 		&__wrapper {
-			margin: 0 !important;
 			display: block;
+			margin: 0 !important;
+			/* Using padding instead of margin as some themes have a non-white body background color. */
+			padding-bottom: $vertical-spacing;
+
+			@media (min-width: $break-medium) {
+				padding-bottom: $vertical-spacing-desktop;
+			}
 		}
 
 		.wp-block-group__inner-container {
@@ -75,8 +70,18 @@ $tablet-breakpoint: 768px;
 
 		.sensei-quiz-actions {
 			width: 100%;
-			flex-direction: column;
-			gap: 2rem;
+
+			.sensei-quiz-actions-secondary {
+
+				.sensei-quiz-action {
+					.button, button {
+						text-decoration: none;
+						&:hover {
+							text-decoration: underline;
+						}
+					}
+				}
+			}
 		}
 
 		.sensei-quiz-pagination {
@@ -100,26 +105,23 @@ $tablet-breakpoint: 768px;
 	}
 }
 
-@media only screen and (min-width: $tablet-breakpoint) {
+@media only screen and (min-width: $break-medium) {
 	.sensei-course-theme__quiz {
 		&__footer {
 			&__wrapper {
-				position: fixed;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				z-index: 100;
 				background-color: var(--sensei-background-color);
-				box-shadow: 2px 10px 30px 5px rgba(0, 0, 0, 0.1);
 			}
 
 			.sensei-quiz-actions {
-				width: auto;
-				flex-direction: row-reverse;
+				flex-direction: row;
 
 				.sensei-quiz-action {
 					flex: unset;
 				}
+
+				.sensei-quiz-actions-secondary {
+					flex-direction: row;
+				}
 			}
 
 			.sensei-quiz-pagination {

diff --git a/changelog/add-footer-style-update-lm-quiz b/changelog/add-footer-style-update-lm-quiz
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Changed the footer styles of Quiz template
diff --git a/includes/class-sensei-quiz.php b/includes/class-sensei-quiz.php
@@ -1842,6 +1842,12 @@ public static function action_buttons() {
 		$is_reset_allowed  = self::is_reset_allowed( $lesson_id );
 		$has_actions       = $is_reset_allowed || ! $is_quiz_completed;
 
+		$wrapper_attributes = get_block_wrapper_attributes(
+			[
+				'class' => 'sensei-quiz-actions',
+			]
+		);
+
 		if ( ! $has_actions ) {
 			return;
 		}
@@ -1851,18 +1857,24 @@ public static function action_buttons() {
 		wp_enqueue_script( 'sensei-stop-double-submission' );
 		?>
 
-		<div class="sensei-quiz-actions">
+		<?php
+			echo sprintf(
+				'<div %s>',
+				$wrapper_attributes // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- No need to escape output of get_block_wrapper_attributes().
+			);
+		?>
+
 			<?php if ( ! $is_quiz_completed ) : ?>
 				<div class="sensei-quiz-actions-primary wp-block-buttons">
 					<div class="sensei-quiz-action wp-block-button">
 						<button
 							type="submit"
 							name="quiz_complete"
 							form="sensei-quiz-form"
-							class="wp-block-button__link button quiz-submit complete sensei-stop-double-submission"
+							class="wp-block-button__link button quiz-submit complete sensei-course-theme__button sensei-stop-double-submission"
 							style="<?php echo esc_attr( $button_inline_styles ); ?>"
 						>
-							<?php esc_attr_e( 'Complete', 'sensei-lms' ); ?>
+							<?php esc_attr_e( 'Complete Quiz', 'sensei-lms' ); ?>
 						</button>
 
 						<input type="hidden" name="woothemes_sensei_complete_quiz_nonce" form="sensei-quiz-form" id="woothemes_sensei_complete_quiz_nonce" value="<?php echo esc_attr( wp_create_nonce( 'woothemes_sensei_complete_quiz_nonce' ) ); ?>" />
@@ -1874,7 +1886,7 @@ class="wp-block-button__link button quiz-submit complete sensei-stop-double-subm
 				<?php if ( $is_reset_allowed ) : ?>
 					<div class="sensei-quiz-action">
 						<button type="submit" name="quiz_reset" form="sensei-quiz-form" class="quiz-submit reset sensei-stop-double-submission">
-							<?php esc_attr_e( 'Reset', 'sensei-lms' ); ?>
+							<?php esc_attr_e( 'Reset Quiz', 'sensei-lms' ); ?>
 						</button>
 
 						<input type="hidden" name="woothemes_sensei_reset_quiz_nonce" form="sensei-quiz-form" id="woothemes_sensei_reset_quiz_nonce" value="<?php echo esc_attr( wp_create_nonce( 'woothemes_sensei_reset_quiz_nonce' ) ); ?>" />
@@ -1884,13 +1896,14 @@ class="wp-block-button__link button quiz-submit complete sensei-stop-double-subm
 				<?php if ( ! $is_quiz_completed ) : ?>
 					<div class="sensei-quiz-action">
 						<button type="submit" name="quiz_save" form="sensei-quiz-form" class="quiz-submit save sensei-stop-double-submission">
-							<?php esc_attr_e( 'Save', 'sensei-lms' ); ?>
+							<?php esc_attr_e( 'Save Progress', 'sensei-lms' ); ?>
 						</button>
 
 						<input type="hidden" name="woothemes_sensei_save_quiz_nonce" form="sensei-quiz-form" id="woothemes_sensei_save_quiz_nonce" value="<?php echo esc_attr( wp_create_nonce( 'woothemes_sensei_save_quiz_nonce' ) ); ?>" />
 					</div>
 				<?php endif ?>
 			</div>
+
 		</div>
 		<?php