Merge pull request #5898 from Automattic/fix/lm-quiz-buttons-aligment

Learning Mode - Fix Quiz buttons aligment.
Automattic · Oct 11, 2022 · 41a5aa4 · 41a5aa4
2 parents 68f9235 + 8e4f8d6
commit 41a5aa4
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/assets/css/sensei-course-theme/quiz.scss b/assets/css/sensei-course-theme/quiz.scss
@@ -57,13 +57,24 @@ $tablet-breakpoint: 768px;
 	}
 
 	&__footer {
-		padding: 24px;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		align-items: center;
+		max-width: var(--content-size);
+		margin: 0 auto;
+		padding: 24px 0;
 
 		&__wrapper {
 			margin: 0 !important;
 			display: block;
 		}
 
+		.wp-block-group__inner-container {
+			margin: unset;
+			width: 100%;
+		}
+
 		.sensei-quiz-actions {
 			width: 100%;
 			flex-direction: column;
@@ -73,13 +84,23 @@ $tablet-breakpoint: 768px;
 		.sensei-quiz-pagination {
 			flex: 1;
 			margin: 0;
+			&__list {
+				margin-right: auto;
+			}
+
 			.sensei-quiz-pagination__list ul.page-numbers{
 				gap: 1rem;
 			}
 		}
 	}
 }
 
+[class*="__inner-container"] {
+	.sensei-course-theme__quiz__footer {
+		max-width: var(--content-size);
+	}
+}
+
 @media only screen and (min-width: $tablet-breakpoint ) {
 	.sensei-course-theme__quiz {
 		&__footer {

diff --git a/assets/css/sensei-course-theme/theme-fixes.scss b/assets/css/sensei-course-theme/theme-fixes.scss
@@ -27,7 +27,9 @@
 	// Twenty twenty
 
 	.wp-block-group.wp-block-group.wp-block-group.wp-block-group {
-		margin: unset;
+		&:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(.is-style-wide) {
+			margin: unset;
+		}
 	}
 
 	.is-content-justification-space-between > * {

diff --git a/themes/sensei-course-theme/templates/quiz.html b/themes/sensei-course-theme/templates/quiz.html
@@ -23,8 +23,8 @@
 
 <!-- wp:group {"className":"sensei-course-theme__quiz__footer_wrapper sensei-course-theme__frame"} -->
 <div class="wp-block-group sensei-course-theme__quiz__footer__wrapper sensei-course-theme__frame">
-	<!-- wp:group {"className":"sensei-course-theme__quiz__footer"} -->
-	<div class="wp-block-group sensei-course-theme__quiz__footer">
+	<!-- wp:group {"className":"sensei-course-theme__quiz__footer alignwide"} -->
+	<div class="wp-block-group sensei-course-theme__quiz__footer alignwide">
 		<!-- wp:sensei-lms/quiz-actions /-->
 	</div>
 	<!-- /wp:group -->