From c7af3ee11d57cd7b83e55fc9440dafeada7ce391 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Tue, 15 Aug 2023 23:00:32 +0600 Subject: [PATCH 01/17] Fix quiz actions not adding block attributes --- includes/class-sensei-quiz.php | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/includes/class-sensei-quiz.php b/includes/class-sensei-quiz.php index ab62c999b8..d1cd30e58b 100755 --- a/includes/class-sensei-quiz.php +++ b/includes/class-sensei-quiz.php @@ -1835,6 +1835,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; } @@ -1844,7 +1850,13 @@ public static function action_buttons() { wp_enqueue_script( 'sensei-stop-double-submission' ); ?> -
+ ', + $wrapper_attributes // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- No need to escape output of get_block_wrapper_attributes(). + ); + ?> +
From 8ca412031af07bc86aa29f7f7dad17fd54a0258b Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Tue, 15 Aug 2023 23:02:33 +0600 Subject: [PATCH 02/17] Update button texts and classes --- includes/class-sensei-quiz.php | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/includes/class-sensei-quiz.php b/includes/class-sensei-quiz.php index d1cd30e58b..b99021c4e8 100755 --- a/includes/class-sensei-quiz.php +++ b/includes/class-sensei-quiz.php @@ -1879,7 +1879,7 @@ class="wp-block-button__link button quiz-submit complete sensei-stop-double-subm
@@ -1889,13 +1889,14 @@ class="wp-block-button__link button quiz-submit complete sensei-stop-double-subm
+
Date: Wed, 16 Aug 2023 12:28:20 +0600 Subject: [PATCH 03/17] Fix footer button styles for course theme --- assets/css/3rd-party/themes/course/quiz.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/assets/css/3rd-party/themes/course/quiz.scss b/assets/css/3rd-party/themes/course/quiz.scss index 958c8ca766..95664cf130 100644 --- a/assets/css/3rd-party/themes/course/quiz.scss +++ b/assets/css/3rd-party/themes/course/quiz.scss @@ -1,7 +1,20 @@ .sensei-course-theme__quiz { + &__main-content { .wp-block-post-title { margin-bottom: 3.75rem; } } + &__footer { + .sensei-quiz-actions { + .sensei-quiz-actions-secondary { + .sensei-quiz-action { + button { + font-family: var( --wp--preset--font-family--body ); + font-size: var(--wp--preset--font-size--medium); + } + } + } + } + } } From 4113eb119b18c89678ed4497d5c7c1b5df9db4eb Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Wed, 16 Aug 2023 12:28:39 +0600 Subject: [PATCH 04/17] Fix footer button styles globally --- assets/css/frontend.scss | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/assets/css/frontend.scss b/assets/css/frontend.scss index 42d14b0831..c000db3fbe 100644 --- 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; } From 43643aa8bafb2009b48f1efc8f478686ff2b9393 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Wed, 16 Aug 2023 12:29:09 +0600 Subject: [PATCH 05/17] Fix footer button paddings in learning mode --- assets/css/sensei-course-theme/buttons.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/css/sensei-course-theme/buttons.scss b/assets/css/sensei-course-theme/buttons.scss index ac4d04bcf4..e6e793287c 100644 --- a/assets/css/sensei-course-theme/buttons.scss +++ b/assets/css/sensei-course-theme/buttons.scss @@ -6,17 +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: .625rem; - } + padding: 1rem 32px; + line-height: 100%; &.has-icon { display: flex; From bb80479f242e728d5264cd4fc0b469d23e2bc169 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Wed, 16 Aug 2023 12:29:56 +0600 Subject: [PATCH 06/17] Fix flow direction and button hover styles --- assets/css/sensei-course-theme/quiz.scss | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/assets/css/sensei-course-theme/quiz.scss b/assets/css/sensei-course-theme/quiz.scss index 637dc9b324..37b7d4112b 100644 --- a/assets/css/sensei-course-theme/quiz.scss +++ b/assets/css/sensei-course-theme/quiz.scss @@ -85,8 +85,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 { @@ -120,16 +130,18 @@ $tablet-breakpoint: 768px; 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 { From 2cd5fe96601b2659725728b4b098607b00ce2f4d Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Wed, 16 Aug 2023 12:30:50 +0600 Subject: [PATCH 07/17] Fix quiz submit button class and change text --- includes/class-sensei-quiz.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/includes/class-sensei-quiz.php b/includes/class-sensei-quiz.php index b99021c4e8..2b0a79e129 100755 --- a/includes/class-sensei-quiz.php +++ b/includes/class-sensei-quiz.php @@ -1864,10 +1864,10 @@ public static function action_buttons() { 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="" > - + From 469346378d554a9b07d4baad7bf19ebd61fe6411 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Wed, 16 Aug 2023 12:53:43 +0600 Subject: [PATCH 08/17] Button padding and font size fix --- assets/css/3rd-party/themes/course/quiz.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/assets/css/3rd-party/themes/course/quiz.scss b/assets/css/3rd-party/themes/course/quiz.scss index 95664cf130..d805bad829 100644 --- a/assets/css/3rd-party/themes/course/quiz.scss +++ b/assets/css/3rd-party/themes/course/quiz.scss @@ -7,11 +7,17 @@ } &__footer { .sensei-quiz-actions { + .sensei-quiz-action { + button { + padding: 0 32px; + line-height: 56px; + } + } .sensei-quiz-actions-secondary { .sensei-quiz-action { button { font-family: var( --wp--preset--font-family--body ); - font-size: var(--wp--preset--font-size--medium); + font-size: var(--wp--custom--typography--font-sizes--normal); } } } From 7405859dcb6bbdf461e9ea654a870248c48ad24e Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Wed, 16 Aug 2023 13:22:09 +0600 Subject: [PATCH 09/17] Remove font size from sensei --- assets/css/3rd-party/themes/course/quiz.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/css/3rd-party/themes/course/quiz.scss b/assets/css/3rd-party/themes/course/quiz.scss index d805bad829..d1baa56bb5 100644 --- a/assets/css/3rd-party/themes/course/quiz.scss +++ b/assets/css/3rd-party/themes/course/quiz.scss @@ -17,7 +17,6 @@ .sensei-quiz-action { button { font-family: var( --wp--preset--font-family--body ); - font-size: var(--wp--custom--typography--font-sizes--normal); } } } From 5487558cdbec9e64b5a56fdb049f50102097e71e Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Wed, 16 Aug 2023 14:57:41 +0600 Subject: [PATCH 10/17] Add changelog --- changelog/add-footer-style-update-lm-quiz | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelog/add-footer-style-update-lm-quiz diff --git a/changelog/add-footer-style-update-lm-quiz b/changelog/add-footer-style-update-lm-quiz new file mode 100644 index 0000000000..c69334b88e --- /dev/null +++ b/changelog/add-footer-style-update-lm-quiz @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Changed the footer styles of Quiz template From 9cc2aa52e2e1f69db265cc59a9502ee1b498122b Mon Sep 17 00:00:00 2001 From: Donna Peplinskie Date: Fri, 18 Aug 2023 12:30:03 -0400 Subject: [PATCH 11/17] Use padding instead of line-height --- assets/css/3rd-party/themes/course/quiz.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/assets/css/3rd-party/themes/course/quiz.scss b/assets/css/3rd-party/themes/course/quiz.scss index d1baa56bb5..8d64a9be64 100644 --- a/assets/css/3rd-party/themes/course/quiz.scss +++ b/assets/css/3rd-party/themes/course/quiz.scss @@ -9,8 +9,7 @@ .sensei-quiz-actions { .sensei-quiz-action { button { - padding: 0 32px; - line-height: 56px; + padding: 1rem 32px; } } .sensei-quiz-actions-secondary { From 1738e02b36de9336307ef35fe20ceeb693aebfb8 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Fri, 25 Aug 2023 14:09:32 +0600 Subject: [PATCH 12/17] remove sticky behavior of footer --- assets/css/sensei-course-theme/quiz.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/assets/css/sensei-course-theme/quiz.scss b/assets/css/sensei-course-theme/quiz.scss index bd196c1981..23adbd35b2 100644 --- a/assets/css/sensei-course-theme/quiz.scss +++ b/assets/css/sensei-course-theme/quiz.scss @@ -114,11 +114,6 @@ $tablet-breakpoint: 768px; .sensei-course-theme__quiz { &__footer { &__wrapper { - position: fixed; - bottom: 0; - left: 0; - right: 0; - z-index: 100; background-color: var(--sensei-background-color); } From 73d7db1144bd006f4bf1ad9f72e2d9cc97a71e2e Mon Sep 17 00:00:00 2001 From: Donna Peplinskie Date: Tue, 5 Sep 2023 10:35:20 -0400 Subject: [PATCH 13/17] Fix squished button text on mobile --- assets/css/sensei-course-theme/buttons.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/assets/css/sensei-course-theme/buttons.scss b/assets/css/sensei-course-theme/buttons.scss index d4f6a46a55..e6e793287c 100644 --- a/assets/css/sensei-course-theme/buttons.scss +++ b/assets/css/sensei-course-theme/buttons.scss @@ -18,10 +18,6 @@ $breakpoint: 782px; padding: 1rem 32px; line-height: 100%; - @media screen and (max-width: $breakpoint) { - letter-spacing: -0.14px; - } - &.has-icon { display: flex; gap: 8px; From 3ce813ba3fbb481f6bfb350d9ea6d9585355a49a Mon Sep 17 00:00:00 2001 From: Donna Peplinskie Date: Tue, 5 Sep 2023 11:24:15 -0400 Subject: [PATCH 14/17] Use WordPress breakpoint and eliminate obsolete quiz header CSS --- assets/css/sensei-course-theme/quiz.scss | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/assets/css/sensei-course-theme/quiz.scss b/assets/css/sensei-course-theme/quiz.scss index 23adbd35b2..4229ac78bb 100644 --- a/assets/css/sensei-course-theme/quiz.scss +++ b/assets/css/sensei-course-theme/quiz.scss @@ -1,8 +1,3 @@ -/** - * Variables - */ -$tablet-breakpoint: 768px; - @import '~@wordpress/base-styles/breakpoints'; @import '../../shared/blocks/progress-bar/progress-bar'; @@ -41,7 +36,7 @@ $tablet-breakpoint: 768px; } } - &__header, &__footer { + &__footer { padding: 24px; margin: 0 auto; @@ -110,7 +105,7 @@ $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 { From 95b2bdf3bf01bc2398a976c7f3d65408d242c3c1 Mon Sep 17 00:00:00 2001 From: Donna Peplinskie Date: Tue, 5 Sep 2023 11:27:46 -0400 Subject: [PATCH 15/17] Combine separate &__footer selectors --- assets/css/sensei-course-theme/quiz.scss | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/assets/css/sensei-course-theme/quiz.scss b/assets/css/sensei-course-theme/quiz.scss index 4229ac78bb..d7853e9289 100644 --- a/assets/css/sensei-course-theme/quiz.scss +++ b/assets/css/sensei-course-theme/quiz.scss @@ -37,26 +37,14 @@ } &__footer { - padding: 24px; - - margin: 0 auto; - max-width: 1200px; - - display: flex; align-items: center; - justify-content: space-between; - gap: 24px; - - } - - &__footer { 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); + padding: 24px; &__wrapper { margin: 0 !important; From 16004b8d7f1e3f3ee6b8f5b93956deda303038d0 Mon Sep 17 00:00:00 2001 From: Donna Peplinskie Date: Tue, 5 Sep 2023 12:27:13 -0400 Subject: [PATCH 16/17] Fix bottom margin for main content and quiz footer Should be 80px on desktop and 60px on mobile as per the design --- assets/css/sensei-course-theme/quiz.scss | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/assets/css/sensei-course-theme/quiz.scss b/assets/css/sensei-course-theme/quiz.scss index d7853e9289..43572eba23 100644 --- a/assets/css/sensei-course-theme/quiz.scss +++ b/assets/css/sensei-course-theme/quiz.scss @@ -1,11 +1,18 @@ @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); } @@ -44,11 +51,16 @@ justify-content: flex-end; margin: 0 auto; max-width: var(--content-size); - padding: 24px; &__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 { From ca307872cbe0682c655a521913ff7a7743d47214 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Wed, 6 Sep 2023 22:36:18 +0600 Subject: [PATCH 17/17] Change the type of changelog to changed --- changelog/add-footer-style-update-lm-quiz | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog/add-footer-style-update-lm-quiz b/changelog/add-footer-style-update-lm-quiz index c69334b88e..a5b27d34ae 100644 --- a/changelog/add-footer-style-update-lm-quiz +++ b/changelog/add-footer-style-update-lm-quiz @@ -1,4 +1,4 @@ Significance: minor -Type: added +Type: changed Changed the footer styles of Quiz template