2.0 UX Changes (#295)

Partially addresses #237
- Unhides the load button on smaller screen sizes
  - There's no way to actually load new web archives when this is hidden
- Minor text updates
  - Renames MIME Type to Media Type
  - Punctuation fixes
- Reorder main application controls (#237)
  - Group navigation related controls together on the left side
  - Move full screen to the right side
  - Enable navigation controls on mobile
- Renames URLs tab to Resources - now that we have more space (because we moved the archived item info
to a dialog), we can make these titles visible when space is available to do so!
  - This is now in-line with the docs (both current and new!)

src/chooser.ts

@@ -295,10 +295,7 @@ export class Chooser extends LitElement {
                 />
               </p>
               <div class="control">
-                <button
+                <button type="submit" class="button is-primary">
-                  type="submit"
-                  class="button is-hidden-mobile is-primary"
-                >
                   ${this.newFullImport ? "Import" : "Load"}
                 </button>
               </div>

src/item.ts

@@ -1054,11 +1054,7 @@ class Item extends LitElement {
                 title="Pages"
               ></fa-icon
             ></span>
-            <span
+            <span class="tab-label" title="Pages">Pages</span>
-              class="tab-label ${isSidebar ? "is-hidden" : ""}"
-              title="Pages"
-              >Pages</span
-            >
           </a>
         </li>
 
@@ -1076,12 +1072,10 @@ class Item extends LitElement {
               ><fa-icon
                 .svg="${farResources}"
                 aria-hidden="true"
-                title="URLs"
+                title="Resources"
               ></fa-icon
             ></span>
-            <span class="tab-label ${isSidebar ? "is-hidden" : ""}" title="URLs"
+            <span class="tab-label" title="Resources">Resources</span>
-              >URLs</span
-            >
           </a>
         </li>
 
@@ -1127,86 +1121,6 @@ class Item extends LitElement {
       >
       <nav class="replay-bar" aria-label="replay">
         <div class="field has-addons">
-          <a
-            href="#"
-            role="button"
-            class="button narrow is-borderless is-hidden-touch"
-            id="fullscreen"
-            @click="${this.onFullscreenToggle}"
-            @keyup="${clickOnSpacebarPress}"
-            title="${this.isFullscreen ? "Exit Full Screen" : "Full Screen"}"
-            aria-label="${this.isFullscreen ? "Exit Fullscreen" : "Fullscreen"}"
-          >
-            <span class="icon is-small">
-              <fa-icon
-                size="1.0em"
-                class="has-text-grey"
-                aria-hidden="true"
-                .svg="${this.isFullscreen ? fasUnfullscreen : fasFullscreen}"
-              ></fa-icon>
-            </span>
-          </a>
-          <a
-            href="#"
-            role="button"
-            class="button narrow is-borderless is-hidden-mobile"
-            @click="${this.onGoBack}"
-            @keyup="${clickOnSpacebarPress}"
-            title="Back"
-            aria-label="Back"
-          >
-            <span class="icon is-small">
-              <fa-icon
-                size="1.0em"
-                class="has-text-grey"
-                aria-hidden="true"
-                .svg="${fasLeft}"
-              ></fa-icon>
-            </span>
-          </a>
-          <a
-            href="#"
-            role="button"
-            class="button narrow is-borderless is-hidden-mobile"
-            @click="${this.onGoForward}"
-            @keyup="${clickOnSpacebarPress}"
-            title="Forward"
-            aria-label="Forward"
-          >
-            <span class="icon is-small">
-              <fa-icon
-                size="1.0em"
-                class="has-text-grey"
-                aria-hidden="true"
-                .svg="${fasRight}"
-              ></fa-icon>
-            </span>
-          </a>
-          <a
-            href="#"
-            role="button"
-            class="button narrow is-borderless ${this.isLoading
-              ? "is-loading"
-              : "is-hidden-mobile"}"
-            id="refresh"
-            @click="${this.onRefresh}"
-            @keyup="${clickOnSpacebarPress}"
-            title="Reload"
-            aria-label="Reload"
-          >
-            <span class="icon is-small">
-              ${!this.isLoading
-                ? html`
-                    <fa-icon
-                      size="1.0em"
-                      class="has-text-grey"
-                      aria-hidden="true"
-                      .svg="${fasRefresh}"
-                    ></fa-icon>
-                  `
-                : ""}
-            </span>
-          </a>
           ${this.browsable
             ? html` <a
                 href="#"
@@ -1231,6 +1145,67 @@ class Item extends LitElement {
                 </span>
               </a>`
             : ""}
+          <a
+            href="#"
+            role="button"
+            class="button narrow is-borderless"
+            @click="${this.onGoBack}"
+            @keyup="${clickOnSpacebarPress}"
+            title="Back"
+            aria-label="Back"
+          >
+            <span class="icon is-small">
+              <fa-icon
+                size="1.0em"
+                class="has-text-grey"
+                aria-hidden="true"
+                .svg="${fasLeft}"
+              ></fa-icon>
+            </span>
+          </a>
+          <a
+            href="#"
+            role="button"
+            class="button narrow is-borderless"
+            @click="${this.onGoForward}"
+            @keyup="${clickOnSpacebarPress}"
+            title="Forward"
+            aria-label="Forward"
+          >
+            <span class="icon is-small">
+              <fa-icon
+                size="1.0em"
+                class="has-text-grey"
+                aria-hidden="true"
+                .svg="${fasRight}"
+              ></fa-icon>
+            </span>
+          </a>
+          <a
+            href="#"
+            role="button"
+            class="button narrow is-borderless ${this.isLoading
+              ? "is-loading"
+              : ""}"
+            id="refresh"
+            @click="${this.onRefresh}"
+            @keyup="${clickOnSpacebarPress}"
+            title="Reload"
+            aria-label="Reload"
+          >
+            <span class="icon is-small">
+              ${!this.isLoading
+                ? html`
+                    <fa-icon
+                      size="1.0em"
+                      class="has-text-grey"
+                      aria-hidden="true"
+                      .svg="${fasRefresh}"
+                    ></fa-icon>
+                  `
+                : ""}
+            </span>
+          </a>
           ${this.renderExtraToolbar()}
           <form @submit="${this.onSubmit}">
             <div
@@ -1258,6 +1233,27 @@ class Item extends LitElement {
             class="dropdown is-right ${this.menuActive ? "is-active" : ""}"
             @click="${() => (this.menuActive = false)}"
           >
+            <a
+              href="#"
+              role="button"
+              class="button narrow is-borderless is-hidden-touch"
+              id="fullscreen"
+              @click="${this.onFullscreenToggle}"
+              @keyup="${clickOnSpacebarPress}"
+              title="${this.isFullscreen ? "Exit Full Screen" : "Full Screen"}"
+              aria-label="${this.isFullscreen
+                ? "Exit Fullscreen"
+                : "Fullscreen"}"
+            >
+              <span class="icon is-small">
+                <fa-icon
+                  size="1.0em"
+                  class="has-text-grey"
+                  aria-hidden="true"
+                  .svg="${this.isFullscreen ? fasUnfullscreen : fasFullscreen}"
+                ></fa-icon>
+              </span>
+            </a>
             <div class="dropdown-trigger">
               <button
                 class="button is-borderless"
@@ -1298,57 +1294,6 @@ class Item extends LitElement {
                   </span>
                   <span>Full Screen</span>
                 </a>
-                <a
-                  href="#"
-                  role="button"
-                  class="dropdown-item is-hidden-tablet"
-                  @click="${this.onGoBack}"
-                  @keyup="${clickOnSpacebarPress}"
-                >
-                  <span class="icon is-small">
-                    <fa-icon
-                      size="1.0em"
-                      class="has-text-grey"
-                      aria-hidden="true"
-                      .svg="${fasLeft}"
-                    ></fa-icon>
-                  </span>
-                  <span>Back</span>
-                </a>
-                <a
-                  href="#"
-                  role="button"
-                  class="dropdown-item is-hidden-tablet"
-                  @click="${this.onGoForward}"
-                  @keyup="${clickOnSpacebarPress}"
-                >
-                  <span class="icon is-small">
-                    <fa-icon
-                      size="1.0em"
-                      class="has-text-grey"
-                      aria-hidden="true"
-                      .svg="${fasRight}"
-                    ></fa-icon>
-                  </span>
-                  <span>Forward</span>
-                </a>
-                <a
-                  href="#"
-                  role="button"
-                  class="dropdown-item is-hidden-tablet"
-                  @click="${this.onRefresh}"
-                  @keyup="${clickOnSpacebarPress}"
-                >
-                  <span class="icon is-small">
-                    <fa-icon
-                      size="1.0em"
-                      class="has-text-grey"
-                      aria-hidden="true"
-                      .svg="${fasRefresh}"
-                    ></fa-icon>
-                  </span>
-                  <span>Reload</span>
-                </a>
                 ${this.browsable
                   ? html` <a
                       href="#"
@@ -1413,7 +1358,7 @@ class Item extends LitElement {
                   : html``}
                 ${dateStr
                   ? html` <hr class="dropdown-divider is-hidden-desktop" />
-                      <div class="dropdown-item info is-hidden-desktop">
+                      <div class="dropdown-item info is-hidden-tablet">
                         <span class="menu-head">Capture Date</span>${dateStr}
                       </div>`
                   : ""}

src/pages.ts

@@ -612,7 +612,7 @@ class Pages extends LitElement {
               @input="${this.onChangeQuery}"
               .value="${this.query}"
               type="text"
-              placeholder="Search by Page URL, Title or Text"
+              placeholder="Search by Page URL, Title, or Text"
             />
             <span class="icon is-left"
               ><fa-icon .svg="${fasSearch}" aria-hidden="true"></fa-icon

src/url-resources.ts

@@ -63,7 +63,7 @@ class URLResources extends LitElement {
       },
       {
         key: "mime",
-        name: "Mime Type",
+        name: "Media Type",
       },
       {
         key: "status",
@@ -504,7 +504,7 @@ class URLResources extends LitElement {
                     ? "desc"
                     : "asc"
                   : ""}"
-                >Mime Type</a
+                >Media Type</a
               >
             </th>
             <th scope="col" class="column col-status is-1 is-hidden-mobile">
@@ -552,7 +552,7 @@ class URLResources extends LitElement {
                       ${new Date(result.date).toLocaleString()}
                     </td>
                     <td class="column col-mime is-3">
-                      <p class="minihead is-hidden-tablet">Mime Type</p>
+                      <p class="minihead is-hidden-tablet">Media Type</p>
                       ${result.mime}
                     </td>
                     <td class="column col-status is-1">