Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Footer style improvements for quiz on learning mode #7106

Merged
merged 21 commits into from
Sep 7, 2023
Merged

Footer style improvements for quiz on learning mode #7106

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
c7af3ee
Fix quiz actions not adding block attributes
Imran92 Aug 15, 2023
8ca4120
Update button texts and classes
Imran92 Aug 15, 2023
719afa1
Fix footer button styles for course theme
Imran92 Aug 16, 2023
4113eb1
Fix footer button styles globally
Imran92 Aug 16, 2023
43643aa
Fix footer button paddings in learning mode
Imran92 Aug 16, 2023
bb80479
Fix flow direction and button hover styles
Imran92 Aug 16, 2023
2cd5fe9
Fix quiz submit button class and change text
Imran92 Aug 16, 2023
4693463
Button padding and font size fix
Imran92 Aug 16, 2023
7405859
Remove font size from sensei
Imran92 Aug 16, 2023
5487558
Add changelog
Imran92 Aug 16, 2023
436efc7
Merge branch 'add/change-quiz-design-learning-mode' into add/footer-s…
Imran92 Aug 18, 2023
9cc2aa5
Use padding instead of line-height
donnapep Aug 18, 2023
1292931
Merge branch 'trunk' into add/footer-style-update-lm-quiz
donnapep Aug 18, 2023
1738e02
remove sticky behavior of footer
Imran92 Aug 25, 2023
00d3204
Merge branch 'trunk' into add/footer-style-update-lm-quiz
Imran92 Aug 27, 2023
b329204
Merge branch 'feature/frontend-improvements' into add/footer-style-up…
Imran92 Aug 28, 2023
73d7db1
Fix squished button text on mobile
donnapep Sep 5, 2023
3ce813b
Use WordPress breakpoint and eliminate obsolete quiz header CSS
donnapep Sep 5, 2023
95b2bdf
Combine separate &__footer selectors
donnapep Sep 5, 2023
16004b8
Fix bottom margin for main content and quiz footer
donnapep Sep 5, 2023
ca30787
Change the type of changelog to changed
Imran92 Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions assets/css/3rd-party/themes/course/quiz.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 );
}
}
}
}
}
}
21 changes: 7 additions & 14 deletions assets/css/frontend.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
}
Expand Down
12 changes: 5 additions & 7 deletions assets/css/sensei-course-theme/buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
70 changes: 36 additions & 34 deletions assets/css/sensei-course-theme/quiz.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down
4 changes: 4 additions & 0 deletions changelog/add-footer-style-update-lm-quiz
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: added

Changed the footer styles of Quiz template
23 changes: 18 additions & 5 deletions includes/class-sensei-quiz.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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' ) ); ?>" />
Expand All @@ -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' ) ); ?>" />
Expand All @@ -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

Expand Down
Loading