@internetarchive/ia-topnav 1.2.2-alpha4 → 1.2.2-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "1.2.2-alpha4",
+  "version": "1.2.2-alpha6",
   "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/ia-topnav.js

@@ -52,10 +52,6 @@ export default css`
     --savePageSubmitText: var(--white);
     --savePageInputBorder: var(--grey60);
     --savePageErrorText: var(--errorYellow);
-
-    color: var(--primaryTextColor);
-    font-size: 2rem;
-    font-family: var(--themeFontFamily);
   }
 
   primary-nav:focus {

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);
   }
@@ -144,7 +147,7 @@ export default css`
 
   .user-menu {
     color: var(--lightTextColor);
-    padding: 0;
+    padding: 0.5rem;
   }
 
   .user-menu:hover {
@@ -158,8 +161,8 @@ export default css`
 
   .user-menu img {
     display: block;
-    width: 4rem;
-    height: 4rem;
+    width: 3rem;
+    height: 3rem;
   }
 
   .link-home {
@@ -201,6 +204,7 @@ export default css`
       display: block;
       z-index: 3;
       height: 5rem;
+      padding-right: 0.5rem;
     }
 
     slot[name='opt-sec-logo-mobile'] {
@@ -226,8 +230,14 @@ export default css`
       float: right;
     }
 
+    .user-info .user-menu img {
+      height: 3rem;
+      width: 3rem;
+      margin-right: 0;
+    }
+
     .user-menu {
-      padding-top: 0;
+      padding: 0.5rem;
     }
 
     .user-menu.active {
@@ -237,6 +247,7 @@ export default css`
     .user-menu img {
       display: inline-block;
       vertical-align: middle;
+      margin-right: 0.5rem;
     }
 
     .upload {

package/src/styles/user-menu.js

@@ -5,7 +5,7 @@ export default css`
     .initial,
     .closed,
     .open {
-      right: 20.5rem;
+      right: 21.5rem;
     }
 
     .search-hidden.initial,
@@ -19,7 +19,7 @@ export default css`
     .initial,
     .closed,
     .open {
-      right: 25.5rem;
+      right: 26.5rem;
     }
 
     .search-hidden.initial,

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);