Skip to content

Commit cb80a6b

Browse files
vladislavkeblyshvladislavkeblysh
committed
feat: increased font-size for Progress page
1 parent 14c662d commit cb80a6b

File tree

13 files changed

+158
-32
lines changed

13 files changed

+158
-32
lines changed

‎src/course-home/progress-tab/certificate-status/CertificateStatus.jsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { useEffect } from 'react';
2+
import classNames from 'classnames';
23
import { useDispatch } from 'react-redux';
34
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
45
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
56
import { FormattedDate, FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
67

7-
import { Button, Card } from '@openedx/paragon';
8+
import {
9+
Button, Card, breakpoints, useWindowSize,
10+
} from '@openedx/paragon';
811
import { getConfig } from '@edx/frontend-platform';
912
import { useContextId } from '../../../data/hooks';
1013
import { useModel } from '../../../generic/model-store';
@@ -29,6 +32,8 @@ const CertificateStatus = () => {
2932
userTimezone,
3033
} = useModel('courseHomeMeta', courseId);
3134

35+
const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
36+
3237
const {
3338
certificateData,
3439
end,
@@ -244,7 +249,7 @@ const CertificateStatus = () => {
244249
<ProgressCertificateStatusSlot courseId={courseId}>
245250
<div id={`${certCase}_certificate_status`}>
246251
<Card.Header title={header} />
247-
<Card.Section className="small text-gray-700">
252+
<Card.Section className={classNames('text-gray-700', { small: !wideScreen })}>
248253
{body}
249254
</Card.Section>
250255
<Card.Footer>

‎src/course-home/progress-tab/course-completion/CourseCompletion.jsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1+
import React from 'react';
12
import { useIntl } from '@edx/frontend-platform/i18n';
3+
import classNames from 'classnames';
4+
import { breakpoints, useWindowSize } from '@openedx/paragon';
25

36
import CompletionDonutChart from './CompletionDonutChart';
47
import messages from './messages';
58

69
const CourseCompletion = () => {
710
const intl = useIntl();
11+
const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
812

913
return (
10-
<section className="text-dark-700 mb-4 rounded raised-card p-4">
14+
<section className={classNames('text-dark-700 mb-4 rounded raised-card p-4', { small: !wideScreen })}>
1115
<div className="row w-100 m-0">
1216
<div className="col-12 col-sm-6 col-md-7 p-0">
1317
<h2>{intl.formatMessage(messages.courseCompletion)}</h2>
14-
<p className="small">
18+
<p>
1519
{intl.formatMessage(messages.completionBody)}
1620
</p>
1721
</div>

‎src/course-home/progress-tab/course-completion/CourseCompletion.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.course-completion-text {
2+
font-size: 18px;
3+
}

‎src/course-home/progress-tab/credit-information/CreditInformation.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const CreditInformation = () => {
6161
requirementStatus = (<>{intl.formatMessage(messages.upcoming)} <Icon src={WatchFilled} className="text-gray-500 d-inline-flex align-bottom" /></>);
6262
}
6363
requirements.push((
64-
<div className="row w-100 m-0 small" key={`requirement-${requirement.order}`}>
64+
<div className="row w-100 m-0" key={`requirement-${requirement.order}`}>
6565
<p className="font-weight-bold">
6666
{requirement.namespace === 'grade'
6767
? `${intl.formatMessage(messages.minimumGrade, { minGrade: Number(requirement.criteria.minGrade) * 100 })}:`
@@ -77,7 +77,7 @@ const CreditInformation = () => {
7777
return (
7878
<>
7979
<h3 className="h4 col-12 p-0">{intl.formatMessage(messages.requirementsHeader)}</h3>
80-
<p className="small">{eligibilityStatus}</p>
80+
<p>{eligibilityStatus}</p>
8181
{requirements}
8282
</>
8383
);

‎src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
import React from 'react';
12
import { useIntl } from '@edx/frontend-platform/i18n';
3+
import classNames from 'classnames';
4+
import { breakpoints, useWindowSize } from '@openedx/paragon';
25
import { useContextId } from '../../../../data/hooks';
36

47
import { useModel } from '../../../../generic/model-store';
@@ -14,6 +17,8 @@ const CourseGrade = () => {
1417
const intl = useIntl();
1518
const courseId = useContextId();
1619

20+
const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
21+
1722
const {
1823
creditCourseRequirements,
1924
gradesFeatureIsFullyLocked,
@@ -37,7 +42,7 @@ const CourseGrade = () => {
3742
? intl.formatMessage(messages.gradesAndCredit)
3843
: intl.formatMessage(messages.grades)}
3944
</h2>
40-
<p className="small">
45+
<p className={classNames({ small: !wideScreen })}>
4146
{intl.formatMessage(messages.courseGradeBody)}
4247
</p>
4348
</div>

‎src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1+
import React from 'react';
2+
import classNames from 'classnames';
13
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
24
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
35
import { useIntl } from '@edx/frontend-platform/i18n';
46
import { Locked } from '@openedx/paragon/icons';
5-
import { Icon, Hyperlink } from '@openedx/paragon';
7+
import {
8+
Icon, Hyperlink, breakpoints, useWindowSize,
9+
} from '@openedx/paragon';
610
import { useContextId } from '../../../../data/hooks';
711
import { useModel } from '../../../../generic/model-store';
812
import { showUngradedAssignments } from '../../utils';
@@ -24,6 +28,7 @@ const DetailedGrades = () => {
2428
gradesFeatureIsPartiallyLocked,
2529
sectionScores,
2630
} = useModel('progress', courseId);
31+
const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
2732

2833
const hasSectionScores = sectionScores.length > 0;
2934
const emptyTableMsg = showUngradedAssignments()
@@ -75,10 +80,12 @@ const DetailedGrades = () => {
7580
<DetailedGradesTable />
7681
)}
7782
{!hasSectionScores && (
78-
<p className="small">{intl.formatMessage(emptyTableMsg)}</p>
83+
<p className={classNames({ small: !wideScreen })}>
84+
{intl.formatMessage(emptyTableMsg)}
85+
</p>
7986
)}
8087
{overviewTabUrl && !showUngradedAssignments() && (
81-
<p className="x-small m-0">
88+
<p className={classNames('m-0', { small: !wideScreen })}>
8289
{intl.formatMessage(messages.ungradedAlert, { outlineLink })}
8390
</p>
8491
)}

‎src/course-home/progress-tab/grades/grade-summary/DroppableAssignmentFootnote.jsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1+
import React from 'react';
12
import PropTypes from 'prop-types';
3+
import classNames from 'classnames';
4+
5+
import { breakpoints, useWindowSize } from '@openedx/paragon';
26

37
import { useIntl } from '@edx/frontend-platform/i18n';
48
import { useContextId } from '../../../../data/hooks';
@@ -12,12 +16,14 @@ const DroppableAssignmentFootnote = ({ footnotes }) => {
1216
const {
1317
gradesFeatureIsFullyLocked,
1418
} = useModel('progress', courseId);
19+
const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
20+
1521
return (
1622
<>
1723
<span id="grade-summary-footnote-label" className="sr-only">{intl.formatMessage(messages.footnotesTitle)}</span>
1824
<ul className="list-unstyled mt-2">
1925
{footnotes.map((footnote, index) => (
20-
<li id={`${footnote.id}-footnote`} key={footnote.id} className="x-small mt-1">
26+
<li id={`${footnote.id}-footnote`} key={footnote.id} className={classNames('mt-1', { small: !wideScreen })}>
2127
<sup>{index + 1}</sup>
2228
{intl.formatMessage(messages.droppableAssignmentsText, {
2329
numDroppable: footnote.numDroppable,

‎src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1+
import React, { useState } from 'react';
2+
import classNames from 'classnames';
13
import PropTypes from 'prop-types';
24
import { useIntl } from '@edx/frontend-platform/i18n';
35
import {
4-
Hyperlink,
5-
Icon,
6-
OverlayTrigger,
7-
Stack,
8-
Tooltip,
6+
Icon, IconButton, OverlayTrigger, Popover, breakpoints, useWindowSize, Stack, Hyperlink,
97
} from '@openedx/paragon';
108
import { InfoOutline, Locked } from '@openedx/paragon/icons';
11-
import { useContextId } from '../../../../data/hooks';
129

10+
import { useContextId } from '../../../../data/hooks';
1311
import messages from '../messages';
1412
import { useModel } from '../../../../generic/model-store';
1513

@@ -21,6 +19,15 @@ const GradeSummaryHeader = ({ allOfSomeAssignmentTypeIsLocked }) => {
2119
gradesFeatureIsFullyLocked,
2220
} = useModel('progress', courseId);
2321

22+
const [showTooltip, setShowTooltip] = useState(false);
23+
const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
24+
25+
const handleKeyDown = (e) => {
26+
if (e.key === 'Escape') {
27+
setShowTooltip(false);
28+
}
29+
};
30+
2431
return (
2532
<Stack gap={2} className="mb-3">
2633
<Stack direction="horizontal" gap={2}>
@@ -29,15 +36,25 @@ const GradeSummaryHeader = ({ allOfSomeAssignmentTypeIsLocked }) => {
2936
trigger="hover"
3037
placement="top"
3138
overlay={(
32-
<Tooltip>
33-
{intl.formatMessage(messages.gradeSummaryTooltipBody)}
34-
</Tooltip>
39+
<Popover>
40+
<Popover.Content
41+
className={classNames('text-dark-700', { small: !wideScreen })}
42+
>
43+
{intl.formatMessage(messages.gradeSummaryTooltipBody)}
44+
</Popover.Content>
45+
</Popover>
3546
)}
3647
>
37-
<Icon
48+
<IconButton
49+
onClick={() => { setShowTooltip(!showTooltip); }}
50+
onBlur={() => { setShowTooltip(false); }}
51+
onKeyDown={handleKeyDown}
3852
alt={intl.formatMessage(messages.gradeSummaryTooltipAlt)}
3953
src={InfoOutline}
54+
iconAs={Icon}
55+
className="mb-3"
4056
size="sm"
57+
disabled={gradesFeatureIsFullyLocked}
4158
/>
4259
</OverlayTrigger>
4360
</Stack>

‎src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.test.jsx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
import {
3+
render, screen, waitFor,
4+
} from '@testing-library/react';
5+
import userEvent from '@testing-library/user-event';
6+
import { useSelector } from 'react-redux';
7+
import { IntlProvider } from 'react-intl';
8+
9+
import GradeSummaryHeader from './GradeSummaryHeader';
10+
import { useModel } from '../../../../generic/model-store';
11+
import messages from '../messages';
12+
13+
jest.mock('react-redux', () => ({
14+
useSelector: jest.fn(),
15+
}));
16+
17+
jest.mock('../../../../generic/model-store', () => ({
18+
useModel: jest.fn(),
19+
}));
20+
21+
describe('GradeSummaryHeader', () => {
22+
beforeEach(() => {
23+
useSelector.mockImplementation((selector) => selector({
24+
courseHome: { courseId: 'test-course-id' },
25+
}));
26+
useModel.mockReturnValue({ gradesFeatureIsFullyLocked: false });
27+
});
28+
29+
const renderComponent = (props = {}) => {
30+
render(
31+
<IntlProvider locale="en" messages={messages}>
32+
<GradeSummaryHeader
33+
intl={{ formatMessage: jest.fn((msg) => msg.defaultMessage) }}
34+
allOfSomeAssignmentTypeIsLocked={false}
35+
{...props}
36+
/>
37+
</IntlProvider>,
38+
);
39+
};
40+
41+
it('opens and closes the tooltip when Escape is pressed', async () => {
42+
renderComponent();
43+
44+
const iconButton = screen.getByRole('button', {
45+
name: messages.gradeSummaryTooltipAlt.defaultMessage,
46+
});
47+
48+
userEvent.click(iconButton);
49+
50+
await waitFor(() => {
51+
expect(screen.getByText(messages.gradeSummaryTooltipBody.defaultMessage)).toBeVisible();
52+
});
53+
54+
userEvent.keyboard('{Escape}');
55+
56+
await waitFor(() => {
57+
expect(screen.queryByText(messages.gradeSummaryTooltipBody.defaultMessage)).not.toBeInTheDocument();
58+
});
59+
});
60+
});

‎src/course-home/progress-tab/index.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@import "course-completion/CompletionDonutChart.scss";
2+
@import "course-completion/CourseCompletion.scss";
3+
4+
@import "grades/course-grade/GradeBar.scss";
5+
6+
@import "related-links/RelatedLinks.scss";

‎src/course-home/progress-tab/related-links/RelatedLinks.jsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
2+
import React from 'react';
3+
import classNames from 'classnames';
24
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
35
import { useIntl } from '@edx/frontend-platform/i18n';
4-
import { Hyperlink } from '@openedx/paragon';
5-
import { useContextId } from '../../../data/hooks';
6+
import { Hyperlink, breakpoints, useWindowSize } from '@openedx/paragon';
67

8+
import { useContextId } from '../../../data/hooks';
79
import messages from './messages';
810
import { useModel } from '../../../generic/model-store';
911

@@ -14,6 +16,7 @@ const RelatedLinks = () => {
1416
org,
1517
tabs,
1618
} = useModel('courseHomeMeta', courseId);
19+
const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
1720

1821
const { administrator } = getAuthenticatedUser();
1922
const logLinkClicked = (linkName) => {
@@ -31,19 +34,21 @@ const RelatedLinks = () => {
3134
const datesTabUrl = datesTab && datesTab.url;
3235

3336
return (
34-
<section className="mb-4 x-small">
35-
<h3 className="h4">{intl.formatMessage(messages.relatedLinks)}</h3>
36-
<ul className="pl-4">
37+
<section className="mb-4 x-small related-links">
38+
<h3 className={classNames('h4', { 'related-links-title': wideScreen })}>
39+
{intl.formatMessage(messages.relatedLinks)}
40+
</h3>
41+
<ul className="pl-4 related-links-list">
3742
{datesTabUrl && (
38-
<li>
43+
<li className={classNames({ 'related-links-list-item': wideScreen })}>
3944
<Hyperlink destination={datesTabUrl} onClick={() => logLinkClicked('dates')}>
4045
{intl.formatMessage(messages.datesCardLink)}
4146
</Hyperlink>
4247
<p>{intl.formatMessage(messages.datesCardDescription)}</p>
4348
</li>
4449
)}
4550
{overviewTabUrl && (
46-
<li>
51+
<li className={classNames({ 'related-links-list-item': wideScreen })}>
4752
<Hyperlink destination={overviewTabUrl} onClick={() => logLinkClicked('course_outline')}>
4853
{intl.formatMessage(messages.outlineCardLink)}
4954
</Hyperlink>

‎src/course-home/progress-tab/related-links/RelatedLinks.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.related-links {
2+
.related-links-title {
3+
font-size: 20px;
4+
}
5+
6+
.related-links-list .related-links-list-item {
7+
font-size: 18px;
8+
}
9+
}

‎src/index.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -446,12 +446,12 @@
446446
.course-outline-tab .pgn__card {
447447
.pgn__card-header {
448448
display: block;
449-
449+
450450
.pgn__card-header-content {
451451
margin-top: 0;
452452
}
453453
}
454-
454+
455455
.pgn__card-header-actions {
456456
margin-left: 0;
457457
}
@@ -468,8 +468,7 @@
468468
@import "course-home/dates-tab/timeline/Day.scss";
469469
@import "course-home/outline-tab/widgets/ProctoringInfoPanel.scss";
470470
@import "course-home/outline-tab/widgets/FlagButton.scss";
471-
@import "course-home/progress-tab/course-completion/CompletionDonutChart.scss";
472-
@import "course-home/progress-tab/grades/course-grade/GradeBar.scss";
471+
@import "course-home/progress-tab";
473472
@import "courseware/course/course-exit/CourseRecommendations";
474473
@import "product-tours/newUserCourseHomeTour/NewUserCourseHomeTourModal.scss";
475474
@import "course-home/courseware-search/courseware-search.scss";

0 commit comments

Comments
 (0)