Adjust label position for mobile, desktop, unenrolled

WordPress · Dec 11, 2024 · ff05a67 · ff05a67
1 parent affb77e
commit ff05a67
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 45 deletions.
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-standalone.php b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-standalone.php
@@ -15,8 +15,8 @@
 
 		<!-- wp:wporg/site-breadcrumbs {"fontSize":"small","style":{"spacing":{"padding":{"top":"18px","bottom":"18px"}}}} /-->
 
-		<!-- wp:group {"style":{"spacing":{"blockGap":"12px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-		<div class="wp-block-group">
+		<!-- wp:group {"className":"wp-block-sensei-lms-exit-lesson","style":{"spacing":{"blockGap":"12px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group wp-block-sensei-lms-exit-lesson">
 
 			<!-- wp:paragraph {"className":"is-style-short-text","fontSize":"small"} -->
 			<p class="is-style-short-text has-small-font-size"><a href="<?php echo esc_url( get_post_type_archive_link( 'lesson' ) ); ?>"><?php echo esc_html_e( 'Exit lesson', 'wporg-learn' ); ?></a></p>

diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss
@@ -48,35 +48,3 @@
 		margin-top: 0;
 	}
 }
-
-// general styles
-.wporg-learn-lesson-facilitator-notes-label {
-	cursor: pointer;
-	font-family: var(--wp--preset--font-family--inter);
-	font-size: var(--wp--preset--font-size--small);
-	color: var(--wp--custom--link--color--text);
-	text-decoration: underline;
-	text-underline-offset: 0.13em;
-	user-select: none;
-	line-height: 1.1875;
-
-	&:hover {
-		text-decoration: none;
-	}
-
-	// mobile styles
-	position: absolute;
-	right: calc(60px + var(--wp--preset--spacing--20));
-}
-
-// desktop styles
-.sensei-course-theme-header-content {
-	.wporg-learn-lesson-facilitator-notes-label {
-		margin-left: -30px !important;
-		position: unset;
-
-		@media (max-width: 782px) {
-			display: none;
-		}
-	}
-}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js
@@ -1,14 +1,22 @@
 document.addEventListener( 'DOMContentLoaded', function () {
 	const facilitatorNotes = document.querySelector( '.wporg-learn-lesson-facilitator-notes-label' );
-	const headerInfos = document.querySelectorAll( '.sensei-course-theme-course-progress' );
-	const headerContent = document.querySelector( '.sensei-course-theme-header-content' );
-
-	if ( facilitatorNotes && headerInfos.length > 0 ) {
-		headerInfos.forEach( ( headerInfo ) => {
-			headerInfo.insertAdjacentElement( 'afterend', facilitatorNotes.cloneNode( true ) );
-		} );
-	} else if ( facilitatorNotes && headerContent ) {
-		headerContent.firstElementChild.insertAdjacentElement( 'afterend', facilitatorNotes.cloneNode( true ) );
+	const exitCourse = document.querySelector( '.wp-block-sensei-lms-exit-course' );
+	const exitLesson = document.querySelector( '.wp-block-sensei-lms-exit-lesson' );
+	const sidebarToggle = document.querySelector( '.wporg-learn-lesson-sidebar-toggle-wrapper' );
+
+	// for desktop view
+	if ( facilitatorNotes && exitCourse ) {
+		exitCourse.insertAdjacentElement( 'beforebegin', facilitatorNotes.cloneNode( true ) );
+	}
+
+	// for mobile view
+	if ( facilitatorNotes && sidebarToggle ) {
+		sidebarToggle.insertAdjacentElement( 'beforebegin', facilitatorNotes.cloneNode( true ) );
+	}
+
+	// for standalone lesson
+	if ( facilitatorNotes && exitLesson ) {
+		exitLesson.insertAdjacentElement( 'beforebegin', facilitatorNotes.cloneNode( true ) );
 	}
 
 	facilitatorNotes.remove();

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
@@ -15,8 +15,8 @@ body.sensei {
 	--sensei-lm-mobile-header-height: 60px;
 
 	@media (max-width: 782px) {
+		// The inner progress bar causes a 1px jitter when the sidebar is opened.
 		&.sensei-course-theme--sidebar-open {
-			// The inner progress bar causes a 1px jitter when the sidebar is opened.
 			.wporg-learn-lesson-header-mobile-view {
 				position: relative;
 				top: 1px;
@@ -41,6 +41,26 @@ body.sensei {
 		display: none;
 	}
 
+	// general styles
+	.wporg-learn-lesson-facilitator-notes-label {
+		cursor: pointer;
+		font-family: var(--wp--preset--font-family--inter);
+		font-size: var(--wp--preset--font-size--small);
+		color: var(--wp--custom--link--color--text);
+		text-decoration: underline;
+		text-underline-offset: 0.13em;
+		user-select: none;
+		line-height: 1.1875;
+
+		&:hover {
+			text-decoration: none;
+		}
+
+		@media (max-width: 782px) {
+			display: none;
+		}
+	}
+
 	.sensei-course-theme-header-content {
 		> .wp-block-group {
 			gap: 0;
@@ -51,6 +71,7 @@ body.sensei {
 
 			.wp-block-sensei-lms-exit-course {
 				text-decoration: none;
+				opacity: 1;
 
 				@media (min-width: 783px) {
 					&::before {
@@ -90,6 +111,13 @@ body.sensei {
 					}
 				}
 
+				.wporg-learn-lesson-facilitator-notes-label {
+					// mobile styles
+					position: absolute;
+					right: calc(60px + var(--wp--preset--spacing--20));
+					display: block;
+				}
+
 				.wporg-learn-lesson-sidebar-toggle-wrapper {
 					position: absolute;
 					right: 0;
@@ -832,8 +860,14 @@ body.sensei {
 				white-space: pre-wrap;
 			}
 
+			// standalone lesson styles
+			.wporg-learn-lesson-facilitator-notes-label {
+				right: calc(150px + var(--wp--preset--spacing--20));
+				position: absolute;
+			}
+
 			@media (min-width: 783px) {
-				div:last-child {
+				.wp-block-sensei-lms-exit-lesson {
 					height: 100%;
 
 					&::before {