fix: fixed limited content visibility due to oversized sidebar (opene…

…dx#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>

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 (
     <div className="min-content-height justify-content-center align-items-center d-flex w-100 flex-column bg-white">
       <div className={classNames('d-flex flex-column align-items-center', {
-        'content-unavailable-desktop': isOnDesktop || isOnXLDesktop,
-        'py-0 px-3': !isOnDesktop && !isOnXLDesktop,
+        'content-unavailable-desktop': isOnTabletorDesktop || isOnXLDesktop,
+        'py-0 px-3': !isOnTabletorDesktop && !isOnXLDesktop,
       })}
       >
         <ContentUnavailableIcon />

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;
 }
 
 /**

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,
       })}

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,

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;
   }
 

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;

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;
   }
 

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;
   }
 

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 (
     <PostCommentsContext.Provider value={postCommentsContextValue}>
-      {!isOnDesktop && (
+      {!isOnTabletorDesktop && (
         enableInContextSidebar ? (
           <>
             <div className="px-4 py-1.5 bg-white">

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 {