Andal.LND/frontend-app-learning
6
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]);
const clearSidebarKeyIfWidgetsUnavailable = useCallback((widgetId) => {
if ((!isNotificationbarAvailable && widgetId === WIDGETS.DISCUSSIONS)
|| (!isDiscussionbarAvailable && widgetId === WIDGETS.NOTIFICATIONS)) {
if (((!isNotificationbarAvailable || hideNotificationbar) && widgetId === WIDGETS.DISCUSSIONS)
|| ((!isDiscussionbarAvailable || hideDiscussionbar) && widgetId === WIDGETS.NOTIFICATIONS)) {
setLocalStorage(sidebarKey, null);
}
}, [isDiscussionbarAvailable, isNotificationbarAvailable]);
}, [isDiscussionbarAvailable, isNotificationbarAvailable, hideDiscussionbar, hideNotificationbar]);
const toggleSidebar = useCallback((sidebarId = null, widgetId = null) => {
if (widgetId) {

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

@@ -17,7 +17,7 @@ const DiscussionsNotificationsSidebar = () => {
<SidebarBase
ariaLabel={intl.formatMessage(messages.discussionNotificationTray)}
sidebarId={ID}
className="d-flex flex-column flex-fill"
className="d-flex flex-column flex-fill overflow-auto"
showTitleBar={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 { useIntl } from '@edx/frontend-platform/i18n';
import classNames from 'classnames';
import SidebarContext from '../../../SidebarContext';
import messages from '../../../messages';
@@ -24,7 +25,10 @@ const DiscussionsWidget = () => {
return (
<iframe
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)}
allow="clipboard-write"
loading="lazy"

4
src/index.scss
View File

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