@internetarchive/ia-topnav 1.3.1 → 1.3.3-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "1.3.1",
+  "version": "1.3.3-alpha1",
   "description": "Top nav for Internet Archive",
   "license": "AGPL-3.0-only",
   "main": "index.js",
@@ -21,7 +21,7 @@
     "test": "ulimit -v unlimited;  web-test-runner  'test/**/*.test.js' --node-resolve --coverage --puppeteer"
   },
   "dependencies": {
-    "@internetarchive/ia-wayback-search": "^0.2.4"
+    "@internetarchive/ia-wayback-search": "0.2.5"
   },
   "devDependencies": {
     "@open-wc/demoing-storybook": "^2.4.7",

package/src/assets/img/icon-donate-unpadded.js

@@ -0,0 +1,16 @@
+import { html } from 'https://offshoot.prod.archive.org/lit.js';
+
+export default html`
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg"
+    aria-labelledby="donateTitleID donateDescID"
+  >
+    <title id="donateTitleID">Donate icon</title>
+    <desc id="donateDescID">An illustration of a heart shape</desc>
+    <path class="fill-color" d="m32.6,8.12c-1.57,-1.51 -3.46,-2.21 -5.65,-2.11c-1,0.03 -2.14,0.51 -3.42,1.44c-1.28,0.92 -2.28,2.09 -3.03,3.51c-0.71,-1.41 -1.72,-2.59 -3,-3.51c-1.29,-0.93 -2.43,-1.41 -3.41,-1.44c-1.46,-0.07 -2.8,0.23 -4.02,0.88c-1.23,0.65 -2.21,1.6 -2.94,2.83c-0.74,1.24 -1.11,2.63 -1.12,4.17c-0.05,2.56 0.85,5.01 2.68,7.37c1.46,1.88 3.52,4.21 6.19,7.04c2.66,2.81 4.53,4.71 5.62,5.69c1,-0.88 2.85,-2.75 5.55,-5.6s4.81,-5.23 6.31,-7.13c1.81,-2.36 2.71,-4.81 2.66,-7.37c-0.04,-2.35 -0.83,-4.28 -2.4,-5.77z"/>
+  </svg>
+`;

package/src/assets/img/icon-ia-logo.js

@@ -3,8 +3,6 @@ import { html } from 'https://offshoot.prod.archive.org/lit.js';
 export default html`
   <svg
     class="ia-logo"
-    width="27"
-    height="30"
     viewBox="0 0 27 30"
     xmlns="http://www.w3.org/2000/svg"
     aria-labelledby="logoTitleID logoDescID"

package/src/assets/img/icon-upload.js

@@ -3,8 +3,8 @@ import { html } from 'https://offshoot.prod.archive.org/lit.js';
 export default html`
   <svg
     width="40"
-    height="41"
-    viewBox="0 0 40 41"
+    height="40"
+    viewBox="0 0 40 40"
     xmlns="http://www.w3.org/2000/svg"
     aria-labelledby="uploadTitleID uploadDescID"
   >

package/src/assets/img/icons.js

@@ -1,6 +1,7 @@
 import audio from './icon-audio.js';
 import close from './icon-close.js';
 import donate from './icon-donate.js';
+import donateUnpadded from './icon-donate-unpadded.js';
 import ellipses from './icon-ellipses.js';
 import iaLogo from './icon-ia-logo.js';
 import images from './icon-images.js';
@@ -17,6 +18,7 @@ export default {
   audio,
   close,
   donate,
+  donateUnpadded,
   ellipses,
   iaLogo,
   images,

package/src/assets/img/wordmark-stacked.js

@@ -1,7 +1,7 @@
 import { svg } from 'https://offshoot.prod.archive.org/lit.js';
 
 export default svg`
-  <svg class="ia-wordmark stacked" height="30" viewBox="0 0 95 30" width="95" xmlns="http://www.w3.org/2000/svg">
+  <svg class="ia-wordmark stacked" viewBox="0 0 95 30" xmlns="http://www.w3.org/2000/svg">
     <g fill="#fff" fill-rule="evenodd">
       <g transform="translate(0 17)">
         <path d="m3.07645967 2.60391777c.09263226-.31901841.26275495-.97477846.26275495-1.10630359 0-.74950669-.57227138-.76816274-1.19041353-.88009902v-.41183224h2.90678232l3.77209227 12.60682378h-1.60725868l-1.16012991-3.8963154h-3.94266032l-1.15968456 3.8963154h-.95794221zm-.69607795 5.4317081h3.41670507l-1.76223957-5.469953z"/><path d="m13.2661876 2.75363255c0-1.85487748-.0316196-1.85487748-1.469201-2.13611739v-.41183224h3.8032666c1.1601299 0 4.3599508 0 4.3599508 3.35342446 0 2.13518459-1.143652 2.84737918-2.3652399 3.0903742l2.8448791 6.16302512h-1.7773814l-2.7366596-5.82581707h-.9588329v5.82581707h-1.7007817zm1.7007817 3.35295806h.8817878c1.0042583 0 2.411556-.33674165 2.411556-2.43508055 0-2.0237147-.9588329-2.58572812-2.2579112-2.58572812-1.0354326 0-1.0354326.33720805-1.0354326 1.68650665z"/><path d="m30.9386422 12.2878054c-.5250645.2817063-1.3761234.7121946-2.9682403.7121946-3.3552471 0-4.5612478-2.4537366-4.5612478-6.66860403 0-3.4089262.86531-6.18214759 4.3136347-6.18214759 1.3761234 0 2.3812724.28077351 3.0920468.56201342l.0930776 3.12908549h-.4484648c-.0619033-.95612241-.9125167-2.79187744-2.5821241-2.79187744-2.2726076 0-2.6440273 2.94065941-2.6440273 5.28292612 0 2.95931547.8510588 5.61966783 2.9994146 5.61966783 1.4692009 0 2.2267368-.5620135 2.7059306-.9551897z"/><path d="m35.4546446 2.67900836c0-1.48129014-.0926322-1.64966096-1.5466914-1.83622143v-.41276504l3.2470277-.43002189v5.80669465h4.2049699v-5.60101173h1.7007816v12.60682378h-1.7007816v-6.12571303h-4.2049699v6.12571303h-1.7003363z"/><path d="m46.0300434 12.3447063c1.0973359 0 1.3137748-.2807735 1.3137748-1.7420083v-8.05568117c0-1.46123489-.2164389-1.741542-1.3137748-1.741542v-.46919958h4.3287765v.46919958c-1.0826395 0-1.3137748.28030711-1.3137748 1.741542v8.05568117c0 1.4612348.2311353 1.7420083 1.3137748 1.7420083v.4678004h-4.3287765z"/><path d="m55.1990352 2.60391777c-.494781-1.7051627-.6341747-1.7051627-1.8709043-1.98640261v-.41183224h2.9994145l3.0301436 10.26548988h.0307289l2.9535438-10.26548988h1.0042584l-3.771647 12.60682378h-1.344949z"/><path d="m67.7842867 2.75363255c0-1.85487748-.0463161-1.85487748-1.4687557-2.13611739v-.41183224h7.4061269l.0463161 2.77228859h-.433323c0-1.49854698-.6488711-1.89218957-1.6696073-1.89218957h-1.2060007c-.7726777 0-.9735293.07462419-.9735293.97431206v3.7279446h1.8709043c1.0657162 0 1.174381-.82366447 1.2674586-1.44164603h.4324323v3.93316112h-.4324323c0-1.01162415-.3402454-1.61141607-1.2674586-1.61141607h-1.8709043v4.17755538c0 1.0489362.2008516 1.0867147.9735293 1.0867147h1.7168141c.8804518 0 1.2977423-.3749865 1.3908199-1.835755h.433323l-.0472068 2.715854h-6.1685065z"/>

package/src/primary-nav.js

@@ -145,14 +145,25 @@ class PrimaryNav extends TrackedElement {
   get mobileDonateHeart() {
     return html`
       <a class="mobile-donate-link" href=${formatUrl('/donate/?origin=iawww-mbhrt', this.baseHost)}>
-        <span class="icon">
-        ${icons.donate}
-      </span>
-      <span class="label">"Donate to the archive"</span>
+        ${icons.donateUnpadded}
+        <span class="sr-only">"Donate to the archive"</span>
       </a>
     `;
   }
 
+  get uploadButtonTemplate() {
+    return html`<a href="${formatUrl('/create', this.baseHost)}" class="upload">
+      ${icons.upload}
+      <span>Upload</span>
+    </a>`;
+  }
+
+  get userStateTemplate() {
+    return html`<div class="user-info">
+      ${this.username ? this.userIcon : this.loginIcon}
+    </div>`;
+  }
+
   get secondLogoSlot() {
     return this.allowSecondaryIcon
       ? html`
@@ -181,14 +192,12 @@ class PrimaryNav extends TrackedElement {
           >
           ${this.secondLogoSlot}
         </div>
-        ${this.mobileDonateHeart}
-        ${this.searchMenu}
-        <a href="${formatUrl('/create', this.baseHost)}" class="upload">
-          ${icons.upload}
-          <span>Upload</span>
-        </a>
-        <div class="user-info">
-          ${this.username ? this.userIcon : this.loginIcon}
+
+        <div class="right-side-section">
+          ${this.mobileDonateHeart}
+          ${this.searchMenu}
+          ${this.uploadButtonTemplate}
+          ${this.userStateTemplate}
         </div>
         <media-menu
           .baseHost=${this.baseHost}

package/src/styles/desktop-subnav.js

@@ -31,7 +31,7 @@ export default css`
   .donate svg {
     width: 1.6rem;
     height: 1.6rem;
-    vertical-align: -4px;
+    vertical-align: top;
     fill: #f00;
   }
 `;

package/src/styles/dropdown-menu.js

@@ -82,10 +82,12 @@ export default css`
     display: flex;
     justify-content: left;
     align-items: center;
-  }  
+  }
   a.mobile-upload svg {
     fill: var(--white);
-    margin-right: 10px;
+    margin-right: 1rem;
+    height: 1.4rem;
+    width: 1.4rem;
   }
 
   @media (min-width: 890px) {

package/src/styles/login-button.js

@@ -3,14 +3,16 @@ import { css } from 'https://offshoot.prod.archive.org/lit.js';
 export default css`
   .dropdown-toggle {
     display: block;
-    height: 4rem;
-    font-size: 1.6rem;
     text-transform: uppercase;
-    text-decoration: none;
     color: var(--grey80);
     cursor: pointer;
   }
 
+  .dropdown-toggle svg {
+    height: 100%;
+    width: 4rem;
+  }
+
   .dropdown-toggle .fill-color {
     fill: var(--iconFill);
   }
@@ -20,10 +22,6 @@ export default css`
   .dropdown-toggle:hover .fill-color {
     fill: var(--linkHoverColor);
   }
-  .dropdown-toggle svg {
-    height: 4rem;
-    width: 4rem;
-  }
 
   .active {
     border-radius: 1rem 1rem 0 0;
@@ -54,7 +52,8 @@ export default css`
 
   @media (min-width: 890px) {
     .logged-out-toolbar {
-      transform: translateY(-.5rem);
+      padding: 1rem 0.5rem;
+      vertical-align: middle;
     }
 
     .active {
@@ -65,6 +64,13 @@ export default css`
       display: inline-block;
       vertical-align: middle;
     }
+
+    .dropdown-toggle svg {
+      height: 3rem;
+      width: 3rem;
+      display: block;
+    }
+
     span {
       display: inline;
       vertical-align: middle;

package/src/styles/media-button.js

@@ -7,7 +7,7 @@ export default css`
   }
 
   .menu-item {
-    display: inline-flex;
+    display: inline-block;
     width: 100%;
     padding: 0;
     font-size: 1.6rem;
@@ -41,9 +41,10 @@ export default css`
     -ms-flex-pack: center;
     justify-content: center;
   }
+
   .menu-item > .icon > svg {
-    height: 4rem;  
-    width: 4rem;  
+    height: 4rem;
+    width: 4rem;
   }
 
   .menu-item.selected .icon {
@@ -68,6 +69,7 @@ export default css`
       width: auto;
       height: 5rem;
       color: var(--mediaLabelDesktopColor);
+      display: inline-flex;
     }
     .menu-item:hover,
     .menu-item:active,
@@ -93,7 +95,6 @@ export default css`
       color: inherit;
     }
 
-
     .web:after {
       display: none;
       content: "web";
@@ -142,7 +143,7 @@ export default css`
     }
   }
 
-  @media (min-width: 1300px) {
+  @media (min-width: 1200px) {
     .label,
     .web:after {
       display: inline;

package/src/styles/media-slider.js

@@ -22,7 +22,7 @@ export default css`
     right: 0;
     left: 0;
     padding: 0;
-    height: 368px;
+    height: 31.9rem;
     overflow-x: hidden;
     font-size: 1.4rem;
     background: var(--mediaSliderBg);
@@ -43,7 +43,7 @@ export default css`
   @media (max-width: 889px) {
     .overflow-clip.open {
       display: block;
-      height: 367px;
+      height: 35.8rem;
       left: 4rem;
       top: 0;
     }
@@ -73,7 +73,7 @@ export default css`
     }
 
     .info-box {
-      max-width: 1000px;
+      max-width: 100rem;
       padding: 1.5rem 0;
       margin: 0 auto;
     }

package/src/styles/media-subnav.js

@@ -27,7 +27,7 @@ export default [subnavListCSS, css`
 
   .icon-links a {
     display: inline-block;
-    width: 120px;
+    width: 12rem;
     margin-bottom: 1.5rem;
     overflow: hidden;
     white-space: nowrap;
@@ -67,7 +67,7 @@ export default [subnavListCSS, css`
 
     .icon-links a {
       padding-top: 3.5rem;
-      max-width: 160px;
+      max-width: 16rem;
     }
 
     .links {

package/src/styles/nav-search.js

@@ -95,8 +95,8 @@ export default css`
   @media (min-width: 890px) {
     .search svg {
       display: inline;
-      width: 28px;
-      height: 28px;
+      width: 2.8rem;
+      height: 2.8rem;
       vertical-align: -14px;
     }
     .search path {
@@ -107,7 +107,7 @@ export default css`
     .search-activated {
       display: block;
       position: static;
-      padding: 1.2rem 0.2rem;
+      padding: 1.1rem 0.2rem;
       background: transparent;
     }
 

package/src/styles/primary-nav.js

@@ -11,10 +11,10 @@ export default css`
     position: relative;
     display: -ms-grid;
     display: grid;
-    height: 40px;
+    height: 4rem;
     grid-template-areas: 'hamburger empty heart search user';
-    -ms-grid-columns: 40px minmax(1rem, 100%) 40px 40px 40px;
-    grid-template-columns: 40px auto 40px 40px 40px;
+    -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem 4rem;
+    grid-template-columns: 4rem auto 4rem 4rem 4rem;
     -ms-grid-rows: 100%;
     grid-template-rows: 100%;
     background: var(--primaryNavBg);
@@ -23,10 +23,14 @@ export default css`
 
   nav.hide-search {
     grid-template-areas: 'hamburger empty heart user';
-    -ms-grid-columns: 40px minmax(1rem, 100%) 40px 40px;
-    grid-template-columns: 40px auto 40px 40px;
+    -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem;
+    grid-template-columns: 4rem auto 4rem 4rem;
   }
 
+  .right-side-section {
+    display: flex;
+    user-select: none;
+  }
   button {
     background: none;
     color: inherit;
@@ -56,17 +60,19 @@ export default css`
     grid-column-end: user-end;
   }
 
-  .ia-logo,
-  .ia-wordmark {
-    margin-right: 5px;
-    height: 3rem;
-  }
   .ia-logo {
+    height: 3rem;
     width: 2.7rem;
+    display: inline-block;
   }
   .ia-wordmark {
+    height: 3rem;
     width: 9.5rem;
   }
+  .ia-logo,
+  .ia-wordmark {
+    margin-right: 5px;
+  }
 
   .hamburger {
     -ms-grid-row: 1;
@@ -74,54 +80,42 @@ export default css`
     grid-area: hamburger;
     padding: 0;
   }
-
-  .mobile-donate-link {
-    -ms-grid-row: 1;
-    -ms-grid-column: 3;
-    grid-area: heart;
-    position: relative;
-    padding: 0;
-    z-index: 1;
-    width: 100%;
-    text-align: right;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
+  .hamburger svg {
+    height: 4rem;
+    width: 4rem;
+    fill: var(--activeColor);
   }
+
   .mobile-donate-link svg {
-    height: 50px;
-    width: 50px;
-    margin-top: -5px;
-    margin-left: -5px;
+    height: 4rem;
+    width: 4rem;
   }
   .mobile-donate-link .fill-color {
     fill: rgb(255, 0, 0);
   }
-  .mobile-donate-link .label {
+
+  .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
-    padding: 0;
     margin: -1px;
-    overflow: hidden;
-    clip: rect(0,0,0,0);
+    padding: 0;
     border: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    clip: rect(1px, 1px, 1px, 1px);
+    -webkit-clip-path: inset(50%);
+    clip-path: inset(50%);
+    user-select: none;
   }
 
   .search-trigger {
-    -ms-grid-row: 1;
-    -ms-grid-column: 4;
-    grid-area: search;
-    position: relative;
     padding: 0;
-    z-index: 1;
-    width: 100%;
-    text-align: right;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
   }
-
+  .search-trigger svg {
+    height: 4rem;
+    width: 4rem;
+  }
   .search-trigger .fill-color {
     fill: var(--iconFill);
   }
@@ -139,26 +133,21 @@ export default css`
     display: none;
   }
 
-  .user-info {
-    -ms-grid-row: 1;
-    -ms-grid-column: 5;
-    grid-area: user;
-    -ms-grid-row-align: stretch;
-    align-self: stretch;
-    -ms-grid-column-align: end;
-    justify-self: end;
+  .upload svg {
+    height: 3rem;
+    width: 3rem; 
   }
 
   .screen-name {
     display: none;
-    font-size: 1.4rem;
-    padding-left: 0.5rem;
+    font-size: 1.3rem;
     vertical-align: middle;
     text-transform: uppercase;
   }
 
   .user-menu {
     color: var(--lightTextColor);
+    padding: 0.5rem;
     height: 100%;
   }
 
@@ -178,8 +167,8 @@ export default css`
   }
 
   .link-home {
-    display: flex;
     text-decoration: none;
+    display: inline-flex;
   }
 
   @media only screen and (min-width: 890px) and (max-device-width: 905px) {
@@ -202,13 +191,17 @@ export default css`
 
   @media (min-width: 890px) {
     :host {
-      --userIconWidth: 32px;
-      --userIconHeight: 32px;
+      --userIconWidth: 3.2rem;
+      --userIconHeight: 3.2rem;
+    }
+
+    .right-side-section {
+      display: contents;
     }
 
     nav {
       display: block;
-      z-index: 3;
+      z-index: 4;
       height: 5rem;
       padding-right: 1.5rem;
     }
@@ -233,10 +226,21 @@ export default css`
     }
 
     .user-info {
+      display: block;
       float: right;
-      margin-top: 1rem;
+      vertical-align: middle;
+      height: 100%;
+    }
+
+    .user-info .user-menu img {
+      height: 3rem;
+      width: 3rem;
+      margin-right: 0.5rem;
     }
 
+    .user-menu {
+      padding: 1rem 0.5rem;
+    }
     .user-menu.active {
       background: transparent;
     }
@@ -244,12 +248,13 @@ export default css`
     .user-menu img {
       display: inline-block;
       vertical-align: middle;
+      margin-right: 0.5rem;
     }
 
     .upload {
       display: block;
+      padding: 1rem 0.5rem;
       float: right;
-      margin-top: 1rem;
       font-size: 1.4rem;
       text-transform: uppercase;
       text-decoration: none;
@@ -262,8 +267,6 @@ export default css`
     }
 
     .upload svg {
-      width: 3.2rem;
-      height: 3.2rem;
       vertical-align: middle;
       fill: var(--iconFill);
     }
@@ -279,10 +282,6 @@ export default css`
       margin-left: 1rem;
     }
 
-    login-button {
-      display: block;
-      margin-right: 1rem;
-    }
   }
 
   @media (min-width: 990px) {

package/src/styles/save-page-form.js

@@ -12,11 +12,12 @@ export default css`
 
   input[type="text"] {
     width: 100%;
-    height: 30px;
+    height: 3rem;
     box-sizing: border-box;
     border: 1px solid var(--savePageInputBorder);
     border-radius: .5rem;
     color: var(--grey13);
+    font-size: inherit;
   }
 
   input[type="submit"] {

package/src/styles/signed-out-dropdown.js

@@ -5,7 +5,7 @@ export default css`
     .initial,
     .closed,
     .open {
-      right: 34rem;
+      right: 33.5rem;
     }
 
     .search-hidden.initial,
@@ -25,7 +25,7 @@ export default css`
     .search-hidden.initial,
     .search-hidden.closed,
     .search-hidden.open {
-      right: 24.5rem;
+      right: 26rem;
     }
   }
 `;

package/src/styles/user-menu.js

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

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