Skip to content

Commit acab6bb

Browse files
vladislavkeblyshvladislavkeblysh
committed
feat: increased Course home font size
1 parent 14c662d commit acab6bb

File tree

11 files changed

+94
-39
lines changed

11 files changed

+94
-39
lines changed

‎src/alerts/course-start-alert/CourseStartAlert.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const CourseStartAlert = ({ payload }) => {
4040
);
4141
if (delta < DAY_MS) {
4242
return (
43-
<Alert variant="info" icon={Info}>
43+
<Alert className="course-start-info-alert" variant="info" icon={Info}>
4444
<FormattedMessage
4545
id="learning.outline.alert.start.short"
4646
defaultMessage="Course starts {timeRemaining} at {courseStartTime}."
@@ -65,7 +65,7 @@ const CourseStartAlert = ({ payload }) => {
6565
}
6666

6767
return (
68-
<Alert variant="info" icon={Info}>
68+
<Alert className="course-start-info-alert" variant="info" icon={Info}>
6969
<strong>
7070
<FormattedMessage
7171
id="learning.outline.alert.start.long"

‎src/alerts/course-start-alert/CourseStartAlert.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.course-start-info-alert.alert-content {
2+
font-size: $font-size-base;
3+
}

‎src/course-home/outline-tab/DateSummary.jsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { FormattedDate } from '@edx/frontend-platform/i18n';
55
import React from 'react';
66
import { useSelector } from 'react-redux';
77
import PropTypes from 'prop-types';
8+
import classNames from 'classnames';
9+
import { useWindowSize, breakpoints } from '@openedx/paragon';
810
import { useModel } from '../../generic/model-store';
911
import { isLearnerAssignment } from '../dates-tab/utils';
1012
import './DateSummary.scss';
@@ -19,6 +21,7 @@ const DateSummary = ({
1921
const {
2022
org,
2123
} = useModel('courseHomeMeta', courseId);
24+
const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
2225

2326
const linkedTitle = dateBlock.link && isLearnerAssignment(dateBlock);
2427
const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
@@ -35,7 +38,7 @@ const DateSummary = ({
3538
};
3639

3740
return (
38-
<li className="p-0 mb-3 small text-dark-500">
41+
<li className={classNames('p-0 mb-3 text-dark-500', { small: !wideScreen })}>
3942
<div className="row">
4043
<FontAwesomeIcon icon={faCalendarAlt} className="ml-3 mt-1 mr-1" fixedWidth />
4144
<div className="ml-1 font-weight-bold">

‎src/course-home/outline-tab/widgets/CourseDates.jsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
22
import { useSelector } from 'react-redux';
3+
import classNames from 'classnames';
4+
import { useWindowSize, breakpoints } from '@openedx/paragon';
35

46
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
57

@@ -22,6 +24,7 @@ const CourseDates = ({
2224
datesTabLink,
2325
},
2426
} = useModel('outline', courseId);
27+
const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
2528

2629
if (courseDateBlocks.length === 0) {
2730
return null;
@@ -40,7 +43,10 @@ const CourseDates = ({
4043
/>
4144
))}
4245
</ol>
43-
<a className="font-weight-bold ml-4 pl-1 small" href={datesTabLink}>
46+
<a
47+
className={classNames('font-weight-bold ml-4 pl-1', { small: !wideScreen })}
48+
href={datesTabLink}
49+
>
4450
{intl.formatMessage(messages.allDates)}
4551
</a>
4652
</div>

‎src/course-home/outline-tab/widgets/CourseHandouts.jsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
22
import { useSelector } from 'react-redux';
3+
import { useWindowSize, breakpoints } from '@openedx/paragon';
4+
import classNames from 'classnames';
35

46
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
57

@@ -14,6 +16,7 @@ const CourseHandouts = ({ intl }) => {
1416
const {
1517
handoutsHtml,
1618
} = useModel('outline', courseId);
19+
const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
1720

1821
if (!handoutsHtml) {
1922
return null;
@@ -23,7 +26,7 @@ const CourseHandouts = ({ intl }) => {
2326
<section className="mb-4">
2427
<h2 className="h4">{intl.formatMessage(messages.handouts)}</h2>
2528
<LmsHtmlFragment
26-
className="small"
29+
className={classNames({ small: !wideScreen })}
2730
html={handoutsHtml}
2831
title={intl.formatMessage(messages.handouts)}
2932
/>

‎src/course-home/outline-tab/widgets/CourseTools.jsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import {
99
faBookmark, faCertificate, faInfo, faCalendar, faStar,
1010
} from '@fortawesome/free-solid-svg-icons';
1111
import { faNewspaper } from '@fortawesome/free-regular-svg-icons';
12+
import { useWindowSize, breakpoints } from '@openedx/paragon';
13+
import classNames from 'classnames';
1214

1315
import messages from '../messages';
1416
import { useModel } from '../../../generic/model-store';
@@ -22,6 +24,7 @@ const CourseTools = ({ intl }) => {
2224
const {
2325
courseTools,
2426
} = useModel('outline', courseId);
27+
const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
2528

2629
if (courseTools.length === 0) {
2730
return null;
@@ -66,14 +69,14 @@ const CourseTools = ({ intl }) => {
6669
<h2 className="h4">{intl.formatMessage(messages.tools)}</h2>
6770
<ul className="list-unstyled">
6871
{courseTools.map((courseTool) => (
69-
<li key={courseTool.analyticsId} className="small">
72+
<li key={courseTool.analyticsId} className={classNames({ small: !wideScreen })}>
7073
<a href={courseTool.url} onClick={() => logClick(courseTool.analyticsId)}>
7174
<FontAwesomeIcon icon={renderIcon(courseTool.analyticsId)} className="mr-2" fixedWidth />
7275
{courseTool.title}
7376
</a>
7477
</li>
7578
))}
76-
<li className="small" id="courseHome-launchTourLink">
79+
<li id="courseHome-launchTourLink" className={classNames({ small: !wideScreen })}>
7780
<LaunchCourseHomeTourButton />
7881
</li>
7982
</ul>

‎src/course-home/outline-tab/widgets/FlagButton.jsx

+38-23
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,51 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import classnames from 'classnames';
4+
import { useWindowSize, breakpoints } from '@openedx/paragon';
45

56
const FlagButton = ({
67
buttonIcon,
78
title,
89
text,
910
handleSelect,
1011
isSelected,
11-
}) => (
12-
<button
13-
type="button"
14-
className={classnames(
15-
'flag-button row w-100 align-content-between m-1.5 py-3.5',
16-
isSelected ? 'flag-button-selected' : '',
17-
)}
18-
aria-checked={isSelected}
19-
role="radio"
20-
onClick={() => handleSelect()}
21-
data-testid={`weekly-learning-goal-input-${title}`}
22-
>
23-
<div className="row w-100 m-0 justify-content-center pb-1">
24-
{buttonIcon}
25-
</div>
26-
<div className={classnames('row w-100 m-0 justify-content-center small text-gray-700 pb-1', isSelected ? 'font-weight-bold' : '')}>
27-
{title}
28-
</div>
29-
<div className={classnames('row w-100 m-0 justify-content-center micro text-gray-500', isSelected ? 'font-weight-bold' : '')}>
30-
{text}
31-
</div>
32-
</button>
33-
);
12+
}) => {
13+
const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
14+
15+
return (
16+
<button
17+
type="button"
18+
className={classnames(
19+
'flag-button row w-100 align-content-between m-1.5 py-3.5',
20+
isSelected ? 'flag-button-selected' : '',
21+
)}
22+
aria-checked={isSelected}
23+
role="radio"
24+
onClick={() => handleSelect()}
25+
data-testid={`weekly-learning-goal-input-${title}`}
26+
>
27+
<div className="row w-100 m-0 justify-content-center pb-1">
28+
{buttonIcon}
29+
</div>
30+
<div className={classnames(
31+
'row w-100 m-0 justify-content-center text-gray-700 pb-1',
32+
isSelected ? 'font-weight-bold' : '',
33+
{ small: !wideScreen },
34+
)}
35+
>
36+
{title}
37+
</div>
38+
<div className={classnames(
39+
'row w-100 m-0 justify-content-center small text-gray-500',
40+
isSelected ? 'font-weight-bold' : '',
41+
{ small: !wideScreen },
42+
)}
43+
>
44+
{text}
45+
</div>
46+
</button>
47+
);
48+
};
3449

3550
FlagButton.propTypes = {
3651
buttonIcon: PropTypes.element.isRequired,

‎src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx

+12-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ import React, { useEffect, useState } from 'react';
22
import { useLocation } from 'react-router-dom';
33
import PropTypes from 'prop-types';
44

5-
import { Form, Card, Icon } from '@openedx/paragon';
5+
import {
6+
Form, Card, Icon, useWindowSize, breakpoints,
7+
} from '@openedx/paragon';
8+
import classNames from 'classnames';
69
import { history } from '@edx/frontend-platform';
710
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
811
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
@@ -23,6 +26,7 @@ const WeeklyLearningGoalCard = ({
2326
const {
2427
courseId,
2528
} = useSelector(state => state.courseHome);
29+
const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
2630

2731
const {
2832
isMasquerading,
@@ -94,11 +98,11 @@ const WeeklyLearningGoalCard = ({
9498
data-testid="weekly-learning-goal-card"
9599
>
96100
<Card.Header
97-
size="sm"
101+
size={!wideScreen ? 'sm' : 'md'}
98102
title={(<div id="set-weekly-goal-header">{intl.formatMessage(messages.setWeeklyGoal)}</div>)}
99103
subtitle={intl.formatMessage(messages.setWeeklyGoalDetail)}
100104
/>
101-
<Card.Section className="text-gray-700 small">
105+
<Card.Section className={classNames('text-gray-700', { small: !wideScreen })}>
102106
<div
103107
role="radiogroup"
104108
aria-labelledby="set-weekly-goal-header"
@@ -125,14 +129,17 @@ const WeeklyLearningGoalCard = ({
125129
checked={isGetReminderSelected}
126130
onChange={(event) => handleSubscribeToReminders(event)}
127131
disabled={!daysPerWeekGoal}
132+
className={classNames({ small: !wideScreen })}
128133
>
129-
<small>{intl.formatMessage(messages.setGoalReminder)}</small>
134+
{wideScreen
135+
? intl.formatMessage(messages.setGoalReminder)
136+
: <small>{intl.formatMessage(messages.setGoalReminder)}</small>}
130137
</Form.Switch>
131138
</div>
132139
</Card.Section>
133140
{isGetReminderSelected && (
134141
<Card.Section muted>
135-
<div className="row w-100 m-0 small align-center">
142+
<div className="row w-100 m-0 align-center">
136143
<div className="d-flex align-items-center pr-1">
137144
<Icon
138145
className="text-primary-500"

‎src/course-home/outline-tab/widgets/WelcomeMessage.jsx

+16-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import { useState, useMemo, useRef } from 'react';
1+
import React, {
2+
useState, useRef, useEffect, useMemo,
3+
} from 'react';
24
import PropTypes from 'prop-types';
35

4-
import { useIntl } from '@edx/frontend-platform/i18n';
56
import { Alert, Button, TransitionReplace } from '@openedx/paragon';
67
import truncate from 'truncate-html';
78

89
import { useDispatch } from 'react-redux';
10+
import { useIntl } from '@edx/frontend-platform/i18n';
911
import LmsHtmlFragment from '../LmsHtmlFragment';
1012
import messages from '../messages';
1113
import { useModel } from '../../../generic/model-store';
@@ -38,16 +40,28 @@ const WelcomeMessage = ({ courseId, nextElementRef }) => {
3840

3941
const [showShortMessage, setShowShortMessage] = useState(messageCanBeShortened);
4042
const dispatch = useDispatch();
43+
const alertRef = useRef(null);
4144

4245
if (!welcomeMessageHtml) {
4346
return null;
4447
}
4548

49+
useEffect(() => {
50+
// TODO: Temporary solution due to a bug in the Paragon Alert component
51+
// that prevents changing the button sizes. Delete after correction.
52+
// Issue: https://github.com/openedx/paragon/issues/3205
53+
if (alertRef.current) {
54+
const buttons = alertRef.current.querySelectorAll('button.btn-sm');
55+
buttons.forEach(btn => btn.classList.remove('btn-sm'));
56+
}
57+
}, [showShortMessage]);
58+
4659
return (
4760
<Alert
4861
data-testid="alert-container-welcome"
4962
variant="light"
5063
stacked
64+
ref={alertRef}
5165
dismissible
5266
show={display}
5367
onClose={() => {

‎src/generic/upgrade-notification/UpgradeNotification.jsx

Whitespace-only changes.

‎src/index.scss

+3-2
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
}
@@ -472,6 +472,7 @@
472472
@import "course-home/progress-tab/grades/course-grade/GradeBar.scss";
473473
@import "courseware/course/course-exit/CourseRecommendations";
474474
@import "product-tours/newUserCourseHomeTour/NewUserCourseHomeTourModal.scss";
475+
@import "alerts/course-start-alert/CourseStartAlert.scss";
475476
@import "course-home/courseware-search/courseware-search.scss";
476477
@import "course-tabs/course-tabs-navigation.scss";
477478
@import "courseware/course/sidebar/common/SidebarBase.scss";

0 commit comments

Comments
 (0)