From e1c78dda6eccb0118b19e74a8d825c46af74ce60 Mon Sep 17 00:00:00 2001 From: ayesha waris <73840786+ayesha-waris@users.noreply.github.com> Date: Mon, 8 Apr 2024 23:43:24 +0500 Subject: [PATCH] fix: fixed limited content visibility due to oversized sidebar (#692) * fix: fixed limited content visibility due to oversized sidebar * refactor: changed names of constants --------- Co-authored-by: Awais Ansari <79941147+awais-ansari@users.noreply.github.com> --- .../content-unavailable/ContentUnavailable.jsx | 8 ++++---- src/discussions/data/hooks.js | 9 +++++++-- src/discussions/discussions-home/DiscussionSidebar.jsx | 8 ++++++-- src/discussions/discussions-home/DiscussionsHome.jsx | 6 +++--- src/discussions/empty-posts/EmptyLearners.jsx | 6 +++--- src/discussions/empty-posts/EmptyPosts.jsx | 6 +++--- src/discussions/empty-posts/EmptyTopics.jsx | 6 +++--- .../in-context-topics/components/EmptyTopics.jsx | 6 +++--- src/discussions/post-comments/PostCommentsView.jsx | 6 +++--- src/index.scss | 10 +++++----- 10 files changed, 40 insertions(+), 31 deletions(-) diff --git a/src/discussions/content-unavailable/ContentUnavailable.jsx b/src/discussions/content-unavailable/ContentUnavailable.jsx index 5e157e57c..3474aafa0 100644 --- a/src/discussions/content-unavailable/ContentUnavailable.jsx +++ b/src/discussions/content-unavailable/ContentUnavailable.jsx @@ -10,12 +10,12 @@ import { useIntl } from '@edx/frontend-platform/i18n'; import ContentUnavailableIcon from '../../assets/ContentUnavailable'; import selectCourseTabs from '../../components/NavigationBar/data/selectors'; -import { useIsOnDesktop, useIsOnXLDesktop } from '../data/hooks'; +import { useIsOnTablet, useIsOnXLDesktop } from '../data/hooks'; import messages from '../messages'; const ContentUnavailable = ({ subTitleMessage }) => { const intl = useIntl(); - const isOnDesktop = useIsOnDesktop(); + const isOnTabletorDesktop = useIsOnTablet(); const isOnXLDesktop = useIsOnXLDesktop(); const { courseId } = useSelector(selectCourseTabs); @@ -26,8 +26,8 @@ const ContentUnavailable = ({ subTitleMessage }) => { return (
diff --git a/src/discussions/data/hooks.js b/src/discussions/data/hooks.js index 2ac3f0fe0..2576824bb 100644 --- a/src/discussions/data/hooks.js +++ b/src/discussions/data/hooks.js @@ -131,12 +131,17 @@ export function useRedirectToThread(courseId, enableInContextSidebar) { export function useIsOnDesktop() { const windowSize = useWindowSize(); - return windowSize.width >= breakpoints.medium.minWidth; + return windowSize.width >= breakpoints.medium.maxWidth; +} + +export function useIsOnTablet() { + const windowSize = useWindowSize(); + return windowSize.width >= breakpoints.small.maxWidth; } export function useIsOnXLDesktop() { const windowSize = useWindowSize(); - return windowSize.width >= breakpoints.extraLarge.minWidth; + return windowSize.width >= breakpoints.extraLarge.maxWidth; } /** diff --git a/src/discussions/discussions-home/DiscussionSidebar.jsx b/src/discussions/discussions-home/DiscussionSidebar.jsx index f18a03a0f..07f20a822 100644 --- a/src/discussions/discussions-home/DiscussionSidebar.jsx +++ b/src/discussions/discussions-home/DiscussionSidebar.jsx @@ -13,7 +13,9 @@ import { import Spinner from '../../components/Spinner'; import { RequestStatus, Routes as ROUTES } from '../../data/constants'; import DiscussionContext from '../common/context'; -import { useContainerSize, useIsOnDesktop, useIsOnXLDesktop } from '../data/hooks'; +import { + useContainerSize, useIsOnDesktop, useIsOnTablet, useIsOnXLDesktop, +} from '../data/hooks'; import { selectConfigLoadingStatus, selectEnableInContext } from '../data/selectors'; const TopicPostsView = lazy(() => import('../in-context-topics/TopicPostsView')); @@ -26,6 +28,7 @@ const LegacyTopicsView = lazy(() => import('../topics/TopicsView')); const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => { const isOnDesktop = useIsOnDesktop(); const isOnXLDesktop = useIsOnXLDesktop(); + const isOnTablet = useIsOnTablet(); const { enableInContextSidebar } = useContext(DiscussionContext); const enableInContext = useSelector(selectEnableInContext); const configStatus = useSelector(selectConfigLoadingStatus); @@ -50,7 +53,8 @@ const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => { 'd-none': !displaySidebar, 'd-flex overflow-auto box-shadow-centered-1': displaySidebar, 'w-100': !isOnDesktop, - 'w-25 sidebar-desktop-width': isOnDesktop && !isOnXLDesktop, + 'sidebar-desktop-width': isOnDesktop && !isOnXLDesktop, + 'sidebar-tablet-width': isOnTablet && !isOnDesktop, 'w-25 sidebar-XL-width': isOnXLDesktop, 'min-content-height': !enableInContextSidebar, })} diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/src/discussions/discussions-home/DiscussionsHome.jsx index a3ba4bfee..65b1543a0 100644 --- a/src/discussions/discussions-home/DiscussionsHome.jsx +++ b/src/discussions/discussions-home/DiscussionsHome.jsx @@ -16,7 +16,7 @@ import { ALL_ROUTES, DiscussionProvider, Routes as ROUTES } from '../../data/con import DiscussionContext from '../common/context'; import ContentUnavailable from '../content-unavailable/ContentUnavailable'; import { - useCourseBlockData, useCourseDiscussionData, useIsOnDesktop, useRedirectToThread, useSidebarVisible, + useCourseBlockData, useCourseDiscussionData, useIsOnTablet, useRedirectToThread, useSidebarVisible, } from '../data/hooks'; import { selectDiscussionProvider, selectEnableInContext, selectIsUserLearner } from '../data/selectors'; import { EmptyLearners, EmptyTopics } from '../empty-posts'; @@ -51,7 +51,7 @@ const DiscussionsHome = () => { const page = pageParams?.page || null; const matchPattern = ALL_ROUTES.find((route) => matchPath({ path: route }, location.pathname)); const { params } = useMatch(matchPattern); - const isOnDesktop = useIsOnDesktop(); + const isOnTabletorDesktop = useIsOnTablet(); let displaySidebar = useSidebarVisible(); const enableInContextSidebar = Boolean(new URLSearchParams(location.search).get('inContextSidebar') !== null); const { @@ -66,7 +66,7 @@ const DiscussionsHome = () => { If the window is larger than a particular size, show the sidebar for navigating between posts/topics. However, for smaller screens or embeds, only show the sidebar if the content area isn't displayed. */ const displayContentArea = (postId || postEditorVisible || (learnerUsername && postId)); - if (displayContentArea) { displaySidebar = isOnDesktop; } + if (displayContentArea) { displaySidebar = isOnTabletorDesktop; } const discussionContextValue = useMemo(() => ({ page, diff --git a/src/discussions/empty-posts/EmptyLearners.jsx b/src/discussions/empty-posts/EmptyLearners.jsx index 7274d1b6a..9093d7134 100644 --- a/src/discussions/empty-posts/EmptyLearners.jsx +++ b/src/discussions/empty-posts/EmptyLearners.jsx @@ -2,15 +2,15 @@ import React from 'react'; import { useIntl } from '@edx/frontend-platform/i18n'; -import { useIsOnDesktop } from '../data/hooks'; +import { useIsOnTablet } from '../data/hooks'; import messages from '../messages'; import EmptyPage from './EmptyPage'; const EmptyLearners = () => { const intl = useIntl(); - const isOnDesktop = useIsOnDesktop(); + const isOnTabletorDesktop = useIsOnTablet(); - if (!isOnDesktop) { + if (!isOnTabletorDesktop) { return null; } diff --git a/src/discussions/empty-posts/EmptyPosts.jsx b/src/discussions/empty-posts/EmptyPosts.jsx index e5d7ccf60..92da03abb 100644 --- a/src/discussions/empty-posts/EmptyPosts.jsx +++ b/src/discussions/empty-posts/EmptyPosts.jsx @@ -5,7 +5,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { useIntl } from '@edx/frontend-platform/i18n'; -import { useIsOnDesktop } from '../data/hooks'; +import { useIsOnTablet } from '../data/hooks'; import { selectAreThreadsFiltered, selectPostThreadCount } from '../data/selectors'; import messages from '../messages'; import { showPostEditor } from '../posts/data'; @@ -15,7 +15,7 @@ import EmptyPage from './EmptyPage'; const EmptyPosts = ({ subTitleMessage }) => { const intl = useIntl(); const dispatch = useDispatch(); - const isOnDesktop = useIsOnDesktop(); + const isOnTabletorDesktop = useIsOnTablet(); const isFiltered = useSelector(selectAreThreadsFiltered); const totalThreads = useSelector(selectPostThreadCount); @@ -31,7 +31,7 @@ const EmptyPosts = ({ subTitleMessage }) => { const isEmpty = [0, null].includes(totalThreads) && !isFiltered; - if (!(isOnDesktop || isEmpty)) { + if (!(isOnTabletorDesktop || isEmpty)) { return null; } if (isEmpty) { subTitle = subTitleMessage; diff --git a/src/discussions/empty-posts/EmptyTopics.jsx b/src/discussions/empty-posts/EmptyTopics.jsx index d662f0d49..65afc7c52 100644 --- a/src/discussions/empty-posts/EmptyTopics.jsx +++ b/src/discussions/empty-posts/EmptyTopics.jsx @@ -5,7 +5,7 @@ import { useParams } from 'react-router-dom'; import { useIntl } from '@edx/frontend-platform/i18n'; -import { useIsOnDesktop, useTotalTopicThreadCount } from '../data/hooks'; +import { useIsOnTablet, useTotalTopicThreadCount } from '../data/hooks'; import { selectTopicThreadCount } from '../data/selectors'; import messages from '../messages'; import { showPostEditor } from '../posts/data'; @@ -16,7 +16,7 @@ const EmptyTopics = () => { const intl = useIntl(); const { topicId } = useParams(); const dispatch = useDispatch(); - const isOnDesktop = useIsOnDesktop(); + const isOnTabletorDesktop = useIsOnTablet(); const hasGlobalThreads = useTotalTopicThreadCount() > 0; const topicThreadCount = useSelector(selectTopicThreadCount(topicId)); @@ -30,7 +30,7 @@ const EmptyTopics = () => { let action; let actionText; - if (!isOnDesktop) { + if (!isOnTabletorDesktop) { return null; } diff --git a/src/discussions/in-context-topics/components/EmptyTopics.jsx b/src/discussions/in-context-topics/components/EmptyTopics.jsx index 6ecc9f2b6..14d63ad3d 100644 --- a/src/discussions/in-context-topics/components/EmptyTopics.jsx +++ b/src/discussions/in-context-topics/components/EmptyTopics.jsx @@ -6,7 +6,7 @@ import { useParams } from 'react-router-dom'; import { useIntl } from '@edx/frontend-platform/i18n'; import DiscussionContext from '../../common/context'; -import { useIsOnDesktop } from '../../data/hooks'; +import { useIsOnTablet } from '../../data/hooks'; import { selectPostThreadCount } from '../../data/selectors'; import EmptyPage from '../../empty-posts/EmptyPage'; import messages from '../../messages'; @@ -17,7 +17,7 @@ const EmptyTopics = () => { const intl = useIntl(); const { category, topicId } = useParams(); const dispatch = useDispatch(); - const isOnDesktop = useIsOnDesktop(); + const isOnTabletorDesktop = useIsOnTablet(); const { enableInContextSidebar } = useContext(DiscussionContext); const courseWareThreadsCount = useSelector(selectCourseWareThreadsCount(category)); const topicThreadsCount = useSelector(selectPostThreadCount); @@ -34,7 +34,7 @@ const EmptyTopics = () => { let action; let actionText; - if (!isOnDesktop) { + if (!isOnTabletorDesktop) { return null; } diff --git a/src/discussions/post-comments/PostCommentsView.jsx b/src/discussions/post-comments/PostCommentsView.jsx index f5bb12c4d..d224ac18f 100644 --- a/src/discussions/post-comments/PostCommentsView.jsx +++ b/src/discussions/post-comments/PostCommentsView.jsx @@ -12,7 +12,7 @@ import Spinner from '../../components/Spinner'; import { PostsPages } from '../../data/constants'; import useDispatchWithState from '../../data/hooks'; import DiscussionContext from '../common/context'; -import { useIsOnDesktop } from '../data/hooks'; +import { useIsOnTablet } from '../data/hooks'; import { EmptyPage } from '../empty-posts'; import { Post } from '../posts'; import { fetchThread } from '../posts/data/thunks'; @@ -29,7 +29,7 @@ const PostCommentsView = () => { const intl = useIntl(); const navigate = useNavigate(); const location = useLocation(); - const isOnDesktop = useIsOnDesktop(); + const isOnTabletorDesktop = useIsOnTablet(); const [addingResponse, setAddingResponse] = useState(false); const [isLoading, submitDispatch] = useDispatchWithState(); const { @@ -84,7 +84,7 @@ const PostCommentsView = () => { return ( - {!isOnDesktop && ( + {!isOnTabletorDesktop && ( enableInContextSidebar ? ( <>
diff --git a/src/index.scss b/src/index.scss index aff2bc5e5..7e118aae8 100755 --- a/src/index.scss +++ b/src/index.scss @@ -229,15 +229,15 @@ header { } .sidebar-desktop-width { - min-width: 29rem !important; + max-width: 28rem !important; +} - @include media-breakpoint-down(lg) { - min-width: 25rem !important; - } +.sidebar-tablet-width { + max-width: 20rem !important; } .sidebar-XL-width { - min-width: 29rem !important; + min-width: 35rem !important; } .filter-menu:focus-visible {