From ff05a6737f654658547f86eed0c08458f5be212c Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Wed, 11 Dec 2024 23:40:47 +0900 Subject: [PATCH] Adjust label position for mobile, desktop, unenrolled --- .../patterns/sensei-lesson-standalone.php | 4 +- .../src/lesson-facilitator-notes/style.scss | 32 ---------------- .../src/lesson-facilitator-notes/view.js | 26 ++++++++----- .../wporg-learn-2024/src/style/_sensei.scss | 38 ++++++++++++++++++- 4 files changed, 55 insertions(+), 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 index f4cba0493..827a1fb29 100644 --- 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 @@ - -
+ +

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 index b9311d109..a07c60357 100644 --- 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 index c08264b92..8ea878560 100644 --- 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 index f7e709c05..24466ddf7 100644 --- 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 {