Formatting for focus mode footer (desktop). Better position of the bottom-right "take notes" button on mobile.

Author: brianhogg

assets/scss/frontend/_focus-mode.scss

@@ -6,6 +6,7 @@ $focus-header-height: 60px;
 $focus-sidebar-width: 350px;
 $focus-sidebar-collapsed-width: 48px;
 $admin-bar-height: 32px;
+$admin-bar-height-mobile: 46px;
 
 .llms-focus-mode {
 	margin: 0;
@@ -281,6 +282,23 @@ $admin-bar-height: 32px;
 				margin: 0;
 			}
 		}
+
+		&:not(.llms-focus-mode-footer--mobile) {
+			@media (max-width: 768px) {
+				display: none;
+			}
+		}
+
+		&.llms-focus-mode-footer--mobile {
+			display: none;
+
+			@media (max-width: 768px) {
+				display: block;
+				position: sticky;
+				bottom: 0;
+				z-index: 10;
+			}
+		}
 	}
 
 	// =============================================
@@ -445,6 +463,13 @@ $admin-bar-height: 32px;
 			}
 		}
 	}
+
+	// Fix position of the Notes button.
+	@media screen and (max-width: 782px) {
+		.llms-note-button.position-fixed__bottom {
+			bottom: 100px;
+		}
+	}
 }
 
 .admin-bar.llms-focus-mode {
@@ -454,4 +479,12 @@ $admin-bar-height: 32px;
 		height: calc( 100vh - $admin-bar-height );
 		overflow: hidden;
 	}
+
+	@media screen and (max-width: 782px) {
+		.llms-focus-mode-wrapper {
+			height: calc( 100vh - $admin-bar-height-mobile );
+		}
+	}
 }
+
+

templates/single-lesson-focus.php

@@ -122,6 +122,12 @@
 
 	</div>
 
+	<?php if ( 'lesson' === $post_type && $lesson ) : ?>
+		<footer class="llms-focus-mode-footer llms-focus-mode-footer--mobile">
+			<?php lifterlms_template_complete_lesson_link(); ?>
+		</footer>
+	<?php endif; ?>
+
 </div>
 
 <?php wp_footer(); ?>