@internetarchive/ia-topnav 1.1.30-userlist1 → 1.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "1.1.30-userlist1",
+  "version": "1.1.30",
   "description": "Top nav for Internet Archive",
   "license": "AGPL-3.0-only",
   "main": "index.js",

package/src/data/menus.js

@@ -540,11 +540,6 @@ export function buildTopNavMenus(userid = '___USERID___', localLinks = true, way
         title: 'My favorites',
         analyticsEvent: 'UserFavorites',
       },
-      {
-        url: `${prefix}/details/@me?tab=lists`,
-        title: 'My lists',
-        analyticsEvent: 'UserLists',
-      },
       {
         url: `${prefix}/details/@${userid}/web-archive`,
         title: 'My web archives',

package/src/ia-topnav.js

@@ -89,7 +89,7 @@ export default class IATopNav extends LitElement {
   menuSetup() {
     this.localLinks = this.getAttribute('localLinks') !== 'false' && this.getAttribute('localLinks') !== false;
     this.username = this.getAttribute('username')
-    this.screenName = this.username; // set screenName when username changes to display
+    this.screenName = this.getAttribute('screenname');
     this.waybackPagesArchived = this.getAttribute('waybackPagesArchived') ?? ''
 
     // ensure we update other components that use `baseHost`

package/src/primary-nav.js

@@ -79,13 +79,6 @@ class PrimaryNav extends TrackedElement {
     );
   }
 
-  get truncatedScreenName() {
-    if (this.screenName && this.screenName.length > 10) {
-      return `${this.screenName.substr(0, 9)}…`;
-    }
-    return this.screenName;
-  }
-
   get userIcon() {
     const userMenuClass = this.openMenu === 'user' ? 'active' : '';
     const userMenuToolTip = this.openMenu === 'user' ? 'Close user menu' : 'Expand user menu';
@@ -99,9 +92,9 @@ class PrimaryNav extends TrackedElement {
       >
         <img
           src="${this.mediaBaseHost}${this.userProfileImagePath}"
-          alt="${this.username}"
+          alt="${this.screenName}"
         />
-        <span class="username">${this.truncatedScreenName}</span>
+        <span class="screen-name" dir="auto">${this.screenName}</span>
       </button>
     `;
   }

package/src/styles/primary-nav.js

@@ -103,7 +103,7 @@ export default css`
     justify-self: end;
   }
 
-  .username {
+  .screen-name {
     display: none;
     font-size: 1.3rem;
     vertical-align: middle;
@@ -243,8 +243,12 @@ export default css`
   }
 
   @media (min-width: 990px) {
-    .username {
+    .screen-name {
       display: inline-block;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 165px;
     }
 
     .upload span {