Add header mobile view

WordPress · Dec 9, 2024 · d0dc853 · d0dc853
1 parent 66377c0
commit d0dc853
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 11 deletions.
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php
@@ -42,5 +42,19 @@
 	<!-- /wp:group -->
 
 	<!-- wp:sensei-lms/course-theme-course-progress-bar /-->
+
+	<!-- wp:group {"className":"wporg-learn-lesson-header-mobile-view","style":{"spacing":{"blockGap":"16px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+	<div class="wp-block-group wporg-learn-lesson-header-mobile-view">
+		<?php if ( $is_user_enrolled ) : ?>
+			<!-- wp:sensei-lms/course-theme-course-progress-counter {"fontSize":"small"} /-->
+		<?php endif; ?>
+
+		<!-- wp:group {"className":"wporg-learn-lesson-sidebar-toggle-wrapper","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group wporg-learn-lesson-sidebar-toggle-wrapper">
+			<!-- wp:sensei-lms/sidebar-toggle-button /-->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->
 </div>
 <!-- /wp:sensei-lms/ui -->
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
@@ -14,6 +14,33 @@ body.sensei {
 	--sensei-module-lesson-color: var(--wp--preset--color--charcoal-1);
 	--sensei-lm-mobile-header-height: 60px;
 
+	@media (max-width: 782px) {
+		&.sensei-course-theme--sidebar-open {
+			.wporg-learn-facilitator-notes-label {
+				opacity: 1 !important;
+			}
+
+			// The inner progress bar causes a 1px jitter when the sidebar is opened.
+			.wporg-learn-lesson-header-mobile-view {
+				position: relative;
+				top: 1px;
+
+				.wporg-learn-lesson-sidebar-toggle-wrapper {
+					background-color: var(--wp--preset--color--light-grey-2) !important;
+
+					> button {
+						transform: rotate(180deg) scale(1.5) !important;
+					}
+				}
+			}
+
+			.sensei-course-theme__sidebar {
+				top: calc(var(--sensei-lm-header-height) * 2 + var(--sensei-wpadminbar-offset, 0px)) !important;
+				background-color: var(--wp--preset--color--light-grey-2);
+			}
+		}
+	}
+
 	.wp-block-sensei-lms-course-theme-notices:empty {
 		display: none;
 	}
@@ -24,21 +51,73 @@ body.sensei {
 		}
 
 		.sensei-course-theme__header__info {
-			gap: var(--wp--preset--spacing--30);
+			gap: 60px;
+
+			.wp-block-sensei-lms-exit-course {
+				text-decoration: none;
+				order: 1;
+				opacity: 1;
+
+				@media (min-width: 783px) {
+					&::before {
+						content: "";
+						display: inline-block;
+						height: var(--sensei-lm-header-height);
+						border-right: 1px solid var(--sensei-course-progress-bar-color);
+						position: absolute;
+						margin-left: -30px;
+						top: 0;
+					}
+				}
+			}
 		}
 
-		.wp-block-sensei-lms-exit-course {
-			margin-left: var(--wp--preset--spacing--30);
+		@media (max-width: 782px) {
+			.sensei-course-theme__sidebar-toggle {
+				display: none !important;
+			}
+		}
 
-			@media (min-width: 783px) {
-				&::before {
-					content: "";
-					display: inline-block;
-					height: 100%;
-					border-right: 1px solid var(--sensei-course-progress-bar-color);
+		~ .wporg-learn-lesson-header-mobile-view {
+			display: none;
+
+			@media (max-width: 782px) {
+				display: flex;
+				height: var(--sensei-lm-header-height);
+				padding: 0 0 0 var(--wp--preset--spacing--30);
+
+				.sensei-course-theme-course-progress {
+					display: block;
+					opacity: 1;
+					position: unset;
+
+					@media (max-width: 460px) {
+						width: 47%;
+					}
+				}
+
+				.wporg-learn-facilitator-notes-label {
+					display: block;
 					position: absolute;
-					margin-left: -30px;
-					top: 0;
+					right: calc(60px + var(--wp--preset--spacing--20));
+				}
+
+				.wporg-learn-lesson-sidebar-toggle-wrapper {
+					position: absolute;
+					right: 0;
+
+					> button {
+						background: url(../../assets/icon-chevron-down.svg) !important;
+						background-repeat: no-repeat !important;
+						background-position: center !important;
+						transform: scale(1.5);
+						width: 60px;
+						height: 60px;
+					}
+
+					svg {
+						display: none;
+					}
 				}
 			}
 		}
@@ -60,9 +139,15 @@ body.sensei {
 	.sensei-course-theme__columns {
 		margin-top: calc(var(--sensei-lm-header-height) + var(--sensei-wpadminbar-offset, 0px)) !important;
 
+		@media (max-width: 782px) {
+			margin-top: calc(var(--sensei-lm-header-height) * 2 + var(--sensei-wpadminbar-offset, 0px)) !important;
+		}
+
 		.sensei-course-theme__sidebar ~ .sensei-course-theme__main-content {
 			--sensei-lm-sidebar-width: calc(280px + (var(--wp--preset--spacing--edge-space) * 2) - 24px);
 			margin-top: 0;
+			padding-left: var(--wp--preset--spacing--30);
+			padding-right: var(--wp--preset--spacing--30);
 
 			> * {
 				margin-left: unset;
@@ -183,6 +268,8 @@ body.sensei {
 
 	.sensei-course-theme__sidebar {
 		row-gap: 40px;
+		padding-left: var(--wp--preset--spacing--30) !important;
+		padding-right: var(--wp--preset--spacing--30) !important;
 
 		.sensei-lms-course-navigation__modules {
 			gap: var(--wp--preset--spacing--20);