fix: responsiveness of MFE discussions (#697)

* fix: fixed sidebar xl screen width * fix: fixed failing test runs * refactor: removed unused css classes
openedx · May 27, 2024 · a545d0b · a545d0b
1 parent 8d86e6d
commit a545d0b
Show file tree

Hide file tree

Showing 12 changed files with 112 additions and 32 deletions.
diff --git a/src/discussions/common/ActionsDropdown.jsx b/src/discussions/common/ActionsDropdown.jsx
@@ -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>

diff --git a/src/discussions/common/AuthorLabel.jsx b/src/discussions/common/AuthorLabel.jsx
@@ -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,
               })}

diff --git a/src/discussions/content-unavailable/ContentUnavailable.jsx b/src/discussions/content-unavailable/ContentUnavailable.jsx
@@ -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>

diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/src/discussions/discussions-home/DiscussionsHome.jsx
@@ -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

diff --git a/src/discussions/learners/learner/LearnerCard.jsx b/src/discussions/learners/learner/LearnerCard.jsx
@@ -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>

diff --git a/src/discussions/post-comments/comments/CommentsView.jsx b/src/discussions/post-comments/comments/CommentsView.jsx
@@ -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"
            >

diff --git a/src/discussions/post-comments/comments/comment/Comment.jsx b/src/discussions/post-comments/comments/comment/Comment.jsx
@@ -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}

diff --git a/src/discussions/posts/post-editor/PostEditor.jsx b/src/discussions/posts/post-editor/PostEditor.jsx
@@ -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>

diff --git a/src/discussions/posts/post-filter-bar/PostFilterBar.jsx b/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
@@ -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>

diff --git a/src/discussions/posts/post/Post.jsx b/src/discussions/posts/post/Post.jsx
@@ -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)
             )}

diff --git a/src/discussions/posts/post/PostLink.jsx b/src/discussions/posts/post/PostLink.jsx
@@ -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>

diff --git a/src/index.scss b/src/index.scss
@@ -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;
+  }
+}