Skip to content

Commit a545d0b

Browse files
ayesha-warisayesha-waris
authored
fix: responsiveness of MFE discussions (#697)
* fix: fixed sidebar xl screen width * fix: fixed failing test runs * refactor: removed unused css classes
1 parent 8d86e6d commit a545d0b

File tree

12 files changed

+112
-32
lines changed

12 files changed

+112
-32
lines changed

‎src/discussions/common/ActionsDropdown.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ const ActionsDropdown = ({
9999
src={action.icon}
100100
className="icon-size-24"
101101
/>
102-
<span className="font-weight-normal font-xl ml-2">
102+
<span className="font-weight-normal ml-2">
103103
{intl.formatMessage(action.label)}
104104
</span>
105105
</Dropdown.Item>

‎src/discussions/common/AuthorLabel.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const AuthorLabel = ({
3838

3939
const authorName = useMemo(() => (
4040
<span
41-
className={classNames('mr-1.5 font-size-14 font-style font-weight-500 author-name', {
41+
className={classNames('mr-1.5 font-style font-weight-500 author-name', {
4242
'text-gray-700': isRetiredUser,
4343
'text-primary-500': !authorLabelMessage && !isRetiredUser,
4444
})}
@@ -71,7 +71,7 @@ const AuthorLabel = ({
7171
/>
7272
{authorLabelMessage && (
7373
<span
74-
className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
74+
className={classNames('mr-1.5 font-style font-weight-500', {
7575
'text-primary-500': showTextPrimary,
7676
'text-gray-700': isRetiredUser,
7777
})}

‎src/discussions/content-unavailable/ContentUnavailable.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const ContentUnavailable = ({ subTitleMessage }) => {
3535
{intl.formatMessage(messages.contentUnavailableTitle)}
3636
</h3>
3737
<p className="pb-2 text-gray-500 text-center">{intl.formatMessage(subTitleMessage)}</p>
38-
<Button onClick={redirectToDashboard} variant="outline-dark" className="font-size-14 py-2 px-2.5">
38+
<Button onClick={redirectToDashboard} variant="outline-dark" className="py-2 px-2.5">
3939
{intl.formatMessage(messages.contentUnavailableAction)}
4040
</Button>
4141
</div>

‎src/discussions/discussions-home/DiscussionsHome.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const DiscussionsHome = () => {
8282
<Suspense fallback={(<Spinner />)}>
8383
<DiscussionContext.Provider value={discussionContextValue}>
8484
{!enableInContextSidebar && (<Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />)}
85-
<main className="container-fluid d-flex flex-column p-0 w-100" id="main" tabIndex="-1">
85+
<main className="container-fluid d-flex flex-column p-0 w-100 font-size" id="main" tabIndex="-1">
8686
{!enableInContextSidebar && <CourseTabsNavigation />}
8787
{(isEnrolled || !isUserLearner) && (
8888
<div

‎src/discussions/learners/learner/LearnerCard.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const LearnerCard = ({ learner }) => {
3737
<div className="d-flex flex-column justify-content-start mw-100 flex-fill">
3838
<div className="d-flex align-items-center flex-fill">
3939
<div
40-
className="text-truncate font-weight-500 font-size-14 text-primary-500 font-style"
40+
className="text-truncate font-weight-500 text-primary-500 font-style"
4141
>
4242
{username}
4343
</div>

‎src/discussions/post-comments/comments/CommentsView.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const CommentsView = ({ threadType }) => {
7373
onClick={handleLoadMoreResponses}
7474
variant="link"
7575
block="true"
76-
className="px-4 mt-3 border-0 line-height-24 py-0 mb-2 font-style font-weight-500 font-size-14"
76+
className="px-4 mt-3 border-0 line-height-24 py-0 mb-2 font-style font-weight-500"
7777
data-testid="load-more-comments"
7878
>
7979
{intl.formatMessage(messages.loadMoreResponses)}
@@ -92,7 +92,7 @@ const CommentsView = ({ threadType }) => {
9292
variant="plain"
9393
block="true"
9494
className="card mb-4 px-0 border-0 py-10px mt-2 font-style font-weight-500
95-
line-height-24 font-size-14 text-primary-500"
95+
line-height-24 text-primary-500"
9696
onClick={handleAddResponse}
9797
data-testid="add-response"
9898
>

‎src/discussions/post-comments/comments/comment/Comment.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ const Comment = ({
249249
onClick={handleLoadMoreComments}
250250
variant="link"
251251
block="true"
252-
className="font-size-14 line-height-24 font-style pt-10px border-0 font-weight-500 pb-0"
252+
className="line-height-24 font-style pt-10px border-0 font-weight-500 pb-0"
253253
data-testid="load-more-comments-responses"
254254
>
255255
{intl.formatMessage(messages.loadMoreComments)}
@@ -267,7 +267,7 @@ const Comment = ({
267267
) : (
268268
!isClosed && isUserPrivilegedInPostingRestriction && (inlineReplies.length >= 5) && (
269269
<Button
270-
className="d-flex flex-grow mt-2 font-size-14 font-style font-weight-500 text-primary-500 add-comment-btn rounded-0"
270+
className="d-flex flex-grow mt-2 font-style font-weight-500 text-primary-500 add-comment-btn rounded-0"
271271
variant="plain"
272272
style={{ height: '36px' }}
273273
onClick={handleAddCommentReply}

‎src/discussions/posts/post-editor/PostEditor.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@ const PostEditor = ({
241241
resetForm,
242242
}) => (
243243
<Form className="m-4 card p-4 post-form" onSubmit={handleSubmit}>
244-
<h4 className="mb-4 font-style font-size-16" style={{ lineHeight: '16px' }}>
244+
<h4 className="mb-4 font-style" style={{ lineHeight: '16px' }}>
245245
{editExisting
246246
? intl.formatMessage(messages.editPostHeading)
247247
: intl.formatMessage(messages.addPostHeading)}
@@ -423,7 +423,7 @@ const PostEditor = ({
423423
onBlur={handleBlur}
424424
className="mr-4.5"
425425
>
426-
<span className="font-size-14">
426+
<span>
427427
{intl.formatMessage(messages.followPost)}
428428
</span>
429429
</Form.Checkbox>
@@ -436,7 +436,7 @@ const PostEditor = ({
436436
onChange={handleChange}
437437
onBlur={handleBlur}
438438
>
439-
<span className="font-size-14">
439+
<span>
440440
{intl.formatMessage(messages.anonymousToPeersPost)}
441441
</span>
442442
</Form.Checkbox>

‎src/discussions/posts/post-filter-bar/PostFilterBar.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const ActionItem = React.memo(({
4444
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
4545
tabIndex={value === selected ? '0' : '-1'}
4646
>
47-
<Icon src={Check} className={classNames('text-success mr-2', { invisible: value !== selected })} />
47+
<Icon src={Check} className={classNames('text-success dropdown-icon-dimensions', { invisible: value !== selected })} />
4848
<Form.Radio id={id} className="sr-only sr-only-focusable" value={value} tabIndex="0">
4949
{label}
5050
</Form.Radio>

‎src/discussions/posts/post/Post.jsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -206,13 +206,9 @@ const Post = ({ handleAddResponseButton }) => {
206206
)}
207207
>
208208
{(topicContext && !topic) ? (
209-
<>
210-
<span className="w-auto">{topicContext.chapterName}</span>
211-
<span className="mx-1">/</span>
212-
<span className="w-auto">{topicContext.verticalName}</span>
213-
<span className="mx-1">/</span>
214-
<span className="w-auto">{topicContext.unitName}</span>
215-
</>
209+
<span>
210+
{topicContext.chapterName} / {topicContext.verticalName} / {topicContext.unitName}
211+
</span>
216212
) : (
217213
getTopicInfo(topic)
218214
)}

‎src/discussions/posts/post/PostLink.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,13 +89,13 @@ const PostLink = ({
8989
<div className="d-flex align-items-center pb-0 mb-0 flex-fill">
9090
<div className="text-truncate mr-1">
9191
<span className={classNames(
92-
'font-weight-500 font-size-14 text-primary-500 font-style align-bottom mr-1',
92+
'font-weight-500 text-primary-500 font-style align-bottom mr-1',
9393
{ 'font-weight-bolder': !read },
9494
)}
9595
>
9696
{title}
9797
</span>
98-
<span className="text-gray-700 font-weight-normal font-size-14 font-style align-bottom">
98+
<span className="text-gray-700 font-weight-normal font-style align-bottom">
9999
{isPostPreviewAvailable(previewBody) ? previewBody : intl.formatMessage(messages.postWithoutPreview)}
100100
</span>
101101
</div>

‎src/index.scss

Lines changed: 93 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,21 @@
99
$fa-font-path: "~font-awesome/fonts";
1010
@import "~font-awesome/scss/font-awesome";
1111

12+
body,
13+
#main
14+
{
15+
font-size: 14px ;
16+
}
17+
18+
.btn,
19+
.form-control,
20+
.dropdown-menu,
21+
.pgn__modal,
22+
.pgn__form-control-floating-label-content,
23+
.pgn__form-label {
24+
font-size: 14px !important;
25+
}
26+
1227
#post,
1328
#comment,
1429
#reply,
@@ -41,13 +56,6 @@ $fa-font-path: "~font-awesome/fonts";
4156
outline: $light-400 solid 2px;
4257
}
4358

44-
.font-size-16 {
45-
font-size: 16px !important;
46-
}
47-
48-
.font-size-14 {
49-
font-size: 14px !important;
50-
}
5159

5260
.font-size-12 {
5361
font-size: 12px !important;
@@ -233,11 +241,11 @@ header {
233241
}
234242

235243
.sidebar-tablet-width {
236-
max-width: 20rem !important;
244+
max-width: 21rem !important;
237245
}
238246

239247
.sidebar-XL-width {
240-
min-width: 35rem !important;
248+
min-width: 29rem !important;
241249
}
242250

243251
.filter-menu:focus-visible {
@@ -390,6 +398,7 @@ header {
390398

391399
.badge {
392400
padding: 1px 5px !important;
401+
font-size: 12px !important;
393402
}
394403

395404
.pgn__checkpoint {
@@ -581,3 +590,78 @@ th, td {
581590
padding: 0.4rem;
582591
white-space: nowrap;
583592
}
593+
594+
@media only screen and (max-width: 367px) {
595+
596+
.discussion-comments h5,
597+
.btn,
598+
.alert-message-content,
599+
.pgn__form-control-floating-label-content,
600+
.form-control,
601+
.pgn__modal .pgn__form-label,
602+
.dropdown-menu,
603+
.tox-tbtn {
604+
font-size: 10px !important;
605+
}
606+
607+
.badge,
608+
.hover-card button {
609+
font-size: 8px !important;
610+
}
611+
612+
.header-action-bar button {
613+
height: 42px;
614+
text-wrap: nowrap;
615+
;
616+
}
617+
618+
.nav-item a {
619+
padding-left: 14px !important;
620+
padding-right: 14px !important;
621+
}
622+
}
623+
624+
@media only screen and (min-width: 367px) and (max-width: 768px) {
625+
626+
.discussion-comments h5,
627+
.btn,
628+
.alert-message-content,
629+
.pgn__form-control-floating-label-content,
630+
.form-control,
631+
.pgn__form-label,
632+
.pgn__modal,
633+
.dropdown-menu,
634+
.tox-tbtn {
635+
font-size: 12px !important;
636+
}
637+
638+
.badge,
639+
.hover-card.btn-tertiary {
640+
font-size: 10px !important;
641+
}
642+
643+
}
644+
645+
@media only screen and (min-device-width: 769px) {
646+
647+
body,
648+
#main {
649+
font-size: 14px;
650+
}
651+
}
652+
653+
@media only screen and (max-device-width: 768px) {
654+
655+
body,
656+
#main {
657+
font-size: 12px;
658+
}
659+
}
660+
661+
@media only screen and (max-device-width: 366px) {
662+
663+
body,
664+
#main {
665+
font-size: 10px;
666+
}
667+
}

0 commit comments

Comments
 (0)