Andal.LND/frontend-app-learning
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fixed overflow issue of stacked bar on mobile (#1425)

Browse Source 
* fix: fixed overflow issue of stacked bar on mobile

* refactor: instead of ismobileview i used shouldDisplayFullScreen
This commit is contained in:
sundasnoreen12
2024-07-30 13:53:12 +05:00
committed by GitHub
parent 167d51b596
commit bbe03dc46f
4 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/courseware/course/new-sidebar/SidebarContextProvider.jsx
View File

@@ -75,11 +75,11 @@ const SidebarProvider = ({
}, [currentSidebar, isDiscussionbarAvailable, isNotificationbarAvailable]); }, [currentSidebar, isDiscussionbarAvailable, isNotificationbarAvailable]);
const clearSidebarKeyIfWidgetsUnavailable = useCallback((widgetId) => { const clearSidebarKeyIfWidgetsUnavailable = useCallback((widgetId) => {
if ((!isNotificationbarAvailable && widgetId === WIDGETS.DISCUSSIONS) if (((!isNotificationbarAvailable || hideNotificationbar) && widgetId === WIDGETS.DISCUSSIONS)
|| (!isDiscussionbarAvailable && widgetId === WIDGETS.NOTIFICATIONS)) { || ((!isDiscussionbarAvailable || hideDiscussionbar) && widgetId === WIDGETS.NOTIFICATIONS)) {
setLocalStorage(sidebarKey, null); setLocalStorage(sidebarKey, null);
} }
}, [isDiscussionbarAvailable, isNotificationbarAvailable]); }, [isDiscussionbarAvailable, isNotificationbarAvailable, hideDiscussionbar, hideNotificationbar]);
const toggleSidebar = useCallback((sidebarId = null, widgetId = null) => { const toggleSidebar = useCallback((sidebarId = null, widgetId = null) => {
if (widgetId) { if (widgetId) {

2
src/courseware/course/new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsSidebar.jsx
View File

@@ -17,7 +17,7 @@ const DiscussionsNotificationsSidebar = () => {
<SidebarBase <SidebarBase
ariaLabel={intl.formatMessage(messages.discussionNotificationTray)} ariaLabel={intl.formatMessage(messages.discussionNotificationTray)}
sidebarId={ID} sidebarId={ID}
className="d-flex flex-column flex-fill" className="d-flex flex-column flex-fill overflow-auto"
showTitleBar={false} showTitleBar={false}
showBorder={false} showBorder={false}
> >

6
src/courseware/course/new-sidebar/sidebars/discussions-notifications/discussions/DiscussionsWidget.jsx
View File

@@ -3,6 +3,7 @@ import React, { useContext } from 'react';
import { ensureConfig, getConfig } from '@edx/frontend-platform'; import { ensureConfig, getConfig } from '@edx/frontend-platform';
import { useIntl } from '@edx/frontend-platform/i18n'; import { useIntl } from '@edx/frontend-platform/i18n';
import classNames from 'classnames'; import classNames from 'classnames';
import SidebarContext from '../../../SidebarContext'; import SidebarContext from '../../../SidebarContext';
import messages from '../../../messages'; import messages from '../../../messages';
@@ -24,7 +25,10 @@ const DiscussionsWidget = () => {
return ( return (
<iframe <iframe
src={`${discussionsUrl}?inContextSidebar`} src={`${discussionsUrl}?inContextSidebar`}
className={classNames('d-flex w-100 flex-fill border border-light-400 rounded-sm', { 'vh-100': !shouldDisplayFullScreen })} className={classNames('d-flex w-100 flex-fill border border-light-400 rounded-sm', {
'vh-100': !shouldDisplayFullScreen,
'min-height-700': shouldDisplayFullScreen,
})}
title={intl.formatMessage(messages.discussionsTitle)} title={intl.formatMessage(messages.discussionsTitle)}
allow="clipboard-write" allow="clipboard-write"
loading="lazy" loading="lazy"

4
src/index.scss
View File

@@ -430,6 +430,10 @@
top: 0; top: 0;
} }
.min-height-700 {
min-height: 700px;
}
// Import component-specific sass files // Import component-specific sass files
@import "courseware/course/celebration/CelebrationModal.scss"; @import "courseware/course/celebration/CelebrationModal.scss";
@import "courseware/course/sidebar/sidebars/discussions/Discussions.scss"; @import "courseware/course/sidebar/sidebars/discussions/Discussions.scss";