From ff837cd2c041a3aa485e9828a72f8f116dff5a3f Mon Sep 17 00:00:00 2001
From: Sandro Costa <sandro.costa@fccn.pt>
Date: Tue, 19 Mar 2024 11:57:17 +0000
Subject: [PATCH] fix: organization logo display

* fix: platform logo on mobile display
* fix: hide course name on mobile
---
 src/index.scss                              |  2 +-
 src/learning-header/LearningHeader.jsx      | 29 +++++++++++++--------
 src/learning-header/LearningHeader.test.jsx |  1 -
 src/learning-header/_header.scss            | 10 +++++++
 4 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 src/learning-header/_header.scss

diff --git a/src/index.scss b/src/index.scss
index 8d5d16254..bd25ec803 100644
--- 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
index 4a91f2485..ea9cdd0db 100644
--- a/src/learning-header/LearningHeader.jsx
+++ b/src/learning-header/LearningHeader.jsx
@@ -9,6 +9,8 @@ import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 import messages from './messages';
 import getCourseLogoOrg from './data/api';
 
+import './_header.scss';
+
 function LinkedLogo({
   href,
   src,
@@ -28,6 +30,9 @@ 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;
+
 function LearningHeader({
   courseOrg, courseTitle, intl, showUserDropdown,
 }) {
@@ -54,17 +59,19 @@ function 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
index 69227b77e..7c7d47b29 100644
--- 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
new file mode 100644
index 000000000..357cc6b3a
--- /dev/null
+++ 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;
+        }
+    }
+}
\ No newline at end of file