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

fix: responsiveness of MFE discussions (#697)

Browse Source 
* fix: fixed sidebar xl screen width

* fix: fixed failing test runs

* refactor: removed unused css classes
This commit is contained in:
ayesha waris
2024-05-27 16:48:53 +05:00
committed by GitHub
parent 8d86e6dcc0
commit a545d0b9f6
12 changed files with 112 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/discussions/common/ActionsDropdown.jsx
View File

@@ -99,7 +99,7 @@ const ActionsDropdown = ({
src={action.icon}
className="icon-size-24"
/>
<span className="font-weight-normal font-xl ml-2">
<span className="font-weight-normal ml-2">
{intl.formatMessage(action.label)}
</span>
</Dropdown.Item>

4
src/discussions/common/AuthorLabel.jsx
View File

@@ -38,7 +38,7 @@ const AuthorLabel = ({
const authorName = useMemo(() => (
<span
className={classNames('mr-1.5 font-size-14 font-style font-weight-500 author-name', {
className={classNames('mr-1.5 font-style font-weight-500 author-name', {
'text-gray-700': isRetiredUser,
'text-primary-500': !authorLabelMessage && !isRetiredUser,
})}
@@ -71,7 +71,7 @@ const AuthorLabel = ({
/>
{authorLabelMessage && (
<span
className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
className={classNames('mr-1.5 font-style font-weight-500', {
'text-primary-500': showTextPrimary,
'text-gray-700': isRetiredUser,
})}

2
src/discussions/content-unavailable/ContentUnavailable.jsx
View File

@@ -35,7 +35,7 @@ const ContentUnavailable = ({ subTitleMessage }) => {
{intl.formatMessage(messages.contentUnavailableTitle)}
</h3>
<p className="pb-2 text-gray-500 text-center">{intl.formatMessage(subTitleMessage)}</p>
<Button onClick={redirectToDashboard} variant="outline-dark" className="font-size-14 py-2 px-2.5">
<Button onClick={redirectToDashboard} variant="outline-dark" className="py-2 px-2.5">
{intl.formatMessage(messages.contentUnavailableAction)}
</Button>
</div>

2
src/discussions/discussions-home/DiscussionsHome.jsx
View File

@@ -82,7 +82,7 @@ const DiscussionsHome = () => {
<Suspense fallback={(<Spinner />)}>
<DiscussionContext.Provider value={discussionContextValue}>
{!enableInContextSidebar && (<Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />)}
<main className="container-fluid d-flex flex-column p-0 w-100" id="main" tabIndex="-1">
<main className="container-fluid d-flex flex-column p-0 w-100 font-size" id="main" tabIndex="-1">
{!enableInContextSidebar && <CourseTabsNavigation />}
{(isEnrolled || !isUserLearner) && (
<div

2
src/discussions/learners/learner/LearnerCard.jsx
View File

@@ -37,7 +37,7 @@ const LearnerCard = ({ learner }) => {
<div className="d-flex flex-column justify-content-start mw-100 flex-fill">
<div className="d-flex align-items-center flex-fill">
<div
className="text-truncate font-weight-500 font-size-14 text-primary-500 font-style"
className="text-truncate font-weight-500 text-primary-500 font-style"
>
{username}
</div>

4
src/discussions/post-comments/comments/CommentsView.jsx
View File

@@ -73,7 +73,7 @@ const CommentsView = ({ threadType }) => {
onClick={handleLoadMoreResponses}
variant="link"
block="true"
className="px-4 mt-3 border-0 line-height-24 py-0 mb-2 font-style font-weight-500 font-size-14"
className="px-4 mt-3 border-0 line-height-24 py-0 mb-2 font-style font-weight-500"
data-testid="load-more-comments"
>
{intl.formatMessage(messages.loadMoreResponses)}
@@ -92,7 +92,7 @@ const CommentsView = ({ threadType }) => {
variant="plain"
block="true"
className="card mb-4 px-0 border-0 py-10px mt-2 font-style font-weight-500
line-height-24 font-size-14 text-primary-500"
line-height-24 text-primary-500"
onClick={handleAddResponse}
data-testid="add-response"
>

4
src/discussions/post-comments/comments/comment/Comment.jsx
View File

@@ -249,7 +249,7 @@ const Comment = ({
onClick={handleLoadMoreComments}
variant="link"
block="true"
className="font-size-14 line-height-24 font-style pt-10px border-0 font-weight-500 pb-0"
className="line-height-24 font-style pt-10px border-0 font-weight-500 pb-0"
data-testid="load-more-comments-responses"
>
{intl.formatMessage(messages.loadMoreComments)}
@@ -267,7 +267,7 @@ const Comment = ({
) : (
!isClosed && isUserPrivilegedInPostingRestriction && (inlineReplies.length >= 5) && (
<Button
className="d-flex flex-grow mt-2 font-size-14 font-style font-weight-500 text-primary-500 add-comment-btn rounded-0"
className="d-flex flex-grow mt-2 font-style font-weight-500 text-primary-500 add-comment-btn rounded-0"
variant="plain"
style={{ height: '36px' }}
onClick={handleAddCommentReply}

6
src/discussions/posts/post-editor/PostEditor.jsx
View File

@@ -241,7 +241,7 @@ const PostEditor = ({
resetForm,
}) => (
<Form className="m-4 card p-4 post-form" onSubmit={handleSubmit}>
<h4 className="mb-4 font-style font-size-16" style={{ lineHeight: '16px' }}>
<h4 className="mb-4 font-style" style={{ lineHeight: '16px' }}>
{editExisting
? intl.formatMessage(messages.editPostHeading)
: intl.formatMessage(messages.addPostHeading)}
@@ -423,7 +423,7 @@ const PostEditor = ({
onBlur={handleBlur}
className="mr-4.5"
>
<span className="font-size-14">
<span>
{intl.formatMessage(messages.followPost)}
</span>
</Form.Checkbox>
@@ -436,7 +436,7 @@ const PostEditor = ({
onChange={handleChange}
onBlur={handleBlur}
>
<span className="font-size-14">
<span>
{intl.formatMessage(messages.anonymousToPeersPost)}
</span>
</Form.Checkbox>

2
src/discussions/posts/post-filter-bar/PostFilterBar.jsx
View File

@@ -44,7 +44,7 @@ export const ActionItem = React.memo(({
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={value === selected ? '0' : '-1'}
>
<Icon src={Check} className={classNames('text-success mr-2', { invisible: value !== selected })} />
<Icon src={Check} className={classNames('text-success dropdown-icon-dimensions', { invisible: value !== selected })} />
<Form.Radio id={id} className="sr-only sr-only-focusable" value={value} tabIndex="0">
{label}
</Form.Radio>

10
src/discussions/posts/post/Post.jsx
View File

@@ -206,13 +206,9 @@ const Post = ({ handleAddResponseButton }) => {
)}
>
{(topicContext && !topic) ? (
<>
<span className="w-auto">{topicContext.chapterName}</span>
<span className="mx-1">/</span>
<span className="w-auto">{topicContext.verticalName}</span>
<span className="mx-1">/</span>
<span className="w-auto">{topicContext.unitName}</span>
</>
<span>
{topicContext.chapterName} / {topicContext.verticalName} / {topicContext.unitName}
</span>
) : (
getTopicInfo(topic)
)}

4
src/discussions/posts/post/PostLink.jsx
View File

@@ -89,13 +89,13 @@ const PostLink = ({
<div className="d-flex align-items-center pb-0 mb-0 flex-fill">
<div className="text-truncate mr-1">
<span className={classNames(
'font-weight-500 font-size-14 text-primary-500 font-style align-bottom mr-1',
'font-weight-500 text-primary-500 font-style align-bottom mr-1',
{ 'font-weight-bolder': !read },
)}
>
{title}
</span>
<span className="text-gray-700 font-weight-normal font-size-14 font-style align-bottom">
<span className="text-gray-700 font-weight-normal font-style align-bottom">
{isPostPreviewAvailable(previewBody) ? previewBody : intl.formatMessage(messages.postWithoutPreview)}
</span>
</div>

102
src/index.scss
View File

@@ -9,6 +9,21 @@
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";
body,
#main
{
font-size: 14px ;
}
.btn,
.form-control,
.dropdown-menu,
.pgn__modal,
.pgn__form-control-floating-label-content,
.pgn__form-label {
font-size: 14px !important;
}
#post,
#comment,
#reply,
@@ -41,13 +56,6 @@ $fa-font-path: "~font-awesome/fonts";
outline: $light-400 solid 2px;
}
.font-size-16 {
font-size: 16px !important;
}
.font-size-14 {
font-size: 14px !important;
}
.font-size-12 {
font-size: 12px !important;
@@ -233,11 +241,11 @@ header {
}
.sidebar-tablet-width {
max-width: 20rem !important;
max-width: 21rem !important;
}
.sidebar-XL-width {
min-width: 35rem !important;
min-width: 29rem !important;
}
.filter-menu:focus-visible {
@@ -390,6 +398,7 @@ header {
.badge {
padding: 1px 5px !important;
font-size: 12px !important;
}
.pgn__checkpoint {
@@ -581,3 +590,78 @@ th, td {
padding: 0.4rem;
white-space: nowrap;
}
@media only screen and (max-width: 367px) {
.discussion-comments h5,
.btn,
.alert-message-content,
.pgn__form-control-floating-label-content,
.form-control,
.pgn__modal .pgn__form-label,
.dropdown-menu,
.tox-tbtn {
font-size: 10px !important;
}
.badge,
.hover-card button {
font-size: 8px !important;
}
.header-action-bar button {
height: 42px;
text-wrap: nowrap;
;
}
.nav-item a {
padding-left: 14px !important;
padding-right: 14px !important;
}
}
@media only screen and (min-width: 367px) and (max-width: 768px) {
.discussion-comments h5,
.btn,
.alert-message-content,
.pgn__form-control-floating-label-content,
.form-control,
.pgn__form-label,
.pgn__modal,
.dropdown-menu,
.tox-tbtn {
font-size: 12px !important;
}
.badge,
.hover-card.btn-tertiary {
font-size: 10px !important;
}
}
@media only screen and (min-device-width: 769px) {
body,
#main {
font-size: 14px;
}
}
@media only screen and (max-device-width: 768px) {
body,
#main {
font-size: 12px;
}
}
@media only screen and (max-device-width: 366px) {
body,
#main {
font-size: 10px;
}
}