fix: organization logo display

* fix: platform logo on mobile display * fix: hide course name on mobile
fccn · Jun 25, 2024 · 4bac1a3 · 4bac1a3
1 parent f752522
commit 4bac1a3
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 13 deletions.
diff --git a/src/index.scss b/src/index.scss
@@ -42,7 +42,7 @@ $white: #fff;
   .user-dropdown {
     .btn {
       height: 3rem;
-      @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+      @media (map-get($grid-breakpoints, "sm")) {
         padding: 0 0.5rem;
       }
     }

diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
@@ -26,6 +26,10 @@ LinkedLogo.propTypes = {
   alt: PropTypes.string.isRequired,
 };
 
+// this feature flag is not included on the frontend-platform, we have to get it directly from ENV
+const enabledOrgLogo = process.env.ENABLED_ORG_LOGO || false;
+
+
 const LearningHeader = ({
   courseOrg, courseTitle, intl, showUserDropdown,
 }) => {
@@ -52,17 +56,19 @@ const LearningHeader = ({
       <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
       <div className="container-xl py-2 d-flex align-items-center">
         {headerLogo}
-        <div className="flex-grow-1 course-title-lockup text-center" style={{ lineHeight: 1 }}>
-          {
-            (courseOrg && logoOrg)
-            && <img src={logoOrg} alt={`${courseOrg} logo`} style={{ maxHeight: '50px' }} />
-          }
-          <span
-            className="d-inline-block course-title font-weight-bold ml-3 overflow-hidden text-nowrap text-left w-25"
-            style={{ textOverflow: 'ellipsis' }}
-          >
-            {courseTitle}
-          </span>
+        <div className="d-none d-md-block flex-grow-1 course-title-lockup">
+          <div className={`d-md-flex ${enabledOrgLogo && 'align-items-center justify-content-center'} w-100`}>
+            {enabledOrgLogo ? (
+              (courseOrg && logoOrg)
+              && <img src={logoOrg} alt={`${courseOrg} logo`} style={{ maxHeight: '45px' }} />
+            ) : null}
+            <span
+              className="d-inline-block course-title font-weight-semibold ml-3 text-truncate text-left w-25"
+              style={{ fontSize: '0.85rem' }}
+            >
+              {courseTitle}
+            </span>
+          </div>
         </div>
         {showUserDropdown && authenticatedUser && (
           <AuthenticatedUserDropdown

diff --git a/src/learning-header/LearningHeader.test.jsx b/src/learning-header/LearningHeader.test.jsx
@@ -27,7 +27,6 @@ describe('Header', () => {
     render(<Header {...courseData} />);
     waitFor(
       () => {
-
         expect(screen.getByAltText(`${courseData.courseOrg} logo`)).toHaveAttribute('src', 'logo-url');
         expect(screen.getByText(`${courseData.courseOrg}`)).toBeInTheDocument();
         expect(screen.getByText(courseData.courseTitle)).toBeInTheDocument();

diff --git a/src/learning-header/_header.scss b/src/learning-header/_header.scss
@@ -0,0 +1,10 @@
+@import "../../node_modules/bootstrap/scss/bootstrap-grid";
+@import "../../node_modules/bootstrap/scss/mixins/breakpoints";
+
+.logo {
+    img {
+        @include media-breakpoint-down(sm) {
+            max-width: 85% !important;
+        }
+    }
+}