diff --git a/src/discussions/data/hooks.js b/src/discussions/data/hooks.js index c933e71a..fce41b21 100644 --- a/src/discussions/data/hooks.js +++ b/src/discussions/data/hooks.js @@ -1,5 +1,7 @@ /* eslint-disable import/prefer-default-export */ -import { useContext, useEffect, useRef } from 'react'; +import { + useContext, useEffect, useRef, useState, +} from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory, useLocation, useRouteMatch } from 'react-router'; @@ -13,7 +15,7 @@ import { fetchCourseBlocks } from '../../data/thunks'; import { clearRedirect } from '../posts/data'; import { selectTopics } from '../topics/data/selectors'; import { fetchCourseTopics } from '../topics/data/thunks'; -import { discussionsPath, postMessageToParent } from '../utils'; +import { discussionsPath } from '../utils'; import { selectAreThreadsFiltered, selectLearnersTabEnabled, selectModerationSettings, @@ -99,58 +101,37 @@ export function useIsOnXLDesktop() { return windowSize.width >= breakpoints.extraLarge.minWidth; } -/** - * Given an element this attempts to get the height of the entire UI. - * - * @param element - * @returns {number} - */ -function getOuterHeight(element) { - // This is the height of the entire document body. - const bodyHeight = document.body.offsetHeight; - // This is the height of the container that will scroll. - const elementContainerHeight = element.parentNode.clientHeight; - // The difference between the body height and the container height is the size of the header footer etc. - // Add to that the element's own height and we get the size the UI should be to fit everything. - return bodyHeight - elementContainerHeight + element.scrollHeight + 10; -} - /** * This hook posts a resize message to the parent window if running in an iframe * @param refContainer reference to the component whose size is to be measured */ export function useContainerSizeForParent(refContainer) { - function postResizeMessage(height) { - postMessageToParent('plugin.resize', { height }); - } - const location = useLocation(); - const enabled = window.parent !== window; + const [height, setHeight] = useState(); const resizeObserver = useRef(new ResizeObserver(() => { /* istanbul ignore if: ResizeObserver isn't available in the testing env */ if (refContainer.current) { - postResizeMessage(getOuterHeight(refContainer.current)); + setHeight(refContainer.current.clientHeight); } })); useEffect(() => { const container = refContainer.current; const observer = resizeObserver.current; - if (container && observer && enabled) { + if (container && observer) { observer.observe(container); - postResizeMessage(getOuterHeight(container)); + setHeight(container.clientHeight); } return () => { - if (container && observer && enabled) { + if (container && observer) { observer.unobserve(container); - // Send a message to reset the size so that navigating to another - // page doesn't cause the size to be retained - postResizeMessage(null); } }; }, [refContainer, resizeObserver, location]); + + return height; } export const useAlertBannerVisible = (content) => { diff --git a/src/discussions/discussions-home/DiscussionContent.jsx b/src/discussions/discussions-home/DiscussionContent.jsx index 04563b19..af142c2a 100644 --- a/src/discussions/discussions-home/DiscussionContent.jsx +++ b/src/discussions/discussions-home/DiscussionContent.jsx @@ -1,4 +1,4 @@ -import React, { useContext, useRef } from 'react'; +import React, { useContext } from 'react'; import { useSelector } from 'react-redux'; import { Route, Switch } from 'react-router'; @@ -11,7 +11,7 @@ import { ArrowBack } from '@edx/paragon/icons'; import { PostsPages, Routes } from '../../data/constants'; import { CommentsView } from '../comments'; import { DiscussionContext } from '../common/context'; -import { useContainerSizeForParent, useIsOnDesktop } from '../data/hooks'; +import { useIsOnDesktop } from '../data/hooks'; import messages from '../messages'; import { PostEditor } from '../posts'; import { discussionsPath } from '../utils'; @@ -19,17 +19,15 @@ import { discussionsPath } from '../utils'; function DiscussionContent({ intl }) { const location = useLocation(); const history = useHistory(); - const refContainer = useRef(null); const postEditorVisible = useSelector((state) => state.threads.postEditorVisible); const isOnDesktop = useIsOnDesktop(); const { courseId, learnerUsername, category, topicId, page, } = useContext(DiscussionContext); - useContainerSizeForParent(refContainer); return ( -
-
+
+
{!isOnDesktop && ( { + if (sidebarRef && postActionBarHeight) { + if (isOnDesktop) { + sidebarRef.current.style.maxHeight = `${document.body.offsetHeight - postActionBarHeight}px`; + } + sidebarRef.current.style.minHeight = `${document.body.offsetHeight - postActionBarHeight}px`; + sidebarRef.current.style.top = `${postActionBarHeight}px`; + } + }, [sidebarRef, postActionBarHeight]); + return (
state.threads.postEditorVisible, ); @@ -82,10 +83,10 @@ export default function DiscussionsHome() { }} > {!inIframe &&
} -
+
{!inIframe && } -
+
@@ -100,8 +101,8 @@ export default function DiscussionsHome() { path={[Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]} component={provider === DiscussionProvider.LEGACY ? LegacyBreadcrumbMenu : BreadcrumbMenu} /> -
- +
+ {displayContentArea && } {!displayContentArea && ( diff --git a/src/discussions/empty-posts/EmptyPage.jsx b/src/discussions/empty-posts/EmptyPage.jsx index 0b82bbdf..015db5bd 100644 --- a/src/discussions/empty-posts/EmptyPage.jsx +++ b/src/discussions/empty-posts/EmptyPage.jsx @@ -15,7 +15,7 @@ function EmptyPage({ fullWidth = false, }) { const containerClasses = classNames( - 'justify-content-center align-items-center d-flex w-100 flex-column pt-5', + 'min-content-height justify-content-center align-items-center d-flex w-100 flex-column pt-5', { 'bg-light-400': !fullWidth }, ); diff --git a/src/index.scss b/src/index.scss index 1433f9a9..58767980 100755 --- a/src/index.scss +++ b/src/index.scss @@ -220,3 +220,15 @@ header { } }; } + +.min-content-height { + min-height: 80vh; +} + +.header-action-bar { + background-color: #fff; + z-index: 1; + box-shadow: 0px 2px 4px rgb(0 0 0 / 15%), 0px 2px 8px rgb(0 0 0 / 15%); + position: sticky; + top: 0; +}