Merge pull request #1592 from openmsupply/header-tweaks

#1586 Header tweaks
msupply-foundation · Nov 5, 2023 · 34620b7 · 34620b7
2 parents 20bf5b7 + 5e04d5b
commit 34620b7
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 18 deletions.
diff --git a/semantic/src/site/globals/site.overrides b/semantic/src/site/globals/site.overrides
@@ -307,10 +307,6 @@ a:hover {
   min-width: @minimumContainerWidth;
 }
 
-#user-area.ui.container {
-  padding-right: 60px;
-}
-
 #brand-area {
   min-width: 100px;
   max-width: 200px;
@@ -325,12 +321,16 @@ a:hover {
     padding-top: 8px;
     padding-bottom: 8px;
   }
+  @media only screen and (max-width: 860px) {
+    display: none;
+  }
 }
 
 #user-area-left {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  justify-content: flex-end;
 }
 
 // Menu bar links
@@ -347,11 +347,33 @@ a:hover {
 }
 
 #user-menu {
-  width: clamp(150px, 20%, 300px);
   text-align: right;
+  display: flex;
+  align-items: center;
+  .button {
+    margin-top: 10px;
+    border-radius: 20px;
+    background-color: @surfacesWhite;
+    color: @darkGrey;
+    min-width: 120px;
+    max-width: 300px;
+  }
+  .ui .dropdown {
+    display: flex;
+  }
+  .ui.dropdown > .text {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+  }
+  .ui.dropdown .menu {
+    right: 0;
+    left: unset;
+  }
 }
 
-// Not currently used, but should be appplied to the Link in the menu
+// Not currently used, but should be applied to the Link in the menu
 // bar that reflects the current page
 .selected-link {
   font-weight: bold;
@@ -380,14 +402,6 @@ a:hover {
   max-width: 300px;
 }
 
-#user-menu .button {
-  margin-top: 10px;
-  border-radius: 20px;
-  background-color: @surfacesWhite;
-  color: @darkGrey;
-  min-width: 120px;
-}
-
 #language-modal {
   display: flex;
   flex-direction: column;
@@ -2598,10 +2612,12 @@ h6:first-child {
   }
   #menu-bar {
     font-size: inherit;
+    position: absolute;
+    top: 5px;
     .list {
       display: flex;
       align-items: start;
-      gap: 10px;
+      gap: 20px;
     }
     .ui .dropdown {
       display: flex;
@@ -2628,6 +2644,25 @@ h6:first-child {
 
   #user-area {
     height: @mobileHeaderHeight;
+    padding-left: 10px;
+  }
+
+  #user-area-left {
+    max-width: 100%;
+    padding-right: 25px;
+    #org-selector {
+      font-size: 100%;
+      letter-spacing: unset;
+      line-height: 1.3em;
+      #org-label {
+        max-width: 700px;
+      }
+    }
+    #org-selector .image {
+      margin-right: 10px;
+      max-width: 100px;
+      height: auto;
+    }
   }
 
   #menu-bar {

diff --git a/semantic/src/site/globals/site.variables b/semantic/src/site/globals/site.variables
@@ -165,7 +165,7 @@
 -------------------------*/
 
 @headerHeight: 100px;
-@mobileHeaderHeight: 80px;
+@mobileHeaderHeight: 60px;
 @footerHeight: 75px;
 @borderRadius: 8px;
 

diff --git a/src/containers/User/UserArea.tsx b/src/containers/User/UserArea.tsx
@@ -417,7 +417,7 @@ const OrgSelector: React.FC<{ user: User; orgs: OrganisationSimple[]; onLogin: F
       {user?.organisation?.logoUrl && (
         <Image src={getFullUrl(user?.organisation?.logoUrl, getServerUrl('public'))} />
       )}
-      <div>
+      <div id="org-label">
         {dropdownOptions.length === 1 ? (
           user?.organisation?.orgName || t('LABEL_NO_ORG')
         ) : (
@@ -490,7 +490,20 @@ const UserMenu: React.FC<{ user: User; templates: TemplateInList[] }> = ({ user,
           <Button>
             <Button.Content visible>
               <Dropdown
-                text={`${selectedLanguage?.flag} ${user?.firstName || ''} ${user?.lastName || ''}`}
+                text={
+                  (
+                    <div
+                      style={{ overflow: 'hidden', textOverflow: 'ellipsis', lineHeight: '1.2em' }}
+                    >
+                      <span style={{ fontSize: '150%', marginRight: 5 }}>
+                        {selectedLanguage?.flag}
+                      </span>
+                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{`${
+                        user?.firstName || ''
+                      } ${user?.lastName || ''}`}</span>
+                    </div>
+                  ) as any
+                }
               >
                 {CommonMenu}
               </Dropdown>