@internetarchive/ia-topnav 1.2.2-alpha5 → 1.2.2-alpha7

package/package.json

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

package/src/primary-nav.js

@@ -1,7 +1,6 @@
 import { html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
 import TrackedElement from './tracked-element.js';
 import icons from './assets/img/icons.js';
-import './assets/img/hamburger.js';
 import './login-button.js';
 import './nav-search.js';
 import './media-menu.js';

package/src/styles/login-button.js

@@ -3,6 +3,7 @@ import { css } from 'https://offshoot.prod.archive.org/lit.js';
 export default css`
   .dropdown-toggle {
     display: block;
+    height: 4rem;
     text-transform: uppercase;
     color: var(--grey80);
     cursor: pointer;

package/src/styles/primary-nav.js

@@ -11,9 +11,10 @@ export default css`
     position: relative;
     display: -ms-grid;
     display: grid;
+    height: 4rem;
     grid-template-areas: 'hamburger empty heart search user';
     -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem 4rem;
-    grid-template-columns: 4rem auto 4rem 4rem 4rem;
+    grid-template-columns: 4rem auto 5rem 4rem 4rem;
     -ms-grid-rows: 100%;
     grid-template-rows: 100%;
     background: var(--primaryNavBg);
@@ -23,7 +24,7 @@ export default css`
   nav.hide-search {
     grid-template-areas: 'hamburger empty heart user';
     -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem;
-    grid-template-columns: 4rem auto 4rem 4rem;
+    grid-template-columns: 4rem auto 5rem 4rem;
   }
 
   .right-side-section {
@@ -32,11 +33,9 @@ export default css`
     align-items: center;
   }
   .right-side-item {
-    position: static;
     padding: 0;
-    background: transparent;
   }
-  .right-side-item svg {
+  .right-side-item svg1 {
     height: 4rem;
     width: 4rem;
   }
@@ -94,6 +93,10 @@ export default css`
     fill: var(--activeColor);
   }
 
+  .mobile-donate-link svg {
+    height: 5rem;
+    width: 5rem;
+  }
   .mobile-donate-link .fill-color {
     fill: rgb(255, 0, 0);
   }
@@ -137,13 +140,14 @@ export default css`
 
   .screen-name {
     display: none;
+    font-size: 1.3rem;
     vertical-align: middle;
     text-transform: uppercase;
   }
 
   .user-menu {
     color: var(--lightTextColor);
-    padding: 0;
+    padding: 0.5rem;
   }
 
   .user-menu:hover {
@@ -194,7 +198,7 @@ export default css`
       display: contents;
     }
     .right-side-item {
-      padding: 0.5rem 0.5rem;
+      padding: 0.5rem 0rem;
     }
     nav {
       display: block;
@@ -229,6 +233,7 @@ export default css`
     .user-info .user-menu img {
       height: 3rem;
       width: 3rem;
+      margin-right: 0;
     }
 
     .user-menu {

package/src/assets/img/hamburger.js

@@ -1,38 +0,0 @@
-import { html, css } from 'https://offshoot.prod.archive.org/lit.js';
-import Icon from './icon.js';
-import icons from './icons.js';
-
-class HamBurger extends Icon {
-  static get styles() {
-    return css`
-      svg {
-        display: block;
-        height: 4rem;
-        width: 4rem;
-      }
-      .fill-color {
-        fill: var(--activeColor);
-      }
-    `;
-  }
-
-  static get closed() {
-    return html`
-      <svg height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg" aria-labelledby="hamburgerTitleID hamburgerDescID">
-        <title id="hamburgerTitleID">Hamburger icon</title>
-        <desc id="hamburgerDescID">An icon used to represent a menu that can be toggled by interacting with this icon.</desc>
-        <path d="m30.5 26.5c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5z" fill="#999" fill-rule="evenodd"/>
-      </svg>
-    `;
-  }
-
-  static get opened() {
-    return icons.close;
-  }
-
-  render() {
-    return this.active ? HamBurger.opened : HamBurger.closed;
-  }
-}
-
-customElements.define('icon-hamburger', HamBurger);

package/src/assets/img/user.js

@@ -1,38 +0,0 @@
-import { html, css } from 'https://offshoot.prod.archive.org/lit.js';
-import Icon from './icon.js';
-
-class User extends Icon {
-  static get styles() {
-    return css`
-      svg {
-        vertical-align: middle;
-        width: var(--userIconWidth);
-        height: var(--userIconHeight);
-      }
-      path {
-        fill: var(--baseColor);
-      }
-      .active {
-        fill: var(--activeColor);
-      }
-    `;
-  }
-
-  render() {
-    return html`
-      <svg
-        width="40"
-        height="40"
-        viewBox="0 0 40 40"
-        xmlns="http://www.w3.org/2000/svg"
-        aria-labelledby="userTitleID userDescID"
-      >
-        <title id="userTitleID">User icon</title>
-        <desc id="userDescID">An illustration of a person's head and chest.</desc>
-        <path class="${this.active ? 'active' : ''}" d="m20.7130435 18.0434783c-3.5658385 0-6.4565218-2.9198821-6.4565218-6.5217392 0-3.60185703 2.8906833-6.5217391 6.4565218-6.5217391s6.4565217 2.91988207 6.4565217 6.5217391c0 3.6018571-2.8906832 6.5217392-6.4565217 6.5217392zm-12.9130435 16.9565217c0-7.9240855 5.7813665-14.3478261 12.9130435-14.3478261s12.9130435 6.4237406 12.9130435 14.3478261z" fill-rule="evenodd"/>
-      </svg>
-    `;
-  }
-}
-
-customElements.define('user-image', User);