feat: review header

Add max width for org logos, there are logos too wide. Increase course name to full width, it hides if not has available space. Show language select compacted version on 1200 width.
fccn · Dec 12, 2024 · b61b18d · b61b18d
1 parent f8c1a09
commit b61b18d
Showing 1 changed file with 7 additions and 8 deletions.
diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
@@ -68,28 +68,27 @@ const LearningHeader = ({
         {headerLogo}
         <div className="d-none d-md-block flex-grow-1 course-title-lockup">
           <div className={`d-md-flex ${enableOrgLogo && 'align-items-center justify-content-center'} w-100`}>
-            {enableOrgLogo ? (
-              (courseOrg && logoOrg)
-              && <img src={logoOrg} alt={`${courseOrg} logo`} style={{ maxHeight: '45px' }} />
-            ) : null}
+            {enableOrgLogo && courseOrg && logoOrg && (
+              <img src={logoOrg} alt={`${courseOrg} logo`} style={{ maxHeight: '3rem', maxWidth: '15rem' }} />
+            )}
             <span
-              className="d-inline-block course-title font-weight-semibold ml-3 text-truncate text-left w-25"
-              style={{ fontSize: '0.85rem' }}
+              className="d-inline-block course-title font-weight-semibold ml-3 text-truncate text-left"
+              style={{ fontSize: '1rem' }}
             >
               {courseTitle}
             </span>
           </div>
         </div>
         {getConfig().ENABLE_HEADER_LANG_SELECTOR && (
           <div className="mx-2 d-md-inline-flex">
-            <Responsive maxWidth={1000}>
+            <Responsive maxWidth={1200}>
               <LanguageSelector
                 options={JSON.parse(getConfig().SITE_SUPPORTED_LANGUAGES)}
                 compact
                 authenticatedUser={authenticatedUser}
               />
             </Responsive>
-            <Responsive minWidth={1000}>
+            <Responsive minWidth={1200}>
               <LanguageSelector
                 options={JSON.parse(getConfig().SITE_SUPPORTED_LANGUAGES)}
                 compact={false}