fix: iframe height for discussions sidebar (#1392 )

* fix: iframe height for discussions sidebar * fix: increase adaptation brakepoint
fix: optimize scroll position observer after video fullscreen exit (#1370 )
2024-08-08 15:50:33 -04:00 · 2024-06-06 09:08:42 -03:00 · 2024-04-07 16:14:13 +03:00 · 2024-03-22 11:03:51 -04:00 · 2024-03-13 13:30:19 -03:00 · 2024-03-11 09:53:00 -04:00
16 changed files with 80 additions and 49 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
        "@edx/frontend-component-header": "4.6.0",
        "@edx/frontend-lib-learning-assistant": "^1.14.0",
        "@edx/frontend-lib-special-exams": "2.23.2",
-        "@edx/frontend-platform": "5.0.0",
+        "@edx/frontend-platform": "5.5.2",
        "@edx/paragon": "20.46.0",
        "@edx/react-unit-test-utils": "npm:@edx/react-unit-test-utils@1.7.0",
        "@fortawesome/fontawesome-svg-core": "1.3.0",
@@ -3623,9 +3623,9 @@
      }
    },
    "node_modules/@edx/frontend-platform": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-5.0.0.tgz",
-      "integrity": "sha512-DD9/B4rnC3BKPiWlbEFF1JIYFbWC6vUBKTyN8sf4khi4DNhhWhsobk+iNeCWNzF9UgCPRbniIqesdV1F9NXNZw==",
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-5.5.2.tgz",
+      "integrity": "sha512-cbUvWcFL/mTc7eypBS/BnCojgWDcJCe3h3ffb3GD7F+Y4ysrFBJYf031qPcgmWNUrN30452dR7r1+sqE7uVvYA==",
      "dependencies": {
        "@cospired/i18n-iso-languages": "4.1.0",
        "@formatjs/intl-pluralrules": "4.3.3",
@@ -3653,7 +3653,7 @@
      },
      "peerDependencies": {
        "@edx/frontend-build": ">= 8.1.0 || ^12.9.0-alpha.1",
-        "@edx/paragon": ">= 10.0.0 < 21.0.0",
+        "@edx/paragon": ">= 10.0.0 < 22.0.0",
        "prop-types": "^15.7.2",
        "react": "^16.9.0 || ^17.0.0",
        "react-dom": "^16.9.0 || ^17.0.0",
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
    "@edx/frontend-component-header": "4.6.0",
    "@edx/frontend-lib-learning-assistant": "^1.14.0",
    "@edx/frontend-lib-special-exams": "2.23.2",
-    "@edx/frontend-platform": "5.0.0",
+    "@edx/frontend-platform": "5.5.2",
    "@edx/paragon": "20.46.0",
    "@edx/react-unit-test-utils": "npm:@edx/react-unit-test-utils@1.7.0",
    "@fortawesome/fontawesome-svg-core": "1.3.0",
--- a/src/course-home/dates-tab/timeline/badgelist.jsx
+++ b/src/course-home/dates-tab/timeline/badgelist.jsx
@@ -38,21 +38,21 @@ function getBadgeListAndColor(date, intl, item, items) {
      message: messages.today,
      shownForDay: isToday,
      bg: 'bg-warning-300',
-      className: 'text-black',
+      className: 'text-dark',
    },
    {
      message: messages.completed,
      shownForDay: assignments.length && assignments.every(isComplete),
      shownForItem: x => isLearnerAssignment(x) && isComplete(x),
      bg: 'bg-light-500',
-      className: 'text-black',
+      className: 'text-dark',
    },
    {
      message: messages.pastDue,
      shownForDay: assignments.length && assignments.every(isPastDue),
      shownForItem: x => isLearnerAssignment(x) && isPastDue(x),
      bg: 'bg-dark-200',
-      className: 'text-white',
+      className: 'text-dark',
    },
    {
      message: messages.dueNext,
--- a/src/course-home/outline-tab/LmsHtmlFragment.jsx
+++ b/src/course-home/outline-tab/LmsHtmlFragment.jsx
@@ -9,8 +9,9 @@ const LmsHtmlFragment = ({
  title,
  ...rest
 }) => {
+  const direction = document.documentElement?.getAttribute('dir') || 'ltr';
  const wholePage = `
-    <html>
+    <html dir="${direction}">
      <head>
        <base href="${getConfig().LMS_BASE_URL}" target="_parent">
        <link rel="stylesheet" href="/static/${getConfig().LEGACY_THEME_NAME ? `${getConfig().LEGACY_THEME_NAME}/` : ''}css/bootstrap/lms-main.css">
--- a/src/course-home/progress-tab/ProgressTab.jsx
+++ b/src/course-home/progress-tab/ProgressTab.jsx
@@ -18,7 +18,7 @@ const ProgressTab = () => {
  } = useSelector(state => state.courseHome);

  const {
-    gradesFeatureIsFullyLocked,
+    gradesFeatureIsFullyLocked, disableProgressGraph,
  } = useModel('progress', courseId);

  const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
@@ -38,7 +38,7 @@ const ProgressTab = () => {
      <div className="row w-100 m-0">
        {/* Main body */}
        <div className="col-12 col-md-8 p-0">
-          <CourseCompletion />
+          {!disableProgressGraph && <CourseCompletion />}
          {!wideScreen && <CertificateStatus />}
          <CourseGrade />
          <div className={`grades my-4 p-4 rounded raised-card ${applyLockedOverlay}`} aria-hidden={gradesFeatureIsFullyLocked}>
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -140,26 +140,28 @@ const Sequence = ({
  const gated = sequence && sequence.gatedContent !== undefined && sequence.gatedContent.gated;

  const defaultContent = (
-    <div className="sequence-container d-inline-flex flex-row">
+    <div className="sequence-container d-inline-flex flex-row w-100">
      <div className={classNames('sequence w-100', { 'position-relative': shouldDisplayNotificationTriggerInSequence })}>
-        <SequenceNavigation
-          sequenceId={sequenceId}
-          unitId={unitId}
-          className="mb-4"
-          nextHandler={() => {
-            logEvent('edx.ui.lms.sequence.next_selected', 'top');
-            handleNext();
-          }}
-          onNavigate={(destinationUnitId) => {
-            logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId);
-            handleNavigate(destinationUnitId);
-          }}
-          previousHandler={() => {
-            logEvent('edx.ui.lms.sequence.previous_selected', 'top');
-            handlePrevious();
-          }}
-        />
-        {shouldDisplayNotificationTriggerInSequence && <SidebarTriggers />}
+        <div className="sequence-navigation-container">
+          <SequenceNavigation
+            sequenceId={sequenceId}
+            unitId={unitId}
+            className="mb-4"
+            nextHandler={() => {
+              logEvent('edx.ui.lms.sequence.next_selected', 'top');
+              handleNext();
+            }}
+            onNavigate={(destinationUnitId) => {
+              logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId);
+              handleNavigate(destinationUnitId);
+            }}
+            previousHandler={() => {
+              logEvent('edx.ui.lms.sequence.previous_selected', 'top');
+              handlePrevious();
+            }}
+          />
+          {shouldDisplayNotificationTriggerInSequence && <SidebarTriggers />}
+        </div>

        <div className="unit-container flex-grow-1">
          <SequenceContent
--- a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js
+++ b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js
@@ -50,12 +50,6 @@ const useIFrameBehavior = ({
    if (type === messageTypes.resize) {
      setIframeHeight(payload.height);

-      // We observe exit from the video xblock fullscreen mode
-      // and scroll to the previously saved scroll position
-      if (windowTopOffset !== null) {
-        window.scrollTo(0, Number(windowTopOffset));
-      }
-
      if (!hasLoaded && iframeHeight === 0 && payload.height > 0) {
        setHasLoaded(true);
        if (onLoaded) {
@@ -63,6 +57,12 @@ const useIFrameBehavior = ({
        }
      }
    } else if (type === messageTypes.videoFullScreen) {
+      // We observe exit from the video xblock fullscreen mode
+      // and scroll to the previously saved scroll position
+      if (!payload.open && windowTopOffset !== null) {
+        window.scrollTo(0, Number(windowTopOffset));
+      }
+
      // We listen for this message from LMS to know when we need to
      // save or reset scroll position on toggle video xblock fullscreen mode
      setWindowTopOffset(payload.open ? window.scrollY : null);
--- a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js
+++ b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js
@@ -154,6 +154,9 @@ describe('useIFrameBehavior hook', () => {
        const resizeMessage = (height = 23) => ({
          data: { type: messageTypes.resize, payload: { height } },
        });
+        const videoFullScreenMessage = (open = false) => ({
+          data: { type: messageTypes.videoFullScreen, payload: { open } },
+        });
        const testSetIFrameHeight = (height = 23) => {
          const { cb } = useEventListener.mock.calls[0][1];
          cb(resizeMessage(height));
@@ -209,7 +212,7 @@ describe('useIFrameBehavior hook', () => {
          state.mockVals({ ...defaultStateVals, windowTopOffset });
          hook = useIFrameBehavior(props);
          const { cb } = useEventListener.mock.calls[0][1];
-          cb(resizeMessage());
+          cb(videoFullScreenMessage());
          expect(window.scrollTo).toHaveBeenCalledWith(0, windowTopOffset);
        });
        it('does not scroll if towverticalp offset is not set', () => {
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -106,11 +106,10 @@ const SequenceNavigation = ({
  };

  return sequenceStatus === LOADED && (
-    <nav id="courseware-sequenceNavigation" className={classNames('sequence-navigation', className)} style={{ width: shouldDisplayNotificationTriggerInSequence ? '90%' : null }}>
+    <nav id="courseware-sequenceNavigation" className={classNames('sequence-navigation', className, { 'mr-2': shouldDisplayNotificationTriggerInSequence })}>
      {renderPreviousButton()}
      {renderUnitButtons()}
      {renderNextButton()}
-
    </nav>
  );
 };
--- a/src/courseware/course/sidebar/SidebarTriggers.jsx
+++ b/src/courseware/course/sidebar/SidebarTriggers.jsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React, { useContext } from 'react';
+import { breakpoints, useWindowSize } from '@edx/paragon';
 import SidebarContext from './SidebarContext';
 import { SIDEBAR_ORDER, SIDEBARS } from './sidebars';

@@ -8,6 +9,9 @@ const SidebarTriggers = () => {
    toggleSidebar,
    currentSidebar,
  } = useContext(SidebarContext);
+
+  const isMobileView = useWindowSize().width < breakpoints.small.minWidth;
+
  return (
    <div className="d-flex ml-auto">
      {SIDEBAR_ORDER.map((sidebarId) => {
@@ -15,7 +19,7 @@ const SidebarTriggers = () => {
        const isActive = sidebarId === currentSidebar;
        return (
          <div
-            className={classNames('mt-3', { 'border-primary-700': isActive })}
+            className={classNames({ 'mt-3': !isMobileView, 'border-primary-700': isActive })}
            style={{ borderBottom: isActive ? '2px solid' : null }}
            key={sidebarId}
          >
--- a/src/courseware/course/sidebar/common/TriggerBase.jsx
+++ b/src/courseware/course/sidebar/common/TriggerBase.jsx
@@ -8,7 +8,7 @@ const SidebarTriggerBase = ({
  children,
 }) => (
  <button
-    className="border border-light-400 bg-transparent align-items-center align-content-center d-flex"
+    className="border border-light-400 bg-transparent align-items-center align-content-center d-flex notification-btn"
    type="button"
    onClick={onClick}
    aria-label={ariaLabel}
--- a/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss
+++ b/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss
@@ -0,0 +1,5 @@
+.discussions-sidebar-frame {
+    @media (max-width: -1 + map-get($grid-breakpoints, "xl")) {
+        max-height: calc(100vh - 65px);
+    }
+}
--- a/src/courseware/course/sidebar/sidebars/discussions/DiscussionsSidebar.jsx
+++ b/src/courseware/course/sidebar/sidebars/discussions/DiscussionsSidebar.jsx
@@ -32,7 +32,7 @@ const DiscussionsSidebar = ({ intl }) => {
    >
      <iframe
        src={`${discussionsUrl}?inContextSidebar`}
-        className="d-flex w-100 h-100 border-0"
+        className="d-flex w-100 h-100 border-0 discussions-sidebar-frame"
        title={intl.formatMessage(messages.discussionsTitle)}
        allow="clipboard-write"
        loading="lazy"
--- a/src/generic/tabs/useIndexOfLastVisibleChild.js
+++ b/src/generic/tabs/useIndexOfLastVisibleChild.js
@@ -6,6 +6,7 @@ const invisibleStyle = {
  left: 0,
  pointerEvents: 'none',
  visibility: 'hidden',
+  maxWidth: '100%',
 };

 /**
--- a/src/generic/upgrade-notification/UpgradeNotification.scss
+++ b/src/generic/upgrade-notification/UpgradeNotification.scss
@@ -22,9 +22,8 @@
 // An additional Font Awesome stylesheet is imported by Braze in
 // stage/production but not devstack.
 .upgrade-notification-ul.fa-ul {
-  padding-left: 1.25rem;
-  padding-top: 0.875rem;
-  padding-right: 1.25rem;
+  padding: 0.875rem 1.25rem 0;
+  margin: 0 0 1rem 2.5rem;
 }

 .upgrade-notification-text {
--- a/src/index.scss
+++ b/src/index.scss
@@ -84,7 +84,6 @@
  flex-direction: column;
  flex-grow: 1;
  margin-bottom: 4rem;
-  width: 100%;
  margin-right: auto;
  margin-left: auto;
 }
@@ -96,8 +95,24 @@
  }
 }

+.sequence-navigation-container {
+  display: flex;
+  align-items: flex-start;
+}
+
+.notification-btn {
+  @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+    height: 3rem;
+  }
+}
+
 .sequence-navigation {
  display: flex;
+  flex-grow: 1;
+
+  @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+    max-width: 100%;
+  }

  @media (min-width: map-get($grid-breakpoints, "sm")) {
    margin: -1px -1px 0;
@@ -165,9 +180,10 @@
  }

  .sequence-navigation-tabs {
+    overflow: auto;
    .btn {
      flex-basis: 100%;
-      min-width: 2rem;
+      min-width: 3rem;
    }
  }

@@ -377,6 +393,7 @@

 // Import component-specific sass files
@import "courseware/course/celebration/CelebrationModal.scss";
+@import "courseware/course/sidebar/sidebars/discussions/Discussions.scss";
@import "courseware/course/sidebar/sidebars/notifications/NotificationIcon.scss";
@import "courseware/course/sequence/lock-paywall/LockPaywall.scss";
@import "shared/streak-celebration/StreakCelebrationModal.scss";
@@ -386,7 +403,7 @@
@import "generic/upgrade-notification/UpgradeNotification.scss";
@import "generic/upsell-bullets/UpsellBullets.scss";
@import "course-home/outline-tab/widgets/ProctoringInfoPanel.scss";
-@import "src/course-home/outline-tab/widgets/FlagButton.scss";
+@import "course-home/outline-tab/widgets/FlagButton.scss";
@import "course-home/progress-tab/course-completion/CompletionDonutChart.scss";
@import "course-home/progress-tab/grades/course-grade/GradeBar.scss";
@import "courseware/course/course-exit/CourseRecommendations";
Author	SHA1	Message	Date
Ihor Romaniuk	7c1c0d3a91	fix: iframe height for discussions sidebar (#1392 ) * fix: iframe height for discussions sidebar * fix: increase adaptation brakepoint	2024-08-08 15:50:33 -04:00
Ihor Romaniuk	37c28b6f7b	fix: optimize scroll position observer after video fullscreen exit (#1370 )	2024-06-06 09:08:42 -03:00
Ihor Romaniuk	fbb3ed5101	fix: RTL for the upgrade notification list (#1228 )	2024-04-07 16:14:13 +03:00
Ihor Romaniuk	887335f1bb	fix: wrong text-color class and text contrast on dates page (#1229 )	2024-03-22 11:03:51 -04:00
Ihor Romaniuk	c8ab1634e1	fix: sequence container width and responsive for sequence navigation block (#1227 )	2024-03-13 13:30:19 -03:00
Eugene Dyudyunov	7ff00fa830	fix: correct rtl for handouts	2024-03-11 09:53:00 -04:00
Rafay	3b409b0c7a	fix: make progress graph respect course settings (#1194 )	2024-03-04 13:32:32 -03:00
Syed Ali Abbas Zaidi	b24568f0bd	chore: bump frontend-platform (#1209 )	2023-10-18 11:13:06 +05:00